Merge branch 'feat/filtersearch' into 'master'

split filter/search into diff components

See merge request !9

frontend/public/stylesheets/filter.css

@@ -107,4 +107,8 @@
 .search-btn:hover {
   color:white;
   background: gray;
+}
+
+.error {
+  color: red;
 }
\ No newline at end of file

frontend/src/App.jsx

@@ -11,10 +11,12 @@ const App = ({ orders, fetchOrders }) => {
   const [ordersToShow, setOrdersToShow] = useState(orders);
   const [fetchAttempted, setFetchAttempted] = useState(false);
 
+  // debugger
+
   useEffect(() => {
     if (!fetchAttempted) {
-      setFetchAttempted(true);
       fetchOrders();
+      setFetchAttempted(true);
     }
     setOrdersToShow(orders);
   }, [orders, fetchOrders, fetchAttempted]);
@@ -22,11 +24,12 @@ const App = ({ orders, fetchOrders }) => {
   return (
     <div className="app">
       <Header />
-      <FilterSearch orders={orders} setOrdersToShow={setOrdersToShow} />
-      {ordersToShow.allIds.length ? 
-        <OrderIndex orders={ordersToShow} /> : 
+      <FilterSearch setOrdersToShow={setOrdersToShow} />
+      {ordersToShow.allIds.length ? (
+        <OrderIndex orders={ordersToShow} />
+      ) : (
         <NoOrders />
-      }
+      )}
     </div>
   );
 }

frontend/src/components/atoms/Error.jsx

-const Error = ({ text }) => (
-  <div>
+const Error = ({ text, className }) => (
+  <div className={`error ${className || ""}`}>
     {text}
   </div>
 )

frontend/src/components/filter/Filter.jsx

+import { useEffect, useState } from "react";
+import { connect } from "react-redux";
+import Button from "../atoms/Button";
+
+const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
+  const [all, setAll] = useState(false);
+  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);
+    if (received && !fulfilled && !cancelled) {
+      setAll(true);
+    }
+  };
+  const fulfill = () => {
+    setAll(false);
+    setFulfilled(!fulfilled);
+    if (!received && fulfilled && !cancelled) {
+      setAll(true);
+    }
+  };
+  const cancel = () => {
+    setAll(false);
+    setCancelled(!cancelled);
+    if (!received && !fulfilled && cancelled) {
+      setAll(true);
+    }
+  };
+
+  useEffect(() => {
+    if (all || (!all && !received && !fulfilled && !cancelled)) {
+      setOrdersToShow(orders);
+    } else {
+      const newOrders = { allIds: [], byId: {} };
+      orders.allIds.forEach((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);
+    }
+  }, [orders, setOrdersToShow, all, received, fulfilled, cancelled]);
+
+  if (!orders.allIds.length) return null;
+
+  return (
+    <div className="filter">
+      <div className="text">Filter:</div>
+
+      <div className="filter-btns">
+        <Button
+          className={`filter-all ${filtersOn && all ? "selected" : ""}`}
+          onClick={reset}
+          text="All"
+        />
+        <Button
+          className={`filter-rec ${filtersOn && received ? "selected" : ""}`}
+          onClick={receive}
+          text="Received"
+        />
+        <Button
+          className={`filter-ful ${filtersOn && fulfilled ? "selected" : ""}`}
+          onClick={fulfill}
+          text="Fulfilled"
+        />
+        <Button
+          className={`filter-can ${filtersOn && cancelled ? "selected" : ""}`}
+          onClick={cancel}
+          text="Cancelled"
+        />
+      </div>
+    </div>
+  );
+};
+const mapStateToProps = (state) => ({
+  orders: state.entities.orders,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Filter);

frontend/src/components/filter/FilterSearch.jsx

 import { useEffect, useState } from "react";
-import Button from "../atoms/Button";
-import Input from "../atoms/Input";
-import Select from "../atoms/Select";
+import Filter from "./Filter";
 import Search from "./Search";
 
 const FilterSearch = ({ orders, setOrdersToShow }) => {
-  const [all, setAll] = useState(false);
-  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);
-    if (received && !fulfilled && !cancelled) {
-      setAll(true);
-    }
-  };
-  const fulfill = () => {
-    setAll(false);
-    setFulfilled(!fulfilled);
-    if (!received && fulfilled && !cancelled) {
-      setAll(true);
-    }
-  };
-  const cancel = () => {
-    setAll(false);
-    setCancelled(!cancelled);
-    if (!received && !fulfilled && cancelled) {
-      setAll(true);
-    }
-  };
-
-
-
-  useEffect(() => {
-    if (all) {
-      setOrdersToShow(orders);
-    } else {
-      const newOrders = { allIds: [], byId: {} };
-      orders.allIds.forEach((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);
-    }
-  }, [orders, setOrdersToShow, all, received, fulfilled, cancelled]);
-
-  if (!orders.allIds.length) return null;
+  const [filtersOn, setFiltersOn] = useState(true);
 
   return (
     <div className="filter-search">
-      <div className="filter">
-        <div className="text">Filter:</div>
-
-        <div className="filter-btns">
-          <Button
-            className={`filter-all ${all ? "selected" : ""}`}
-            onClick={reset}
-            text="All"
-          />
-          <Button
-            className={`filter-rec ${received ? "selected" : ""}`}
-            onClick={receive}
-            text="Received"
-          />
-          <Button
-            className={`filter-ful ${fulfilled ? "selected" : ""}`}
-            onClick={fulfill}
-            text="Fulfilled"
-          />
-          <Button
-            className={`filter-can ${cancelled ? "selected" : ""}`}
-            onClick={cancel}
-            text="Cancelled"
-          />
-        </div>
-      </div>
-
-      <Search setOrdersToShow={setOrdersToShow} />
+      <Filter filtersOn={filtersOn} setOrdersToShow={setOrdersToShow} />
+      <Search setOrdersToShow={setOrdersToShow} setFiltersOn={setFiltersOn}/>
     </div>
   );
-};;
+};
 
 export default FilterSearch;

