src/components/api/index.js

@@ -1,3 +1 @@
-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

@@ -1,31 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-// 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, { data }] = useMutation(setOrderInfoAPI);
-  return [{ data }, setOrder];
-};
-
-export { useSetOrder };

src/components/mainPage/landing.jsx

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

src/components/orders/index.js

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

src/components/orders/orders.jsx

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