From d564ccc8ace694e8355153f073262533882e052f Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 7 Oct 2022 19:52:04 -0500
Subject: [PATCH] basic layout for product page, navigation flow from all
 products between indiv products

---
 client/src/components/Product/AllProducts.tsx |  2 +-
 client/src/components/Product/ProductCard.tsx |  5 ++++
 client/src/components/Product/ProductPage.tsx | 25 ++++++++++++++++++-
 client/src/util/apiUtils.ts                   | 16 ++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Product/AllProducts.tsx b/client/src/components/Product/AllProducts.tsx
index a1e4047..2d81f1a 100644
--- a/client/src/components/Product/AllProducts.tsx
+++ b/client/src/components/Product/AllProducts.tsx
@@ -6,7 +6,7 @@ import ProductCard from "./ProductCard";
 
 export default function AllProducts() {
     const [productData, setProductData] = useState<ProductModel[]>();
-    const [view, setView] = useState<JSX.Element>();
+    const [view, setView] = useState<JSX.Element>(<p>Loading...</p>);
 
     useEffect(() => {
         getAllProducts()
diff --git a/client/src/components/Product/ProductCard.tsx b/client/src/components/Product/ProductCard.tsx
index 5c966fd..81fe447 100644
--- a/client/src/components/Product/ProductCard.tsx
+++ b/client/src/components/Product/ProductCard.tsx
@@ -1,11 +1,16 @@
+import { useNavigate } from "react-router-dom";
 import { ProductCardType } from "../../util/types";
 
 const ProductCard: ProductCardType = ({ data }) => {
+    const navigate = useNavigate();
+
     return (
         <div className="product-card">
             <h1>{data.name}</h1>
             <p>{data.price}</p>
             <p>{data.description}</p>
+
+            <button onClick={() => navigate(`/products/${data.id}`)}>See More</button>
         </div>
     )
 }
diff --git a/client/src/components/Product/ProductPage.tsx b/client/src/components/Product/ProductPage.tsx
index 6ea4cf2..0465881 100644
--- a/client/src/components/Product/ProductPage.tsx
+++ b/client/src/components/Product/ProductPage.tsx
@@ -1,5 +1,28 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom"
+import { getByProductId } from "../../util/apiUtils";
+import { ProductModel } from "../../util/types";
+
 export default function ProductPage() {
+    const [productData, setProductData] = useState<ProductModel>();
+    const { productId } = useParams();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        productId && getByProductId(productId)
+        .then(res => res.json())
+        .then(res => setProductData(res));
+    }, [])
+
+    if (!productData) return <h1>Product not found.</h1>
+
     return (
-        <h1>Product Page!</h1>
+        <section className="product-page">
+            <h1>{productData.name}</h1>
+            <p>{productData.price}</p>
+            <p>{productData.description}</p>
+
+            <button onClick={() => navigate('/products')}>Return to Product Listing</button>
+        </section>
     )
 }
\ No newline at end of file
diff --git a/client/src/util/apiUtils.ts b/client/src/util/apiUtils.ts
index 649f588..fb578c0 100644
--- a/client/src/util/apiUtils.ts
+++ b/client/src/util/apiUtils.ts
@@ -1,4 +1,20 @@
+// product functions
 export const getAllProducts = async () => {
     const response = await fetch("https://mikayla-spice-market-api.herokuapp.com/product");
     return response;
+}
+
+export const getByProductId = async (id: string) => {
+    const response = await fetch(`https://mikayla-spice-market-api.herokuapp.com/product/${id}`);
+    return response;
+}
+
+// order functions
+export const getOrder = async () => {
+    return;
+}
+
+// cart functions
+export const getCart = async () => {
+    return;
 }
\ No newline at end of file