add filter

frontend/public/stylesheets/filter.css

+.filter {
+  width: 25%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.filter > * {
+  cursor: pointer;
+}
+
+.filter-all.selected {
+  color: orange;
+}
+
+.filter-rec.selected {
+  color: blue;
+}
+.filter-ful.selected {
+  color: green;
+}
+.filter-can.selected {
+  color: red;
+}
\ No newline at end of file

frontend/public/stylesheets/master.css

 @import './reset.css';
 @import './header.css';
-@import './footer.css';
\ No newline at end of file
+@import './footer.css';
+@import './filter.css';
\ No newline at end of file

frontend/src/App.jsx

-
 import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Header from "./components/header/Header";
 import OrderIndex from "./components/order/OrderIndex"
 import { fetchOrders } from "./actions/order_actions";
-
+import Filter from "./components/filter/Filter";
 
 const App = ({ orders, fetchOrders }) => {
 
@@ -22,6 +21,7 @@ const App = ({ orders, fetchOrders }) => {
   return (
     <div className="app">
       <Header />
+      <Filter orders={orders} setOrdersToShow={setOrdersToShow} />
       <OrderIndex orders={ordersToShow} />
     </div>
   );

frontend/src/components/filter/Filter.jsx

+import { useEffect, useState } from "react";
+
+const Filter = ({ orders, setOrdersToShow }) => {
+  const [all, setAll] = useState(true);
+  const [received, setReceived] = useState(false);
+  const [fulfilled, setFulfilled] = useState(false);
+  const [cancelled, setCancelled] = useState(false);
+
+  const RECEIVED = "RECEIVED";
+  const FULFILLED = "FULFILLED";
+  const CANCELLED = "CANCELLED";
+
+  const reset = () => {
+    setAll(true);
+    setReceived(false);
+    setFulfilled(false);
+    setCancelled(false);
+  };
+
+  const receive = () => {
+    setAll(false);
+    setReceived(!received);
+  };
+  const fulfill = () => {
+    setAll(false);
+    setFulfilled(!fulfilled);
+  };
+  const cancel = () => {
+    setAll(false);
+    setCancelled(!cancelled);
+  };
+
+  useEffect(() => {
+    const newOrders = { allIds: [], byId: {} };
+    orders.allIds.map((wareId) => {
+      const order = orders.byId[wareId];
+      switch (order.status) {
+        case RECEIVED:
+          if (all || received) {
+            newOrders.allIds.push(wareId);
+            newOrders.byId[wareId] = order;
+          }
+          break;
+        case FULFILLED:
+          if (all || fulfilled) {
+            newOrders.allIds.push(wareId);
+            newOrders.byId[wareId] = order;
+          }
+          break;
+        case CANCELLED:
+          if (all || cancelled) {
+            newOrders.allIds.push(wareId);
+            newOrders.byId[wareId] = order;
+          }
+          break;
+        default:
+          break;
+      }
+    });
+
+    setOrdersToShow(newOrders);
+  }, [all, received, fulfilled, cancelled]);
+
+  if (!orders.allIds.length) return null;
+
+  return (
+    <div className="filter">
+      <div className={`filter-all ${all ? "selected" : ""}`} onClick={reset}>
+        All
+      </div>
+      <div
+        className={`filter-rec ${received ? "selected" : ""}`}
+        onClick={receive}
+      >
+        Received
+      </div>
+      <div
+        className={`filter-ful ${fulfilled ? "selected" : ""}`}
+        onClick={fulfill}
+      >
+        Fulfilled
+      </div>
+      <div
+        className={`filter-can ${cancelled ? "selected" : ""}`}
+        onClick={cancel}
+      >
+        Cancelled
+      </div>
+    </div>
+  );
+};;
+
+export default Filter;

frontend/src/components/order/OrderIndex.jsx

-import React, { useState, useEffect } from 'react';
 import OrderIndexItem from './OrderIndexItem';
-import { connect } from "react-redux";
-// import { createOrder, fetchOrders, editOrder } from '../../actions/order_actions';
 
 const OrderIndex = ({
   orders,
@@ -10,7 +7,6 @@ const OrderIndex = ({
     <div>
       <h1>Order Index</h1>
 
-      <br />
       <br />
 
       {orders.allIds.map((orderId) => {
@@ -22,15 +18,4 @@ const OrderIndex = ({
 
 }
 
-const mapStateToProps = (state, ownProps) => {
-  // debugger;
-  return {
-    orders: ownProps.orders,
-  }
-}
-
-const mapDispatchToProps = dispatch => ({
-
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(OrderIndex)
+export default OrderIndex;
\ No newline at end of file

frontend/src/components/order/OrderIndexItem.jsx

@@ -12,13 +12,13 @@ const OrderIndexItem = ({ order }) => {
     modifiedAt
   } = order;
 
-  const actions = ( status === "RECEIVED" ? 
-    <OrderButtons order={order} />
-  : 
-  <div>{status}</div>)
+  const actions = ( status !== "FULFILLED" || status !== "CANCELLED" ? 
+    <OrderButtons order={order} /> : 
+    <div>{status}</div>
+  );
 
   return (
-    <div>
+    <div className="oii">
       <div>{`Order #: ${orderId}`}</div>
       {actions}