package.json

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

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

src/components/admin/index.js

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

src/components/api/index.js

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

src/components/api/products/useGetProd.jsx

@@ -1,30 +0,0 @@
-// 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,22 +1,18 @@
 import React from "react";
 
-// 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}`;
+const Invoice = (props) => {
 
     return (
         <div className="container">
-            Date Purchased: {invoiceDetails.create_time}
+            Date Purchased: {props.date}
             <br />
-            Item: {invoiceDetails.purchase_units[0].description}
+            Item: {props.itemName}
             <br />
-            Amount Paid: ${invoiceDetails.purchase_units[0].amount.value}
+            Amount Paid: ${props.itemValue}
             <br />
-            Ship to: {invoiceDetails.purchase_units[0].shipping.name.full_name}
+            Ship to: {props.buyerName}
             <br />
-            {/* Shipping address: {streetAddr} {city}, {state} {postalCode} */}
-            Shpping address: {address}
+            Shipping address: {props.streetAddr} {props.city}, {props.state} {props.postalCode}
         </div>
     );
 }

src/components/mainPage/landing.jsx

@@ -1,26 +1,22 @@
 import React, { useState } from "react";
 import "./home.css";
 import { PayPal, Purchase, ShowCase, Home } from '.';
-import { AllProducts} from "../products"
 
-// component
-const Details = () => {
+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,8 +48,18 @@ const PayPal = () => {
           </div>
         </PayPalScriptProvider>
       </div>
-      {/* This is a nice touch */}
-      {showInvoice && <Invoice invoiceDetails={invoiceDetails} />}
+      {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}
+        />
+      }
     </>
   );
 };

src/components/products/allProducts.css

@@ -1,24 +0,0 @@
-
-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,61 +0,0 @@
-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

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

src/components/support/index.js

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

src/index.js

@@ -4,37 +4,9 @@ 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>
-   <ApolloProvider client={client}>
-     <App />
-   </ApolloProvider>
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 );