From 9fc850708ced8af628f5e8679d84b2c1ac775297 Mon Sep 17 00:00:00 2001
From: hmcclew <122323895+hmcclew@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:40:16 -0400
Subject: [PATCH] updated to use mock gift type

---
 client/src/components/CollectionForm.tsx | 60 +++++++++++++++--
 client/src/components/CollectionItem.tsx | 45 ++++++++-----
 client/src/pages/CollectionsPage.tsx     | 85 ++++++++++++++++++------
 3 files changed, 146 insertions(+), 44 deletions(-)

diff --git a/client/src/components/CollectionForm.tsx b/client/src/components/CollectionForm.tsx
index e432286..901822f 100644
--- a/client/src/components/CollectionForm.tsx
+++ b/client/src/components/CollectionForm.tsx
@@ -1,9 +1,15 @@
 import React, { useState, ChangeEvent, FormEvent } from 'react';
 
+type Gift = {
+  name: string; 
+  description: string;
+  price: number; 
+};
+
 type Collection = {
   id: number;
   name: string;
-  gifts: string[];
+  gifts: Gift[];
 };
 
 type EditFormProps = {
@@ -12,7 +18,43 @@ type EditFormProps = {
   onClose: () => void;
 };
 
-const predefinedGifts = ["Gift 1", "Gift 2", "Gift 3", "Gift 4", "Gift 5"];
+const predefinedGifts: Gift[] = [
+  {
+    name: "Gift 1",
+    description: "Description of Gift 1",
+    price: 10,
+  },
+  {
+    name: "Gift 2",
+    description: "Description of Gift 2",
+    price: 20,
+  },
+  {
+    name: "Gift 3",
+    description: "Description of Gift 3",
+    price: 30,
+  },
+  {
+    name: "Gift 4",
+    description: "Description of Gift 4",
+    price: 40,
+  },
+  {
+    name: "Gift 5",
+    description: "Description of Gift 5",
+    price: 50,
+  },
+  {
+    name: "Gift 10",
+    description: "Description of Gift 1",
+    price: 10,
+  },
+  {
+    name: "Gift 11",
+    description: "Description of Gift 2",
+    price: 20,
+  },
+];
 
 function CollectionForm({ collection, onSave, onClose }: EditFormProps) {
   const [editedName, setEditedName] = useState(collection.name);
@@ -26,7 +68,11 @@ function CollectionForm({ collection, onSave, onClose }: EditFormProps) {
     const selectedOptions = Array.from(e.target.options);
     const selectedGifts = selectedOptions
       .filter((option) => option.selected)
-      .map((option) => option.value);
+      .map((option) => ({
+        name: option.value,
+        description: "",
+        price: 0,
+      }));
 
     // Here, we concatenate the selected gifts with the existing gifts
     setEditedGifts([...editedGifts, ...selectedGifts]);
@@ -65,12 +111,12 @@ function CollectionForm({ collection, onSave, onClose }: EditFormProps) {
             id="gifts"
             className="border border-blue-500 rounded-md w-64 p-2 mx-auto"
             multiple
-            value={editedGifts}
+            value={editedGifts.map((gift) => gift.name)}
             onChange={handleGiftsChange}
           >
-            {predefinedGifts.map((gift) => (
-              <option key={gift} value={gift}>
-                {gift}
+            {predefinedGifts.map((gift, index) => (
+              <option key={index} value={gift.name}>
+                {gift.name}
               </option>
             ))}
           </select>
diff --git a/client/src/components/CollectionItem.tsx b/client/src/components/CollectionItem.tsx
index fd38114..a49369c 100644
--- a/client/src/components/CollectionItem.tsx
+++ b/client/src/components/CollectionItem.tsx
@@ -1,22 +1,31 @@
+type Gift = {
+  name: string;
+  description: string;
+  price: number;
+};
+
 type CollectionItemProps = {
-    name: string;
-    gifts: string[];
-  };
-  
-  function CollectionItem({ name, gifts }: CollectionItemProps) {
-    return (
-      <div className="collection-item p-4 border border-black text-center w-40" style={{ height: "245px" }}>
-        <h2 className="text-2xl font-bold">{name}</h2>
-        <ul className="max-h-40 overflow-y-auto">
-          {gifts.map((gift, index) => (
-            <li key={index}>{gift}</li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-  
-  export default CollectionItem;
+  name: string;
+  gifts: Gift[];
+};
+
+function CollectionItem({ name, gifts }: CollectionItemProps) {
+  return (
+    <div className="collection-item p-4 border border-black text-center w-40" style={{ height: "245px" }}>
+      <h2 className="text-2xl font-bold">{name}</h2>
+      <ul className="max-h-40 overflow-y-auto">
+        {gifts.map((gift, index) => (
+          <li key={index}>
+            {gift.name}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default CollectionItem;
+
   
 
 
diff --git a/client/src/pages/CollectionsPage.tsx b/client/src/pages/CollectionsPage.tsx
index fb5e526..0d55fdc 100644
--- a/client/src/pages/CollectionsPage.tsx
+++ b/client/src/pages/CollectionsPage.tsx
@@ -2,83 +2,130 @@ import { useState } from 'react';
 import CollectionItem from '../components/CollectionItem';
 import EditForm from '../components/CollectionForm';
 
+type Gift = {
+  name: string;
+  description: string;
+  price: number;
+};
+
 type Collection = {
-    id: number;
-    name: string;
-    gifts: string[];
-  };
+  id: number;
+  name: string;
+  gifts: Gift[];
+};
+
+const predefinedGifts: Gift[] = [
+  {
+    name: "Gift 1",
+    description: "Description of Gift 1",
+    price: 10,
+  },
+  {
+    name: "Gift 2",
+    description: "Description of Gift 2",
+    price: 20,
+  },
+  {
+    name: "Gift 3",
+    description: "Description of Gift 3",
+    price: 30,
+  },
+  {
+    name: "Gift 4",
+    description: "Description of Gift 4",
+    price: 40,
+  },
+  {
+    name: "Gift 5",
+    description: "Description of Gift 5",
+    price: 50,
+  },
+];
+
+const predefinedGifts2: Gift[] = [
+  {
+    name: "Gift 10",
+    description: "Description of Gift 1",
+    price: 10,
+  },
+  {
+    name: "Gift 11",
+    description: "Description of Gift 2",
+    price: 20,
+  },
+];
 
 const CollectionsPage = () => {
   const [collections, setCollections] = useState([
     {
       id: 1,
       name: 'Birthday Gifts',
-      gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+      gifts: [],
     },
     {
       id: 2,
       name: 'Christmas Gifts',
-      gifts: ['Sweater', 'Toys', 'Cookies'],
+      gifts: predefinedGifts,
     },
     {
         id: 3,
         name: 'Birthday Gifts',
-        gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+        gifts: predefinedGifts2,
       },
       {
         id: 4,
         name: 'Christmas Gifts',
-        gifts: ['Sweater', 'Toys', 'Cookies'],
+        gifts: predefinedGifts,
       },
       {
         id: 5,
         name: 'Birthday Gifts',
-        gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+        gifts: predefinedGifts,
       },
       {
         id: 6,
         name: 'Christmas Gifts',
-        gifts: ['Sweater', 'Toys', 'Cookies'],
+        gifts: predefinedGifts,
       },
       {
         id: 7,
         name: 'Birthday Gifts',
-        gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+        gifts: predefinedGifts,
       },
       {
         id: 8,
         name: 'Christmas Gifts',
-        gifts: ['Sweater', 'Toys', 'Cookies'],
+        gifts: predefinedGifts,
       },
       {
         id: 9,
         name: 'Birthday Gifts',
-        gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+        gifts: predefinedGifts,
       },
       {
         id: 10,
         name: 'Christmas Gifts',
-        gifts: ['Sweater', 'Toys', 'Cookies'],
+        gifts: predefinedGifts,
       },
       {
         id: 11,
         name: 'Birthday Gifts',
-        gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+        gifts: predefinedGifts
       },
       {
         id: 12,
         name: 'Christmas Gifts',
-        gifts: ['Sweater', 'Toys', 'Cookies'],
+        gifts: predefinedGifts
       },
       {
         id: 13,
         name: 'Birthday Gifts',
-        gifts: ['Toy car', 'Art supplies', 'Book', 'Candy'],
+        gifts: predefinedGifts,
       },
       {
         id: 14,
         name: 'Christmas Gifts',
-        gifts: ['Sweater', 'Toys', 'Cookies'],
+        gifts: predefinedGifts,
       },
       
   ]);
@@ -124,7 +171,7 @@ const CollectionsPage = () => {
 
   return (
     <div className="min-h-screen items-center justify-center">
-      <div className="app" style={{ overflowX: "auto"}}>
+      <div className="app" style={{ overflowX: "auto" }}>
         <div className="flex">
           {collections.map((collection) => (
             <div key={collection.id} className="m-4 flex-shrink-0 ">