From 65eb6fa5c1cf106762f3d25527beb4329b13f6ce Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Wed, 3 Apr 2024 00:11:30 -0700
Subject: [PATCH] feat: replace datepicker (#48)

* feat: replace datepicker

* chore: remove react-datepicker

* style: change date format to decrease length
---
 components/search/FilterComponents.tsx |  95 ++++++++++++++++-----
 components/ui/calendar.tsx             |  66 +++++++++++++++
 package-lock.json                      | 112 +++++--------------------
 package.json                           |   4 +-
 4 files changed, 162 insertions(+), 115 deletions(-)
 create mode 100644 components/ui/calendar.tsx

diff --git a/components/search/FilterComponents.tsx b/components/search/FilterComponents.tsx
index 062297e..a24aff3 100644
--- a/components/search/FilterComponents.tsx
+++ b/components/search/FilterComponents.tsx
@@ -3,9 +3,18 @@
 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 { format } from "date-fns";
 
-import "react-datepicker/dist/react-datepicker.css";
+import { Calendar } from "@/components/ui/calendar";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+
+import { Button } from "../ui/button";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface FilterCheckboxProps {
     title: string;
@@ -70,19 +79,24 @@ interface CalendarFilterProps {
 export const CalendarFilter = (props: CalendarFilterProps) => {
     const { onStartChange, onEndChange, defaultStart, defaultEnd } = props;
 
-    const [start, setStart] = useState(
+    const [startDate, setStartDate] = useState<Date | undefined>(
         defaultStart ? new Date(defaultStart) : new Date(),
     );
-    const [end, setEnd] = useState(defaultEnd);
+    const [endDate, setEndDate] = useState<Date | undefined>(defaultEnd);
+
+    const handleStartChange = (date: Date | undefined) => {
+        if (!date) {
+            console.error("No start date selected");
+            return;
+        }
 
-    const handleStartChange = (date: Date) => {
         onStartChange(date);
-        setStart(date);
+        setStartDate(date);
     };
 
-    const handleEndChange = (date: Date) => {
+    const handleEndChange = (date: Date | undefined) => {
         onEndChange(date);
-        setEnd(date);
+        setEndDate(date);
     };
 
     return (
@@ -94,12 +108,33 @@ export const CalendarFilter = (props: CalendarFilterProps) => {
                         Starts After
                     </label>
                     <div className="flex flex-row items-center gap-2">
-                        <DatePicker
-                            selected={start}
-                            onChange={handleStartChange}
-                            onSelect={handleStartChange}
-                            className="w-44 appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
-                        />
+                        <Popover>
+                            <PopoverTrigger asChild>
+                                <Button
+                                    variant={"outline"}
+                                    className={cn(
+                                        "w-44 justify-start rounded-lg border-[1px] border-gray text-left font-normal",
+                                        !startDate && "text-muted-foreground",
+                                    )}
+                                >
+                                    <CalendarIcon className="mr-2 h-4 w-4" />
+                                    {startDate ? (
+                                        format(startDate, "PP")
+                                    ) : (
+                                        <span>Start date</span>
+                                    )}
+                                </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0">
+                                <Calendar
+                                    mode="single"
+                                    selected={startDate}
+                                    onSelect={handleStartChange}
+                                    initialFocus
+                                    required
+                                />
+                            </PopoverContent>
+                        </Popover>
                     </div>
                 </div>
                 <div>
@@ -107,12 +142,32 @@ export const CalendarFilter = (props: CalendarFilterProps) => {
                         Ends Before
                     </label>
                     <div className="flex flex-row items-center gap-2">
-                        <DatePicker
-                            selected={end}
-                            onChange={handleEndChange}
-                            onSelect={handleEndChange}
-                            className="w-44 appearance-none rounded-lg border-[1px] border-gray px-4 py-2"
-                        />
+                        <Popover>
+                            <PopoverTrigger asChild>
+                                <Button
+                                    variant={"outline"}
+                                    className={cn(
+                                        "w-44 justify-start rounded-lg border-[1px] border-gray text-left font-normal",
+                                        !endDate && "text-muted-foreground",
+                                    )}
+                                >
+                                    <CalendarIcon className="mr-2 h-4 w-4" />
+                                    {endDate ? (
+                                        format(endDate, "PP")
+                                    ) : (
+                                        <span>End date</span>
+                                    )}
+                                </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0">
+                                <Calendar
+                                    mode="single"
+                                    selected={endDate}
+                                    onSelect={handleEndChange}
+                                    initialFocus
+                                />
+                            </PopoverContent>
+                        </Popover>
                     </div>
                 </div>
             </div>
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..2f02434
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/package-lock.json b/package-lock.json
index ca1a4fe..c5a52c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,12 @@
                 "@radix-ui/react-toast": "^1.1.5",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.0.0",
+                "date-fns": "^3.6.0",
                 "lucide-react": "^0.303.0",
                 "next": "^14.0.2",
                 "next-pwa": "^5.6.0",
                 "react": "^18.2.0",
-                "react-datepicker": "^4.25.0",
+                "react-day-picker": "^8.10.0",
                 "react-dom": "^18.2.0",
                 "react-icons": "^4.12.0",
                 "react-lazy-load": "^4.0.1",
@@ -31,7 +32,6 @@
                 "@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",
@@ -2684,15 +2684,6 @@
                 "node": ">= 8"
             }
         },
-        "node_modules/@popperjs/core": {
-            "version": "2.11.8",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/popperjs"
-            }
-        },
         "node_modules/@radix-ui/number": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -3760,18 +3751,6 @@
                 "csstype": "^3.0.2"
             }
         },
-        "node_modules/@types/react-datepicker": {
-            "version": "4.19.4",
-            "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.19.4.tgz",
-            "integrity": "sha512-HRD0LHTxBVe61LRJgTdPscbapLQl7+jI/7bxnPGpvzdJ/iXN9q7ucYv8HKULeIAN84O5LzFhwTMOkO4QnIUJaQ==",
-            "dev": true,
-            "dependencies": {
-                "@popperjs/core": "^2.9.2",
-                "@types/react": "*",
-                "date-fns": "^2.0.1",
-                "react-popper": "^2.2.5"
-            }
-        },
         "node_modules/@types/react-dom": {
             "version": "18.2.15",
             "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz",
@@ -4984,11 +4963,6 @@
                 "url": "https://joebell.co.uk"
             }
         },
-        "node_modules/classnames": {
-            "version": "2.5.1",
-            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-            "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
-        },
         "node_modules/clean-webpack-plugin": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
@@ -5234,18 +5208,12 @@
             }
         },
         "node_modules/date-fns": {
-            "version": "2.30.0",
-            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-            "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-            "dependencies": {
-                "@babel/runtime": "^7.21.0"
-            },
-            "engines": {
-                "node": ">=0.11"
-            },
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+            "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
             "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/date-fns"
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
             }
         },
         "node_modules/debug": {
@@ -9712,6 +9680,7 @@
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
             "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
@@ -9792,21 +9761,17 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/react-datepicker": {
-            "version": "4.25.0",
-            "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
-            "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
-            "dependencies": {
-                "@popperjs/core": "^2.11.8",
-                "classnames": "^2.2.6",
-                "date-fns": "^2.30.0",
-                "prop-types": "^15.7.2",
-                "react-onclickoutside": "^6.13.0",
-                "react-popper": "^2.3.0"
+        "node_modules/react-day-picker": {
+            "version": "8.10.0",
+            "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.0.tgz",
+            "integrity": "sha512-mz+qeyrOM7++1NCb1ARXmkjMkzWVh2GL9YiPbRjKe0zHccvekk4HE+0MPOZOrosn8r8zTHIIeOUXTmXRqmkRmg==",
+            "funding": {
+                "type": "individual",
+                "url": "https://github.com/sponsors/gpbl"
             },
             "peerDependencies": {
-                "react": "^16.9.0 || ^17 || ^18",
-                "react-dom": "^16.9.0 || ^17 || ^18"
+                "date-fns": "^2.28.0 || ^3.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
             }
         },
         "node_modules/react-dom": {
@@ -9821,11 +9786,6 @@
                 "react": "^18.2.0"
             }
         },
-        "node_modules/react-fast-compare": {
-            "version": "3.2.2",
-            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
-            "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
-        },
         "node_modules/react-icons": {
             "version": "4.12.0",
             "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
@@ -9837,7 +9797,8 @@
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "dev": true
         },
         "node_modules/react-lazy-load": {
             "version": "4.0.1",
@@ -9848,33 +9809,6 @@
                 "react-dom": "^17.0.0 || ^18.0.0"
             }
         },