frontend/src/components/filter/Search.jsx

@@ -3,31 +3,40 @@ import { connect } from "react-redux";
 import Select from "../atoms/Select";
 import Input from "../atoms/Input";
 import Button from "../atoms/Button";
+import Error from "../atoms/Error";
 
-const Search = ({ orders, setOrdersToShow }) => {
+const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
   const [searchInput, setSearchInput] = useState("");
   const [searchBy, setSearchBy] = useState("");
+  const [error, setError] = useState("");
 
   const searchOptions = ["by Warehouse ID", "by Order ID"];
 
   const search = () => {
-    const searchResult = { allIds: [], byId: {} };
-    const searchedOrder =
-      searchBy === searchOptions[0]
-        ? orders.byId[searchInput]
-        : searchBy === searchOptions[1]
-        ? orders.byOrderId[searchInput]
-        : null;
+    if (!searchInput.length) {
+      setError("Please enter a search parameter.");
+    } else if (!searchBy.length) {
+      setError("Please enter search method.");
+    } else {
+      const searchResult = { allIds: [], byId: {} };
+      const searchedOrder =
+        searchBy === searchOptions[0]
+          ? orders.byId[searchInput]
+          : searchBy === searchOptions[1]
+          ? orders.byOrderId[searchInput]
+          : null;
 
-    if (searchedOrder) {
-      searchResult.allIds.push(searchedOrder.id);
-      searchResult.byId[searchedOrder.id] = searchedOrder;
-    }
-    if (searchBy.length) {
-      setOrdersToShow(searchResult);
-    }
-
-    setSearchInput("");
+      if (searchedOrder) {
+        searchResult.allIds.push(searchedOrder.id);
+        searchResult.byId[searchedOrder.id] = searchedOrder;
+      }
+      if (searchBy.length) {
+        setOrdersToShow(searchResult);
+      }
+      setError("");
+      setSearchInput("");
+      setFiltersOn(false);
+    } 
   };
 
   const handleSearchEnter = (e) => {
@@ -54,6 +63,7 @@ const Search = ({ orders, setOrdersToShow }) => {
         onKeyPress={handleSearchEnter}
       />
       <Button className="search-btn" text="Search" onClick={search} />
+      {error.length ? <Error text={error}/> : null}
     </div>
   );
 };

frontend/src/components/order/OrderIndexItem.jsx

@@ -26,7 +26,7 @@ const OrderIndexItem = ({ order }) => {
       <div className="oii-container">
         <div className="oii-left">
           <FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/>
-          <div className="oii-num">{`Order #:${orderId}`}</div>
+          <div className="oii-num">{`Order #: ${orderId}`}</div>
         </div>
         {actions}
       </div>