basic layout for product page, navigation flow from all products between indiv products

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()

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>
     )
 }

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>
     )
 }

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;
 }