products map onto card components

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

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;

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 }>
+// data models
+
+export interface ProductModel {
+    id: number
+    name: string
+    description: string
+    categoryid: number
+    regionid: number
+    price: number | string
+    inventory: number
+}