reroute after submit + file structure

api/supabase/queries/updateUserPlants.ts

@@ -1,23 +1,18 @@
 import { UUID } from 'crypto';
+import { UserPlants } from '@/types/schema';
 import supabase from '../createClient';
 
-interface FormData {
-  name: string;
-  date: string;
-  plant_type: string;
-  plantID: UUID;
-}
-
-export async function updateUserPlants(userId: UUID, formData: FormData[]) {
+export async function updateUserPlants(
+  userId: UUID,
+  formData: Partial<UserPlants>[],
+) {
   formData.map(async curr => {
-    const genUUID = crypto.randomUUID();
     const { error } = await supabase.from('user_plants').insert({
-      id: genUUID,
       user_id: userId,
-      plant_id: curr['plantID'],
-      date_added: curr['date'],
+      plant_id: curr['plant_id'],
+      date_added: curr['date_added'],
       date_harvested: null,
-      planting_type: curr['plant_type'],
+      planting_type: curr['planting_type'],
     });
     if (error) throw new Error(`Error inserting data: ${error.message}`);
   });

app/add-details/page.tsx

@@ -1,102 +1,115 @@
 'use client';
 
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { UUID } from 'crypto';
 import { updateUserPlants } from '@/api/supabase/queries/updateUserPlants';
-import PlantDetails from '@/components/PlantDetails/PlantDetails';
-import { Plant } from '@/types/schema';
-
-interface FormData {
-  name: string;
-  date: string;
-  plant_type: string;
-  plantID: UUID;
-}
+import PlantDetails from '@/components/PlantDetails';
+import { Plant, UserPlants } from '@/types/schema';
 
 export default function Home() {
   const [currentIndex, setCurrentIndex] = useState<number>(1);
-  const [details, setDetails] = useState<FormData[]>([]);
+  const [details, setDetails] = useState<Partial<UserPlants>[]>([]);
+  const router = useRouter();
+
   const plants: Plant[] = [
     {
       id: '43c19f80-8205-4d03-b323-05c220550bf0',
-      plant_name: 'Cabbage',
-      state: 'Tennessee',
+      plant_name: 'cabbbage',
+      us_state: 'string',
       harvest_season: 'SPRING',
-      water_frequency: '1',
-      weed_frequency: '1',
-      plant_seed_indoors_start: 'null',
-      plant_seed_indoors_end: 'null',
-      plant_seed_outdoors_start: 'null',
+      water_frequency: 'string',
+      weeding_frequency: 'string',
+      plant_seed_indoors_start: 'string',
+      plant_seed_indoors_end: 'string',
+      plant_seed_outdoors_start: 'string',
       plant_seed_outdoors_end: 'string',
       plant_transplant_start: 'string',
-      plant_transplant_end: 'null',
+      plant_transplant_end: 'string',
+      harvest_start: 'string',
+      harvest_end: 'string',
       beginner_friendly: true,
-      plant_tips: 'none',
+      plant_tips: 'string',
+      img: 'string',
       difficulty_level: 'HARD',
-      harvest_start: 'null',
-      harvest_end: 'null',
-      sunlight_min_hours: 5,
-      sunlight_max_hours: 6,
-      img: 'null',
+      sunlight_min_hours: 1,
+      sunlight_max_hours: 1,
     },
     {
       id: '43c19f80-8205-4d03-b323-05c220550bf0',
-      plant_name: 'Tomatoo',
-      state: 'Tennessee',
+      plant_name: 'tomatoooooo',
+      us_state: 'string',
       harvest_season: 'SPRING',
-      water_frequency: '1',
-      weed_frequency: '1',
-      plant_seed_indoors_start: 'null',
-      plant_seed_indoors_end: 'null',
-      plant_seed_outdoors_start: 'null',
+      water_frequency: 'string',
+      weeding_frequency: 'string',
+      plant_seed_indoors_start: 'string',
+      plant_seed_indoors_end: 'string',
+      plant_seed_outdoors_start: 'string',
       plant_seed_outdoors_end: 'string',
       plant_transplant_start: 'string',
-      plant_transplant_end: 'null',
+      plant_transplant_end: 'string',
+      harvest_start: 'string',
+      harvest_end: 'string',
       beginner_friendly: true,
-      plant_tips: 'none',
+      plant_tips: 'string',
+      img: 'string',
       difficulty_level: 'HARD',
-      harvest_start: 'null',
-      harvest_end: 'null',
-      sunlight_min_hours: 5,
-      sunlight_max_hours: 6,
-      img: 'null',
+      sunlight_min_hours: 1,
+      sunlight_max_hours: 1,
     },
   ];
   const user_id: UUID = 'e72af66d-7aae-45f6-935a-187197749d9f';
 
   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 name = plants[currentIndex - 1]['plant_name'];
       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] = {
-        name: name,
-        date: date,
-        plant_type: plant_type,
-        plantID: plantID,
+        date_added: date,
+        planting_type: plant_type,
+        plant_id: plantID,
       };
       setDetails(updatedDetails);
     }
+    //if param steps is less than 0 and ur not at start, move back
     if (steps < 0 && currentIndex != 1) {
-      setCurrentIndex(currentIndex - 1);
+      setCurrentIndex(currentIndex => currentIndex - 1);
+
+      //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 + 1);
+      setCurrentIndex(currentIndex => currentIndex + 1);
+
+      //retrieve input for that element
+      //updateInput()
     }
   }
   function updateDB(user_id: UUID) {
-    console.log(details);
+    //console.log(details)
     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 && (
         <div>
-          <PlantDetails plant={plants[currentIndex - 1]}></PlantDetails>
+          <PlantDetails
+            detail={getDetails()!}
+            plant={plants[currentIndex - 1]}
+          ></PlantDetails>
           <button onClick={() => move(-1)}>Back</button>
           <p>
             {currentIndex} / {plants.length}

app/view-plants/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { UUID } from 'crypto';
 import supabase from '@/api/supabase/createClient';
 import { getAllPlants, getPlantById } from '@/api/supabase/queries/plants';
-import PlantCard from '@/components/PlantCard/PlantCard';
+import PlantCard from '@/components/PlantCard';
 import { Plant } from '@/types/schema';
 
 export default function Page() {

components/PlantDetails/PlantDetails.tsx → components/PlantDetails/index.tsx

@@ -1,7 +1,16 @@
-import { Plant } from '@/types/schema';
+import { Plant, UserPlants } from '@/types/schema';
 
-export default function PlantDetails({ plant }: { plant: Plant }) {
+export default function PlantDetails({
+  detail,
+  plant,
+}: {
+  detail: Partial<UserPlants>;
+  plant: Plant;
+}) {
   function getDate() {
+    if (detail) {
+      return detail['date_added'];
+    }
     const curr = new Date();
     curr.setDate(curr.getDate());
     return curr.toISOString().substring(0, 10);
@@ -15,7 +24,7 @@ export default function PlantDetails({ plant }: { plant: Plant }) {
 
       <label htmlFor="plantingType">Planting type:</label>
       <select id="plantingType">
-        <option value={'TRANSPLANT'}>Transplant</option>
+        <option value="TRANSPLANT">Transplant</option>
         <option value="INDOORS">Indoors</option>
         <option value="OUTDOORS">Outdoors</option>
       </select>

types/schema.d.ts

@@ -26,3 +26,12 @@ export interface Plant {
   sunlight_min_hours: int;
   sunlight_max_hours: int;
 }
+
+export interface UserPlants {
+  id: UUID;
+  user_id: UUID;
+  plant_id: UUID;
+  date_added: string;
+  date_harvested: string;
+  planting_type: string;
+}