[AFP-26] 🚧 Fix errors on OrderIndexPage and OrderShowPage, add...

[AFP-26] 🚧 Fix errors on OrderIndexPage and OrderShowPage, add table to OrderShowPage, change OrderIndexPage table to relevant information [@kkaminski]

src/components/OrderDetails.tsx

 import React from 'react'
+import { Link } from 'react-router-dom'
 
-const OrderDetails = () => {
+const OrderDetails = (props: any) => {
+    const orderNumber = props.orderNumber
+    const date = props.date;
+    const status = props.status
     return (
-            <tr>
-                <td>6396964924168</td>
-                <td>shfd87tw878w</td>
-                <td>Apex One</td>
-            </tr>
+        <>
+            <td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></td>
+            <td>{date}</td>
+            <td>{status}</td>
+        </>
     )
 }
 

src/components/OrderShowDetails.tsx

+import React from 'react'
+
+const OrderShowDetails = (props: any) => {
+    const orderProductDetails = props.products.map((prod: any, 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>
+        )
+    })
+    
+    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>
+    )
+}
+
+export default OrderShowDetails

src/components/index.ts

@@ -2,4 +2,5 @@ export {default as AccountForm} from './AccountForm'
 export {default as LoginForm} from './LoginForm'
 export {default as Nav} from './Nav'
 export {default as OrderDetails} from './OrderDetails'
-export {default as SignUpForm} from './SignUpForm'
\ No newline at end of file
+export {default as SignUpForm} from './SignUpForm'
+export {default as OrderShowDetails} from './OrderShowDetails'
\ No newline at end of file

src/index.css

@@ -15,3 +15,8 @@ code {
 * {
   border: 2px solid orangered;
 }
+
+span {
+  display: flex;
+  justify-content: space-around;
+}

src/pages/OrderIndexPage.tsx

 import React from 'react'
 import {OrderDetails} from 'components'
+import { OrderService } from 'services';
 
 const OrderIndexPage = () => {
+    const allOrders =  OrderService.allOrders;
+    
+    const orderDetailsArr = allOrders.map((order: any, idx: any) => {
+        return <tr key={idx}><OrderDetails
+            date={order.date} 
+            orderNumber={order.orderNumber}
+            status="fulfilled"
+            /></tr>
+    })
+
     return (
         <table>
-            <tr>
-                <th>sku</th>
-                <th>upc</th>
-                <th>productName</th>
-            </tr>
-            <OrderDetails />
-            <OrderDetails />
-            <OrderDetails />
+            <tbody>
+                <tr>
+                    <th>order number</th>
+                    <th>date</th>
+                    <th>status</th>
+                </tr>
+                {orderDetailsArr}
+            </tbody>
+            
         </table>
         
     )

src/pages/OrderShowPage.tsx

 import React from 'react'
 import { OrderService } from 'services'
-import {OrderDetails} from 'components'
+import {OrderShowDetails} from 'components'
 
-const OrderShowPage = () => {
+const OrderShowPage = (props: any) => {
+    const location = parseInt(props.match.params.id)
+    const orderInfo = OrderService.orderById(location);
+    
+    console.log(props);
 
+    // orderInfo.
+
+    // const orderShowDetailsArr = orderInfo
+    
     // const [order, setOrder] = React.useState(null)
 
     // React.useEffect(() => {
@@ -16,16 +24,18 @@ const OrderShowPage = () => {
     //     }
     // })
 
+
+
     return (
-        <table>
-            <tr>
-                <th>sku</th>
-                <th>upc</th>
-                <th>productName</th>
-            </tr>
-            <OrderDetails />
-        </table>
-        
+        <>
+            <span>
+                <h3>Order Date: {orderInfo.date}</h3>
+                <h3>Order Number: {orderInfo.orderNumber}</h3>
+                <h3>Order Status: Fulfilled</h3>
+            </span>
+            
+            <OrderShowDetails products={orderInfo.orderItems}/>
+        </>
     )
 }
 

src/services/OrderService.ts

@@ -4,14 +4,19 @@ import orderData from './mock-order-data.json'
 //     sku: number
 // }
 
-export const allOrders = () => new Promise((res, rej) => {
-    setTimeout(() => { res(orderData) }, 2000)
-});
+// export const allOrders = () => new Promise((res, rej) => {
+//     setTimeout(() => { res(orderData) }, 2000)
+// });
 
-export const orderById = () => new Promise((res, rej) => {
-        setTimeout(() => { res(orderData[0]) }, 2000)
-    })
+export const allOrders = orderData;
 
+// export const orderById = () => new Promise((res, rej) => {
+//         setTimeout(() => { res(orderData[0]) }, 2000)
+//     })
+
+export const orderById = (idx: any) => {
+    return orderData[idx];
+}
 
 
 export default {

src/services/mock-order-data.json

 [
     {
-        "_id": "x588s78xvhs",
-        "sku": "2192649",
-        "upc": "221481649",
-        "productName": "Apex One",
-        "productDescription": "Janky",
-        "price": 5500.50,
-        "stock": 9,
-        "productImageUrl": "https://picsum.photos/300/300",
-        "brand": "Apex",
-        "category": "Security"
+        "date": "01/01/01",
+        "orderNumber": "0",
+        "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"
+            },
+            {
+                "_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"
+            }
+        ]
+    },
+    {
+        "date": "01/02/03",
+        "orderNumber": "1",
+        "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"
+            },
+            {
+                "_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"
+            }
+        ]
     }
-]
\ No newline at end of file
+    
+]
+