GPT-32: Amplify dashboard

src/components/ItemCard.tsx

@@ -1,4 +1,4 @@
-export interface Item {
+export interface ItemCardProps {
     itemImageUrl: string;
     itemName: string;
     barcode?: string;
@@ -8,25 +8,34 @@ export interface Item {
     isDiscount: boolean;
     itemPrice: number;
     discountedPrice?: number;
-
 }
 
-const ItemCard: React.FC<{ item: Item }> = ({ item }) => {
+const ItemCard: React.FC<ItemCardProps> = ({
+  itemImageUrl,
+  itemName,
+  barcode,
+  description,
+  category,
+  storeName,
+  isDiscount,
+  itemPrice,
+  discountedPrice,
+}) => {
     return (
         <div className="item-card">
-            <img src={item.itemImageUrl} alt={item.itemName}/>
-            <h2>{item.itemName}</h2>
-            <div className="item-barcode">{item.barcode}</div>
-            <p>{item.description}</p>
-            <div className="item-category-and-store">{item.category} | {item.storeName}</div>
+            <img src={itemImageUrl} alt={itemName}/>
+            <h2>{itemName}</h2>
+            <div className="item-barcode">{barcode}</div>
+            <p>{description}</p>
+            <div className="item-category-and-store">{category} | {storeName}</div>
             <div className="item-price">
-            {item.isDiscount && item.discountedPrice !== undefined ? (
+            {isDiscount && discountedPrice !== undefined ? (
                 <div>
-                <p>${item.discountedPrice}</p>
-                <s>${item.itemPrice}</s>
+                <p>${discountedPrice}</p>
+                <s>${itemPrice}</s>
                 </div> 
             ) : (
-                <p>${item.itemPrice}</p>
+                <p>${itemPrice}</p>
             )}
             </div>
         </div>

src/pages/Dashboard.tsx

@@ -1,72 +1,62 @@
-import React from "react"
+import React, { useState, useEffect } from "react"
 import ItemCard from "../components/ItemCard";
+import { generateClient } from 'aws-amplify/data';
+import type { Schema } from '../../amplify/data/resource';
+import type { ItemInputs } from "../types/item";
+
+const client = generateClient<Schema>();
 
 const Dashboard: React.FC = () => {
-    const mockItems = [
-    {
-      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/02d73bf0-bd26-47db-8e10-7bf55eaeef3e/NIKE+AVA+ROVER.png",
-      itemName: "Nike Ava Rover",
-      barcode: "1234567890123",
-      description: "description abjaskfdjksadfklaf.",
-      category: "Shoes",
-      storeName: "Store1",
-      isDiscount: true,
-      itemPrice: 120.0,
-      discountedPrice: 90.0,
-    },
-    {
-      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/057c2bbd-d065-44eb-913f-51dd4f98d680/AIR+FORCE+1+%2707.png",
-      itemName: "Nike Air Force 1",
-      barcode: "9876543210987",
-      description: "description 2",
-      category: "Shoes",
-      storeName: "Store 1",
-      isDiscount: false,
-      itemPrice: 180.0,
-    },
-    {
-      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/48675f08-6956-46ce-a6e4-7f44b602b4b4/NIKE+DUNK+LOW+RETRO.png",
-      itemName: "Nike Dunk Low Retro",
-      barcode: "5555555555555",
-      description: "description of a shoe jhskdfhaksdhfkdsafasdfsadf.",
-      category: "Shoes",
-      storeName: "Store 2",
-      isDiscount: true,
-      itemPrice: 20.0,
-      discountedPrice: 15.0,
-    },
-    {
-      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/9303732b-0301-4904-adc1-04e1e9ade540/NIKE+STRUCTURE+26.png",
-      itemName: "This is a long item name for testing",
-      barcode: "5555555555555",
-      description: "description of a shoe, this is a long description for testing 123abcdefghi.",
-      category: "Shoes",
-      storeName: "Store 1",
-      isDiscount: true,
-      itemPrice: 30.0,
-      discountedPrice: 15.0,
-      },
-    {
-      itemImageUrl: "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/9303732b-0301-4904-adc1-04e1e9ade540/NIKE+STRUCTURE+26.png",
-      itemName: "This is a 5th duplicate item to test grids",
-      barcode: "5555555555555",
-      description: "description of a shoe, this is a long description for testing 123abcdefghi.",
-      category: "Shoes",
-      storeName: "Store 1",
-      isDiscount: true,
-      itemPrice: 30.0,
-      discountedPrice: 15.0,
-    },
-    ];
+  const [dashboardItems, setDashboardItems] = useState<ItemInputs[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  console.log(client.models); 
+
+  const fetchItems = async () => {
+    try {
+      setLoading(true);
+      const { data: items } = await client.models.Item.list();
+      if (items && items.length > 0) {
+        setDashboardItems(items as ItemInputs[]);
+      } else {
+        setDashboardItems([]);
+        console.log("Issue: No items available");
+      }
+    } catch (error) {
+      console.error('Error fetching stores:', error);
+      setDashboardItems([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchItems();
+  }, []);
+
+  if (loading) return <p>Loading items...</p>;
 
   return (
     <main className="main">
       <section className="page-container">
         <h1 className="page-title">Dashboard</h1>
         <div className="items-grid">
-          {mockItems.map((item) => (
-            <ItemCard key={item.barcode} item={item}/>
-          ))}
+          {dashboardItems.length === 0 ? (
+            <p>No items found.</p>
+          ) : (
+            dashboardItems.map((item) => (
+              <ItemCard key={item.barcode}
+                itemImageUrl={item.itemImageUrl}
+                itemName={item.itemName}
+                barcode={item.barcode}
+                description={item.description}
+                category={item.category}
+                storeName={item.storeName}
+                isDiscount={item.isDiscount}
+                itemPrice={item.itemPrice}
+                discountedPrice={item.discountedPrice} />
+            ))
+          )}
         </div>
       </section>
     </main>