feat: use react datepicker (#38)

* feat: swap input for datepicker * test: update for new types
laurelin60 · Dec 31, 2023 · 833bd6c · 833bd6c
1 parent 61ebca4
commit 833bd6c
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 61 deletions.
diff --git a/__tests__/search-filters.test.ts b/__tests__/search-filters.test.ts
@@ -80,8 +80,8 @@ const defaultFilterValues: FilterValues = {
     format: [true, true],
     enrollment: [false],
     available: [false],
-    start: "2023-12-20",
-    end: "",
+    start: new Date(2023, 11, 20),
+    end: undefined,
     institution: "Any Institution",
     min: 0,
     max: 20,
@@ -192,33 +192,28 @@ describe("Search Filters", () => {
 });
 
 describe("Filter Utils' Time Utilities", () => {
-    test("startsAfter none", async () => {
-        const result = startsAfter("", data.courses[0]);
-        expect(result).toBe(true);
-    });
-
     test("startsAfter defined returns true", async () => {
-        const result = startsAfter("2023-12-25", data.courses[0]);
+        const result = startsAfter(new Date("2023-12-25"), data.courses[0]);
         expect(result).toBe(true);
     });
 
     test("startsAfter defined returns false", async () => {
-        const result = startsAfter("2024-12-25", data.courses[0]);
+        const result = startsAfter(new Date("2024-12-25"), data.courses[0]);
         expect(result).toBe(false);
     });
 
-    test("endsBefore none", async () => {
-        const result = endsBefore("", data.courses[0]);
+    test("endsBefore undefined", async () => {
+        const result = endsBefore(undefined, data.courses[0]);
         expect(result).toBe(true);
     });
 
     test("endsBefore defined returns true", async () => {
-        const result = endsBefore("2024-06-14", data.courses[0]);
+        const result = endsBefore(new Date("2024-06-14"), data.courses[0]);
         expect(result).toBe(true);
     });
 
     test("endsBefore defined returns false", async () => {
-        const result = endsBefore("2024-05-14", data.courses[0]);
+        const result = endsBefore(new Date("2024-05-14"), data.courses[0]);
         expect(result).toBe(false);
     });
 

diff --git a/components/search/FilterComponents.tsx b/components/search/FilterComponents.tsx
@@ -3,6 +3,9 @@
 import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
 import { FaCheck, FaChevronDown } from "react-icons/fa";
 import { CollegeObject } from "./Search";
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";
 
 interface FilterCheckboxProps {
     title: string;
@@ -58,26 +61,28 @@ export const CustomFilterCheckbox = (props: FilterCheckboxProps) => {
 };
 
 interface CalendarFilterProps {
-    onStartChange: Dispatch<SetStateAction<string>>;
-    onEndChange: Dispatch<SetStateAction<string>>;
-    defaultStart: string | undefined;
-    defaultEnd: string | undefined;
+    onStartChange: Dispatch<React.SetStateAction<Date>>;
+    onEndChange: Dispatch<SetStateAction<Date | undefined>>;
+    defaultStart: Date;
+    defaultEnd: Date | undefined;
 }
 
 export const CalendarFilter = (props: CalendarFilterProps) => {
     const { onStartChange, onEndChange, defaultStart, defaultEnd } = props;
 
-    const [start, setStart] = useState(defaultStart);
+    const [start, setStart] = useState(
+        defaultStart ? new Date(defaultStart) : new Date(),
+    );
     const [end, setEnd] = useState(defaultEnd);
 
-    const handleStartChange = (e: ChangeEvent<HTMLInputElement>) => {
-        onStartChange(e.target.value);
-        setStart(e.target.value);
+    const handleStartChange = (date: Date) => {
+        onStartChange(date);
+        setStart(date);
     };
 
-    const handleEndChange = (e: ChangeEvent<HTMLInputElement>) => {
-        onEndChange(e.target.value);
-        setEnd(e.target.value);
+    const handleEndChange = (date: Date) => {
+        onEndChange(date);
+        setEnd(date);
     };
 
     return (
@@ -89,11 +94,11 @@ export const CalendarFilter = (props: CalendarFilterProps) => {
                         Starts After
                     </label>
                     <div className="flex flex-row items-center gap-2">
-                        <input
-                            type="date"
-                            className="appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
-                            value={start}
+                        <DatePicker
+                            selected={start}
                             onChange={handleStartChange}
+                            onSelect={handleStartChange}
+                            className="w-40 appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
                         />
                     </div>
                 </div>
@@ -102,11 +107,11 @@ export const CalendarFilter = (props: CalendarFilterProps) => {
                         Ends Before
                     </label>
                     <div className="flex flex-row items-center gap-2">
-                        <input
-                            type="date"
-                            className="appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
-                            value={end}
+                        <DatePicker
+                            selected={end}
                             onChange={handleEndChange}
+                            onSelect={handleEndChange}
+                            className="w-40 appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
                         />
                     </div>
                 </div>

diff --git a/components/search/Filters.tsx b/components/search/Filters.tsx
@@ -13,8 +13,8 @@ interface SearchFilterProps {
     setFormat: Dispatch<SetStateAction<boolean[]>>;
     setEnrollment: Dispatch<SetStateAction<boolean[]>>;
     setAvailable: Dispatch<SetStateAction<boolean[]>>;
-    setStart: Dispatch<SetStateAction<string>>;
-    setEnd: Dispatch<SetStateAction<string>>;
+    setStart: Dispatch<React.SetStateAction<Date>>;
+    setEnd: Dispatch<SetStateAction<Date | undefined>>;
     setInstitution: Dispatch<SetStateAction<string>>;
     setMin: Dispatch<SetStateAction<number>>;
     setMax: Dispatch<SetStateAction<number>>;

diff --git a/components/search/Search.tsx b/components/search/Search.tsx
@@ -43,8 +43,8 @@ export type FilterValues = {
     format: boolean[];
     enrollment: boolean[];
     available: boolean[];
-    start: string;
-    end: string;
+    start: Date;
+    end: Date | undefined;
     institution: string;
     min: number;
     max: number;
@@ -70,14 +70,8 @@ const Search = () => {
     const [format, setFormat] = useState([true, true]);
     const [enrollment, setEnrollment] = useState([true]);
     const [available, setAvailable] = useState([true]);
-    const [start, setStart] = useState(() => {
-        const today = new Date();
-        const year = today.getFullYear();
-        const month = (today.getMonth() + 1).toString().padStart(2, "0");
-        const day = today.getDate().toString().padStart(2, "0");
-        return `${year}-${month}-${day}`;
-    });
-    const [end, setEnd] = useState("");
+    const [start, setStart] = useState(new Date());
+    const [end, setEnd] = useState<Date>();
     const [institution, setInstitution] = useState("Any Institution");
     const [min, setMin] = useState(0);
     const [max, setMax] = useState(20);

diff --git a/components/search/filter-utils.ts b/components/search/filter-utils.ts
@@ -1,23 +1,27 @@
 import { CollegeObject, FilterValues } from "./Search";
 
-export const startsAfter = (start: string, result: CollegeObject) => {
-    if (start == undefined) return true;
+export const startsAfter = (start: Date, result: CollegeObject) => {
+    const month = result.startMonth.toString().padStart(2, "0");
+    const day = result.startDay.toString().padStart(2, "0");
+    const courseDate = new Date(`2024-${month}-${day}`);
+    courseDate.setHours(0, 0, 0, 0);
+    courseDate.setDate(courseDate.getDate() + 1);
 
-    return (
-        `2024-${result.startMonth.toString().padStart(2, "0")}-${result.startDay
-            .toString()
-            .padStart(2, "0")}` >= start
-    );
+    return courseDate > start;
 };
 
-export const endsBefore = (end: string, result: CollegeObject) => {
-    if (end == "") return true;
+export const endsBefore = (end: Date | undefined, result: CollegeObject) => {
+    if (end == undefined) {
+        return true;
+    }
+
+    const month = result.endMonth.toString().padStart(2, "0");
+    const day = result.endDay.toString().padStart(2, "0");
+    const courseDate = new Date(`2024-${month}-${day}`);
+    courseDate.setHours(0, 0, 0, 0);
+    courseDate.setDate(courseDate.getDate() + 1);
 
-    return (
-        `2024-${result.endMonth.toString().padStart(2, "0")}-${result.endDay
-            .toString()
-            .padStart(2, "0")}` <= end
-    );
+    return courseDate < end;
 };
 
 export function filterData(