From d75bda419b0c298cd7603a8da20b383665a8b29a Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Fri, 7 Oct 2022 19:40:18 -0500
Subject: [PATCH] products map onto card components

---
 client/src/components/Product/AllProducts.tsx | 25 ++++++++++++++-----
 client/src/components/Product/ProductCard.tsx | 13 ++++++++++
 client/src/util/types.ts                      | 21 ++++++++++------
 3 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Product/AllProducts.tsx b/client/src/components/Product/AllProducts.tsx
index 2ba272a..a1e4047 100644
--- a/client/src/components/Product/AllProducts.tsx
+++ b/client/src/components/Product/AllProducts.tsx
@@ -1,8 +1,12 @@
 import { useEffect, useState } from "react"
+import { v4 } from "uuid";
 import { getAllProducts } from "../../util/apiUtils";
+import { ProductModel } from "../../util/types";
+import ProductCard from "./ProductCard";
 
 export default function AllProducts() {
-    const [productData, setProductData] = useState<Response>();
+    const [productData, setProductData] = useState<ProductModel[]>();
+    const [view, setView] = useState<JSX.Element>();
 
     useEffect(() => {
         getAllProducts()
@@ -11,10 +15,19 @@ export default function AllProducts() {
     }, [])
 
     useEffect(() => {
-        console.log(productData);
-    }, [productData])
+        setView(
+            <section>
+                <h1>All Products!</h1>
+                <div className="product-card-list">
+                    {
+                        productData && productData.map((data: ProductModel) => {
+                            return <ProductCard data={data} key={v4()} />
+                        })
+                    }
+                </div>
+            </section>
+        )
+    }, [productData, setProductData]);
 
-    return (
-        <h1>All Products!</h1>
-    )
+    return view;
 }
\ No newline at end of file
diff --git a/client/src/components/Product/ProductCard.tsx b/client/src/components/Product/ProductCard.tsx
index e69de29..5c966fd 100644
--- a/client/src/components/Product/ProductCard.tsx
+++ b/client/src/components/Product/ProductCard.tsx
@@ -0,0 +1,13 @@
+import { ProductCardType } from "../../util/types";
+
+const ProductCard: ProductCardType = ({ data }) => {
+    return (
+        <div className="product-card">
+            <h1>{data.name}</h1>
+            <p>{data.price}</p>
+            <p>{data.description}</p>
+        </div>
+    )
+}
+
+export default ProductCard;
\ No newline at end of file
diff --git a/client/src/util/types.ts b/client/src/util/types.ts
index 882efe6..2d671d4 100644
--- a/client/src/util/types.ts
+++ b/client/src/util/types.ts
@@ -1,10 +1,17 @@
-import { Session, SupabaseClient, User } from "@supabase/supabase-js";
 import { FC } from "react";
 
-export interface AppState {
-    supabase?: SupabaseClient
-    session?: Session
-    user?: User
-}
+// component types
+export type AuthFormType = FC<{ format: string }>
+export type ProductCardType = FC<{ data: ProductModel }>
 
-export type AuthFormType = FC<{ format: string }>
\ No newline at end of file
+// data models
+
+export interface ProductModel {
+    id: number
+    name: string
+    description: string
+    categoryid: number
+    regionid: number
+    price: number | string
+    inventory: number
+}
\ No newline at end of file