[feat] Implement state filter and multi select filters

app/seasonal-planting-guide/page.tsx

@@ -1,68 +1,126 @@
 'use client';
 
 import React, { useState } from 'react';
-import FilterDropdown from '@/components/FilterDropdown';
+import FilterDropdownMultiple from '@/components/FilterDropdownMultiple';
+import FilterDropdownSingle from '@/components/FilterDropdownSingle';
 import { PlantList } from '@/components/PlantList';
+import SearchBar from '@/components/SearchBar';
+import { DropdownOption } from '@/types/schema';
+import {
+  FilterContainer,
+  HeaderContainer,
+  PageContainer,
+  StateOptionsContainer,
+} from './styles';
 
-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',
+export default function SeasonalPlantingGuide() {
+  const growingSeasonOptions: DropdownOption[] = [
+    { label: 'Spring', value: 'SPRING' },
+    { label: 'Summer', value: 'SUMMER' },
+    { label: 'Fall', value: 'FALL' },
+    { label: 'Winter', value: 'WINTER' },
+  ];
+  const harvestSeasonOptions: DropdownOption[] = [
+    { label: 'Spring', value: 'SPRING' },
+    { label: 'Summer', value: 'SUMMER' },
+    { label: 'Fall', value: 'FALL' },
+    { label: 'Winter', value: 'WINTER' },
+  ];
+  const plantingTypeOptions: DropdownOption[] = [
+    { label: 'Start Seeds Indoors', value: 'Start Seeds Indoors' },
+    { label: 'Start Seeds Outdoors', value: 'Start Seeds Outdoors' },
+    {
+      label: 'Plant Seedlings/Transplant Outdoors',
+      value: 'Plant Seedlings/Transplant Outdoors',
+    },
+  ];
+  const usStateOptions: DropdownOption[] = [
+    { label: 'Tennessee', value: 'TENNESSEE' },
+    { label: 'Missouri', value: 'MISSOURI' },
   ];
 
-  const [selectedGrowingSeason, setSelectedGrowingSeason] =
-    useState<string>('');
-  const [selectedHarvestSeason, setSelectedHarvestSeason] =
-    useState<string>('');
-  const [selectedPlantingType, setSelectedPlantingType] = useState<string>('');
+  const [selectedGrowingSeason, setSelectedGrowingSeason] = useState<
+    DropdownOption[]
+  >([]);
+  const [selectedHarvestSeason, setSelectedHarvestSeason] = useState<
+    DropdownOption[]
+  >([]);
+  const [selectedPlantingType, setSelectedPlantingType] = useState<
+    DropdownOption[]
+  >([]);
+  const [selectedUsState, setSelectedUsState] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState<string>('');
 
   const clearFilters = () => {
-    setSelectedGrowingSeason('');
-    setSelectedHarvestSeason('');
-    setSelectedPlantingType('');
+    setSelectedGrowingSeason([]);
+    setSelectedHarvestSeason([]);
+    setSelectedPlantingType([]);
   };
 
   return (
-    <div>
-      <FilterDropdown
-        name="growingSeason"
-        id="growingSeason"
-        value={selectedGrowingSeason}
-        setStateAction={setSelectedGrowingSeason}
-        options={growingSeasonOptions}
-        placeholder="Growing Season"
-      />
+    <PageContainer>
+      {!selectedUsState ? (
+        <>
+          <p>Please select a US state to view planting information.</p>
+          <StateOptionsContainer>
+            <FilterDropdownSingle
+              name="usState"
+              id="usState"
+              value={selectedUsState}
+              setStateAction={setSelectedUsState}
+              placeholder="US State"
+              options={usStateOptions}
+            />
+          </StateOptionsContainer>
+        </>
+      ) : (
+        <>
+          <HeaderContainer>
+            <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
+            <FilterContainer>
+              <FilterDropdownSingle
+                name="usState"
+                id="usState"
+                value={selectedUsState}
+                setStateAction={setSelectedUsState}
+                placeholder="US State"
+                options={usStateOptions}
+              />
 
-      <FilterDropdown
-        name="harvestSeason"
-        id="harvestSeason"
-        value={selectedHarvestSeason}
-        setStateAction={setSelectedHarvestSeason}
-        options={harvestSeasonOptions}
-        placeholder="Harvest Season"
-      />
+              <FilterDropdownMultiple
+                value={selectedGrowingSeason}
+                setStateAction={setSelectedGrowingSeason}
+                options={growingSeasonOptions}
+                placeholder="Growing Season"
+              />
 
-      <FilterDropdown
-        name="plantingType"
-        id="plantingType"
-        value={selectedPlantingType}
-        setStateAction={setSelectedPlantingType}
-        options={plantingTypeOptions}
-        placeholder="Planting Type"
-      />
+              <FilterDropdownMultiple
+                value={selectedHarvestSeason}
+                setStateAction={setSelectedHarvestSeason}
+                options={harvestSeasonOptions}
+                placeholder="Harvest Season"
+              />
 
-      <button onClick={clearFilters}>Clear filters</button>
+              <FilterDropdownMultiple
+                value={selectedPlantingType}
+                setStateAction={setSelectedPlantingType}
+                options={plantingTypeOptions}
+                placeholder="Planting Type"
+              />
 
-      <PlantList
-        growingSeasonFilterValue={selectedGrowingSeason}
-        harvestSeasonFilterValue={selectedHarvestSeason}
-        plantingTypeFilterValue={selectedPlantingType}
-      />
-    </div>
-  );
-};
+              <button onClick={clearFilters}>Clear filters</button>
+            </FilterContainer>
+          </HeaderContainer>
 
-export default SeasonalPlantingGuide;
+          <PlantList
+            growingSeasonFilterValue={selectedGrowingSeason}
+            harvestSeasonFilterValue={selectedHarvestSeason}
+            plantingTypeFilterValue={selectedPlantingType}
+            usStateFilterValue={selectedUsState}
+            searchTerm={searchTerm}
+          />
+        </>
+      )}
+    </PageContainer>
+  );
+}

