From eb1eb37bec4c77d0ff0a4bb60fda0965e5b26c67 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Thu, 11 Apr 2024 16:22:37 -0700
Subject: [PATCH] feat: overhaul filters (#55)

* feat: remove unused filters

* feat: default startDate to undefined

* feat: default available seats to false
---
 components/search/Search.tsx                  |  6 +++---
 components/search/filter/FilterComponents.tsx |  9 +++------
 components/search/filter/Filters.tsx          | 20 +------------------
 lib/utils/filter.ts                           |  8 ++++++--
 4 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/components/search/Search.tsx b/components/search/Search.tsx
index 3a72136..554ae3b 100644
--- a/components/search/Search.tsx
+++ b/components/search/Search.tsx
@@ -47,7 +47,7 @@ export type FilterValues = {
     format: boolean[];
     enrollment: boolean[];
     available: boolean[];
-    start: Date;
+    start: Date | undefined;
     end: Date | undefined;
     institution: string;
     min: number;
@@ -105,8 +105,8 @@ const Search = () => {
 
     const [format, setFormat] = useState([true, true]);
     const [enrollment, setEnrollment] = useState([true]);
-    const [available, setAvailable] = useState([true]);
-    const [start, setStart] = useState(new Date());
+    const [available, setAvailable] = useState([false]);
+    const [start, setStart] = useState<Date>();
     const [end, setEnd] = useState<Date>();
     const [institution, setInstitution] = useState("Any Institution");
     const [min, setMin] = useState(0);
diff --git a/components/search/filter/FilterComponents.tsx b/components/search/filter/FilterComponents.tsx
index 49e6fae..3a89fe8 100644
--- a/components/search/filter/FilterComponents.tsx
+++ b/components/search/filter/FilterComponents.tsx
@@ -77,18 +77,16 @@ export const CustomFilterCheckbox = (props: FilterCheckboxProps) => {
 };
 
 interface CalendarFilterProps {
-    onStartChange: Dispatch<React.SetStateAction<Date>>;
+    onStartChange: Dispatch<SetStateAction<Date | undefined>>;
     onEndChange: Dispatch<SetStateAction<Date | undefined>>;
-    defaultStart: Date;
+    defaultStart: Date | undefined;
     defaultEnd: Date | undefined;
 }
 
 export const CalendarFilter = (props: CalendarFilterProps) => {
     const { onStartChange, onEndChange, defaultStart, defaultEnd } = props;
 
-    const [startDate, setStartDate] = useState<Date | undefined>(
-        defaultStart ? new Date(defaultStart) : new Date(),
-    );
+    const [startDate, setStartDate] = useState<Date | undefined>(defaultStart);
     const [endDate, setEndDate] = useState<Date | undefined>(defaultEnd);
 
     const handleStartChange = (date: Date | undefined) => {
@@ -138,7 +136,6 @@ export const CalendarFilter = (props: CalendarFilterProps) => {
                                     selected={startDate}
                                     onSelect={handleStartChange}
                                     initialFocus
-                                    required
                                 />
                             </PopoverContent>
                         </Popover>
diff --git a/components/search/filter/Filters.tsx b/components/search/filter/Filters.tsx
index 75a3924..9ab12d7 100644
--- a/components/search/filter/Filters.tsx
+++ b/components/search/filter/Filters.tsx
@@ -3,7 +3,6 @@ import {
     CalendarFilter,
     CustomFilterCheckbox,
     InstitutionDropdown,
-    UnitsFilter,
 } from "./FilterComponents";
 import { FaCircleXmark } from "react-icons/fa6";
 import { CourseObject, FilterValues } from "../Search";
@@ -13,7 +12,7 @@ interface SearchFilterProps {
     setFormat: Dispatch<SetStateAction<boolean[]>>;
     setEnrollment: Dispatch<SetStateAction<boolean[]>>;
     setAvailable: Dispatch<SetStateAction<boolean[]>>;
-    setStart: Dispatch<React.SetStateAction<Date>>;
+    setStart: Dispatch<React.SetStateAction<Date | undefined>>;
     setEnd: Dispatch<SetStateAction<Date | undefined>>;
     setInstitution: Dispatch<SetStateAction<string>>;
     setMin: Dispatch<SetStateAction<number>>;
@@ -25,13 +24,10 @@ interface SearchFilterProps {
 export const SearchFilters = (props: SearchFilterProps) => {
     const {
         setFormat,
-        setEnrollment,
         setAvailable,
         setStart,
         setEnd,
         setInstitution,
-        setMin,
-        setMax,
         filterValues,
         courses,
     } = props;
@@ -44,14 +40,6 @@ export const SearchFilters = (props: SearchFilterProps) => {
                 onChange={setFormat}
                 defaultValue={filterValues.format}
             />
-            <CustomFilterCheckbox
-                title="Instant Enrollment"
-                categories={[
-                    "Only show courses eligible for One-Click Registration between your home school and the teaching school",
-                ]}
-                onChange={setEnrollment}
-                defaultValue={filterValues.enrollment}
-            />
             <CustomFilterCheckbox
                 title="Available Seats"
                 categories={[
@@ -71,12 +59,6 @@ export const SearchFilters = (props: SearchFilterProps) => {
                 onChange={setInstitution}
                 courses={courses}
             />
-            <UnitsFilter
-                onMinChange={setMin}
-                onMaxChange={setMax}
-                defaultMin={filterValues.min}
-                defaultMax={filterValues.max}
-            />
         </div>
     );
 };
diff --git a/lib/utils/filter.ts b/lib/utils/filter.ts
index 0a24fce..736e550 100644
--- a/lib/utils/filter.ts
+++ b/lib/utils/filter.ts
@@ -1,6 +1,10 @@
 import { CourseObject, FilterValues } from "../../components/search/Search";
 
-export const startsAfter = (start: Date, result: CourseObject) => {
+export const startsAfter = (start: Date | undefined, result: CourseObject) => {
+    if (start === undefined) {
+        return true;
+    }
+
     const courseDate = new Date(result.startDate);
 
     courseDate.setHours(0, 0, 0, 0);
@@ -10,7 +14,7 @@ export const startsAfter = (start: Date, result: CourseObject) => {
 };
 
 export const endsBefore = (end: Date | undefined, result: CourseObject) => {
-    if (end == undefined) {
+    if (end === undefined) {
         return true;
     }