Merge branch '16-create-the-profile-context' of https://github.com/ca…

…lblueprint/trap-garden into 16-create-the-profile-context
calblueprint · Nov 16, 2024 · 87f92fd · 87f92fd
2 parents ffb2b73 + 850dc4f
commit 87f92fd
Show file tree

Hide file tree

Showing 17 changed files with 657 additions and 379 deletions.
diff --git a/api/supabase/queries/profiles.ts b/api/supabase/queries/profiles.ts
@@ -1,3 +1,4 @@
+import { UUID } from 'crypto';
 import { Profile } from '@/types/schema';
 import supabase from '../createClient';
 
@@ -12,3 +13,16 @@ export async function upsertProfile(profile: Profile) {
 
   return data;
 }
+
+export async function fetchProfileById(userId: UUID) {
+  const { data, error } = await supabase
+    .from('profiles')
+    .select('*')
+    .eq('user_id', userId)
+    .single();
+
+  if (error)
+    throw new Error(`Error fetching profile id ${userId}: ${error.message}`);
+
+  return data;
+}
diff --git a/app/add-details/page.tsx b/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>