[AFP-26] ✨ Front end now talks with back end for both OrderIndex and...

[AFP-26] ✨ Front end now talks with back end for both OrderIndex and OrderShow pages. [@kkaminski]

package.json

@@ -2,7 +2,6 @@
   "name": "order-management-client",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:8080",
   "dependencies": {
     "@chakra-ui/react": "^1.6.0",
     "@emotion/react": "^11",

src/@types/Order.d.ts

 declare module "Order" {
     export interface Order {
-        date: string,
-        orderNumber: string,
-        orderItems: Product[]
+        customerAddress: Address,
+        customerEmailAddress: string,
+        customerId: string,
+        id: string,
+        orderCreatedAt: number,
+        orderItems: Item[],
+        orderStatus: string,
+        orderTrackingCode: string,
+        orderUpdatedAt: number
     }
 
-    export interface Product {
-        _id: string,
-        sku: string,
-        upc: string,
-        productName: string,
-        productDescription: string,
-        price: number,
-        quantity: number,
-        productImageUrl: string,
-        brand: string,
-        category: string
+    export interface Address {
+        city: string,
+        state: string,
+        street: string,
+        zip: string
+    }
+
+    export interface Item {
+        itemId: string,
+        itemPrice: number,
+        itemQuantity: number,
+        itemSku: number
     }
 }
\ No newline at end of file

src/components/Nav.tsx

@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom'
 
 const Nav = () => {
     return (
-        <header role="navigation">
-            <div>Order Management Console PRO</div>
-            <ul>
-                <li><Link to="/orders">All orders</Link></li>
-                <li><Link to="/account">(account logo here)</Link></li>
-                <li><Link to="/">Login / Logout</Link></li>
+        <header className="nav-bar" role="navigation">
+            <div className="order-management">Order Management Console PRO</div>
+            <ul className="nav-list">
+                <li><Link className="nav-link" to="/orders">All orders</Link></li>
+                <li><Link className="nav-link" to="/account">(account logo here)</Link></li>
+                <li><Link className="nav-link" to="/">Login / Logout</Link></li>
             </ul>
         </header>
     )

src/components/OrderShowDetails.tsx

 import React, { useState, useEffect } from 'react';
-import { OrderService } from 'services';
-import { Product } from 'Order';
+import { Item } from 'Order';
 
 const OrderShowDetails = (props: any) => {
-    const [products, setProducts] = useState<Product[]>()
+    const [items, setItems] = useState<Item[]>()
     useEffect(() => {
-        setProducts(props.products)
-    }, [props.products])
+        setItems(props.items)
+    }, [props.items])
 
-    if (!products) {
-        return(<></>)
+    const itemMap = (items: Item[]) => {
+        return items.map((item: Item, idx: number) => {
+            return (
+                <tr key={idx}>
+                    <td>{item.itemId}</td>
+                    <td>{item.itemPrice}</td>
+                    <td>{item.itemQuantity}</td>
+                    <td>{item.itemSku}</td>
+                </tr>
+            )
+        });
     }
 
-    const orderProductDetails = products.map((prod: Product, idx: any) => {
-        return (
-            <tr key={idx}>
-                <td><img src={prod.productImageUrl} alt="img placeholder"/></td>
-                <td>{prod.productName}</td>
-                <td>{prod.productDescription}</td>
-                <td>{prod.sku}</td>
-                <td>{prod.upc}</td>
-                <td>{prod.price}</td>
-                <td>{prod.quantity}</td>
-            </tr>
-        )
-    })
+    const itemDetails = items ? itemMap(items) : <></>
     
     return (
-        <table>
-            <tbody>
-                <tr>
-                    <th>image</th>
-                    <th>productName</th>
-                    <th>description</th>
-                    <th>sku</th>
-                    <th>upc</th>
-                    <th>price</th>
-                    <th>quantity</th>
-                </tr>
-                {orderProductDetails}
-            </tbody>
-        </table>
+        items ? 
+            <table>
+                <tbody>
+                    <tr>
+                        <th>ID</th>
+                        <th>Price</th>
+                        <th>Quantity</th>
+                        <th>SKU</th>
+                    </tr>
+                    {itemDetails}
+                </tbody>
+            </table>
+        :
+            <div className="Order without items">
+                This order didn't contain any items.
+            </div>
     )
 }
 

src/index.css

@@ -5,14 +5,17 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: gray;
+  color: ghostwhite;
 }
 
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
 
-* {
+tbody, tr, th, span, td {
   border: 2px solid orangered;
 }
 
@@ -20,3 +23,53 @@ span {
   display: flex;
   justify-content: space-around;
 }
+
+header {
+  display: flex;
+  height: 50px;
+  background-color: gray;
+}
+
+ul {
+  list-style-type: none;
+  display: flex;
+  margin: auto;
+  height: 100%;
+}
+
+table {
+  width: 100%;
+  padding: 20px;
+}
+
+td {
+  height: 100px;
+}
+
+li {
+  border-left: 2px solid green;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.order-management {
+  padding-left: -30px;
+  padding-right: 75px;
+  margin: auto;
+  justify-content: left;
+}
+
+.nav-link {
+  margin: auto;
+  padding: 10px;
+  text-decoration: none;
+  color: ghostwhite;
+  background-color: lightslategray;
+  
+}
+
+.nav-link:hover {
+  background-color: black;
+}
\ No newline at end of file

src/pages/AccountPage.tsx

-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
 import {AccountForm} from 'components'
 const AccountPage = () => {
+    // const [appState, setAppState] = useState(0);
+    // useEffect(() => {
+    //     const apiUrl = 'http://localhost:8080/api/orders';
+    //     fetch(apiUrl).then((response) => response.json())
+    //         .then((data) => console.log('This is your data', data));
+    // }, [appState])
+
+    // const tester = ()=> {
+    //     setAppState(appState + 1);
+    // }
+
     return (
         <div>
+            {/* <button onClick={tester}>{appState}</button> */}
             <AccountForm />
         </div>
     )

src/pages/OrderIndexPage.tsx

 import React, {useState, useEffect} from 'react'
 import {OrderDetails} from 'components'
-import { OrderService } from 'services';
+import { Order } from 'Order';
 
 const OrderIndexPage = () => {
     let [orders, setOrders] = useState([]);
+
     useEffect(() => {
-        OrderService.allOrders().then((res: any) => {
-            console.log(res)
-            setOrders(res);
-        });
-    })
-    
-    
-    const orderDetailsArr = orders.map((order: any, idx: any) => {
+        const apiUrl = 'http://localhost:8080/api/orders';
+        fetch(apiUrl).then((response) => response.json())
+            .then((data) => {
+                console.log('This is your data', data)
+                setOrders(data);
+            });
+    }, [setOrders])
+
+    const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails
-            date={order.date} 
-            orderNumber={order.orderNumber}
-            status="fulfilled"
+            date={order.orderCreatedAt} 
+            orderNumber={order.id}
+            status={order.orderStatus}
             /></tr>
     })
 
     return (
-        <table>
-            <tbody>
-                <tr>
-                    <th>order number</th>
-                    <th>date</th>
-                    <th>status</th>
-                </tr>
-                {orderDetailsArr}
-            </tbody>
-            
-        </table>
-        
+        <>
+            <table>
+                <tbody>
+                    <tr>
+                        <th>Order number</th>
+                        <th>Created</th>
+                        <th>Order Status</th>
+                    </tr>
+                    {orderDetailsArr}
+                </tbody>
+            </table>
+        </>
     )
 }
 

src/pages/OrderShowPage.tsx

 import React, {useState, useEffect} from 'react';
-import { OrderService } from 'services';
 import {OrderShowDetails} from 'components';
-import { Order, Product } from 'Order';
+import { Order, Item } from 'Order';
 
 const OrderShowPage = (props: any) => {
-    const location = parseInt(props.match.params.id);
+    const location = props.match.params.id;
+    const apiUrl = 'http://localhost:8080/api/orders/' + location;
     const [order, setOrder] = useState<Order>();
-    const [products, setProducts] = useState<Product[]>()
+    const [items, setItems] = useState<Item[]>()
+
     useEffect(() => {
-        OrderService.orderById(location).then((res: any) => {
-            setOrder(res);
-            setProducts(res.orderItems);
-        })
-    })
+        fetch(apiUrl).then((response) => response.json())
+            .then((data) => {
+                console.log('This is your order', data)
+                setOrder(data);
+                setItems(data.orderItems)
+            });
+    }, [setOrder, setItems, apiUrl])
 
     if (!order) {
         return(<></>);
     }
-
+    
     return (
         <>
             <span>
-                <h3>Order Date: {order.date}</h3>
-                <h3>Order Number: {order.orderNumber}</h3>
-                <h3>Order Status: Fulfilled</h3>
+                <h3>Order Date: {order.orderCreatedAt}</h3>
+                <h3>Order Number: {order.id}</h3>
+                <h3>Order Status: {order.orderStatus}</h3>
             </span>
             
-            <OrderShowDetails products={products}/>
+            <OrderShowDetails items={items}/>
         </>
     )
 }

