From d78ac361a4e28d6067af24bd8e159240030648dc Mon Sep 17 00:00:00 2001
From: Sashank Balusu <sashankbalusu@gmail.com>
Date: Sat, 21 Dec 2024 22:20:03 -0800
Subject: [PATCH] refactor back to details array

---
 app/add-details/page.tsx              | 58 ++++++++-------------------
 components/ReviewAddDetails/index.tsx | 20 +++++----
 2 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/app/add-details/page.tsx b/app/add-details/page.tsx
index 124cbb1..45c9545 100644
--- a/app/add-details/page.tsx
+++ b/app/add-details/page.tsx
@@ -29,14 +29,8 @@ export default function Home() {
     router.push('/view-plants');
   }
   const [currentIndex, setCurrentIndex] = useState<number>(1);
-  const [details, setDetails] = useState<Record<string, Partial<UserPlant>>>(
-    plantsToAdd.reduce(
-      (acc, plant) => ({
-        ...acc,
-        [plant.id]: { plant_id: plant.id, user_id: userId! },
-      }),
-      {},
-    ),
+  const [details, setDetails] = useState<Partial<UserPlant>[]>(
+    plantsToAdd.map(plant => ({ plant_id: plant.id, user_id: userId! })),
   );
 
   const plantDictionary: Record<UUID, string> = {};
@@ -51,13 +45,9 @@ export default function Home() {
     // Set curr date in details to default date if not on submission page
 
     if (currentIndex <= plantsToAdd.length) {
-      const currentDetail = details[plantsToAdd[currentIndex - 1].id];
+      const currentDetail = details[currentIndex - 1];
       if (!currentDetail || !currentDetail.date_added) {
-        updateInput(
-          'date_added',
-          getDefaultDate(),
-          plantsToAdd[currentIndex - 1].id,
-        );
+        updateInput('date_added', getDefaultDate(), currentIndex - 1);
       }
     }
 
@@ -74,22 +64,21 @@ export default function Home() {
   // disable next if planting type not selected (undefined)
   const disableNext =
     currentIndex <= plantsToAdd.length &&
-    !details[plantsToAdd[currentIndex - 1].id].planting_type;
+    !details[currentIndex - 1].planting_type;
 
-  function updateInput(field: string, value: string, plant_id: UUID) {
-    setDetails(prevDetails => ({
-      ...prevDetails,
-      [plant_id]: {
-        ...prevDetails[plant_id],
-        [field]: value,
-      },
-    }));
+  function updateInput(field: string, value: string, index: number) {
+    const updatedDetails = [...details];
+    updatedDetails[index] = {
+      ...updatedDetails[index],
+      [field]: value,
+    };
+    setDetails(updatedDetails);
   }
   const handleSubmit = async () => {
     // TODO: elegantly handle not logged in case (e.g. when someonee clicks "Back")
     // instead of doing userId!
     try {
-      await insertUserPlants(userId!, Object.values(details));
+      await insertUserPlants(userId!, details);
       router.push('/view-plants');
     } catch (error) {
       console.error('Error inserting user plants:', error);
@@ -109,26 +98,13 @@ export default function Home() {
             </Flex>
             <PlantDetails
               plant={plantsToAdd[currentIndex - 1]}
-              date={
-                details[plantsToAdd[currentIndex - 1].id].date_added ??
-                getDefaultDate()
-              }
-              plantingType={
-                details[plantsToAdd[currentIndex - 1].id].planting_type ?? ''
-              }
+              date={details[currentIndex - 1].date_added ?? getDefaultDate()}
+              plantingType={details[currentIndex - 1].planting_type ?? ''}
               onDateChange={date =>
-                updateInput(
-                  'date_added',
-                  date,
-                  plantsToAdd[currentIndex - 1].id,
-                )
+                updateInput('date_added', date, currentIndex - 1)
               }
               onPlantingTypeChange={type =>
-                updateInput(
-                  'planting_type',
-                  type,
-                  plantsToAdd[currentIndex - 1].id,
-                )
+                updateInput('planting_type', type, currentIndex - 1)
               }
             />
           </Flex>
diff --git a/components/ReviewAddDetails/index.tsx b/components/ReviewAddDetails/index.tsx
index efa2d61..b2a7099 100644
--- a/components/ReviewAddDetails/index.tsx
+++ b/components/ReviewAddDetails/index.tsx
@@ -12,8 +12,8 @@ export default function ReviewAddDetails({
   updateInput,
   plantDictionary,
 }: {
-  details: Record<string, Partial<UserPlant>>;
-  updateInput: (field: string, value: string, plant_id: UUID) => void;
+  details: Partial<UserPlant>[];
+  updateInput: (field: string, value: string, index: number) => void;
   plantDictionary: Record<UUID, string>;
 }) {
   const plantingTypeOptions: DropdownOption<PlantingTypeEnum>[] = [
@@ -24,22 +24,20 @@ export default function ReviewAddDetails({
 
   return (
     <ReviewContainer>
-      {Object.entries(details).map(([plant_id, detail]) => (
-        <Flex $direction="column" $gap="8px" $mb="16px" key={plant_id}>
-          <P1 $color={COLORS.shrub}>{plantDictionary[plant_id as UUID]}</P1>
+      {details.map((detail, index) => (
+        <Flex $direction="column" $gap="8px" $mb="16px" key={detail.plant_id}>
+          <P1 $color={COLORS.shrub}>
+            {plantDictionary[detail.plant_id as UUID]}
+          </P1>
           <CustomSelect
             label="Planting Type"
             value={detail.planting_type as string}
             options={plantingTypeOptions}
-            onChange={value =>
-              updateInput('planting_type', value, plant_id as UUID)
-            }
+            onChange={value => updateInput('planting_type', value, index)}
           />
           <DateInput
             value={detail.date_added as string}
-            onChange={value =>
-              updateInput('date_added', value, plant_id as UUID)
-            }
+            onChange={value => updateInput('date_added', value, index)}
           />
         </Flex>
       ))}