[feat] pull and display all plants

api/supabase/createClient.ts

@@ -0,0 +1,20 @@
+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;

api/supabase/queries/plantSeasonality.ts

@@ -0,0 +1,14 @@
+import { Plant } from '@/types/schema';
+import supabase from '../createClient';
+
+export async function getPlantSeasonality(
+  input_state: string,
+): Promise<Plant[]> {
+  const { data, error } = await supabase
+    .from('plant_seasonality')
+    .select('*')
+    .eq('state', input_state);
+  if (error)
+    throw new Error(`Error fetching plant seasonality: ${error.message}`);
+  return data;
+}

components/PlantList.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { getPlantSeasonality } from '@/api/supabase/queries/plantSeasonality';
+import { Plant } from '@/types/schema';
+
+export const PlantList = () => {
+  const [plants, setPlants] = useState<Plant[]>([]);
+
+  useEffect(() => {
+    const fetchPlantSeasonality = async () => {
+      const plantList = await getPlantSeasonality('Tennessee');
+      setPlants(plantList);
+    };
+
+    fetchPlantSeasonality();
+  }, []);
+
+  return (
+    <div>
+      {plants.map((plant, key) => (
+        <div key={key}>{plant.plant_name}</div>
+      ))}
+    </div>
+  );
+};

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "next": "^14.2.10",
+    "@supabase/supabase-js": "^2.45.4",
+    "dotenv": "^16.4.5",
     "react": "^18",
     "react-dom": "^18",
     "styled-components": "^6.1.13"