change search bar input and options prop for filter dropdown

calblueprint · Nov 4, 2024 · 370eee1 · 370eee1
1 parent 5815bf0
commit 370eee1
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 24 deletions.
diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import FilterDropdownMultiple from '@/components/FilterDropdownMultiple';
 import FilterDropdownSingle from '@/components/FilterDropdownSingle';
 import { PlantList } from '@/components/PlantList';
-import SearchBar from '@/components/SearchBar/SearchBar';
+import SearchBar from '@/components/SearchBar';
 import { DropdownOption } from '@/types/schema';
 import {
   FilterContainer,
@@ -13,15 +13,31 @@ import {
   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 usStateOptions = ['Tennessee', 'Missouri'];
 
   const [selectedGrowingSeason, setSelectedGrowingSeason] = useState<
     DropdownOption[]
@@ -107,6 +123,4 @@ const SeasonalPlantingGuide = () => {
       )}
     </PageContainer>
   );
-};
-
-export default SeasonalPlantingGuide;
+}
diff --git a/components/FilterDropdownMultiple.tsx b/components/FilterDropdownMultiple.tsx
@@ -5,7 +5,7 @@ import { DropdownOption } from '@/types/schema';
 interface FilterDropdownProps {
   value: DropdownOption[];
   setStateAction: React.Dispatch<React.SetStateAction<DropdownOption[]>>;
-  options: string[];
+  options: DropdownOption[];
   placeholder: string;
 }
 
@@ -17,10 +17,7 @@ export default function FilterDropdownMultiple({
 }: FilterDropdownProps) {
   return (
     <MultiSelect
-      options={options.map(option => ({
-        label: option,
-        value: option.toLocaleUpperCase(),
-      }))}
+      options={options}
       value={value}
       onChange={setStateAction}
       labelledBy={placeholder}

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

diff --git a/components/SearchBar/SearchBar.tsx → components/SearchBar/index.tsx b/components/SearchBar/SearchBar.tsx → components/SearchBar/index.tsx
diff --git a/components/SearchBar/styles.ts b/components/SearchBar/styles.ts
@@ -1,14 +1,15 @@
 import styled from 'styled-components';
 
 export const SearchBarContainer = styled.div`
-  padding: 8px;
   background-color: #f7f7f7;
   border: none;
   border-radius: 8px;
   width: 30%;
 `;
 
 export const SearchBarInput = styled.input`
+  padding: 8px;
   border: none;
   background-color: #f7f7f7;
+  width: 100%;
 `;
diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -126,11 +126,11 @@ export function checkPlantingType(
   // If it is not null, add true to plantingTypeBoolean
   const plantingTypeBoolean: boolean[] = [];
   for (const plantingType of plantingTypeFilterValue) {
-    if (plantingType.value === 'START SEEDS INDOORS') {
+    if (plantingType.value === 'Start Seeds Indoors') {
       plantingTypeBoolean.push(plant.indoors_start !== null);
-    } else if (plantingType.value === 'START SEEDS OUTDOORS') {
+    } else if (plantingType.value === 'Start Seeds Outdoors') {
       plantingTypeBoolean.push(plant.outdoors_start !== null);
-    } else if (plantingType.value === 'PLANT SEEDLINGS/TRANSPLANT OUTDOORS') {
+    } else if (plantingType.value === 'Plant Seedlings/Transplant Outdoors') {
       plantingTypeBoolean.push(plant.transplant_start !== null);
     }
   }