Merge branch 'feat/style' into 'master'

Feat/style

See merge request !11

frontend/public/stylesheets/filter.css

 .filter-search {
-  /* width: 50%; */
   display: flex;
   align-items: center;
   padding: 20px;
@@ -11,7 +10,7 @@
 }
 
 .filter-search > * ~ * {
-  margin-left: 100px;
+  margin-left: 50px;
 }
 
 .filter {
@@ -29,9 +28,13 @@
   align-items: center;
 }
 
-.filter-btns > * {
+.filter-btns > *,
+.search-btn,
+.collapse-btn,
+.expand-btn {
   cursor: pointer;
   display: flex;
+  align-items: center;
   padding: 10px 20px;
   border-radius: 5px;
   border: 1px solid black;
@@ -46,32 +49,32 @@
 }
 
 .filter-all:hover {
-  background: orange;
+  background: #2b4162;
   color: white;
 }
 .filter-all.selected {
-  background: orange;
+  background: #2b4162;
 }
 .filter-rec:hover {
-  background: blue;
+  background: #2292A4;
   color: white;
 }
 .filter-rec.selected {
-  background: blue;
+  background: #2292A4;
 }
 .filter-ful:hover {
-  background: green;
+  background: #4daa57;
   color: white;
 }
 .filter-ful.selected {
-  background: green;
+  background: #4daa57;
 }
 .filter-can:hover {
-  background: red;
+  background: #c1292e;
   color: white;
 }
 .filter-can.selected {
-  background: red;
+  background: #c1292e;
 }
 
 .search {
@@ -85,30 +88,39 @@
 
 .search > select {
   cursor: pointer;
-  border: none;
+  padding: 10px 0;
   font-size: 16px;
-  font-family: 'Times New Roman', Times, serif;
+  font-family: "Times New Roman", Times, serif;
 }
 
 .search > input {
   padding: 10px;
   font-size: 16px;
-  font-family: 'Times New Roman', Times, serif;
+  font-family: "Times New Roman", Times, serif;
 }
 
-.search-btn {
-  cursor: pointer;
+.search-btn:hover,
+.collapse-btn:hover,
+.expand-btn:hover {
+  color: white;
+  background: #2b4162;
+}
+
+.search-select-error,
+.search-input-error {
+  border: 2px solid #c1292e;
+}
+
+.fs-collapse {
   display: flex;
-  padding: 10px 20px;
-  border-radius: 5px;
-  border: 1px solid black;
+  justify-content: space-between;
 }
 
-.search-btn:hover {
-  color:white;
-  background: gray;
+.collapse-expand {
+  display: flex;
+  padding: 20px;
 }
 
-.error {
-  color: red;
-}
+.collapse-expand > * ~ * {
+  margin-left: 10px;
+}
\ No newline at end of file

frontend/public/stylesheets/header.css

 .header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 10px 20px;
   height: 50px;
-  background: gray;
-  color: white;
+  background: #2b4162;
+  color: #fff;;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.header > div {
+  display: flex;
+  align-items: center;
+}
+
+.header img {
+  margin-right: 10px;
+  width: 32px;
+  height: 32px;
 }
\ No newline at end of file

frontend/public/stylesheets/master.css

@@ -2,4 +2,13 @@
 @import './header.css';
 @import './footer.css';
 @import './filter.css';
-@import './order.css';
+@import './order.css';
\ No newline at end of file
+@import './session.css';
+
+/* background: #2b4162; */
+/* background: #4daa57 */
+/* background: #c1292e */
+/* background: #2292A4; */
+
+/* background: #f5f0f6; */
+/* background: #acb0bd; */

frontend/public/stylesheets/order.css

@@ -4,9 +4,10 @@
 .order-index > h1 {
   padding: 10px 20px;
   margin-bottom: 2px;
-  background: blue;
+  background: #2b4162;
   color: white;
-  font-size: 20px;
+  font-size: 24px;
+  font-weight: 700;
 }
 .order-index .oii ~ .oii {
   margin-top: 15px;
@@ -17,8 +18,9 @@
   flex-direction: column;
   justify-content: center;
   min-height: 70px;
-  background: lightgray;
+  background: #eee;
   border-radius: 5px;
+  font-size: 24px;
 }
 
 .oii-container {
@@ -58,7 +60,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 180px;
+  width: 200px;
+  font-size: 20px;
 }
 
 .oii-buttons > div {
@@ -75,37 +78,37 @@
 }
 
 .oii-status.fulfilled {
-  color: green;
+  color: #4daa57;
 }
 .oii-status.cancelled {
-  color: red;
+  color: #c1292e;
 }
 
 .fulfill-btn {
   position: relative;
-  border: 1px solid green;
-  color: green;
+  border: 1px solid #4daa57;
+  color: #4daa57;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
   0 1px 1px rgba(0, 0, 0, 0.5);
 }
 
 .fulfill-btn:hover {
   color: white;
-  background: green;
+  background: #4daa57;
   box-shadow: none;
 }
 
 .cancel-btn {
   position: relative;
-  border: 1px solid red;
-  color: red;
+  border: 1px solid #c1292e;
+  color: #c1292e;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
   0 1px 1px rgba(0, 0, 0, 0.5);
 }
 
 .cancel-btn:hover {
   color: white;
-  background: red;
+  background: #c1292e;
 }
 
 .fulfill-btn:active, .cancel-btn:active {
@@ -115,7 +118,7 @@
 .order-details {
   display: flex;
   flex-direction: column;
-  /* min-height: 0px; */
+  font-size: 18px;
   max-height: 0px;
   overflow: hidden;
   transition: max-height 1s ease-out;
@@ -123,15 +126,73 @@
 
 .order-details-container {
   overflow: hidden;
-  padding: 0 50px 20px;
+  padding: 20px 50px;
   box-sizing: border-box;
+  overflow: scroll;
 }
 
 .animate {
-  transition: max-height 1s ease-out;
-  max-height: 200px;
+  transition: max-height 0.75s ease-in-out;
+  max-height: 400px;
 }
 
-.item-detail ~ .item-detail {
-  margin-top: 10px;
+.order-details-header {
+  padding: 4px 0;
+  font-size: 20px;
+  font-weight: 700;
+  border-bottom: 2px solid black; 
+  display: flex;
+  justify-content: space-between;
+}
+
+.order-details-name {
+  display: flex;
+  align-items: center;
+}
+
+.order-details-dates {
+  display: flex;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 16px;
+  font-style: italic;
+  width: 275px;
+}
+
+.order-details-dates > div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.order-detail-table {
+  margin: 15px;
+}
+.order-detail-table thead {
+  font-weight: 700;
+  border-bottom: 1px solid black; 
+}
+
+.order-detail-table th,
+.order-detail-table td {
+  padding: 5px 20px;
+}
+
+.item-sku, .item-qty {
+  text-align: center;
+}
+
+.item-price {
+  text-align: end;
+}
+
+.order-detail-table th ~ th,
+.order-detail-table td ~ td {
+  border-left: 1px solid black;
+}
+
+.no-orders {
+  padding: 50px; 
+  display: flex;
+  justify-content: center;
+  font-size: 28px;
 }
\ No newline at end of file

frontend/public/stylesheets/reset.css

@@ -40,4 +40,7 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+}
+select:focus, input:focus {
+	outline: none;
 }
\ No newline at end of file

frontend/public/stylesheets/session.css

+.login {
+  padding: 50px; 
+  display: flex;
+  justify-content: center;
+}
\ 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 OrderIndex from "./components/order/OrderIndex";
 import NoOrders from "./components/order/NoOrders";
 import { fetchOrders } from "./actions/order_actions";
 import FilterSearch from "./components/filter/FilterSearch";
+import Button from "./components/atoms/Button";
 
 const App = ({ orders, fetchOrders }) => {
-
   const [ordersToShow, setOrdersToShow] = useState(orders);
   const [fetchAttempted, setFetchAttempted] = useState(false);
-
-  // debugger
+  const [collapseAll, setCollapseAll] = useState(false);
+  const [expandAll, setExpandAll] = useState(false);
 
   useEffect(() => {
     if (!fetchAttempted) {
@@ -23,16 +22,35 @@ const App = ({ orders, fetchOrders }) => {
 
   return (
     <div className="app">
-      <Header />
-      <FilterSearch setOrdersToShow={setOrdersToShow} />
+      <div className="fs-collapse">
+        <FilterSearch setOrdersToShow={setOrdersToShow} />
+        <div className="collapse-expand">
+          <Button
+            className="collapse-btn"
+            onClick={() => setCollapseAll(true)}
+            text={`Collapse All`}
+          />
+          <Button
+            className="expand-btn"
+            onClick={() => setExpandAll(true)}
+            text={`Expand All`}
+          />
+        </div>
+      </div>
       {ordersToShow.allIds.length ? (
-        <OrderIndex orders={ordersToShow} />
+        <OrderIndex
+          orders={ordersToShow}
+          collapseAll={collapseAll}
+          expandAll={expandAll}
+          setCollapseAll={setCollapseAll}
+          setExpandAll={setExpandAll}
+        />
       ) : (
         <NoOrders />
       )}
     </div>
   );
-}
+};
 
 const mapStateToProps = (state) => ({
   orders: state.entities.orders,

frontend/src/Root.jsx

+import { connect } from "react-redux";
+import Header from "./components/header/Header";
+import App from "./App"
+import Login from "./components/session/Login";
+
+const Root = ({ isLoggedIn }) => {
+  return (
+    <div>
+      <Header />
+      {isLoggedIn ? 
+        <App /> :
+        <Login />
+      }
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  isLoggedIn: state.session.isAuthenticated,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Root);
\ No newline at end of file

frontend/src/actions/order_actions.js

@@ -23,7 +23,6 @@ export const fetchOrders = () => (dispatch) => {
 export const editOrder = (order) => (dispatch) => {
   OrderAPIUtil.editOrder(order)
     .then(res => {
-      debugger
       dispatch(updateOrder(res.data))
     });
 }
\ No newline at end of file

frontend/src/actions/session_actions.js

+import * as SessionAPIUtil from "../util/session_api_util";
+
+export const LOGIN_USER = "LOGIN_USER";
+export const LOGOUT_USER = "LOGOUT_USER";
+
+const receiveLogin = (user) => ({
+  type: LOGIN_USER,
+  user,
+});
+
+const receiveLogout = () => ({
+  type: LOGOUT_USER,
+});
+
+export const login = (payload) => (dispatch) => {
+  SessionAPIUtil.createSession(payload).then((res) => {
+    const { status, data } = res;
+    if (status < 299) {
+      dispatch(receiveLogin(data));
+    }
+  });
+};
+
+export const logout = () => (dispatch) => {
+  dispatch(receiveLogout());
+};

frontend/src/components/atoms/Image.jsx

+const Image = ({ src }) => (
+  <img src={src} alt=""/>
+)
+
+export default Image;
\ No newline at end of file

frontend/src/components/atoms/Input.jsx

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

frontend/src/components/atoms/Select.jsx

-const Select = ({ defaultVal, value, onChange, options }) => (
+const Select = ({ className, defaultVal, value, onChange, options }) => (
   <select
+    className={className}
     value={value ? value : defaultVal}
     onChange={onChange}
   >

frontend/src/components/filter/Filter.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Button from "../atoms/Button";
 
-const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
+const Filter = ({ orders, filtersOn, setFiltersOn, setOrdersToShow }) => {
   const [all, setAll] = useState(false);
   const [received, setReceived] = useState(false);
   const [fulfilled, setFulfilled] = useState(false);
@@ -14,12 +14,14 @@ const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
 
   const reset = () => {
     setAll(true);
+    setFiltersOn(true);
     setReceived(false);
     setFulfilled(false);
     setCancelled(false);
   };
   const receive = () => {
     setAll(false);
+    setFiltersOn(true);
     setReceived(!received);
     if (received && !fulfilled && !cancelled) {
       setAll(true);
@@ -27,6 +29,7 @@ const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
   };
   const fulfill = () => {
     setAll(false);
+    setFiltersOn(true);
     setFulfilled(!fulfilled);
     if (!received && fulfilled && !cancelled) {
       setAll(true);
@@ -34,6 +37,7 @@ const Filter = ({ orders, filtersOn, setOrdersToShow }) => {
   };
   const cancel = () => {
     setAll(false);
+    setFiltersOn(true);
     setCancelled(!cancelled);
     if (!received && !fulfilled && cancelled) {
       setAll(true);

frontend/src/components/filter/FilterSearch.jsx

-import { useEffect, useState } from "react";
+import { useState } from "react";
 import Filter from "./Filter";
 import Search from "./Search";
 
-const FilterSearch = ({ orders, setOrdersToShow }) => {
+const FilterSearch = ({ setOrdersToShow }) => {
   const [filtersOn, setFiltersOn] = useState(true);
 
   return (
     <div className="filter-search">
-      <Filter filtersOn={filtersOn} setOrdersToShow={setOrdersToShow} />
-      <Search setOrdersToShow={setOrdersToShow} setFiltersOn={setFiltersOn}/>
+      <Filter
+        filtersOn={filtersOn}
+        setFiltersOn={setFiltersOn}
+        setOrdersToShow={setOrdersToShow}
+      />
+      <Search setOrdersToShow={setOrdersToShow} setFiltersOn={setFiltersOn} />
     </div>
   );
 };

frontend/src/components/filter/Search.jsx

@@ -3,20 +3,25 @@ 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, setFiltersOn }) => {
   const [searchInput, setSearchInput] = useState("");
   const [searchBy, setSearchBy] = useState("");
-  const [error, setError] = useState("");
+  const [inputError, setInputError] = useState(false);
+  const [byError, setByError] = useState(false);
 
-  const searchOptions = ["by Warehouse ID", "by Order ID"];
+  const searchOptions = ["Warehouse ID", "Order ID"];
 
   const search = () => {
-    if (!searchInput.length) {
-      setError("Please enter a search parameter.");
+    setInputError(false);
+    setByError(false);
+    if (!searchInput.length && !searchBy.length) {
+      setInputError(true);
+      setByError(true);
+    } else if (!searchInput.length) {
+      setInputError(true);
     } else if (!searchBy.length) {
-      setError("Please enter search method.");
+      setByError(true);
     } else {
       const searchResult = { allIds: [], byId: {} };
       const searchedOrder =
@@ -33,10 +38,15 @@ const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
       if (searchBy.length) {
         setOrdersToShow(searchResult);
       }
-      setError("");
       setSearchInput("");
       setFiltersOn(false);
-    } 
+    }
+  };
+
+  const handleInputBlur = (e) => {
+    if (!e.target.value.length) {
+      setInputError(true);
+    }
   };
 
   const handleSearchEnter = (e) => {
@@ -47,23 +57,29 @@ const Search = ({ orders, setOrdersToShow, setFiltersOn }) => {
 
   return (
     <div className="search">
-      <div className="text">Search</div>
+      <div className="text">Search:</div>
       <Select
-        defaultVal={"By:"}
+        className={byError ? "search-select-error" : ""}
+        defaultVal={"Choose one.."}
         value={searchBy}
         options={searchOptions}
         onChange={(e) => {
+          setByError(false);
           setSearchBy(e.target.selectedOptions[0].value);
         }}
       />
       <Input
+        className={inputError ? "search-input-error" : ""}
         placeholder={"Search by ID"}
         value={searchInput}
-        onChange={(e) => setSearchInput(e.target.value)}
+        onChange={(e) => {
+          setInputError(false);
+          setSearchInput(e.target.value);
+        }}
+        onBlur={handleInputBlur}
         onKeyPress={handleSearchEnter}
       />
       <Button className="search-btn" text="Search" onClick={search} />
-      {error.length ? <Error text={error}/> : null}
     </div>
   );
 };
@@ -72,7 +88,6 @@ const mapStateToProps = (state) => ({
   orders: state.entities.orders,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-});
+const mapDispatchToProps = (dispatch) => ({});
 
 export default connect(mapStateToProps, mapDispatchToProps)(Search);

frontend/src/components/header/Header.jsx

-import React from 'react';
-import Login from "../session/Login";
+import { connect } from "react-redux";
+import Image from "../atoms/Image";
 import Logout from "../session/Logout";
 
-const Header = () => {
+const Header = ({ isLoggedIn, logout }) => {
   return (
     <div className="header">
-      Warehouse Management
-      <Login />
-      <Logout />
+      <div>
+        <Image src="https://www.flaticon.com/svg/vstatic/svg/2562/2562296.svg?token=exp=1620448865~hmac=b6bb0b0a072e16f423c481f7a3175fa9" />
+        <div>Warehouse Management</div>
+      </div>
+      {isLoggedIn ? <Logout onClick={logout} /> : null}
     </div>
   );
-}
+};
 
-export default Header;
+const mapStateToProps = (state) => ({
\ No newline at end of file
+  isLoggedIn: state.session.isAuthenticated,
+});
+
+const mapDispatchToProps = (dispatch) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

frontend/src/components/order/ItemDetails.jsx

 const ItemDetails = ({ item }) => {
-
-  const { itemId, itemName, itemQuantity, itemPrice, itemSku } = item;
+  const { itemName, itemQuantity, itemPrice, itemSku } = item;
 
   return (
-    <li className="item-detail">
-      {`${itemName} -- x ${itemQuantity} bought at ${itemPrice}/ea.`}
-    </li>
-  )
-}
+    <tr className="item-detail">
+      <td className="item-sku">{itemSku}</td>
+      <td className="item-name">{itemName}</td>
+      <td className="item-qty">{itemQuantity}</td>
+      <td className="item-price">{`$${itemPrice.toFixed(2)}`}</td>
+    </tr>
+  );
+};
 
-export default ItemDetails;
+export default ItemDetails;
\ No newline at end of file

frontend/src/components/order/NoOrders.jsx

 const NoOrders = () => (
-  <div>
-    No Orders To Show
+  <div className="no-orders">
+    Hmm, it doesn't seem like there were any orders found...
   </div>
 )
 export default NoOrders;
\ No newline at end of file

frontend/src/components/order/OrderDetails.jsx

 import ItemDetails from "./ItemDetails";
 
 const OrderDetails = ({ order, showDetails }) => {
+  const createdDate = new Date(order.createdAt);
+  const modifiedDate = new Date(order.modifiedAt);
+  const status =
+    order.status[0].toUpperCase() + order.status.substr(1).toLowerCase();
+
+  const dateToString = (date) => {
+    const month = date.toLocaleString("default", { month: "short" });
+    const day = date.getDate();
+    const year = date.getFullYear();
+    const hour = date.getHours();
+    const cHour = hour > 12 ? hour - 12 : hour;
+    const minute = date.getMinutes();
+    const time = `${cHour > 9 ? cHour : `0${cHour}`}:${minute > 9 ? minute : `0${minute}`}`;
+    return `${month} ${day > 9 ? day : `0${day}`}, ${year} at ${time} ${hour > 11 ? "PM" : "AM"}`;
+  };
 
   return (
     <div className={`order-details ${showDetails ? "animate" : ""}`}>
       <div className="order-details-container">
-        <div>
-          {`Order Details - Warehouse Order #: ${order.id}`}
+        <div className="order-details-header">
+          <div className="order-details-name">Order Details:</div>
+          <div className="order-details-dates">
+            <div>
+              <div>Created on:</div>
+              <div>{dateToString(createdDate)}</div>
+            </div>
+            {order.modifiedAt ? (
+              <div>
+                <div>{`${status} on:`}</div>
+                <div>{dateToString(modifiedDate)}</div>
+              </div>
+            ) : null}
+          </div>
         </div>
-        <ul>
-          {order.orderItems.map( item => (
-            <ItemDetails key={item.itemId}item={item} />
-          ))}
-        </ul>
+        <table className="order-detail-table">
+          <thead>
+            <tr>
+              <th>SKU #</th>
+              <th>Name</th>
+              <th>Quantity</th>
+              <th>Price</th>
+            </tr>
+          </thead>
+          <tbody>
+            {order.orderItems.map((item) => (
+              <ItemDetails key={item.itemId} item={item} />
+            ))}
+          </tbody>
+        </table>
+        {`Warehouse Order #: ${order.id}`}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default OrderDetails;
+export default OrderDetails;
\ No newline at end of file

frontend/src/components/order/OrderIndex.jsx

@@ -2,13 +2,26 @@ import OrderIndexItem from './OrderIndexItem';
 
 const OrderIndex = ({
   orders,
+  collapseAll,
+  expandAll,
+  setCollapseAll,
+  setExpandAll,
 }) => {
   return (
     <div className="order-index">
-      <h1>Order Index</h1>
+      <h1>Orders</h1>
       {orders.allIds.map((orderId) => {
         const order = orders.byId[orderId];
-        return <OrderIndexItem key={order.id} order={order} />;
+        return (
+          <OrderIndexItem
+            key={order.id}
+            order={order}
+            collapseAll={collapseAll}
+            expandAll={expandAll}
+            setCollapseAll={setCollapseAll}
+            setExpandAll={setExpandAll}
+          />
+        );
       })}
     </div>
   );

frontend/src/components/order/OrderIndexItem.jsx

-import React, { useState } from 'react';
-import OrderButtons from './OrderButtons';
-import { FiChevronRight } from 'react-icons/fi';
-import OrderDetails from './OrderDetails';
-
-const OrderIndexItem = ({ order }) => {
-
-  const { 
-    id,
-    orderId, 
-    status, 
-    orderItems, 
-    createdAt, 
-    modifiedAt
-  } = order;
+import React, { useEffect, useState } from "react";
+import OrderButtons from "./OrderButtons";
+import { FiChevronRight } from "react-icons/fi";
+import OrderDetails from "./OrderDetails";
+
+const OrderIndexItem = ({
+  order,
+  collapseAll,
+  expandAll,
+  setCollapseAll,
+  setExpandAll,
+}) => {
+  const { orderId, status } = order;
 
   const [showDetails, setShowDetails] = useState(false);
 
-  const actions = ( status === "FULFILLED" || status === "CANCELLED" ? 
-  <div className={`oii-status ${status.toLowerCase()}`}>{status}</div> :
-  <OrderButtons order={order} />
-  );
+  useEffect(() => {
+    if (collapseAll) {
+      setShowDetails(false);
+    }
+    if (expandAll) {
+      setShowDetails(true);
+    }
+    setCollapseAll(false);
+    setExpandAll(false);
+  }, [showDetails, collapseAll, expandAll, setCollapseAll, setExpandAll]);
+
+  const handleDropDown = () => {
+    setShowDetails(!showDetails);
+  };
+
+  const actions =
+    status === "FULFILLED" || status === "CANCELLED" ? (
+      <div className={`oii-status ${status.toLowerCase()}`}>{status}</div>
+    ) : (
+      <OrderButtons order={order} />
+    );
 
   return (
     <div className="oii">
       <div className="oii-container">
         <div className="oii-left">
-          <FiChevronRight className={`oii-drop ${showDetails ? "rotate" : ""}`} onClick={() => setShowDetails(!showDetails)}/>
+          <FiChevronRight
+            className={`oii-drop ${showDetails ? "rotate" : ""}`}
+            onClick={handleDropDown}
+          />
           <div className="oii-num">{`Order #: ${orderId}`}</div>
         </div>
         {actions}
@@ -33,7 +51,7 @@ const OrderIndexItem = ({ order }) => {
 
       <OrderDetails showDetails={showDetails} order={order} />
     </div>
-  )
+  );
 };
 
 export default OrderIndexItem;

frontend/src/components/session/Login.jsx

-import React from 'react';
+import React from "react";
+import { connect } from "react-redux";
 import { GoogleLogin } from "react-google-login";
-import keys from "../../config/keys_dev"
+import keys from "../../config/keys_dev";
+import { login } from "../../actions/session_actions";
 
 const clientId = keys.clientId;
 
-const Login = () => {
-
-  const responseGoogle = (response) => {
-    console.log(response);
+const Login = ({ login }) => {
+  const responseGoogle = (googleResponse) => {
+    const { tokenId, profileObj } = googleResponse;
+    login({ token: tokenId, user: profileObj });
   };
-  
+
   return (
-    <div>
+    <div className="login">
       <GoogleLogin
         clientId={clientId}
         buttonText="Login with Google"
         onSuccess={responseGoogle}
         onFailure={responseGoogle}
         cookiePolicy={"single_host_origin"}
-        // isSignedIn={true}
+        isSignedIn={true}
       />
     </div>
   );
-}
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = (dispatch) => ({
+  login: (token) => dispatch(login(token)),
+});
 
-export default Login;
+export default connect(mapStateToProps, mapDispatchToProps)(Login);
\ No newline at end of file

frontend/src/components/session/Logout.jsx

-import React from "react";
+import { connect } from "react-redux";
 import { GoogleLogout } from "react-google-login";
+import { logout } from "../../actions/session_actions";
 import keys from "../../config/keys_dev";
 
 const clientId = keys.clientId;
 
-const Logout = () => {
-  
-  const responseGoogle = (response) => {
-    console.log(response);
+const Logout = ({ logout }) => {
+  const responseGoogle = (googleResponse) => {
+    logout();
   };
 
   return (
     <div>
-      <GoogleLogout 
+      <GoogleLogout
         clientId={clientId}
         buttonText="Logout"
         onLogoutSuccess={responseGoogle}
-        isSignedIn={true}
       />
     </div>
   );
 };
 
-export default Logout;
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = (dispatch) => ({
+  logout: () => dispatch(logout()),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Logout);

frontend/src/index.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
 import configureStore from './store/store';
 import { Provider } from 'react-redux';
+import Root from './Root';
 
 document.addEventListener('DOMContentLoaded', () => {
 
@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   ReactDOM.render(
     <Provider store={store}>
-      <App />
+      <Root />
     </Provider>,
     document.getElementById('root')
   );

frontend/src/reducers/root_reducer.js

 import { combineReducers } from "redux";
 import entities from "./entities/entities_reducer";
+import session from "./session/session_reducer";
 
 const RootReducer = combineReducers({
   entities,
+  session,
 });
 
 export default RootReducer;

frontend/src/reducers/session/session_reducer.js

+import { LOGIN_USER, LOGOUT_USER } from "../../actions/session_actions";
+
+const initialState = {
+  isAuthenticated: false,
+  user: null
+}
+
+const SessionState = (oldState = initialState, action) => {
+  Object.freeze(oldState);
+  switch (action.type) {
+    case LOGIN_USER:
+      return {
+        isAuthenticated: !!action.user,
+        user: action.user,
+      }
+    case LOGOUT_USER:
+      return initialState;
+    default:
+      return oldState;
+  }
+}
+
+export default SessionState;
\ No newline at end of file

frontend/src/util/orders_api_util.jsx

@@ -5,6 +5,5 @@ export const getOrders =() => {
 }
 
 export const editOrder = (order) => {
-  debugger;
   return axios.put(`http://localhost:8080/api/orders/${order.id}`, order)
 }

frontend/src/util/session_api_util.jsx

+import axios from "axios";
+
+export const createSession = (payload) => {
+  return axios
+    .post("http://localhost:8080/api/auth", payload)
+    .catch((err) => err.response);
+};

src/main/java/com/ascendfinalproject/warehouse/controllers/AuthenticationController.java → src/main/java/com/ascendfinalproject/warehouse/controllers/SessionController.java

@@ -7,8 +7,8 @@ import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
 @RestController
-@RequestMapping(value = "")
-public class AuthenticationController {
+@RequestMapping(value = "/api")
+public class SessionController {
 
     @Autowired
     SessionService sessionService;

src/main/java/com/ascendfinalproject/warehouse/controllers/WarehouseController.java

@@ -7,6 +7,7 @@ import com.ascendfinalproject.warehouse.services.SessionService;
 import com.ascendfinalproject.warehouse.services.WarehouseOrderService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.annotation.Order;
+import org.springframework.http.MediaType;
 import org.springframework.web.bind.annotation.*;
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;

src/main/java/com/ascendfinalproject/warehouse/models/Item.java

@@ -12,10 +12,10 @@ public class Item {
     private String itemId;
     private String itemName;
     private int itemQuantity;
-    private int itemPrice;
+    private double itemPrice;
     private int itemSku;
 
-    public Item(String itemId, String itemName, int itemQuantity, int itemPrice, int itemSku) {
+    public Item(String itemId, String itemName, int itemQuantity, double itemPrice, int itemSku) {
         this.itemId = itemId;
         this.itemName = itemName;
         this.itemQuantity = itemQuantity;

src/main/java/com/ascendfinalproject/warehouse/models/OrderResponse.java

@@ -3,20 +3,26 @@ package com.ascendfinalproject.warehouse.models;
 import lombok.Getter;
 import lombok.Setter;
 
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 @Getter
 @Setter
 public class OrderResponse {
 
-    private List<String> allIds;
-    private HashMap<String, WarehouseOrder> byId;
+    private List<String> allIds = new ArrayList<>();
+    private Map<String, WarehouseOrder> byId = new HashMap<>();
 
     public void appendId(String id) {
         allIds.add(id);
     }
 
+    public void addOrder(WarehouseOrder order) {
+        byId.put(order.getId(), order);
+    }
+
     @Override
     public String toString() {
         return "OrderResponse{" +

src/main/java/com/ascendfinalproject/warehouse/services/SessionService.java

@@ -7,6 +7,7 @@ import org.springframework.stereotype.Service;
 
 import java.net.HttpURLConnection;
 import java.net.URL;
+import java.util.Scanner;
 
 @Service
 public class SessionService {
@@ -29,8 +30,8 @@ public class SessionService {
                     .body(session);
         }
         return ResponseEntity
-                .status(HttpStatus.BAD_REQUEST)
-                .body(null);
+                .status(HttpStatus.UNAUTHORIZED)
+                .body(session);
 
 
     }

src/main/java/com/ascendfinalproject/warehouse/services/WarehouseOrderService.java

 package com.ascendfinalproject.warehouse.services;
 
 import com.ascendfinalproject.warehouse.models.Item;
+import com.ascendfinalproject.warehouse.models.OrderResponse;
 import com.ascendfinalproject.warehouse.models.WarehouseOrder;
 import com.ascendfinalproject.warehouse.repositories.WarehouseOrderRepository;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Service;
 import reactor.core.publisher.Flux;
 import reactor.core.publisher.Mono;
@@ -24,13 +26,12 @@ public class WarehouseOrderService {
   }
 
   public Flux<WarehouseOrder> getOrders() {
-      return orderRepository.findAll();
+    return orderRepository.findAll();
   }
 
   public Mono<WarehouseOrder> createOrder(WarehouseOrder order) {
       order.setStatus("RECEIVED");
       order.setCreatedAt(new Date(System.currentTimeMillis()));
-      order.setModifiedAt(new Date(System.currentTimeMillis()));
       List<Item> itemList = Arrays.asList(
               new Item("3", "Hamburger", 3, 3, 33),
               new Item("4", "Sausage", 4, 5, 66),