fixed styling and displayed card based on backend call

api/supabase/queries/plant_by_id.ts

@@ -2,10 +2,18 @@ import { UUID } from 'crypto';
 import { Plant } from '@/types/schema';
 import supabase from '../createClient';
 
-export async function get_plant_by_id(
+export async function getPlantById(
   i_state: string,
   p_id: UUID,
-): Promise<Plant[]> {
+): Promise<Plant> {
+  // const { data, error } = await supabase
+  //   .from('plant_seasonality')
+  //   .select('*')
+  //   .eq('state', i_state)
+  //   .eq("plant_seed_indoors_start", "January");
+  // if (error)
+  //   throw new Error(`Error fetching plant seasonality: ${error.message}`);
+  // return data;
   const { data, error } = await supabase.rpc('get_plant_by_id', {
     input_state: i_state,
     plant_id: p_id,
@@ -15,5 +23,5 @@ export async function get_plant_by_id(
     throw new Error(`Error getting matching plant: ${error.message}`);
   }
 
-  return data;
+  return data[0];
 }

app/view-plants/page.tsx

@@ -1,26 +1,58 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { UUID } from 'crypto';
+import { getPlantById } from '@/api/supabase/queries/plant_by_id';
 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',
-  };
-  return <PlantCard {...plant}></PlantCard>;
+  const [result, setResult] = useState<Plant>();
+  async function fetchPlant(state: string, id: UUID) {
+    const plant = await getPlantById(state, id);
+    console.log(plant);
+    return plant;
+  }
+  // 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',
+  // };
+  useEffect(() => {
+    const getData = async () => {
+      const testState: string = 'Tennessee';
+      const testUUID: UUID = '43c19f80-8205-4d03-b323-05c220550bf0';
+      const plant2 = await fetchPlant(testState, testUUID);
+      setResult(plant2); // Set the result to state
+    };
+
+    getData(); // Call the async function when the component mounts
+  }, []);
+  if (result === undefined) {
+    return <div>Loading...</div>;
+  } else {
+    return <PlantCard plant={result} />;
+  }
+  // return (
+  //   <div>
+
+  //     <PlantCard plant={plant}/>
+  //
+  //   </div>
+  // );
 }

components/PlantCard/PlantCard.tsx

@@ -2,26 +2,26 @@ 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({ plant }: { plant: Plant }) {
   return (
     <div className={styles.Card}>
       <div className={styles.CardPic}>
-        <img alt={plantObj.plant_name}></img>
+        <img alt={plant.plant_name}></img>
       </div>
-      <div className={styles.cardContent}>
-        <h2>{plantObj.plant_name}</h2>
-        <div className={styles.plantAttributes}>
-          <div className={styles.attribute}>
+      <div className={styles.CardContent}>
+        <h2>{plant.plant_name}</h2>
+        <div className={styles.PlantAttributes}>
+          <div className={styles.Attribute}>
             {/* icon */}
-            <p>{plantObj.harvest_start + ' - ' + plantObj.harvest_end}</p>
+            <p>{plant.harvest_start + ' - ' + plant.harvest_end}</p>
           </div>
-          <div className={styles.attribute}>
+          <div className={styles.Attribute}>
             {/* icon */}
-            <p>{plantObj.water_num_times_per_week + ' times / wk'}</p>
+            <p>{plant.water_num_times_per_week + ' times / wk'}</p>
           </div>
-          <div className={styles.attribute}>
+          <div className={styles.Attribute}>
             {/* icon */}
-            <p>{plantObj.sunlight_required}</p>
+            <p>{plant.sunlight_required}</p>
           </div>
         </div>
       </div>

components/PlantCard/PlantCardStyles.module.css

@@ -22,31 +22,31 @@
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
-.cardContent {
+.CardContent {
   display: flex;
   flex-direction: column;
-  padding-left: 20px;
+  padding-left: 1vw;
   height: 40%;
-  row-gap: 10px;
+  row-gap: 1vh;
 }
-.cardContent > * {
+.CardContent > * {
   margin: 0;
 }
-.cardContent > h2 {
-  font-size: 20px;
-  margin-top: 10px;
+.CardContent > h2 {
+  font-size: 1.5vw;
+  margin-top: 1vh;
 }
-.plantAttributes {
+.PlantAttributes {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 1vh;
 }
 
-.attribute {
+.Attribute {
   display: flex;
   flex-direction: row;
 }
-.attribute > * {
+.Attribute > * {
   margin: 0;
-  font-size: 14px;
+  font-size: 1vw;
 }