100 lines
2.3 KiB
JavaScript
100 lines
2.3 KiB
JavaScript
import React, {useEffect} from "react";
|
|
import { useGetOrders, useSetOrder } from "../api";
|
|
|
|
const sampleOrder = {
|
|
items: [
|
|
{ productName: "B1-14MR", price: 129.99 },
|
|
{ productName: "W2C", price: 29.99 },
|
|
{ productName: "PSU-24VDC", price: 19.99}
|
|
],
|
|
totalAmount: 179.97,
|
|
orderDate: "2021-11-22",
|
|
email: "pocketooth@gmail.com",
|
|
orderByFirstName: "John",
|
|
orderByLastName: "Huang",
|
|
};
|
|
|
|
// re-arrange to make invoice detail a self-contained element
|
|
const Orders = ({ orderID, setOrderID }) => {
|
|
const orders = useGetOrders(orderID);
|
|
const [results, setOrder] = useSetOrder();
|
|
|
|
useEffect(() => {
|
|
if (results.data) {
|
|
let orderID = results.data.setOrderInfo.split(':').pop();
|
|
setOrderID(orderID);
|
|
console.log("results:",orderID)
|
|
}
|
|
}, [results, setOrderID]); //didUpdate
|
|
|
|
const onClick = (event) => {
|
|
setOrder(sampleOrder);
|
|
console.log("sample order button clicked");
|
|
};
|
|
|
|
let getItems = (order) => {
|
|
return (
|
|
<>
|
|
{order.items?.map((item, index) => {
|
|
return (
|
|
<li key={index}>
|
|
{item.productName} - ${item.price}
|
|
</li>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
let MyOrders = () => {
|
|
if (orders) {
|
|
return (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>ID</th>
|
|
<th>items</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{orders.map((order) => {
|
|
return (
|
|
<tr key={order.orderID}>
|
|
<td></td>
|
|
<td>{order.orderID}</td>
|
|
<td>{getItems(order)}</td>
|
|
<td>${order.totalAmount}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
<tfoot></tfoot>
|
|
</table>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
<p> Loading... </p>
|
|
</>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<hr />
|
|
<span className="danger">
|
|
Fetch order list from https://api.oemautomation.com:3001{" "}
|
|
</span>
|
|
<hr />
|
|
<MyOrders />
|
|
<button onClick={onClick}>Call API to add one sample order</button>
|
|
<hr />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Orders;
|