[feat] Implement Plant Seasonality Filters

api/supabase/queries/plantSeasonality.ts

@@ -5,7 +5,7 @@ export async function getPlantSeasonality(
   input_state: string,
 ): Promise<Plant[]> {
   const { data, error } = await supabase
-    .from('plant_seasonality')
+    .from('plants')
     .select('*')
     .eq('state', input_state);
   if (error)

app/seasonal-planting-guide/page.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { useState } from 'react';
+import FilterDropdown from '@/components/FilterDropdown';
+import { PlantList } from '@/components/PlantList';
+
+const SeasonalPlantingGuide = () => {
+  const growingSeasonOptions = ['Spring', 'Summer', 'Fall', 'Winter'];
+  const harvestSeasonOptions = ['Spring', 'Summer', 'Fall', 'Winter'];
+  const plantingTypeOptions = [
+    'Start Seeds Indoors',
+    'Start Seeds Outdoors',
+    'Plant Seedlings/Transplant Outdoors',
+  ];
+
+  const [growingSeason, setGrowingSeason] = useState<string>('');
+  const [harvestSeason, setHarvestSeason] = useState<string>('');
+  const [plantingType, setPlantingType] = useState<string>('');
+
+  const clearFilters = () => {
+    setGrowingSeason('');
+    setHarvestSeason('');
+    setPlantingType('');
+  };
+
+  return (
+    <div>
+      <FilterDropdown
+        name="growingSeason"
+        id="growingSeason"
+        value={growingSeason}
+        setStateAction={setGrowingSeason}
+        options={growingSeasonOptions}
+        placeholder="Growing Season"
+      />
+
+      <FilterDropdown
+        name="harvestSeason"
+        id="harvestSeason"
+        value={harvestSeason}
+        setStateAction={setHarvestSeason}
+        options={harvestSeasonOptions}
+        placeholder="Harvest Season"
+      />
+
+      <FilterDropdown
+        name="plantingType"
+        id="plantingType"
+        value={plantingType}
+        setStateAction={setPlantingType}
+        options={plantingTypeOptions}
+        placeholder="Planting Type"
+      />
+
+      <button onClick={clearFilters}>Clear filters</button>
+
+      <PlantList
+        growing_season={growingSeason}
+        harvest_season={harvestSeason}
+        planting_type={plantingType}
+      />
+    </div>
+  );
+};
+
+export default SeasonalPlantingGuide;

components/FilterDropdown.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+interface FilterDropdownProps {
+  name: string;
+  id: string;
+  value: string;
+  setStateAction: React.Dispatch<React.SetStateAction<string>>;
+  options: string[];
+  placeholder: string;
+}
+
+export default function FilterDropdown(props: FilterDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    props.setStateAction(event.target.value);
+    setIsOpen(false);
+  };
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <select
+      name={props.name}
+      id={props.id}
+      onChange={handleChange}
+      onClick={handleToggle}
+      onBlur={() => setIsOpen(false)}
+      value={props.value}
+    >
+      {/*Default placeholder text*/}
+      <option value="" disabled hidden>
+        {props.placeholder}
+      </option>
+      {props.options.map((option, index) => (
+        <option key={index} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+}

components/PlantList.tsx

@@ -2,21 +2,79 @@ import React, { useEffect, useState } from 'react';
 import { getPlantSeasonality } from '@/api/supabase/queries/plantSeasonality';
 import { Plant } from '@/types/schema';
 
-export const PlantList = () => {
+interface PlantListProps {
+  harvest_season: string;
+  planting_type: string;
+  growing_season: string;
+}
+
+export const PlantList = (props: PlantListProps) => {
   const [plants, setPlants] = useState<Plant[]>([]);
+  const growingSeasonToMonth = new Map<string, string[]>([
+    ['Spring', ['MARCH', 'APRIL', 'MAY']],
+    ['Summer', ['JUNE', 'JULY', 'AUGUST']],
+    ['Fall', ['SEPTEMBER', 'OCTOBER', 'NOVEMBER']],
+    ['Winter', ['DECEMBER', 'JANUARY', 'FEBRUARY']],
+  ]);
 
   useEffect(() => {
     const fetchPlantSeasonality = async () => {
-      const plantList = await getPlantSeasonality('Tennessee');
+      // gets plants in Tennessee by default
+      const plantList = await getPlantSeasonality('TENNESSEE');
       setPlants(plantList);
     };
 
     fetchPlantSeasonality();
   }, []);
 
+  const checkGrowingSeason = (plant: Plant) => {
+    if (!props.growing_season) {
+      return true;
+    }
+
+    const months = growingSeasonToMonth.get(props.growing_season);
+
+    return (
+      months?.includes(plant.indoors_start) ||
+      months?.includes(plant.indoors_end) ||
+      months?.includes(plant.outdoors_start) ||
+      months?.includes(plant.outdoors_end)
+    );
+  };
+
+  const checkHarvestSeason = (plant: Plant) => {
+    if (!props.harvest_season) {
+      return true;
+    }
+
+    return plant.harvest_season === props.harvest_season.toLocaleUpperCase();
+  };
+
+  const checkPlantingType = (plant: Plant) => {
+    if (!props.planting_type) {
+      return true;
+    }
+
+    if (props.planting_type === 'Start Seeds Indoors') {
+      return plant.indoors_start !== null && plant.indoors_start !== null;
+    } else if (props.planting_type === 'Start Seeds Outdoors') {
+      return plant.outdoors_start !== null && plant.outdoors_start !== null;
+    } else if (props.planting_type === 'Plant Seedlings/Transplant Outdoors') {
+      return plant.transplant_start !== null && plant.transplant_end !== null;
+    }
+  };
+
+  const filterPlantList = (plant: Plant) => {
+    return (
+      checkGrowingSeason(plant) &&
+      checkHarvestSeason(plant) &&
+      checkPlantingType(plant)
+    );
+  };
+
   return (
     <div>
-      {plants.map((plant, key) => (
+      {plants.filter(filterPlantList).map((plant, key) => (
         <div key={key}>{plant.plant_name}</div>
       ))}
     </div>

types/schema.d.ts

@@ -8,12 +8,12 @@ export interface Plant {
   state: string;
   harvest_season: Season;
   water_num_times_per_week: number;
-  plant_seed_indoors_start: string;
-  plant_seed_indoors_end: string;
-  plant_seed_outdoors_start: string;
-  plant_seed_outdoors_end: string;
-  plant_transplant_start: string;
-  plant_transplant_end: string;
+  indoors_start: string;
+  indoors_end: string;
+  outdoors_start: string;
+  outdoors_end: string;
+  transplant_start: string;
+  transplant_end: string;
   harvest_start: string;
   harvest_end: string;
   water_inches_per_week: number;