[AFP-26] 🚧 Product type working

src/components/OrderShowDetails.tsx

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { OrderService } from 'services';
 import { Product } from 'Order';
 
 const OrderShowDetails = (props: any) => {
-    const orderProductDetails = props.products.map((prod: any, idx: any) => {
+    const [products, setProducts] = useState<Product[]>()
+    useEffect(() => {
+        setProducts(props.products)
+    }, [props.products])
+
+    if (!products) {
+        return(<></>)
+    }
+
+    const orderProductDetails = products.map((prod: Product, idx: any) => {
         return (
             <tr key={idx}>
                 <td><img src={prod.productImageUrl} alt="img placeholder"/></td>

src/pages/OrderShowPage.tsx

 import React, {useState, useEffect} from 'react';
 import { OrderService } from 'services';
 import {OrderShowDetails} from 'components';
-import { Order } from 'Order';
+import { Order, Product } from 'Order';
 
 const OrderShowPage = (props: any) => {
     const location = parseInt(props.match.params.id);
     const [order, setOrder] = useState<Order>();
+    const [products, setProducts] = useState<Product[]>()
     useEffect(() => {
         OrderService.orderById(location).then((res: any) => {
             setOrder(res);
+            setProducts(res.orderItems);
         })
     })
 
@@ -24,7 +26,7 @@ const OrderShowPage = (props: any) => {
                 <h3>Order Status: Fulfilled</h3>
             </span>
             
-            <OrderShowDetails products={order.orderItems}/>
+            <OrderShowDetails products={products}/>
         </>
     )
 }