Skip to content

GPT-32: Amplify dashboard #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devkobetran merged 5 commits into from
Sep 5, 2025
Merged

GPT-32: Amplify dashboard #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7d7322
dashboard with amplify
jecheung9 Sep 3, 2025
069bb7b
dashboard testing
jecheung9 Sep 3, 2025
0c6d332
Merge branch 'main' into GPT-32-Amplify-Create-a-view-dashboard-of-it…
devkobetran Sep 5, 2025
dbac852
console logs and syntax issue
jecheung9 Sep 5, 2025
af4e02f
cleanup + change card layout, finish amplify dashboard
jecheung9 Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 22 additions & 12 deletions src/components/ItemCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export interface Item {
export interface ItemCardProps {
itemImageUrl: string;
itemName: string;
barcode?: string;
Expand All @@ -8,25 +8,35 @@ 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">{category}</div>
<div className="item-store">{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>
Expand Down
4 changes: 2 additions & 2 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
108 changes: 48 additions & 60 deletions src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,60 @@
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);

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) => (
Copy link
Owner

@devkobetran devkobetran Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might need to double check the ItemCard component.
So dashboardItems might have more data fields than expected compared to what ItemCard is taking in.

But we might not want to pass all of the fields in, we just want to render some of it per what is described in the user story. You could extract the necessary fields needed from dashboardItems, and pass each desired field as a prop into ItemCard.

<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>
Expand Down