From d7d7322d3a176b52af895cef1ed239e516a3675c Mon Sep 17 00:00:00 2001 From: jecheung9 Date: Wed, 3 Sep 2025 07:23:49 -0700 Subject: [PATCH 1/4] dashboard with amplify --- src/pages/Dashboard.tsx | 99 ++++++++++++++++------------------------- 1 file changed, 39 insertions(+), 60 deletions(-) diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 885df51..9203716 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -1,72 +1,51 @@ -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(); 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([]); + const [loading, setLoading] = useState(true); + + 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

Loading items...

; return (

Dashboard

- {mockItems.map((item) => ( - - ))} + {dashboardItems.length === 0 ? ( +

No items found.

+ ) : ( + dashboardItems.map((item) => ( + + )) + )}
From 069bb7b50a98cbaa3ce69fd504d603bcb2fdcd7c Mon Sep 17 00:00:00 2001 From: jecheung9 Date: Wed, 3 Sep 2025 09:53:29 -0700 Subject: [PATCH 2/4] dashboard testing --- src/components/ItemCard.tsx | 33 +++++++++++++++++++++------------ src/pages/Dashboard.tsx | 11 ++++++++++- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx index 2682b75..421dbf4 100644 --- a/src/components/ItemCard.tsx +++ b/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 = ({ + itemImageUrl, + itemName, + barcode, + description, + category, + storeName, + isDiscount, + itemPrice, + discountedPrice, +}) => { return (
- {item.itemName}/ -

{item.itemName}

-
{item.barcode}
-

{item.description}

-
{item.category} | {item.storeName}
+ {itemName}/ +

{itemName}

+
{barcode}
+

{description}

+
{category} | {storeName}
- {item.isDiscount && item.discountedPrice !== undefined ? ( + {isDiscount && discountedPrice !== undefined ? (
-

${item.discountedPrice}

- ${item.itemPrice} +

${discountedPrice}

+ ${itemPrice}
) : ( -

${item.itemPrice}

+

${itemPrice}

)}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 9203716..29df658 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -43,7 +43,16 @@ const Dashboard: React.FC = () => {

No items found.

) : ( dashboardItems.map((item) => ( - + )) )} From dbac852437b5cc52d5f637061c402dcc9b3e03cd Mon Sep 17 00:00:00 2001 From: jecheung9 Date: Fri, 5 Sep 2025 07:35:38 -0700 Subject: [PATCH 3/4] console logs and syntax issue --- src/pages/Dashboard.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 29df658..3c93e88 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -1,7 +1,7 @@ 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 { Schema } from '../../amplify/data/resource'; import type { ItemInputs } from "../types/item"; const client = generateClient(); @@ -10,6 +10,8 @@ const Dashboard: React.FC = () => { const [dashboardItems, setDashboardItems] = useState([]); const [loading, setLoading] = useState(true); + console.log(client.models); + const fetchItems = async () => { try { setLoading(true); @@ -27,7 +29,7 @@ const Dashboard: React.FC = () => { setLoading(false); } }; - + useEffect(() => { fetchItems(); }, []); From af4e02f5db204b17e2a567529677089fae12d818 Mon Sep 17 00:00:00 2001 From: jecheung9 Date: Fri, 5 Sep 2025 10:10:43 -0700 Subject: [PATCH 4/4] cleanup + change card layout, finish amplify dashboard --- src/components/ItemCard.tsx | 3 ++- src/index.css | 4 ++-- src/pages/Dashboard.tsx | 2 -- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx index 421dbf4..ee2bf04 100644 --- a/src/components/ItemCard.tsx +++ b/src/components/ItemCard.tsx @@ -27,7 +27,8 @@ const ItemCard: React.FC = ({

{itemName}

{barcode}

{description}

-
{category} | {storeName}
+
{category}
+
{storeName}
{isDiscount && discountedPrice !== undefined ? (
diff --git a/src/index.css b/src/index.css index 6051c60..64cb560 100644 --- a/src/index.css +++ b/src/index.css @@ -449,10 +449,10 @@ h1 { font-weight: 250; } -.item-category-and-store { +.item-category, .item-store { font-size: 1.1rem; font-weight: 600; - margin-bottom: 0.5rem; + margin-bottom: 0.7rem; } .item-price { diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx index 3c93e88..2b0188d 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard.tsx @@ -10,8 +10,6 @@ const Dashboard: React.FC = () => { const [dashboardItems, setDashboardItems] = useState([]); const [loading, setLoading] = useState(true); - console.log(client.models); - const fetchItems = async () => { try { setLoading(true);