completed ticket using mocked tsx types

GenerateNU · Oct 12, 2023 · 2883c83 · 2883c83
1 parent ff23a97
commit 2883c83
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 23 deletions.
diff --git a/client/src/components/CollectionForm.tsx b/client/src/components/CollectionForm.tsx
@@ -12,34 +12,43 @@ type EditFormProps = {
   onClose: () => void;
 };
 
+const predefinedGifts = ["Gift 1", "Gift 2", "Gift 3", "Gift 4", "Gift 5"];
+
 function CollectionForm({ collection, onSave, onClose }: EditFormProps) {
   const [editedName, setEditedName] = useState(collection.name);
-  const [editedGifts, setEditedGifts] = useState(collection.gifts.join(', '));
+  const [editedGifts, setEditedGifts] = useState(collection.gifts);
 
   const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEditedName(e.target.value);
   };
 
-  const handleGiftsChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setEditedGifts(e.target.value);
+  const handleGiftsChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const selectedOptions = Array.from(e.target.options);
+    const selectedGifts = selectedOptions
+      .filter((option) => option.selected)
+      .map((option) => option.value);
+
+    // Here, we concatenate the selected gifts with the existing gifts
+    setEditedGifts([...editedGifts, ...selectedGifts]);
   };
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
     onSave({
       id: collection.id,
       name: editedName,
-      gifts: editedGifts.split(',').map((gift) => gift.trim()),
+      gifts: editedGifts,
     });
     onClose();
   };
 
-
   return (
     <div className="edit-form border border-black p-4 rounded-md text-center">
       <form onSubmit={handleSubmit}>
         <div className="mb-4">
-          <label htmlFor="name" className="block mb-2">Name:</label>
+          <label htmlFor="name" className="block mb-2">
+            Name:
+          </label>
           <input
             type="text"
             id="name"
@@ -49,16 +58,27 @@ function CollectionForm({ collection, onSave, onClose }: EditFormProps) {
           />
         </div>
         <div className="mb-4">
-          <label htmlFor="gifts" className="block mb-2">Gifts:</label>
-          <input
-            type="text"
+          <label htmlFor="gifts" className="block mb-2">
+            Select a Gift to Add:
+          </label>
+          <select
             id="gifts"
             className="border border-blue-500 rounded-md w-64 p-2 mx-auto"
+            multiple
             value={editedGifts}
             onChange={handleGiftsChange}
-          />
+          >
+            {predefinedGifts.map((gift) => (
+              <option key={gift} value={gift}>
+                {gift}
+              </option>
+            ))}
+          </select>
         </div>
-        <button type="submit" className="bg-blue-500 text-white p-2 rounded-md border border-black-500">
+        <button
+          type="submit"
+          className="bg-blue-500 text-white p-2 rounded-md border border-black-500"
+        >
           Save
         </button>
         <button

diff --git a/client/src/pages/CollectionsPage.tsx b/client/src/pages/CollectionsPage.tsx
@@ -2,6 +2,12 @@ import { useState } from 'react';
 import CollectionItem from '../components/CollectionItem';
 import EditForm from '../components/CollectionForm';
 
+type Collection = {
+    id: number;
+    name: string;
+    gifts: string[];
+  };
+
 const CollectionsPage = () => {
   const [collections, setCollections] = useState([
     {
@@ -77,15 +83,28 @@ const CollectionsPage = () => {
 
   ]);
 
-  const [showEditForm, setShowEditForm] = useState(false);
-  const [editCollectionId, setEditCollectionId] = useState(null);
+  const handleCreateCollection = () => {
+    const newCollection: Collection = {
+      id: Date.now(),
+      name: 'New Collection',
+      gifts: [],
+    };
 
-  const handleEditCollection = (collectionId) => {
+    // Add the new collection to the state
+    setCollections((prevCollections) => [...prevCollections, newCollection]);
+    setEditCollectionId(newCollection.id);
+    setShowEditForm(true);
+  };
+
+  const [showEditForm, setShowEditForm] = useState<boolean>(false);
+  const [editCollectionId, setEditCollectionId] = useState<number | null>(null);
+
+  const handleEditCollection = (collectionId: number) => {
     setEditCollectionId(collectionId);
     setShowEditForm(true);
   };
 
-  const handleSaveCollection = (updatedCollection) => {
+  const handleSaveCollection = (updatedCollection: Collection) => {
     setCollections((prevCollections) =>
       prevCollections.map((collection) =>
         collection.id === updatedCollection.id ? updatedCollection : collection
@@ -99,12 +118,12 @@ const CollectionsPage = () => {
     setShowEditForm(false);
   };
 
-  const handleDeleteCollection = (collectionId) => {
+  const handleDeleteCollection = (collectionId: number) => {
     setCollections((prevCollections) => prevCollections.filter((collection) => collection.id !== collectionId));
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="min-h-screen items-center justify-center">
       <div className="app" style={{ overflowX: "auto"}}>
         <div className="flex">
           {collections.map((collection) => (
@@ -124,15 +143,22 @@ const CollectionsPage = () => {
       </div>
       {showEditForm && (
         <div className="items-center justify-center">
-          <EditForm
-            collection={collections.find((c) => c.id === editCollectionId)}
-            onSave={handleSaveCollection}
-            onClose={handleCloseEditForm}
-          />
+          <div className="m-4">
+            <EditForm
+              collection={collections.find((c) => c.id === editCollectionId)!}
+              onSave={handleSaveCollection}
+              onClose={handleCloseEditForm}
+            />
+          </div>
         </div>
       )}
+      <div className="flex items-center justify-center mt-4">
+        <button onClick={handleCreateCollection} className="bg-blue-500 text-white p-2 rounded">
+          Create New Collection
+        </button>
+      </div>
     </div>
   );
 };
 
-export default CollectionsPage;
+export default CollectionsPage;