Merge branch 'AFP-70/display-order-history' into 'master'

Afp 70/display order history

See merge request !4

ecom-web/src/components/Header/header.css

+.order-history-nav {
+    padding-left: 10px;
+    color: white;
+}
\ No newline at end of file

ecom-web/src/components/Header/header.js

@@ -2,8 +2,11 @@ import React, { Component } from 'react'
 import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
 import NavDropdown from 'react-bootstrap/NavDropdown'
+import {NavLink} from 'react-router-dom'
 import Session from '../session/session-container'
 
+import './header.css';
+
 export default class Header extends Component {
     constructor(props) {
     super(props)
@@ -22,6 +25,8 @@ export default class Header extends Component {
                                 Hello Guest!
                             </Navbar.Text>
                         </Nav>
+                        <NavLink to="/product-market"><span className="order-history-nav">Products</span></NavLink>
+                        <NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink>
                         <Nav className="ms-auto">
                             <Session />
                             <Nav.Link>

ecom-web/src/components/order-history/Order.jsx

+import React from 'react';
+import { totalPrice } from '../../util/order_history_util';
+import OrderItem from './OrderItem';
+
+
+const Order = (props) => {
+
+    const {order} = props;
+    const {orderItems, customerAddress} = order;
+
+    const orderTotalPrice = totalPrice(orderItems);
+    const orderPlaced = new Date(order.orderCreatedAt);
+
+    return (
+        <div className="order">
+            <p><span className="order-field">Order ID:</span> {order.id}</p>
+            <p><span className="order-field">Order Status:</span> {order.orderStatus}</p>
+            <p><span className="order-field">Order Placed:</span> {orderPlaced.getUTCMonth()}
+                /{orderPlaced.getUTCDay()}
+                /{orderPlaced.getUTCFullYear()}
+            </p>
+            <p>
+            <span className="order-field">Delivery Address:</span> {`
+                ${customerAddress.street},
+                ${customerAddress.city},
+                ${customerAddress.state} ${customerAddress.zip}
+                `}
+            </p>
+            <p><span className="order-field">Items Ordered:</span></p>
+            <div className="products-ordered">
+                {orderItems.map((orderItem, ind) => {
+                    return (
+                        <OrderItem key={ind} orderItem={orderItem} />
+                    )
+                })}
+            </div>
+            <p><span className="order-field">Total Price:</span> ${orderTotalPrice}</p>
+
+        </div>
+    )
+}
+
+export default Order;
\ No newline at end of file

ecom-web/src/components/order-history/OrderItem.jsx

+import React from 'react';
+
+
+const OrderItem = (props) => {
+    const {orderItem} = props;
+    const {itemName, itemPrice, itemQuantity} = orderItem;
+
+    const subTotal = itemQuantity * itemPrice;
+
+
+    return (
+        <div className="order-item">
+            <p>Item: {itemName}</p>
+            <p>Quantity: {itemQuantity}</p>
+            <p>Price Per Unit: ${itemPrice.toFixed(2)}</p>
+            <p>Subtotal: ${subTotal.toFixed(2)}</p>
+        </div>
+    )
+}
+
+export default OrderItem;
\ No newline at end of file

ecom-web/src/components/order-history/order-history-container.jsx

-import { connect } from 'react-redux';
-import OrderHistory from './order-history';
-
-const mSTP = state => ({
-
-});
-
-const mDTP = dispatch => ({
-  
-});
-
-export default connect(mSTP, mDTP)(OrderHistory);
\ No newline at end of file

ecom-web/src/components/order-history/order-history.css

+main {
+    margin: 0 auto;
+    max-width: 1080px;
+}
+
+.order {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    padding: 20px;
+}
+
+.products-ordered {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.order-item {
+    border: 1px solid gray;
+    padding: 5px;
+}
+
+.order-field {
+    font-weight: 600;
+}

ecom-web/src/components/order-history/order-history.jsx

-import React, { Component } from 'react'
+import React, { useEffect, useState } from 'react'
+import { getOrderHistory } from '../../util/order_api_util';
+import Order from './Order';
 
-export default class OrderHistory extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {}
-    }
+import './order-history.css'
+
+const OrderHistory = () => {
+
+    const [orderHistory, setOrderHistory] = useState([]);
+    const [callMade, setCallMade] = useState(false);
     
-    render() {
-        return (
-            <div>
-                This is the OrderHistory component
+    useEffect( async () => {
+        if (callMade) return;
+        const userHistory = await getOrderHistory('e-com-test-id2'); //insert user id from user details stored in redux 
+        setOrderHistory(userHistory);
+        setCallMade(true);
+    });
+
+    return (
+        <main>
+            <h1>Order History</h1>
+
+            <div id="orders">
+                {orderHistory.map(order => {
+                    return <Order order={order}/>;
+                })}
             </div>
-        )
-    }
-}
+        </main>
+    )
+}
\ No newline at end of file
+
+export default OrderHistory;
\ No newline at end of file

ecom-web/src/components/root.js

@@ -5,8 +5,8 @@ import SessionContainer from './session/session-container';
 import ProductMarketContainer from './product-market/product-market-container';
 import ShoppingCartContainer from './shopping-cart/shopping-cart-container';
 import CheckoutContianer from './checkout/checkout-container';
-import OrderHistoryContainer from './order-history/order-history';
 import Header from './Header/header-container'
+import OrderHistory from './order-history/order-history';
 
 const Root = ({ store }) => (
   <Provider store={ store }>
@@ -27,7 +27,7 @@ const Root = ({ store }) => (
         <Route path="/product-market" component={ ProductMarketContainer } />
         <Route path="/cart" component={ ShoppingCartContainer } />
         <Route path="/checkout" component={ CheckoutContianer } />
-        <Route path="/orders" component={ OrderHistoryContainer } />
+        <Route path="/orders" component={ OrderHistory } />
       </Switch>
     </BrowserRouter>
   </Provider>

ecom-web/src/config.js

+class Config {
+    static baseApiUrl = "http://localhost:8080/api"; //env file
+    static orderHistoryApiUrlMethod = (userId) => `${this.baseApiUrl}/users/${userId}/orders`;
+
+
+}
+
+export default Config;
\ No newline at end of file

ecom-web/src/util/order_api_util.js

+import Config from "../config";
+
+export const getOrderHistory = async (userId) => {
+
+    //This is what we will return once our oder history API is operational
+    // const res = await fetch(`${Config.orderHistoryApiUrlMethod(userId)}`);
+    // const orders = await res.json();
+    // return orders;
+
+    return (
+        [
+            {
+                id: "609968a89cc32e1ef8208e8b",
+                orderTrackingCode: "N/A",
+                orderStatus: "RECEIVED",
+                orderCreatedAt: 1620666536727,
+                orderUpdatedAt: 1620666536727,
+                customerId: "e-com-test-id2",
+                customerEmailAddress: "test@test.test",
+                orderItems: [
+                    {
+                        itemId: "AFP-989",
+                        itemName: "this item",
+                        itemSku: "AFP-989",
+                        itemQuantity: 2,
+                        itemPrice: 14.0
+                    }
+                ],
+                customerAddress: {
+                    street: "Grand",
+                    city: "chicago",
+                    state: "IL",
+                    zip: "90210"
+                }
+            }
+        ]
+    )
+}
\ No newline at end of file

ecom-web/src/util/order_history_util.js

+export const totalPrice = (items) => {
+    return items.reduce((acc,item) => {
+        return acc + (item.itemPrice * item.itemQuantity);
+    }, 0).toFixed(2);
+}
\ No newline at end of file