From 87bcf03b35dd7d1e008081fc3cb433a3adbfe546 Mon Sep 17 00:00:00 2001 From: Sashank Balusu Date: Tue, 15 Oct 2024 18:16:36 -0700 Subject: [PATCH] fixed styling and displayed card based on backend call --- api/supabase/queries/plant_by_id.ts | 14 +++- app/view-plants/page.tsx | 74 +++++++++++++------ components/PlantCard/PlantCard.tsx | 22 +++--- .../PlantCard/PlantCardStyles.module.css | 24 +++--- src/api/supabase/createClient.ts | 20 ----- src/api/supabase/queries/plant_by_id.ts | 19 ----- 6 files changed, 87 insertions(+), 86 deletions(-) delete mode 100644 src/api/supabase/createClient.ts delete mode 100644 src/api/supabase/queries/plant_by_id.ts diff --git a/api/supabase/queries/plant_by_id.ts b/api/supabase/queries/plant_by_id.ts index fe74918..45f451d 100644 --- a/api/supabase/queries/plant_by_id.ts +++ b/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 { +): Promise { + // 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]; } diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx index 9214c75..a2f770c 100644 --- a/app/view-plants/page.tsx +++ b/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 ; + const [result, setResult] = useState(); + 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
Loading...
; + } else { + return ; + } + // return ( + //
+ + // + // + //
+ // ); } diff --git a/components/PlantCard/PlantCard.tsx b/components/PlantCard/PlantCard.tsx index f53eb8c..2dd294c 100644 --- a/components/PlantCard/PlantCard.tsx +++ b/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 (
- {plantObj.plant_name} + {plant.plant_name}
-
-

{plantObj.plant_name}

-
-
+
+

{plant.plant_name}

+
+
{/* icon */} -

{plantObj.harvest_start + ' - ' + plantObj.harvest_end}

+

{plant.harvest_start + ' - ' + plant.harvest_end}

-
+
{/* icon */} -

{plantObj.water_num_times_per_week + ' times / wk'}

+

{plant.water_num_times_per_week + ' times / wk'}

-
+
{/* icon */} -

{plantObj.sunlight_required}

+

{plant.sunlight_required}

diff --git a/components/PlantCard/PlantCardStyles.module.css b/components/PlantCard/PlantCardStyles.module.css index 3e78609..8d3f8c2 100644 --- a/components/PlantCard/PlantCardStyles.module.css +++ b/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; } diff --git a/src/api/supabase/createClient.ts b/src/api/supabase/createClient.ts deleted file mode 100644 index 5389233..0000000 --- a/src/api/supabase/createClient.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createClient } from '@supabase/supabase-js'; -import dotenv from 'dotenv'; - -dotenv.config(); - -if ( - !process.env.NEXT_PUBLIC_SUPABASE_URL || - !process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY -) { - throw new Error( - 'No Supabase environment variables detected, please make sure they are in place!', - ); -} - -const supabase = createClient( - process.env.NEXT_PUBLIC_SUPABASE_URL, - process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, -); - -export default supabase; diff --git a/src/api/supabase/queries/plant_by_id.ts b/src/api/supabase/queries/plant_by_id.ts deleted file mode 100644 index fe74918..0000000 --- a/src/api/supabase/queries/plant_by_id.ts +++ /dev/null @@ -1,19 +0,0 @@ -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 { - 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; -}