separate search and filter

frontend/public/stylesheets/filter.css

-.filter {
+.filter-search {
   /* width: 50%; */
   display: flex;
   align-items: center;
   padding: 20px;
 }
 
+.filter-search .text {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.filter-search > * ~ * {
+  margin-left: 100px;
+}
+
+.filter {
+  display: flex;
+  align-items: center;
+}
+
+.filter > * ~ * {
+  margin-left: 10px;
+}
+
 .filter-btns {
   display: flex;
   justify-content: space-between;
@@ -15,27 +33,78 @@
   cursor: pointer;
   display: flex;
   padding: 10px 20px;
-  margin-left: 10px;
   border-radius: 5px;
   border: 1px solid black;
 }
 
+.filter-btns > * ~ * {
+  margin-left: 10px;
+}
+
 .selected {
   color: white;
 }
 
+.filter-all:hover {
+  background: orange;
+  color: white;
+}
 .filter-all.selected {
   background: orange;
 }
-
+.filter-rec:hover {
+  background: blue;
+  color: white;
+}
 .filter-rec.selected {
   background: blue;
 }
-
+.filter-ful:hover {
+  background: green;
+  color: white;
+}
 .filter-ful.selected {
   background: green;
 }
-
+.filter-can:hover {
+  background: red;
+  color: white;
+}
 .filter-can.selected {
   background: red;
+}
+
+.search {
+  display: flex;
+  align-items: center;
+}
+
+.search > * ~ * {
+  margin-left: 10px;
+}
+
+.search > select {
+  cursor: pointer;
+  border: none;
+  font-size: 16px;
+  font-family: 'Times New Roman', Times, serif;
+}
+
+.search > input {
+  padding: 10px;
+  font-size: 16px;
+  font-family: 'Times New Roman', Times, serif;
+}
+
+.search-btn {
+  cursor: pointer;
+  display: flex;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: 1px solid black;
+}
+
+.search-btn:hover {
+  color:white;
+  background: gray;
 }
\ No newline at end of file

frontend/public/stylesheets/order.css

 .order-index {
-  padding: 20px;
+  padding: 0 20px 20px;
+}
+.order-index > h1 {
+  padding: 10px 20px;
+  margin-bottom: 2px;
+  background: blue;
+  color: white;
+  font-size: 20px;
 }
-
 .order-index .oii ~ .oii {
   margin-top: 15px;
 }

frontend/src/App.jsx

@@ -2,8 +2,9 @@ import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Header from "./components/header/Header";
 import OrderIndex from "./components/order/OrderIndex"
+import NoOrders from "./components/order/NoOrders";
 import { fetchOrders } from "./actions/order_actions";
-import Filter from "./components/filter/Filter";
+import FilterSearch from "./components/filter/FilterSearch";
 
 const App = ({ orders, fetchOrders }) => {
 
@@ -21,8 +22,11 @@ const App = ({ orders, fetchOrders }) => {
   return (
     <div className="app">
       <Header />
-      <Filter orders={orders} setOrdersToShow={setOrdersToShow} />
-      <OrderIndex orders={ordersToShow} />
+      <FilterSearch orders={orders} setOrdersToShow={setOrdersToShow} />
+      {ordersToShow.allIds.length ? 
+        <OrderIndex orders={ordersToShow} /> : 
+        <NoOrders />
+      }
     </div>
   );
 }

frontend/src/components/atoms/Error.jsx

+const Error = ({ text }) => (
+  <div>
+    {text}
+  </div>
+)
+
+export default Error;
\ No newline at end of file

frontend/src/components/atoms/Input.jsx

+const Input = ({ className, type, placeholder, value, onChange, onKeyPress }) => (
+  <input 
+    type={type || "text"}
+    className={className}
+    placeholder={placeholder}
+    value={value}
+    onChange={onChange}
+    onKeyPress={onKeyPress}
+  />
+);
+
+export default Input;

frontend/src/components/atoms/Select.jsx

+const Select = ({ defaultVal, value, onChange, options }) => (
+  <select
+    value={value ? value : defaultVal}
+    onChange={onChange}
+  >
+    {defaultVal ? (
+      <option disabled>{defaultVal}</option>
+    ) : null}
+    {options.map(option => (
+      <option key={option} value={option}>
+        {option}
+      </option>
+    ))}
+
+  </select>
+)
+
+export default Select;
\ No newline at end of file

frontend/src/components/filter/Filter.jsx

-import { useEffect, useState } from "react";
-import Button from "../atoms/Button";
-
-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);
-    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;
-
-  return (
-    <div className="filter">
-      <div>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>
-  );
-};;
-
-export default 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 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;
+
+  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} />
+    </div>
+  );
+};;
+
+export default FilterSearch;

