From d004b032f5fed3fa217bdd0932cb86ca45b45d78 Mon Sep 17 00:00:00 2001
From: Kyle Ramachandran <kyleramachandran@berkeley.edu>
Date: Sat, 7 Dec 2024 01:44:43 -0800
Subject: [PATCH] fix lint errors

---
 components/FilterDropdownMultiple/index.tsx | 10 ++++------
 components/FilterDropdownMultiple/styles.ts | 22 +++++++++++++--------
 components/FilterDropdownSingle/index.tsx   |  4 ++--
 components/FilterDropdownSingle/styles.ts   | 17 ++++++++--------
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx
index 857c83f..f5a8b94 100644
--- a/components/FilterDropdownMultiple/index.tsx
+++ b/components/FilterDropdownMultiple/index.tsx
@@ -26,10 +26,7 @@ export default function FilterDropdownMultiple<T>({
   placeholder,
   disabled = false,
 }: FilterDropdownProps<T>) {
-  const handleChange = (
-    selectedOptions: MultiValue<DropdownOption<T>>,
-    _actionMeta: ActionMeta<DropdownOption<T>>,
-  ) => {
+  const handleChange = (selectedOptions: MultiValue<DropdownOption<T>>) => {
     setStateAction(selectedOptions as DropdownOption<T>[]);
   };
 
@@ -38,7 +35,6 @@ export default function FilterDropdownMultiple<T>({
   // StyledMultiValue appears for each selected option, so if more than 1 is selected,
   // the rest of the selected options are not shown, instead the + n is shown as part of the first option
   const StyledMultiValue = ({
-    children,
     ...props
   }: MultiValueProps<
     DropdownOption<T>,
@@ -101,10 +97,12 @@ export default function FilterDropdownMultiple<T>({
       placeholder={placeholder}
       onChange={handleChange}
       closeMenuOnSelect={false}
-      styles={customSelectStyles}
+      styles={customSelectStyles<T>()}
       isSearchable={false}
       hideSelectedOptions={false}
+      // can bring this back if we want an 'x' to clear filters for each dropdown
       isClearable={false}
+      // use custom styled components instead of default components
       components={{ MultiValue: StyledMultiValue, Option: CustomOption }}
     />
   );
diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts
index 3de92be..dee7402 100644
--- a/components/FilterDropdownMultiple/styles.ts
+++ b/components/FilterDropdownMultiple/styles.ts
@@ -9,7 +9,12 @@ export const StyledOption = styled.div`
 `;
 
 // custom styles for react-select component
-export const customSelectStyles: StylesConfig<DropdownOption<any>, true> = {
+// Option type is DropdownOption<T> and isMulti is true
+export const customSelectStyles = <T>(): StylesConfig<
+  DropdownOption<T>,
+  true
+> => ({
+  // container
   control: (baseStyles, state) => ({
     ...baseStyles,
     borderRadius: '57px',
@@ -18,6 +23,7 @@ export const customSelectStyles: StylesConfig<DropdownOption<any>, true> = {
     padding: '8px 14px',
     color: COLORS.midgray,
   }),
+  // placeholder text
   placeholder: baseStyles => ({
     ...baseStyles,
     color: COLORS.midgray,
@@ -25,26 +31,24 @@ export const customSelectStyles: StylesConfig<DropdownOption<any>, true> = {
     padding: '0px',
     margin: '0px',
   }),
-  input: baseStyles => ({
-    ...baseStyles,
-    margin: '0px',
-    padding: '0px',
-  }),
   // hide vertical bar between arrow and text
   indicatorSeparator: baseStyles => ({
     ...baseStyles,
     display: 'none',
   }),
+  // 'x' to clear selected option(s)
   clearIndicator: baseStyles => ({
     ...baseStyles,
     padding: '0px',
   }),
+  // dropdown arrow
   dropdownIndicator: baseStyles => ({
     ...baseStyles,
     padding: '0px',
-    marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles
+    marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles
     color: COLORS.midgray,
   }),
+  // container for selected multi option
   multiValue: baseStyles => ({
     ...baseStyles,
     backgroundColor: '#fff',
@@ -52,6 +56,7 @@ export const customSelectStyles: StylesConfig<DropdownOption<any>, true> = {
     padding: '0px',
     margin: '0px',
   }),
+  // multi option display text
   multiValueLabel: baseStyles => ({
     ...baseStyles,
     fontSize: '0.75rem',
@@ -59,8 +64,9 @@ export const customSelectStyles: StylesConfig<DropdownOption<any>, true> = {
     padding: '0px',
     paddingLeft: '0px',
   }),
+  // hide 'x' next to each multi option
   multiValueRemove: baseStyles => ({
     ...baseStyles,
     display: 'none',
   }),
-};
+});
diff --git a/components/FilterDropdownSingle/index.tsx b/components/FilterDropdownSingle/index.tsx
index d263d14..2175ea4 100644
--- a/components/FilterDropdownSingle/index.tsx
+++ b/components/FilterDropdownSingle/index.tsx
@@ -28,7 +28,6 @@ export default function FilterDropdownSingle<T>({
     selectedOptions:
       | SingleValue<DropdownOption<T>>
       | MultiValue<DropdownOption<T>>,
-    _actionMeta: ActionMeta<DropdownOption<T>>,
   ) => {
     if (!Array.isArray(selectedOptions)) {
       setStateAction(selectedOptions as DropdownOption<T>);
@@ -43,9 +42,10 @@ export default function FilterDropdownSingle<T>({
       placeholder={placeholder}
       onChange={handleChange}
       closeMenuOnSelect={false}
-      styles={customSelectStyles(small)}
+      styles={customSelectStyles<T>(small)}
       isSearchable={false}
       hideSelectedOptions={false}
+      // can bring this back if we want an 'x' to clear filters for each dropdown
       isClearable={false}
     />
   );
diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts
index 3a4ea1c..566fc79 100644
--- a/components/FilterDropdownSingle/styles.ts
+++ b/components/FilterDropdownSingle/styles.ts
@@ -17,9 +17,11 @@ export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>`
 `;
 
 // custom styles for react-select component
-export const customSelectStyles = (
+// Option type is DropdownOption<T>
+export const customSelectStyles = <T>(
   $isSmall: boolean,
-): StylesConfig<DropdownOption<any>, true> => ({
+): StylesConfig<DropdownOption<T>, true> => ({
+  // container
   control: (baseStyles, state) => ({
     ...baseStyles,
     borderRadius: '57px',
@@ -30,6 +32,7 @@ export const customSelectStyles = (
     // if small is true, set min width to 150px, if undefined don't set min width
     ...($isSmall && { minWidth: '150px' }),
   }),
+  // placeholder text
   placeholder: baseStyles => ({
     ...baseStyles,
     color: COLORS.midgray,
@@ -38,26 +41,24 @@ export const customSelectStyles = (
     margin: '0px',
     justifySelf: 'center',
   }),
-  input: baseStyles => ({
-    ...baseStyles,
-    margin: '0px',
-    padding: '0px',
-  }),
   // hide vertical bar between arrow and text
   indicatorSeparator: baseStyles => ({
     ...baseStyles,
     display: 'none',
   }),
+  // 'x' to clear selected option(s)
   clearIndicator: baseStyles => ({
     ...baseStyles,
     padding: '0px',
   }),
+  // dropdown arrow
   dropdownIndicator: baseStyles => ({
     ...baseStyles,
     padding: '0px',
-    marginLeft: '-4px', // move the dropdown indicator to the left cant override text styles
+    marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles
     color: COLORS.midgray,
   }),
+  // selected option display text
   singleValue: baseStyles => ({
     ...baseStyles,
     backgroundColor: '#fff',