app/seasonal-planting-guide/styles.ts

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const FilterContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+`;
+
+export const StateOptionsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+`;

components/FilterDropdownMultiple.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MultiSelect } from 'react-multi-select-component';
+import { DropdownOption } from '@/types/schema';
+
+interface FilterDropdownProps {
+  value: DropdownOption[];
+  setStateAction: React.Dispatch<React.SetStateAction<DropdownOption[]>>;
+  options: DropdownOption[];
+  placeholder: string;
+}
+
+export default function FilterDropdownMultiple({
+  value,
+  setStateAction,
+  options,
+  placeholder,
+}: FilterDropdownProps) {
+  return (
+    <MultiSelect
+      options={options}
+      value={value}
+      onChange={setStateAction}
+      labelledBy={placeholder}
+      hasSelectAll={false}
+      overrideStrings={{ selectSomeItems: placeholder }}
+      disableSearch
+    />
+  );
+}

components/FilterDropdown.tsx → components/FilterDropdownSingle.tsx

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
+import { DropdownOption } from '@/types/schema';
 
 interface FilterDropdownProps {
-  name: string;
-  id: string;
+  name?: string;
+  id?: string;
   value: string;
   setStateAction: React.Dispatch<React.SetStateAction<string>>;
-  options: string[];
+  options: DropdownOption[];
   placeholder: string;
 }
 
-export default function FilterDropdown({
+export default function FilterDropdownSingle({
   name,
   id,
   value,
@@ -42,8 +43,8 @@ export default function FilterDropdown({
         {placeholder}
       </option>
       {options.map((option, index) => (
-        <option key={index} value={option}>
-          {option}
+        <option key={index} value={option.value}>
+          {option.label}
         </option>
       ))}
     </select>