diff --git a/src/components/OrderDetails.tsx b/src/components/OrderDetails.tsx
index 7b336225fa4674beef8c8abca532d1705bbc5728..7256deddca1816e3e2394d3266bb1bf800228077 100644
--- a/src/components/OrderDetails.tsx
+++ b/src/components/OrderDetails.tsx
@@ -1,12 +1,16 @@
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>
+ </>
)
}
diff --git a/src/components/OrderShowDetails.tsx b/src/components/OrderShowDetails.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1bbbebad76b31cd88e69b5eea06e2d2a3e25e9d3
--- /dev/null
+++ b/src/components/OrderShowDetails.tsx
@@ -0,0 +1,36 @@
+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
diff --git a/src/components/index.ts b/src/components/index.ts
index 98cda22b0cf3692e8c12f1f3e5f5e64c41b6cdf4..990328c3d651b8bba86840c3ec33d8c865af9ed5 100644
--- a/src/components/index.ts
+++ b/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
diff --git a/src/index.css b/src/index.css
index 62def7f843de5b909e6edab57bcca5d18a8097cf..5f22f98ce0ea1d77162bbc83aea983357cfd1f66 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,3 +15,8 @@ code {
* {
border: 2px solid orangered;
}
+
+span {
+ display: flex;
+ justify-content: space-around;
+}
diff --git a/src/pages/OrderIndexPage.tsx b/src/pages/OrderIndexPage.tsx
index bd1816ba92d26c8ae2b9a1b5a8b8d1f67a1304d5..7900dbf597f8cf9e6cb628af0344c65abe51ad3f 100644
--- a/src/pages/OrderIndexPage.tsx
+++ b/src/pages/OrderIndexPage.tsx
@@ -1,17 +1,29 @@
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>
)
diff --git a/src/pages/OrderShowPage.tsx b/src/pages/OrderShowPage.tsx
index c1ff29ea58ef8f0f6717cc089cb177769beead42..4b4af9974b44284a0830b41492c2fcd76393ed54 100644
--- a/src/pages/OrderShowPage.tsx
+++ b/src/pages/OrderShowPage.tsx
@@ -1,9 +1,17 @@
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}/>
+ </>
)
}
diff --git a/src/services/OrderService.ts b/src/services/OrderService.ts
index 89046e8a38a630d161970f11823459ae697a7ae0..6dbc68f4d6bc8db47d62b45bd1f9a21f75d3b57e 100644
--- a/src/services/OrderService.ts
+++ b/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 {
diff --git a/src/services/mock-order-data.json b/src/services/mock-order-data.json
index bbab1a1bdc6e1752a1db11b089815adf4f46b6d4..cf165b757487d1f085438c197e7e4af94a7ecf41 100644
--- a/src/services/mock-order-data.json
+++ b/src/services/mock-order-data.json
@@ -1,14 +1,64 @@
[
{
- "_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
+
+]
+