frontend/src/components/filter/Search.jsx

+import { useState } from "react";
+import { connect } from "react-redux";
+import Select from "../atoms/Select";
+import Input from "../atoms/Input";
+import Button from "../atoms/Button";
+
+const Search = ({ orders, setOrdersToShow }) => {
+  const [searchInput, setSearchInput] = useState("");
+  const [searchBy, setSearchBy] = 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 (searchedOrder) {
+      searchResult.allIds.push(searchedOrder.id);
+      searchResult.byId[searchedOrder.id] = searchedOrder;
+    }
+    if (searchBy.length) {
+      setOrdersToShow(searchResult);
+    }
+
+    setSearchInput("");
+  };
+
+  const handleSearchEnter = (e) => {
+    if (e.key === "Enter") {
+      search();
+    }
+  };
+
+  return (
+    <div className="search">
+      <div className="text">Search</div>
+      <Select
+        defaultVal={"By:"}
+        value={searchBy}
+        options={searchOptions}
+        onChange={(e) => {
+          setSearchBy(e.target.selectedOptions[0].value);
+        }}
+      />
+      <Input
+        placeholder={"Search by ID"}
+        value={searchInput}
+        onChange={(e) => setSearchInput(e.target.value)}
+        onKeyPress={handleSearchEnter}
+      />
+      <Button className="search-btn" text="Search" onClick={search} />
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  orders: state.entities.orders,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  // fetchOrders: () => dispatch(fetchOrders()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Search);

frontend/src/components/order/NoOrders.jsx

+const NoOrders = () => (
+  <div>
+    No Orders To Show
+  </div>
+)
+export default NoOrders;
\ No newline at end of file

frontend/src/components/order/OrderDetails.jsx

@@ -44,7 +44,9 @@ const OrderDetails = ({ order, showDetails }) => {
   return (
     <div className={`order-details ${showDetails ? "animate" : ""}`}>
       <div className="order-details-container">
-        Order Details
+        <div>
+          {`Order Details - Warehouse Order #: ${order.id}`}
+        </div>
         <ul>
           {sampleItems.map( item => (
             <ItemDetails key={item.itemId}item={item} />

frontend/src/components/order/OrderIndex.jsx

@@ -6,9 +6,6 @@ const OrderIndex = ({
   return (
     <div className="order-index">
       <h1>Order Index</h1>
-
-      <br />
-
       {orders.allIds.map((orderId) => {
         const order = orders.byId[orderId];
         return <OrderIndexItem key={order.id} order={order} />;

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} --`}  {`Warehouse #:${id}`} </div>
+          <div className="oii-num">{`Order #:${orderId}`}</div>
         </div>
         {actions}
       </div>

frontend/src/reducers/entities/orders_reducer.js

@@ -19,10 +19,12 @@ const OrdersReducer = (oldState = initialState, action) => {
       const orderState = {
         byId: {},
         allIds: [],
+        byOrderId: {},
       };
       action.orders.forEach( order => {
         orderState.allIds.push(order.id);
         orderState.byId[order.id] = order;
+        orderState.byOrderId[order.orderId] = order;
       })
       return orderState;
     case RECEIVE_ORDER: