Connecting HomePage to back end to display a specific collection's gift

GenerateNU · Nov 10, 2023 · 14d6ff1 · 14d6ff1
1 parent 73c51d7
commit 14d6ff1
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 35 deletions.
diff --git a/client/src/components/UpdatedGiftItem.tsx b/client/src/components/UpdatedGiftItem.tsx
@@ -22,7 +22,7 @@ function UpdatedGiftItem({ name, price }: GiftItemProps) {
           />
         </svg>
       </div>
-      <div className="" style={{ marginLeft: "40px", marginBottom: "5px"}}>
+      <div className="">
         <h2 className="text-sm text-black font-bold">{name}</h2>
         <h2 className="text-xs text-black">${price}</h2>
       </div>

diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
@@ -8,38 +8,81 @@ import {useEffect, useState} from "react";
 import {GiftCollection} from "../types.tsx";
 
 const HomePage = () => {
-  const sampleCollections = [
-    { name: "Collection 1", gifts: [] },
-    { name: "Collection 2", gifts: [] },
-    { name: "Collection 3", gifts: [] },
-    { name: "Collection 4", gifts: [] },
-    { name: "Collection 5", gifts: [] },
-    { name: "Collection 6", gifts: [] },
-    { name: "Collection 7", gifts: [] },
-    { name: "Collection 8", gifts: [] },
-    { name: "Collection 9", gifts: [] },
-    { name: "Collection 10", gifts: [] },
-    { name: "Collection 11", gifts: [] },
-    { name: "Collection 12", gifts: [] },
-    { name: "Collection 13", gifts: [] },
-    { name: "Collection 14", gifts: [] },
-    { name: "Collection 15", gifts: [] },
+
+  const exampleGifts = [
+    {
+      ID: 1,
+      Name: "Customized Jewelry",
+      Price: 100,
+      Link: "https://example.com/customized-jewelry",
+      Occasion: "Anniversary",
+      Description: "A personalized piece of jewelry to celebrate your special day.",
+      Demographic: "Adults",
+      GiftCollections: [],
+      Category: ["Jewelry", "Personalized"]
+    },
+    {
+      ID: 2,
+      Name: "Tech Gadgets Set",
+      Price: 150,
+      Link: "https://example.com/tech-gadgets-set",
+      Occasion: "Birthday",
+      Description: "A bundle of cutting-edge tech gadgets for the tech enthusiast in your life.",
+      Demographic: "Tech Enthusiasts",
+      GiftCollections: [],
+      Category: ["Tech", "Gadgets"]
+    },
+    {
+      ID: 3,
+      Name: "Spa Day Experience",
+      Price: 80,
+      Link: "https://example.com/spa-day-experience",
+      Occasion: "Relaxation",
+      Description: "Treat your loved one to a rejuvenating spa day experience.",
+      Demographic: "All Ages",
+      GiftCollections: [],
+      Category: ["Wellness", "Experience"]
+    },
+    {
+      ID: 4,
+      Name: "Cooking Class Voucher",
+      Price: 60,
+      Link: "https://example.com/cooking-class-voucher",
+      Occasion: "Cooking Enthusiast",
+      Description: "A voucher for a fun and educational cooking class.",
+      Demographic: "Cooking Enthusiasts",
+      GiftCollections: [],
+      Category: ["Experience", "Cooking"]
+    },
+    {
+      ID: 5,
+      Name: "Book Lover's Subscription Box",
+      Price: 30,
+      Link: "https://example.com/book-lovers-subscription",
+      Occasion: "Bookworm's Delight",
+      Description: "A monthly subscription box filled with curated books and literary goodies.",
+      Demographic: "Book Lovers",
+      GiftCollections: [],
+      Category: ["Books", "Subscription"]
+    }
   ];
 
-  const gifts = [
-    { name: "Gift 1", price: 20 },
-    { name: "Gift 2", price: 50 },
-    { name: "Gift 3", price: 30 },
-    { name: "Gift 4", price: 100 },
-    { name: "Gift 5", price: 10 },
-    { name: "Gift 6", price: 30 },
-    { name: "Gift 7", price: 55 },
-    { name: "Gift 8", price: 80 },
-  ]
+  const exampleCustomer = {
+    ID: 1,
+    UserId: 1,
+  }
+
+  const exampleGiftCollection = {
+    ID: 1,
+    CustomerId: 1,
+    Customer: exampleCustomer,
+    CollectionName: 'Default',
+    Gifts: exampleGifts,
+  }
 
   const customerID = 1;
   const [collections, setCollections] = useState<GiftCollection[]>([]);
-  const [displayCollection, setDisplayCollection] = useState(sampleCollections[0]);
+  const [displayCollection, setDisplayCollection] = useState<GiftCollection>(exampleGiftCollection);
 
   useEffect(() => {
     getCollection();
@@ -69,22 +112,27 @@ const HomePage = () => {
         <div className="overflow-x-auto w-full">
           <div className="flex space-x-4">
             {collections.map((collection, index) => (
-              <CollectionItem key={index} name={collection.name} gifts={collection.gifts} />
+                <div
+                    className={`cursor-pointer ${collection === displayCollection ? 'font-bold' : ''}`}
+                    onClick={() => setDisplayCollection(collection)}>
+                  <CollectionItem  key={index} name={collection.CollectionName} gifts={collection.Gifts} />
+                </div>
             ))}
           </div>
         </div>
         <div className=" w-1000">
           <GiftSortNavBar />
         </div>
+
   <div className="overflow-y-auto" style={{ maxHeight: '290px', maxWidth: '1000px' }}>
-  <div className="flex flex-wrap -mx-2">
-    {displayCollection.gifts.map((gift, index) => (
-      <div key={index} className="w-1/4 px-2">
-        <UpdatedGiftItem name={gift.name} price={gift.price} />
+      <div className="flex flex-wrap justify-between gap-4">
+        {displayCollection.Gifts.map((gift, index) => (
+            <div key={index}>
+              <UpdatedGiftItem name={gift.Name} price={gift.Price} />
+            </div>
+        ))}
       </div>
-    ))}
   </div>
-</div>
       </div>
     </div>
   );