unstyled version of view plants

api/supabase/queries/plant_by_id.ts

@@ -5,7 +5,7 @@ import supabase from '../createClient';
 export async function get_plant_by_id(
   i_state: string,
   p_id: UUID,
-): Promise<Plant[]> {
+): Promise<Plant> {
   const { data, error } = await supabase.rpc('get_plant_by_id', {
     input_state: i_state,
     plant_id: p_id,

app/view-plants/page.tsx

@@ -1,26 +1,110 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { UUID } from 'crypto';
+import supabase from '@/api/supabase/createClient';
+import { get_plant_by_id } from '@/api/supabase/queries/plant_by_id';
+import { getPlantSeasonality } from '@/api/supabase/queries/plantSeasonality';
 import PlantCard from '@/components/PlantCard/PlantCard';
 import { Plant } from '@/types/schema';
 
 export default function Home() {
-  const plant: Plant = {
-    id: '3067b896-ba05-45b0-bb5c-e09277cf1e68',
-    plant_name: 'tomato',
-    state: 'tennessee',
-    harvest_season: 'SPRING',
-    water_num_times_per_week: 7,
-    plant_seed_indoors_start: 'January',
-    plant_seed_indoors_end: 'February',
-    plant_seed_outdoors_start: 'March',
-    plant_seed_outdoors_end: 'April',
-    plant_transplant_start: 'April',
-    plant_transplant_end: 'May',
-    harvest_start: 'April',
-    harvest_end: 'May',
-    water_inches_per_week: 7,
-    harvest_days_after_plant: 5,
-    sunlight_required: 'Yes',
-    beginner_friendly: true,
-    plant_tips: 'aerg',
+  const [selectedOption, setSelectedOption] = useState<'myPlants' | 'all'>(
+    'myPlants',
+  );
+  const [isSelected, setIsSelected] = useState<true | false>(false);
+
+  const [plants, setPlants] = useState<Plant[]>([]);
+  const [userPlants, setUserPlants] = useState<Plant[]>([]);
+  const user_id: UUID = 'e72af66d-7aae-45f6-935a-187197749d9f';
+  async function fetchUserPlants(user_id: UUID) {
+    const { data, error } = await supabase
+      .from('user_plants')
+      .select('plant_id')
+      .eq('user_id', user_id);
+
+    if (error) {
+      console.error('Error fetching plant IDs:', error);
+      return [];
+    }
+
+    const plantIds = data?.map(row => row.plant_id) || [];
+    if (plantIds.length === 0) {
+      return [];
+    }
+
+    const plantsUser: Plant[] = await Promise.all(
+      plantIds.map(plantId => get_plant_by_id('Tennessee', plantId)),
+    );
+    return plantsUser;
+  }
+  useEffect(() => {
+    const fetchPlantSeasonality = async () => {
+      const plantList = await getPlantSeasonality('Tennessee');
+      setPlants(plantList);
+    };
+
+    fetchPlantSeasonality();
+  }, []);
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await fetchUserPlants(user_id);
+      setUserPlants(result);
+    };
+    fetchData();
+  }, []);
+
+  // Handle button clicks
+  const handleClick = (option: 'myPlants' | 'all') => {
+    setSelectedOption(option);
+  };
+  const handleSelected = (isSelectedInput: true | false) => {
+    setIsSelected(isSelectedInput);
   };
-  return <PlantCard {...plant}></PlantCard>;
+  return (
+    <div className="main">
+      <div id="plantContent">
+        <div className="plantSelectionHeader">
+          <button onClick={() => handleClick('myPlants')}>My Plants</button>
+          <button onClick={() => handleClick('all')}>All</button>
+        </div>
+        <div className="componentsDisplay">
+          {selectedOption === 'myPlants' && userPlants.length == 0 && (
+            <div>
+              <button onClick={() => handleClick('all')}>Add Plants</button>
+            </div>
+          )}
+          {selectedOption === 'myPlants' && (
+            <div>
+              {userPlants.map((plant, key) => (
+                <PlantCard key={key} plantObj={plant} canSelect={false} />
+              ))}
+            </div>
+          )}
+          {selectedOption === 'all' && isSelected == true && (
+            <div>
+              {plants.map((plant, key) => (
+                <PlantCard key={key} plantObj={plant} canSelect={true} />
+              ))}
+              <div className="footer">
+                <button>Add to my plants</button>
+              </div>
+            </div>
+          )}
+          {selectedOption === 'all' && isSelected == false && (
+            <div>
+              {plants.map((plant, key) => (
+                <PlantCard key={key} plantObj={plant} canSelect={false} />
+              ))}
+              <div className="footer">
+                <button onClick={() => handleSelected(true)}>
+                  Add to my plants
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }

components/PlantCard/PlantCard.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import { Plant } from '@/types/schema';
 import styles from './PlantCardStyles.module.css';
 
-export default function PlantCard(plantObj: Plant) {
+export default function PlantCard({
+  plantObj,
+  canSelect,
+}: {
+  plantObj: Plant;
+  canSelect: boolean;
+}) {
+  console.log(canSelect);
   return (
     <div className={styles.Card}>
       <div className={styles.CardPic}>