From b428abb6ed7e463055a82a38d73c47211c21bef8 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Wed, 1 Jun 2022 17:10:19 -0500
Subject: [PATCH] dynamic routing for individual product pages

---
 client/src/App.tsx                            |  2 ++
 .../src/components/Products/ProductCard.tsx   |  7 +++++-
 .../src/components/Products/ProductPage.tsx   | 22 ++++++++++++++++++-
 client/src/types/main.d.ts                    |  6 ++++-
 client/src/util/apiUtils.ts                   | 11 ++++++++++
 routes/products.js                            | 13 +++++------
 6 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 186a773..89dd050 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -10,6 +10,7 @@ import Register from './components/User/Register';
 import UserProfile from './components/User/UserProfile';
 
 import './App.scss'
+import ProductPage from './components/Products/ProductPage';
 
 function App() {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -25,6 +26,7 @@ function App() {
             <Route path="/users/:userID" element={<UserProfile profile={state.user.id} />} />
             <Route path="/register" element={<Register/>} />
             <Route path="/products/" element={<Products />} />
+            <Route path="/products/:productID" element={<ProductPage />} />
           </Routes>
         </AppContext.Provider>
     </BrowserRouter>
diff --git a/client/src/components/Products/ProductCard.tsx b/client/src/components/Products/ProductCard.tsx
index f6ee762..cc5df56 100644
--- a/client/src/components/Products/ProductCard.tsx
+++ b/client/src/components/Products/ProductCard.tsx
@@ -1,5 +1,10 @@
+import { useNavigate } from "react-router-dom";
+import Route from 'react-router-dom';
+import ProductPage from "./ProductPage";
+
 export default function ProductCard({ productData }: any) {
     const { name, category, description, price, id } = productData;
+    const navigate = useNavigate();
 
     return (
         <div className="card product-card" key={`product-id-${id}`}>
@@ -9,7 +14,7 @@ export default function ProductCard({ productData }: any) {
             <p>{description}</p>
             <p>Price: {`$${price}` || "Free, apparently!"}</p>
             <div className="product-options">
-                <button>More info</button>
+                <button onClick={() => navigate(`/products/${id}`)}>More info</button>
                 <button>Add to Cart</button>
             </div>
         </div>
diff --git a/client/src/components/Products/ProductPage.tsx b/client/src/components/Products/ProductPage.tsx
index a4e2816..2ff8633 100644
--- a/client/src/components/Products/ProductPage.tsx
+++ b/client/src/components/Products/ProductPage.tsx
@@ -1,7 +1,27 @@
 import Page from "../../util/Page"
+import { getProductDetails } from "../../util/apiUtils"
+import { useEffect, useState } from "react"
+import { useParams } from "react-router-dom";
+import { Product } from "../../types/main";
 
 export default function ProductPage() {
+    const [info, setInfo] = useState<Product>();
+    const { productID }: any = useParams();
+
+    useEffect(() => {
+        getProductDetails(productID).then(res => setInfo(res));
+    }, [])
+
     return (
-        <Page></Page>
+        info ? 
+        <Page>
+            <h1>{info.name}</h1>
+            <h2>Category: {info.category}</h2>
+
+            <p>(a photo here)</p>
+            <p>{info.description}</p>
+            <p>Price: {info.price}</p>
+        </Page>
+        : <></>
     )
 }
\ No newline at end of file
diff --git a/client/src/types/main.d.ts b/client/src/types/main.d.ts
index b449f23..0648493 100644
--- a/client/src/types/main.d.ts
+++ b/client/src/types/main.d.ts
@@ -23,10 +23,14 @@ export type LoginHeaders = {
 
 // product info
 export type Product = {
-    productID?: number,
     name: string,
+    productID?: number,
+    category?: string
+    price?: string | number
     shortDescription?: string,
     longDescription?: string,
+    description?: string
+    minidescription?: string
     categoryID: number,
     inventory: number
 }
diff --git a/client/src/util/apiUtils.ts b/client/src/util/apiUtils.ts
index 27c011c..8308f61 100644
--- a/client/src/util/apiUtils.ts
+++ b/client/src/util/apiUtils.ts
@@ -56,3 +56,14 @@ export const getAllProducts = async () => {
 
     return serverCall;
 }
+
+export const getProductDetails = async (productID: string) => {
+    let serverCall = await fetch(`http://localhost:8088/products/${productID}`, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json"
+        }
+    }).then(res => res.json());
+
+    return serverCall;
+}
diff --git a/routes/products.js b/routes/products.js
index 624cd99..c631dfb 100644
--- a/routes/products.js
+++ b/routes/products.js
@@ -22,20 +22,17 @@ productsRouter.route('/').get(async (req, res) => {
 
 // route to get a product by id
 productsRouter.route('/:id').get(async (req, res) => {
-    const id = req.params.id;
+    const { id } = req.params;
+    const newClient = client();
 
     try {
-        newClient.connect((err) => {
-            if (err) throw err;
-            console.log("Connection successful.");
-        });
-
+        newClient.connect().then(console.log("Connection successful."));
         const result = await newClient.query(("SELECT * FROM products WHERE id = ($1)"), [id]);
-        res.send(result.rows);
+        res.send(result.rows[0]);
     } catch(e) {
         console.log(e);
     } finally {
-        newClient.end()
+        await newClient.end()
         .then(console.log("Client disconnected."));
     }
 });