ADD: product selection draft on top of the PayPal button

src/components/api/index.js

@@ -0,0 +1 @@
+export { useGetProd } from "./products/useGetProd";

src/components/api/products/useGetProd.jsx

@@ -0,0 +1,30 @@
+// By JCH, 20211115
+// Using the ApolloClient Hook to create our own custom Hook
+
+import { gql, useQuery } from "@apollo/client";
+
+const getProductListAPI = () => gql`
+    query getProductList {
+        getProductList {
+        ID
+        productName
+        productDesc
+        picHiURL
+        picMeURL
+        picLoURL
+        price
+        discountedPrice
+        notes
+        }
+    }
+`;
+
+
+// custom hook for query
+const useGetProd = () => {
+  // I omitted the error in the return
+  const { loading, data } = useQuery(getProductListAPI());
+  return loading ? null : data.getProductList;
+};
+
+export { useGetProd };

src/components/products/allProducts.css

@@ -0,0 +1,24 @@
+
+thead {
+  color: rgb(19, 58, 19);
+}
+tbody {
+  color: blue;
+}
+
+tfoot {
+  color: red;
+}
+
+table,
+thead th,
+tbody td {
+  border: 1px solid white;
+  border-collapse:collapse;
+}
+
+thead th,
+tbody td {
+    background-color: rgb(220, 224, 228);
+    padding: 0.25rem 0.5rem;
+}

src/components/products/allProducts.jsx

@@ -1,11 +1,57 @@
 import React from 'react';
+import { useGetProd } from '../api';
+import './allProducts.css';
 
 const AllProducts = ( ) => {
+    const allProducts = useGetProd();
 
+    let ProductList = () => {
+        if (allProducts) {
+            return (
+                <table>
+                <thead>
+                <tr>
+                <th></th>
+                <th>ID</th>
+                <th>Model #</th>
+                <th>Description</th>
+                <th>Price</th>
+                </tr>
+                </thead>
+                <tbody>
+                { allProducts.map(product => {
+                   return ( 
+                       <tr key={product.ID}>
+                       <td>[ ]</td>
+                       <td>{product.ID}</td>
+                       <td>{product.productName}</td>
+                       <td>{product.productDesc}</td>
+                       <td>${product.price}</td>
+                       </tr>
+                       );
+                })
+
+                }
+                </tbody>
+                <tfoot></tfoot>
+                </table>
+            );
+        } else {
+            return (
+                <>
+                <p> Loading... </p>
+                </>
+            )
+        }
+
+    };
+    
     return (
         <div className="container">
         <hr />
-        <span className="danger">Fetch product list from https://api.oemautomation.com:3001 to this section.</span>
+        <span className="danger">Fetch product list from https://api.oemautomation.com:3001 </span>
+        <hr />
+        <ProductList />
         <hr />
 
         </div>