refactored FilterDropdownSingle to use Select

app/seasonal-planting-guide/page.tsx

@@ -36,7 +36,7 @@ const plantingTypeOptions: DropdownOption<PlantingTypeEnum>[] = [
   { label: 'Start Seeds Indoors', value: 'INDOORS' },
   { label: 'Start Seeds Outdoors', value: 'OUTDOORS' },
   {
-    label: 'Plant Seedlings/Transplant Outdoors',
+    label: 'Plant Seedlings / Transplant Outdoors',
     value: 'TRANSPLANT',
   },
 ];
@@ -56,9 +56,8 @@ export default function SeasonalPlantingGuide() {
   const [selectedPlantingType, setSelectedPlantingType] = useState<
     DropdownOption<PlantingTypeEnum>[]
   >([]);
-  const [selectedUsState, setSelectedUsState] = useState<
-    DropdownOption<string>
-  >({ label: '', value: '' });
+  const [selectedUsState, setSelectedUsState] =
+    useState<DropdownOption<string> | null>(null);
   const [searchTerm, setSearchTerm] = useState<string>('');
 
   const clearFilters = () => {
@@ -92,6 +91,7 @@ export default function SeasonalPlantingGuide() {
             placeholder="State"
             options={usStateOptions}
             disabled={!selectedUsState}
+            small={false}
           />
 
           <FilterDropdownMultiple
@@ -129,6 +129,7 @@ export default function SeasonalPlantingGuide() {
             setStateAction={setSelectedUsState}
             placeholder="State"
             options={usStateOptions}
+            small={true}
           />
         </StateOptionsContainer>
       ) : (

components/FilterDropdownMultiple/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Select, {
   ActionMeta,
   components,

components/FilterDropdownMultiple/styles.ts

@@ -55,7 +55,7 @@ export const customSelectStyles: StylesConfig<DropdownOption<any>, true> = {
   multiValueLabel: baseStyles => ({
     ...baseStyles,
     fontSize: '0.75rem',
-    color: `${COLORS.midgray} !important`,
+    color: `${COLORS.black} !important`,
     padding: '0px',
     paddingLeft: '0px',
   }),

components/FilterDropdownSingle/index.tsx

@@ -1,22 +1,19 @@
-import React, { useState } from 'react';
-import Select, {
-  ActionMeta,
-  components,
-  GroupBase,
-  MultiValue,
-  OptionProps,
-  SingleValue,
-} from 'react-select';
+import React from 'react';
+import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select';
 import { DropdownOption } from '@/types/schema';
-import { customSelectStyles } from '../FilterDropdownMultiple/styles';
-import { FilterDropdownInput } from './styles';
+import { customSelectStyles } from './styles';
 
 interface FilterDropdownProps<T> {
-  value: DropdownOption<T>;
-  setStateAction: React.Dispatch<React.SetStateAction<DropdownOption<T>>>;
+  value: DropdownOption<T> | null;
+  setStateAction: React.Dispatch<
+    React.SetStateAction<DropdownOption<T> | null>
+  >;
   options: DropdownOption<T>[];
   placeholder: string;
   disabled?: boolean;
+  // for custom styling since initial dropdown to select user's state
+  // is a different size to a normal single dropdown
+  small: boolean;
 }
 
 export default function FilterDropdownSingle<T>({
@@ -25,14 +22,8 @@ export default function FilterDropdownSingle<T>({
   options,
   placeholder,
   disabled,
+  small,
 }: FilterDropdownProps<T>) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  // const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-  //   setStateAction(event.target.value);
-  //   setIsOpen(false);
-  // };
-
   const handleChange = (
     selectedOptions:
       | SingleValue<DropdownOption<T>>
@@ -44,39 +35,15 @@ export default function FilterDropdownSingle<T>({
     }
   };
 
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-
   return (
-    // <FilterDropdownInput
-    //   name={name}
-    //   id={id}
-    //   onChange={handleChange}
-    //   onClick={handleToggle}
-    //   onBlur={() => setIsOpen(false)}
-    //   value={value}
-    //   $hasValue={value !== ''}
-    //   disabled={disabled}
-    // >
-    //   {/*Default placeholder text*/}
-    //   <option value="" disabled hidden>
-    //     {placeholder}
-    //   </option>
-    //   {options.map((option, index) => (
-    //     <option key={index} value={option.value}>
-    //       {option.label}
-    //     </option>
-    //   ))}
-    // </FilterDropdownInput>
     <Select
       options={options}
       value={value}
       isDisabled={disabled}
       placeholder={placeholder}
       onChange={handleChange}
       closeMenuOnSelect={false}
-      styles={customSelectStyles}
+      styles={customSelectStyles(small)}
       isSearchable={false}
       hideSelectedOptions={false}
       isClearable={false}

components/FilterDropdownSingle/styles.ts

@@ -1,5 +1,7 @@
+import { StylesConfig } from 'react-select';
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
+import { DropdownOption } from '@/types/schema';
 
 export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>`
   border-radius: 60px;
@@ -13,3 +15,57 @@ export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>`
     background-color: ${COLORS.lightgray};
   }
 `;
+
+// custom styles for react-select component
+export const customSelectStyles = (
+  $isSmall: boolean,
+): StylesConfig<DropdownOption<any>, true> => ({
+  control: (baseStyles, state) => ({
+    ...baseStyles,
+    borderRadius: '57px',
+    border: `0.5px solid ${COLORS.midgray}`,
+    backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff',
+    padding: '8px 14px',
+    color: COLORS.midgray,
+    // if small is true, set min width to 150px, if undefined don't set min width
+    ...($isSmall && { minWidth: '150px' }),
+  }),
+  placeholder: baseStyles => ({
+    ...baseStyles,
+    color: COLORS.midgray,
+    fontSize: '0.75rem',
+    padding: '0px',
+    margin: '0px',
+    justifySelf: 'center',
+  }),
+  input: baseStyles => ({
+    ...baseStyles,
+    margin: '0px',
+    padding: '0px',
+  }),
+  // hide vertical bar between arrow and text
+  indicatorSeparator: baseStyles => ({
+    ...baseStyles,
+    display: 'none',
+  }),
+  clearIndicator: baseStyles => ({
+    ...baseStyles,
+    padding: '0px',
+  }),
+  dropdownIndicator: baseStyles => ({
+    ...baseStyles,
+    padding: '0px',
+    marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles
+    color: COLORS.midgray,
+  }),
+  singleValue: baseStyles => ({
+    ...baseStyles,
+    backgroundColor: '#fff',
+    border: '0px',
+    padding: '0px',
+    margin: '0px',
+    fontSize: '0.75rem',
+    color: `${COLORS.black} !important`,
+    paddingLeft: '0px',
+  }),
+});

components/PlantCalendarList/index.tsx

@@ -22,7 +22,7 @@ interface PlantListProps {
   harvestSeasonFilterValue: DropdownOption<SeasonEnum>[];
   plantingTypeFilterValue: DropdownOption<PlantingTypeEnum>[];
   growingSeasonFilterValue: DropdownOption<SeasonEnum>[];
-  usStateFilterValue: DropdownOption<string>;
+  usStateFilterValue: DropdownOption<string> | null;
   searchTerm: string;
 }
 

utils/helpers.ts

@@ -197,15 +197,14 @@ export function checkDifficulty(
 }
 
 export function checkUsState(
-  usStateFilterValue: DropdownOption<string>,
+  usStateFilterValue: DropdownOption<string> | null,
   plant: Plant,
 ) {
   // Automatically returns true if no selected usState
   if (!usStateFilterValue) {
     return true;
   }
 
-  console.log('usStateFilterValue', usStateFilterValue);
   // Check if plant's us_state matches usStateFilterValue
   const selectedState = usStateFilterValue.value;
   return plant.us_state === selectedState;