modify filter type

src/components/Filters/SingleDeptFilterModal.tsx

@@ -45,15 +45,16 @@ import { CloseIcon } from "@chakra-ui/icons";
 import { searchDept } from "@/components/Filters/DeptFilterModal";
 import Dropdown from "@/components/Dropdown";
 import { ChevronDownIcon } from "@chakra-ui/icons";
+import { IsSelectiveOption, isSelectiveOptions } from "@/types/search";
 
 // TODO: add API & hook to fetch options
 interface DropdownGroupProps extends FlexProps {
   readonly deptId: string | null;
   readonly selectedCourseType: string | null;
   readonly setSelectedCourseType: (courseType: string | null) => void;
-  readonly isSingleDeptSelective: boolean | null;
+  readonly isSingleDeptSelective: IsSelectiveOption;
   readonly setIsSingleDeptSelective: (
-    isSingleDeptSelective: boolean | null
+    isSingleDeptSelective: IsSelectiveOption
   ) => void;
   readonly suggestedGrade: string | null;
   readonly setSuggestedGrade: (suggestedGrade: string | null) => void;
@@ -69,25 +70,21 @@ function DropdownGroup(props: DropdownGroupProps) {
     setSuggestedGrade,
     ...rest
   } = props;
-  const selectiveOptions = {
-    All: {
+  const selectiveOptions: Record<
+    IsSelectiveOption,
+    {
+      label: string;
+    }
+  > = {
+    all: {
       label: "必修 + 選修",
-      value: null,
     },
-    Selective: {
+    selective: {
       label: "選修",
-      value: true,
     },
-    Required: {
+    required: {
       label: "必修",
-      value: false,
     },
-  } as const;
-  const findSelevtiveOption = (value: boolean | null) => {
-    if (value === null) {
-      return selectiveOptions.All;
-    }
-    return value ? selectiveOptions.Selective : selectiveOptions.Required;
   };
   return (
     <Flex alignItems={"center"} {...rest}>
@@ -109,7 +106,11 @@ function DropdownGroup(props: DropdownGroupProps) {
                 fontSize: "12px",
               }}
             >
-              {findSelevtiveOption(isSingleDeptSelective).label}
+              {isSingleDeptSelective === "all"
+                ? "必修 + 選修"
+                : isSingleDeptSelective === "selective"
+                ? "選修"
+                : "必修"}
             </Text>
             <ChevronDownIcon />
           </HStack>
@@ -122,17 +123,9 @@ function DropdownGroup(props: DropdownGroupProps) {
           }}
         >
           <RadioGroup
-            value={
-              isSingleDeptSelective === null
-                ? "All"
-                : isSingleDeptSelective
-                ? "Selective"
-                : "Required"
-            }
+            value={isSingleDeptSelective}
             onChange={(next) => {
-              setIsSingleDeptSelective(
-                next === "All" ? null : next === "Selective" ? true : false
-              );
+              setIsSingleDeptSelective(next as IsSelectiveOption);
             }}
             gap={2}
           >
@@ -289,9 +282,8 @@ function SingleDeptFilterModal({
   const [selectedCourseType, setSelectedCourseType] = useState<string | null>(
     searchFilters.department_course_type
   );
-  const [isSingleDeptSelective, setIsSingleDeptSelective] = useState<
-    boolean | null
-  >(searchFilters.singleDeptIsSelective);
+  const [isSingleDeptSelective, setIsSingleDeptSelective] =
+    useState<IsSelectiveOption>(searchFilters.singleDeptIsSelective);
   const [suggestedGrade, setSuggestedGrade] = useState(
     searchFilters.suggestedGrade
   );
@@ -349,7 +341,7 @@ function SingleDeptFilterModal({
     // fire when click "Reset"
     // set local state to empty array
     setSelectedDept(null);
-    setIsSingleDeptSelective(null);
+    setIsSingleDeptSelective(isSelectiveOptions[0]);
     setSelectedCourseType(null);
     setSuggestedGrade(null);
   };

src/components/Providers/CourseSearchingProvider.tsx

@@ -77,7 +77,7 @@ const emptyFilterObject: Filter = {
   grouping_course_type: [],
   dept: null,
   department_course_type: null,
-  singleDeptIsSelective: null,
+  singleDeptIsSelective: isSelectiveOptions[0],
   suggestedGrade: null,
 };
 
@@ -214,7 +214,7 @@ const CourseSearchingProvider: React.FC<{
           return (
             searchFilters.dept !== null ||
             searchFilters.department_course_type !== null ||
-            searchFilters.singleDeptIsSelective !== null ||
+            searchFilters.singleDeptIsSelective !== isSelectiveOptions[0] ||
             searchFilters.suggestedGrade !== null
           );
         }

src/types/search.tsx

@@ -40,7 +40,7 @@ export type Filter = {
   grouping_course_type: string[]; // groupingCourseTypes
   dept: Department | null; // for singleDept, department
   department_course_type: string | null; // for singleDept, departmentCourseTypes
-  singleDeptIsSelective: boolean | null; // for singleDept, isSelectiveSingleDept
+  singleDeptIsSelective: IsSelectiveOption; // for singleDept, isSelectiveSingleDept
   suggestedGrade: string | null; // for singleDept, suggestedGrade
 };