-        "node_modules/react-onclickoutside": {
-            "version": "6.13.0",
-            "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
-            "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
-            "funding": {
-                "type": "individual",
-                "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
-            },
-            "peerDependencies": {
-                "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
-                "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
-            }
-        },
-        "node_modules/react-popper": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
-            "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
-            "dependencies": {
-                "react-fast-compare": "^3.0.1",
-                "warning": "^4.0.2"
-            },
-            "peerDependencies": {
-                "@popperjs/core": "^2.0.0",
-                "react": "^16.8.0 || ^17 || ^18",
-                "react-dom": "^16.8.0 || ^17 || ^18"
-            }
-        },
         "node_modules/react-remove-scroll": {
             "version": "2.5.5",
             "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -11503,14 +11437,6 @@
                 "makeerror": "1.0.12"
             }
         },
-        "node_modules/warning": {
-            "version": "4.0.3",
-            "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-            "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-            "dependencies": {
-                "loose-envify": "^1.0.0"
-            }
-        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 17485c8..e3d9471 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,12 @@
         "@radix-ui/react-toast": "^1.1.5",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
+        "date-fns": "^3.6.0",
         "lucide-react": "^0.303.0",
         "next": "^14.0.2",
         "next-pwa": "^5.6.0",
         "react": "^18.2.0",
-        "react-datepicker": "^4.25.0",
+        "react-day-picker": "^8.10.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.12.0",
         "react-lazy-load": "^4.0.1",
@@ -35,7 +36,6 @@
         "@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",