ADD: product selection draft on top of the PayPal button

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.4.17",
     "@mrmlnc/readdir-enhanced": "^2.2.1",
     "@paypal/react-paypal-js": "^7.4.2",
     "@testing-library/jest-dom": "^5.15.0",

src/components/account/index.js

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

src/components/admin/index.js

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

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/mainPage/invoice.jsx

@@ -1,18 +1,22 @@
 import React from "react";
 
-const Invoice = (props) => {
+// re-arrange to make invoice detail a self-contained element
+const Invoice = ( {invoiceDetails} ) => {
+    let addressInfo = invoiceDetails.purchase_units[0].shipping.address;
+    let address = `${addressInfo.address_line_1} ${addressInfo.admin_area_2}, ${addressInfo.admin_area_1} ${addressInfo.postal_code}`;
 
     return (
         <div className="container">
-            Date Purchased: {props.date}
+            Date Purchased: {invoiceDetails.create_time}
             <br />
-            Item: {props.itemName}
+            Item: {invoiceDetails.purchase_units[0].description}
             <br />
-            Amount Paid: ${props.itemValue}
+            Amount Paid: ${invoiceDetails.purchase_units[0].amount.value}
             <br />
-            Ship to: {props.buyerName}
+            Ship to: {invoiceDetails.purchase_units[0].shipping.name.full_name}
             <br />
-            Shipping address: {props.streetAddr} {props.city}, {props.state} {props.postalCode}
+            {/* Shipping address: {streetAddr} {city}, {state} {postalCode} */}
+            Shpping address: {address}
         </div>
     );
 }

src/components/mainPage/landing.jsx

@@ -1,22 +1,26 @@
 import React, { useState } from "react";
 import "./home.css";
 import { PayPal, Purchase, ShowCase, Home } from '.';
+import { AllProducts} from "../products"
 
-const details = () => {
+// component
+const Details = () => {
   return (
     <>
       <ShowCase />
+      <AllProducts />
       <Purchase />
       <PayPal />
     </>
   );
 };
+
 const Landing = () => {
   const [showDetails, setShowDetails] = useState(false);
 
   return (
     <>
-      {showDetails ? details() : <Home goNext={() => setShowDetails(true)} />}
+      {showDetails ? <Details /> : <Home goNext={() => setShowDetails(true)} />}
     </>
   );
 };

src/components/mainPage/paypal.jsx

@@ -48,18 +48,8 @@ const PayPal = () => {
           </div>
         </PayPalScriptProvider>
       </div>
-      {showInvoice && 
-        <Invoice 
-          date={invoiceDetails.create_time}
-          itemName={invoiceDetails.purchase_units[0].description}
-          itemValue={invoiceDetails.purchase_units[0].amount.value}
-          buyerName={invoiceDetails.purchase_units[0].shipping.name.full_name}
-          streetAddr={invoiceDetails.purchase_units[0].shipping.address.address_line_1}
-          city={invoiceDetails.purchase_units[0].shipping.address.admin_area_2}
-          state={invoiceDetails.purchase_units[0].shipping.address.admin_area_1}
-          postalCode={invoiceDetails.purchase_units[0].shipping.address.postal_code}
-        />
-      }
+      {/* This is a nice touch */}
+      {showInvoice && <Invoice invoiceDetails={invoiceDetails} />}
     </>
   );
 };

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

@@ -0,0 +1,61 @@
+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 </span>
+        <hr />
+        <ProductList />
+        <hr />
+
+        </div>
+    );
+}
+
+export default AllProducts;

src/components/products/index.js

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

src/components/support/index.js

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

src/index.js

@@ -4,9 +4,37 @@ import './index.css';
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client";
+import { ApolloProvider } from "@apollo/client/react";
+import { setContext } from "@apollo/client/link/context";
+
+const httpLink = createHttpLink({
+  uri: "https://api.oemautomation.com:3001",
+});
+
+const authLink = setContext((_, { headers }) => {
+  // get the authentication token from local storage if it exists
+  const token = localStorage.getItem("token");
+  // return the headers to the context so httpLink can read them
+  return {
+    headers: {
+      ...headers,
+      authtoken: "to do here",
+      authorization: token ? `Bearer ${token}` : "",
+    },
+  };
+});
+
+const client = new ApolloClient({
+  link: authLink.concat(httpLink),
+  cache: new InMemoryCache(),
+});
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+   <ApolloProvider client={client}>
+     <App />
+   </ApolloProvider>
   </React.StrictMode>,
   document.getElementById('root')
-);
+);