adding clear filters button to FilterDropdowns

calblueprint · Oct 20, 2024 · 33bea10 · 33bea10
1 parent 6ca499b
commit 33bea10
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
@@ -4,9 +4,7 @@ import React, { useState } from 'react';
 import FilterDropdown from '@/components/FilterDropdown';
 import { PlantList } from '@/components/PlantList';
 
-interface SeasonalPlantingGuideProps {}
-
-const SeasonalPlantingGuide = (props: SeasonalPlantingGuideProps) => {
+const SeasonalPlantingGuide = () => {
   const growingSeasonOptions = ['Spring', 'Summer', 'Fall', 'Winter'];
   const harvestSeasonOptions = ['Spring', 'Summer', 'Fall', 'Winter'];
   const plantingTypeOptions = [
@@ -19,11 +17,18 @@ const SeasonalPlantingGuide = (props: SeasonalPlantingGuideProps) => {
   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"
@@ -32,6 +37,7 @@ const SeasonalPlantingGuide = (props: SeasonalPlantingGuideProps) => {
       <FilterDropdown
         name="harvestSeason"
         id="harvestSeason"
+        value={harvestSeason}
         setStateAction={setHarvestSeason}
         options={harvestSeasonOptions}
         placeholder="Harvest Season"
@@ -40,11 +46,14 @@ const SeasonalPlantingGuide = (props: SeasonalPlantingGuideProps) => {
       <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}

diff --git a/components/FilterDropdown.tsx b/components/FilterDropdown.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 interface FilterDropdownProps {
   name: string;
   id: string;
+  value: string;
   setStateAction: React.SetStateAction<any>;
   options: string[];
   placeholder: string;
@@ -27,9 +28,10 @@ export default function FilterDropdown(props: FilterDropdownProps) {
       onChange={handleChange}
       onClick={handleToggle}
       onBlur={() => setIsOpen(false)}
+      value={props.value}
     >
       {/*Default placeholder text*/}
-      <option disabled={true} selected={true} hidden={true}>
+      <option value="" disabled hidden>
         {props.placeholder}
       </option>
       {props.options.map((option, index) => (