ADD: order display on the screen

src/components/api/index.js

@@ -1 +1,3 @@
-export { useGetProd } from "./products/useGetProd";
+export { useGetProd } from "./products/useGetProd";
+export { useGetOrders } from "./orders/useGetOrders";
+export { useSetOrder } from "./orders/useSetOrder";

src/components/api/orders/useGetOrders.jsx

@@ -0,0 +1,31 @@
+// By JCH, 20211121
+// Using the ApolloClient Hook to create our own custom Hook
+
+import { gql, useQuery } from "@apollo/client";
+
+const getOrdersAPI = (orderID) => gql`
+    query getOrderInfo {
+        getOrderInfo(orderID:${orderID}) {
+            orderID
+            items {
+              productName
+              price
+            }
+            totalAmount
+            orderDate
+            email
+            orderByFirstName
+            orderByLastName
+          }
+    }
+`;
+
+
+// custom hook for query
+const useGetOrders = (orderID) => {
+  // I omitted the error in the return
+  const { loading, data } = useQuery(getOrdersAPI(orderID));
+  return loading ? null : data.getOrderInfo;
+};
+
+export { useGetOrders };

src/components/api/orders/useSetOrder.jsx

@@ -0,0 +1,25 @@
+// By JCH, 20211121
+// Using the ApolloClient Hook to create our own custom Hook
+
+import { gql, useMutation } from "@apollo/client";
+
+const setOrderInfoAPI = gql`
+  mutation setOrderInfo($orderInfo: orderInfoInput) {
+    setOrderInfo(orderInfo: $orderInfo)
+  }
+`;
+
+// custom hook for mutation
+const useSetOrder = () => {
+  // Hook for update
+  const setOrder = (orderInfo) => {
+    // call the hook
+    updateOrderData({ variables: { orderInfo: orderInfo } });
+  };
+
+  // Apollo useMutation Hook
+  const [updateOrderData, { results }] = useMutation(setOrderInfoAPI);
+  return [{ results }, setOrder];
+};
+
+export { useSetOrder };

src/components/mainPage/landing.jsx

@@ -1,18 +1,22 @@
 import React, { useState } from "react";
 import "./home.css";
-import { PayPal, Purchase, ShowCase, Home } from '.';
-import { AllProducts} from "../products"
+import { PayPal, Purchase, ShowCase, Home } from ".";
+import { AllProducts } from "../products";
+import { Orders } from "../orders";
 
 // component
 const Details = () => {
   const [cart, setCart] = useState([]);
+  const [orderID, setOrderID] = useState(null);
 
   return (
     <>
       <ShowCase />
-      <AllProducts setCart={setCart}/>
+      {/* you can try 600011 in orderID */}
+      <Orders orderID={orderID} setOrderID={setOrderID} />
+      <AllProducts setCart={setCart} />
       <Purchase />
-      <PayPal cart={cart}/>
+      <PayPal cart={cart} />
     </>
   );
 };

src/components/orders/index.js

@@ -0,0 +1 @@
+export {default as Orders} from './orders';

src/components/orders/orders.jsx

@@ -0,0 +1,99 @@
+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;