src/services/OrderService.ts

-import orderData from './mock-order-data'
+import orderList from './mock-order-data'
 import { Order } from 'Order';
 
 export const allOrders = () => new Promise<Order[]>((res, rej) => {
-    setTimeout(() => { res(orderData) }, 2000)
+    setTimeout(() => { res(orderList) }, 2000)
 });
 
-export const orderById = (id: number) => new Promise<Order>((res, rej) => {
-        setTimeout(() => { res(orderData[id]) }, 2000)
+export const orderById = (id: string) => new Promise<Order>((res, rej) => {
+        setTimeout(() => { 
+            const orderData = orderList.filter((order) => {
+                return order.id === id;
+            })
+            res(orderData[0])
+        }, 2000)
 })
 
 

src/services/mock-order-data.ts

@@ -2,64 +2,62 @@ import { Order } from 'Order'
 
 const orders: Order[] = [
     {
-        "date": "01/01/01",
-        "orderNumber": "0",
-        "orderItems": [
+        customerAddress: {
+            city: "Lynnwood",
+            state: "Washington",
+            street: "9944 Fiction Way",
+            zip: "98087"
+        },
+        customerEmailAddress: "amdog@gmail.com",
+        customerId: "holyjabronie",
+        id: "342341234",
+        orderCreatedAt: 245245253452452,
+        orderItems: [
             {
-                "_id": "x588s78xvhs",
-                "sku": "2192649",
-                "upc": "221481649",
-                "productName": "Apex One",
-                "productDescription": "Janky",
-                "price": 5500.50,
-                "quantity": 9,
-                "productImageUrl": "https://picsum.photos/100/100",
-                "brand": "Apex",
-                "category": "Security"
+                itemId: "string",
+                itemPrice: 23,
+                itemQuantity: 35,
+                itemSku: 944332
             },
             {
-                "_id": "akldfgjaf",
-                "sku": "111111",
-                "upc": "222333",
-                "productName": "1 Liter",
-                "productDescription": "Water bottle",
-                "price": 500000.50,
-                "quantity": 30,
-                "productImageUrl": "https://picsum.photos/100/100",
-                "brand": "Nalgene",
-                "category": "Hydration"
+                itemId: "number",
+                itemPrice: 99,
+                itemQuantity: 1000,
+                itemSku: 8943562
             }
-        ]
+        ],
+        orderStatus: "FULFILLED",
+        orderTrackingCode: "1Z1251432142343444",
+        orderUpdatedAt: 124563478
     },
     {
-        "date": "01/02/03",
-        "orderNumber": "1",
-        "orderItems": [
+        customerAddress: {
+            city: "San Francisco",
+            state: "CA",
+            street: "4325 Nonya Ave",
+            zip: "94112"
+        },
+        customerEmailAddress: "goodestboi96@hotmail.com",
+        customerId: "happypuppy",
+        id: "243523452",
+        orderCreatedAt: 245245253452452,
+        orderItems: [
             {
-                "_id": "apsdifua",
-                "sku": "333444",
-                "upc": "0101010101",
-                "productName": "Passport",
-                "productDescription": "US Passport (fake)",
-                "price": 5500.50,
-                "quantity": 9,
-                "productImageUrl": "https://picsum.photos/100/100",
-                "brand": "USAUSAUSA",
-                "category": "Security"
+                itemId: "Bottle",
+                itemPrice: 22,
+                itemQuantity: 55,
+                itemSku: 5566434
             },
             {
-                "_id": "poadsfs",
-                "sku": "55556666",
-                "upc": "3636363636",
-                "productName": "Octopus",
-                "productDescription": "glass octopus paper weight",
-                "price": 500000.50,
-                "quantity": 30,
-                "productImageUrl": "https://picsum.photos/100/100",
-                "brand": "Glass",
-                "category": "paper weights"
+                itemId: "Ruler",
+                itemPrice: 10,
+                itemQuantity: 8,
+                itemSku: 7895435
             }
-        ]
+        ],
+        orderStatus: "UNFULFILLED",
+        orderTrackingCode: "298523452345",
+        orderUpdatedAt: 124563478
     }
     
 ]