[feat] Create my plants and all plants tabs

api/supabase/queries/plant_by_id.ts

@@ -0,0 +1,19 @@
+import { UUID } from 'crypto';
+import { Plant } from '@/types/schema';
+import supabase from '../createClient';
+
+export async function get_plant_by_id(
+  i_state: string,
+  p_id: UUID,
+): Promise<Plant> {
+  const { data, error } = await supabase.rpc('get_plant_by_id', {
+    input_state: i_state,
+    plant_id: p_id,
+  });
+
+  if (error) {
+    throw new Error(`Error getting matching plant: ${error.message}`);
+  }
+
+  return data;
+}

app/view-plants/page.tsx

@@ -0,0 +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 [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 (
+    <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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Plant } from '@/types/schema';
+import styles from './PlantCardStyles.module.css';
+
+export default function PlantCard({
+  plantObj,
+  canSelect,
+}: {
+  plantObj: Plant;
+  canSelect: boolean;
+}) {
+  console.log(canSelect);
+  return (
+    <div className={styles.Card}>
+      <div className={styles.CardPic}>
+        <img alt={plantObj.plant_name}></img>
+      </div>
+      <div className={styles.cardContent}>
+        <h2>{plantObj.plant_name}</h2>
+        <div className={styles.plantAttributes}>
+          <div className={styles.attribute}>
+            {/* icon */}
+            <p>{plantObj.harvest_start + ' - ' + plantObj.harvest_end}</p>
+          </div>
+          <div className={styles.attribute}>
+            {/* icon */}
+            <p>{plantObj.water_num_times_per_week + ' times / wk'}</p>
+          </div>
+          <div className={styles.attribute}>
+            {/* icon */}
+            <p>{plantObj.sunlight_required}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/PlantCard/PlantCardStyles.module.css

@@ -0,0 +1,52 @@
+.Card {
+  height: 40vh;
+  width: 20vw;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  border-radius: 12px;
+  background-color: white;
+  box-shadow:
+    0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12),
+    0 11px 15px -7px rgba(0, 0, 0, 0.2);
+}
+
+.CardPic {
+  height: 60%;
+  width: 100%;
+  background-color: #f5f6f6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.cardContent {
+  display: flex;
+  flex-direction: column;
+  padding-left: 20px;
+  height: 40%;
+  row-gap: 10px;
+}
+.cardContent > * {
+  margin: 0;
+}
+.cardContent > h2 {
+  font-size: 20px;
+  margin-top: 10px;
+}
+.plantAttributes {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.attribute {
+  display: flex;
+  flex-direction: row;
+}
+.attribute > * {
+  margin: 0;
+  font-size: 14px;
+}