[feat] Create my plants and all plants tabs (#13)

Co-authored-by: rachaelch3n <[email protected]> Co-authored-by: Kyle Ramachandran <[email protected]> Co-authored-by: Catherine Tan <[email protected]> Co-authored-by: Catherine Tan <[email protected]>
calblueprint · Oct 26, 2024 · 93821bc · 93821bc
1 parent 9fc4041
commit 93821bc
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 22 deletions.
diff --git a/api/supabase/queries/plant_by_id.ts b/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;
+}
diff --git a/api/supabase/queries/plants.ts b/api/supabase/queries/plants.ts
@@ -12,10 +12,12 @@ export async function getPlantById(plantId: UUID): Promise<Plant> {
   const { data, error } = await supabase
     .from('plants')
     .select('*')
-    .eq('id', plantId);
+    .eq('id', plantId)
+    .limit(1)
+    .single();
   if (error) {
     throw new Error(`Error getting matching plant: ${error.message}`);
   }
 
-  return data[0];
+  return data;
 }
diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx
@@ -2,24 +2,107 @@
 
 import { useEffect, useState } from 'react';
 import { UUID } from 'crypto';
-import { getPlantById } from '@/api/supabase/queries/plants';
+import supabase from '@/api/supabase/createClient';
+import { getAllPlants, getPlantById } from '@/api/supabase/queries/plants';
 import PlantCard from '@/components/PlantCard/PlantCard';
 import { Plant } from '@/types/schema';
 
-export default function Home() {
-  const [result, setResult] = useState<Plant>();
+export default function Page() {
+  const [viewingOption, setViewingOption] = useState<'myPlants' | 'all'>(
+    'myPlants',
+  );
+  const [inAddMode, setInAddMode] = useState<boolean>(false);
+
+  const [plants, setPlants] = useState<Plant[]>([]);
+  const [userPlants, setUserPlants] = useState<Plant[]>([]);
+  const user_id: UUID = 'e72af66d-7aae-45f6-935a-187197749d9f';
+  const userState = 'TENNESSEE';
+  async function fetchUserPlants(user_id: UUID) {
+    const { data, error } = await supabase
+      .from('user_plants')
+      .select('plant_id')
+      .eq('user_id', user_id)
+      .is('date_harvested', null);
+
+    if (error) {
+      console.error('Error fetching plant IDs:', error);
+      return [];
+    }
+    if (!data) return [];
+    const plantIds = data.map(row => row.plant_id) || [];
+
+    const plantsUser: Plant[] = await Promise.all(
+      plantIds.map(plantId => getPlantById(plantId)),
+    );
+    return plantsUser;
+  }
   useEffect(() => {
-    const getData = async () => {
-      const testUUID: UUID = '010ae695-6cc8-4af4-919a-d15b92fdd68d';
-      const plant2 = await getPlantById(testUUID);
-      setResult(plant2); // Set the result to state
+    const fetchPlantSeasonality = async () => {
+      const plantList = await getAllPlants();
+      const result = plantList.filter(plant => plant.us_state === userState);
+      setPlants(result);
     };
 
-    getData(); // Call the async function when the component mounts
+    fetchPlantSeasonality();
   }, []);
-  if (result === undefined) {
-    return <div>Loading...</div>;
-  } else {
-    return <PlantCard plant={result} />;
-  }
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await fetchUserPlants(user_id);
+      setUserPlants(result);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <div className="main">
+      <div id="plantContent">
+        <div className="plantSelectionHeader">
+          <button onClick={() => setViewingOption('myPlants')}>
+            My Plants
+          </button>
+          <button onClick={() => setViewingOption('all')}>All</button>
+        </div>
+        <div className="componentsDisplay">
+          {viewingOption === 'myPlants' &&
+            (userPlants.length ? (
+              <div>
+                {userPlants.map((plant, key) => (
+                  <PlantCard key={key} plant={plant} canSelect={false} />
+                ))}
+              </div>
+            ) : (
+              <div>
+                <button onClick={() => setViewingOption('all')}>
+                  Add Plants
+                </button>
+              </div>
+            ))}
+          {viewingOption === 'all' &&
+            (inAddMode ? (
+              <div>
+                {plants.map((plant, key) => (
+                  <PlantCard key={key} plant={plant} canSelect={true} />
+                ))}
+                <div className="footer">
+                  <button onClick={() => setInAddMode(false)}>
+                    Select Plants
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div>
+                {plants.map((plant, key) => (
+                  <PlantCard key={key} plant={plant} canSelect={false} />
+                ))}
+                <div className="footer">
+                  <button onClick={() => setInAddMode(true)}>
+                    Add to my plants
+                  </button>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/components/PlantCard/PlantCard.tsx b/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({ plant }: { plant: Plant }) {
+export default function PlantCard({
+  plant,
+  canSelect,
+}: {
+  plant: Plant;
+  canSelect: boolean;
+}) {
+  console.log(canSelect);
   return (
     <div className={styles.Card}>
       <div className={styles.CardPic}>

diff --git a/components/PlantCard/PlantCardStyles.module.css b/components/PlantCard/PlantCardStyles.module.css
@@ -50,3 +50,55 @@
   margin: 0;
   font-size: 1vw;
 }
+.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;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml