diff --git a/apps/portal/src/components/questions/filter/FilterSection.tsx b/apps/portal/src/components/questions/filter/FilterSection.tsx index da3b8c5f..9c5f5dae 100644 --- a/apps/portal/src/components/questions/filter/FilterSection.tsx +++ b/apps/portal/src/components/questions/filter/FilterSection.tsx @@ -2,37 +2,54 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; import { Collapsible, TextInput } from '@tih/ui'; import Checkbox from '../ui-patch/Checkbox'; +import RadioGroup from '../ui-patch/RadioGroup'; -export type FilterOptions = { +export type FilterOption = { checked: boolean; label: string; value: string; }; -export type FilterChoices = Array>; +export type FilterChoices = Array>; -export type FilterSectionProps = { - label: string; - onOptionChange: (optionValue: string, checked: boolean) => void; - options: Array; -} & ( +type FilterSectionType> = | { - searchPlaceholder: string; - showAll?: never; + isSingleSelect: true; + onOptionChange: (optionValue: FilterOptions[number]['value']) => void; } | { - searchPlaceholder?: never; - showAll: true; - } -); + isSingleSelect?: false; + onOptionChange: ( + optionValue: FilterOptions[number]['value'], + checked: boolean, + ) => void; + }; -export default function FilterSection({ +export type FilterSectionProps> = + FilterSectionType & { + label: string; + options: FilterOptions; + } & ( + | { + searchPlaceholder: string; + showAll?: never; + } + | { + searchPlaceholder?: never; + showAll: true; + } + ); + +export default function FilterSection< + FilterOptions extends Array, +>({ label, options, searchPlaceholder, showAll, onOptionChange, -}: FilterSectionProps) { + isSingleSelect, +}: FilterSectionProps) { return (
@@ -46,17 +63,25 @@ export default function FilterSection({ startAddOnType="icon" /> )} -
- {options.map((option) => ( - { - onOptionChange(option.value, checked); - }} - /> - ))} -
+ {isSingleSelect ? ( + { + onOptionChange(value); + }}> + ) : ( +
+ {options.map((option) => ( + { + onOptionChange(option.value, checked); + }} + /> + ))} +
+ )}
diff --git a/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx b/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx new file mode 100644 index 00000000..58aa028c --- /dev/null +++ b/apps/portal/src/components/questions/ui-patch/RadioGroup.tsx @@ -0,0 +1,38 @@ +export type RadioProps = { + onChange: (value: string) => void; + radioData: Array; +}; + +export type RadioData = { + checked: boolean; + label: string; + value: string; +}; + +export default function RadioGroup({ radioData, onChange }: RadioProps) { + return ( +
) => { + const target = event.target as HTMLInputElement; + onChange(target.value); + }}> +
+ {radioData.map((radio) => ( +
+ + +
+ ))} +
+
+ ); +} diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index 9caeef46..c80af96c 100644 --- a/apps/portal/src/pages/questions/index.tsx +++ b/apps/portal/src/pages/questions/index.tsx @@ -23,9 +23,7 @@ export default function QuestionsHomePage() { const [selectedQuestionTypes, setSelectedQuestionTypes] = useState< Array >([]); - const [selectedQuestionAges, setSelectedQuestionAges] = useState< - Array - >([]); + const [selectedQuestionAge, setSelectedQuestionAge] = useState('all'); const [selectedLocations, setSelectedLocations] = useState>([]); const [hasLanded, setHasLanded] = useState(false); @@ -46,9 +44,9 @@ export default function QuestionsHomePage() { const questionAgeFilterOptions = useMemo(() => { return QUESTION_AGES.map((questionAge) => ({ ...questionAge, - checked: selectedQuestionAges.includes(questionAge.value), + checked: selectedQuestionAge === questionAge.value, })); - }, [selectedQuestionAges]); + }, [selectedQuestionAge]); const locationFilterOptions = useMemo(() => { return LOCATIONS.map((location) => ({ @@ -81,14 +79,14 @@ export default function QuestionsHomePage() { if (router.isReady && !isSearchInitialized) { setSelectedCompanies(paramToArray(router.query.companies)); setSelectedQuestionTypes(paramToArray(router.query.questionTypes)); - setSelectedQuestionAges(paramToArray(router.query.questionAges)); + setSelectedQuestionAge(router.query.questionAge as string); setSelectedLocations(paramToArray(router.query.locations)); setIsSearchInitialized(true); const hasFilter = router.query.companies || router.query.questionTypes || - router.query.questionAges || + router.query.questionAge || router.query.locations; if (hasFilter) { setHasLanded(true); @@ -101,7 +99,7 @@ export default function QuestionsHomePage() { hasLanded, selectedCompanies, selectedQuestionTypes, - selectedQuestionAges, + selectedQuestionAge, selectedLocations, ]); @@ -113,7 +111,7 @@ export default function QuestionsHomePage() { query: { companies: selectedCompanies, locations: selectedLocations, - questionAges: selectedQuestionAges, + questionAge: selectedQuestionAge, questionTypes: selectedQuestionTypes, }, }, @@ -124,7 +122,7 @@ export default function QuestionsHomePage() { }, [ selectedCompanies, selectedQuestionTypes, - selectedQuestionAges, + selectedQuestionAge, selectedLocations, router, router.isReady, @@ -168,17 +166,12 @@ export default function QuestionsHomePage() { }} /> { - if (checked) { - setSelectedQuestionAges((prev) => [...prev, optionValue]); - } else { - setSelectedQuestionAges((prev) => - prev.filter((questionAge) => questionAge !== optionValue), - ); - } + onOptionChange={(optionValue) => { + setSelectedQuestionAge(optionValue); }} />