feat: swap input for datepicker

laurelin60 · Dec 31, 2023 · cc062da · cc062da
1 parent 61ebca4
commit cc062da
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 48 deletions.
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(

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
         "lucide-react": "^0.303.0",
         "next": "^14.0.2",
         "react": "^18.2.0",
+        "react-datepicker": "^4.25.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
         "react-lazy-load": "^4.0.1",
@@ -31,6 +32,7 @@
         "@types/jest": "^29.5.11",
         "@types/node": "^20",
         "@types/react": "^18",
+        "@types/react-datepicker": "^4.19.4",
         "@types/react-dom": "^18",
         "autoprefixer": "^10.0.1",
         "eslint": "^8",