[feat] refactor add plant details

app/add-details/page.tsx

@@ -7,126 +7,130 @@ import { updateUserPlants } from '@/api/supabase/queries/updateUserPlants';
 import PlantDetails from '@/components/PlantDetails';
 import { Plant, UserPlants } from '@/types/schema';
 
+const plants: Plant[] = [
+  {
+    id: 'cfed129c-1cdf-4089-89d2-83ae2fb2f83d',
+    plant_name: 'cabbage',
+    us_state: 'string',
+    harvest_season: 'SPRING',
+    water_frequency: 'string',
+    weeding_frequency: 'string',
+    indoors_start: 'string',
+    indoors_end: 'string',
+    outdoors_start: 'string',
+    outdoors_end: 'string',
+    transplant_start: 'string',
+    transplant_end: 'string',
+    harvest_start: 'string',
+    harvest_end: 'string',
+    beginner_friendly: true,
+    plant_tips: 'string',
+    img: 'string',
+    difficulty_level: 'HARD',
+    sunlight_min_hours: 1,
+    sunlight_max_hours: 1,
+  },
+  {
+    id: '8f25fca8-6e86-486b-9a2b-79f68efa3658',
+    plant_name: 'tomato',
+    us_state: 'string',
+    harvest_season: 'SPRING',
+    water_frequency: 'string',
+    weeding_frequency: 'string',
+    indoors_start: 'string',
+    indoors_end: 'string',
+    outdoors_start: 'string',
+    outdoors_end: 'string',
+    transplant_start: 'string',
+    transplant_end: 'string',
+    harvest_start: 'string',
+    harvest_end: 'string',
+    beginner_friendly: true,
+    plant_tips: 'string',
+    img: 'string',
+    difficulty_level: 'HARD',
+    sunlight_min_hours: 1,
+    sunlight_max_hours: 1,
+  },
+];
+const user_id: UUID = '0802d796-ace8-480d-851b-d16293c74a21';
+
 export default function Home() {
   const [currentIndex, setCurrentIndex] = useState<number>(1);
-  const [details, setDetails] = useState<Partial<UserPlants>[]>([]);
+  const [details, setDetails] = useState<Partial<UserPlants>[]>(
+    plants.map(plant => ({ plant_id: plant.id, user_id: user_id })),
+  );
   const router = useRouter();
 
-  const plants: Plant[] = [
-    {
-      id: '43c19f80-8205-4d03-b323-05c220550bf0',
-      plant_name: 'cabbbage',
-      us_state: 'string',
-      harvest_season: 'SPRING',
-      water_frequency: 'string',
-      weeding_frequency: 'string',
-      indoors_start: 'string',
-      indoors_end: 'string',
-      outdoors_start: 'string',
-      outdoors_end: 'string',
-      transplant_start: 'string',
-      transplant_end: 'string',
-      harvest_start: 'string',
-      harvest_end: 'string',
-      beginner_friendly: true,
-      plant_tips: 'string',
-      img: 'string',
-      difficulty_level: 'HARD',
-      sunlight_min_hours: 1,
-      sunlight_max_hours: 1,
-    },
-    {
-      id: '43c19f80-8205-4d03-b323-05c220550bf0',
-      plant_name: 'tomatoooooo',
-      us_state: 'string',
-      harvest_season: 'SPRING',
-      water_frequency: 'string',
-      weeding_frequency: 'string',
-      indoors_start: 'string',
-      indoors_end: 'string',
-      outdoors_start: 'string',
-      outdoors_end: 'string',
-      transplant_start: 'string',
-      transplant_end: 'string',
-      harvest_start: 'string',
-      harvest_end: 'string',
-      beginner_friendly: true,
-      plant_tips: 'string',
-      img: 'string',
-      difficulty_level: 'HARD',
-      sunlight_min_hours: 1,
-      sunlight_max_hours: 1,
-    },
-  ];
-  const user_id: UUID = 'e72af66d-7aae-45f6-935a-187197749d9f';
+  const getDefaultDate = () => new Date().toISOString().substring(0, 10);
 
+  // Navigate between plants and save input data
   function move(steps: number) {
-    // if ur not at the end of the plant details flow update details to store what was in the inputs
-    if (currentIndex != plants.length + 1) {
-      const updatedDetails = [...details];
-      const plantID = plants[currentIndex - 1]['id'];
-      const date = (document.getElementById('date')! as HTMLInputElement).value;
-      const plant_type = (
-        document.getElementById('plantingType')! as HTMLInputElement
-      ).value;
-      updatedDetails[currentIndex - 1] = {
-        date_added: date,
-        planting_type: plant_type,
-        plant_id: plantID,
-      };
-      setDetails(updatedDetails);
+    const currentDetail = details[currentIndex - 1];
+
+    // Set curr date in details to default date if not on submission page
+    if (
+      (!currentDetail || !currentDetail.date_added) &&
+      currentIndex <= plants.length
+    ) {
+      updateInput('date_added', getDefaultDate());
     }
-    //if param steps is less than 0 and ur not at start, move back
-    if (steps < 0 && currentIndex != 1) {
-      setCurrentIndex(currentIndex => currentIndex - 1);
+    // For valid moves, move to next page
+    if (
+      steps !== 0 &&
+      currentIndex + steps > 0 &&
+      currentIndex + steps <= plants.length + 1
+    ) {
+      setCurrentIndex(prevIndex => prevIndex + steps);
+    }
+  }
 
-      //retrieve input for that element
-      //updateInput()
-      //if param steps is more than 0 and ur not at the end, move forward
-    } else if (steps > 0 && currentIndex != plants.length + 1) {
-      setCurrentIndex(currentIndex => currentIndex + 1);
+  function disableNext() {
+    // disable next if planting type is "SELECT" or undefined
+    return !(
+      details[currentIndex - 1].planting_type &&
+      details[currentIndex - 1].planting_type !== 'SELECT'
+    );
+  }
 
-      //retrieve input for that element
-      //updateInput()
-    }
+  function updateInput(field: string, value: string) {
+    const updatedDetails = [...details];
+    updatedDetails[currentIndex - 1] = {
+      ...updatedDetails[currentIndex - 1],
+      [field]: value,
+    };
+    setDetails(updatedDetails);
   }
-  function updateDB(user_id: UUID) {
-    //console.log(details)
-    updateUserPlants(user_id, details);
+
+  async function updateDB() {
+    await updateUserPlants(user_id, details);
     router.push('/view-plants');
   }
-  function getDetails() {
-    if (details[currentIndex - 1]) {
-      return details[currentIndex - 1];
-    }
-    return undefined;
-  }
 
   return (
     <div>
-      {currentIndex != plants.length + 1 && (
+      {currentIndex !== plants.length + 1 && (
         <div>
           <PlantDetails
-            detail={getDetails()!}
             plant={plants[currentIndex - 1]}
-          ></PlantDetails>
+            date={details[currentIndex - 1].date_added || getDefaultDate()}
+            plantingType={details[currentIndex - 1].planting_type || 'SELECT'}
+            onDateChange={date => updateInput('date_added', date)}
+            onPlantingTypeChange={type => updateInput('planting_type', type)}
+          />
           <button onClick={() => move(-1)}>Back</button>
           <p>
             {currentIndex} / {plants.length}
           </p>
-          <button onClick={() => move(1)}>Next</button>
+          <button disabled={disableNext()} onClick={() => move(1)}>
+            Next
+          </button>
         </div>
       )}
-      {currentIndex == plants.length + 1 && (
+      {currentIndex === plants.length + 1 && (
         <div>
           <button onClick={() => move(-1)}>Back</button>
-          <button
-            onClick={() => {
-              updateDB(user_id);
-            }}
-          >
-            Submit
-          </button>
+          <button onClick={updateDB}>Submit</button>
         </div>
       )}
     </div>

components/PlantDetails/index.tsx

@@ -1,29 +1,37 @@
-import { Plant, UserPlants } from '@/types/schema';
+import { Plant } from '@/types/schema';
 
 export default function PlantDetails({
-  detail,
   plant,
+  date,
+  plantingType,
+  onDateChange,
+  onPlantingTypeChange,
 }: {
-  detail: Partial<UserPlants>;
   plant: Plant;
+  date: string;
+  plantingType: string;
+  onDateChange: (date: string) => void;
+  onPlantingTypeChange: (type: string) => void;
 }) {
-  function getDate() {
-    if (detail) {
-      return detail['date_added'];
-    }
-    const curr = new Date();
-    curr.setDate(curr.getDate());
-    return curr.toISOString().substring(0, 10);
-  }
   return (
     <div>
       <h2>{plant.plant_name}</h2>
 
       <label htmlFor="date">Date Planted:</label>
-      <input id="date" type="date" defaultValue={getDate()} />
+      <input
+        id="date"
+        type="date"
+        value={date}
+        onChange={e => onDateChange(e.target.value)}
+      />
 
       <label htmlFor="plantingType">Planting type:</label>
-      <select id="plantingType">
+      <select
+        id="plantingType"
+        value={plantingType}
+        onChange={e => onPlantingTypeChange(e.target.value)}
+      >
+        <option value="SELECT">Select option</option>
         <option value="TRANSPLANT">Transplant</option>
         <option value="INDOORS">Indoors</option>
         <option value="OUTDOORS">Outdoors</option>