From 3c302bfacb088d86a1a640df4d832170d36bb038 Mon Sep 17 00:00:00 2001
From: nainglinnkhant <nainglinnkhnt@gmail.com>
Date: Tue, 10 Dec 2024 01:28:17 +0700
Subject: [PATCH] feat: handle date range url state with nuqs

---
 package.json                               |   1 +
 pnpm-lock.yaml                             |  27 +++++
 src/app/_components/create-task-dialog.tsx |   2 +-
 src/app/_components/update-task-sheet.tsx  |   2 +-
 src/app/layout.tsx                         |  27 ++---
 src/components/date-range-picker.tsx       | 111 ++++++++-------------
 6 files changed, 84 insertions(+), 86 deletions(-)

diff --git a/package.json b/package.json
index 95d5821..db5fa3c 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "nanoid": "^5.0.7",
     "next": "14.2.4",
     "next-themes": "^0.3.0",
+    "nuqs": "^2.2.3",
     "postgres": "^3.4.4",
     "react": "18.3.1",
     "react-day-picker": "^8.10.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7bf9692..a4df954 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -83,6 +83,9 @@ dependencies:
   next-themes:
     specifier: ^0.3.0
     version: 0.3.0(react-dom@18.3.1)(react@18.3.1)
+  nuqs:
+    specifier: ^2.2.3
+    version: 2.2.3(next@14.2.4)(react@18.3.1)
   postgres:
     specifier: ^3.4.4
     version: 3.4.4
@@ -4528,6 +4531,10 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: false
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -4621,6 +4628,26 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /nuqs@2.2.3(next@14.2.4)(react@18.3.1):
+    resolution: {integrity: sha512-nMCcUW06KSqEXA0xp+LiRqDpIE59BVYbjZLe0HUisJAlswfihHYSsAjYTzV0lcE1thfh8uh+LqUHGdQ8qq8rfA==}
+    peerDependencies:
+      '@remix-run/react': '>=2'
+      next: '>=14.2.0'
+      react: '>=18.2.0 || ^19.0.0-0'
+      react-router-dom: '>=6'
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      next:
+        optional: true
+      react-router-dom:
+        optional: true
+    dependencies:
+      mitt: 3.0.1
+      next: 14.2.4(@babel/core@7.24.7)(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
diff --git a/src/app/_components/create-task-dialog.tsx b/src/app/_components/create-task-dialog.tsx
index 8046828..88beb82 100644
--- a/src/app/_components/create-task-dialog.tsx
+++ b/src/app/_components/create-task-dialog.tsx
@@ -116,7 +116,7 @@ export function CreateTaskDialog() {
                   <FormLabel>Title</FormLabel>
                   <FormControl>
                     <Textarea
-                      placeholder="Do a kickflip"
+                      placeholder="Build a reusable combobox"
                       className="resize-none"
                       {...field}
                     />
diff --git a/src/app/_components/update-task-sheet.tsx b/src/app/_components/update-task-sheet.tsx
index b4249aa..2d7b950 100644
--- a/src/app/_components/update-task-sheet.tsx
+++ b/src/app/_components/update-task-sheet.tsx
@@ -96,7 +96,7 @@ export function UpdateTaskSheet({ task, ...props }: UpdateTaskSheetProps) {
                   <FormLabel>Title</FormLabel>
                   <FormControl>
                     <Textarea
-                      placeholder="Do a kickflip"
+                      placeholder="Build a reusable combobox"
                       className="resize-none"
                       {...field}
                     />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9378362..f270515 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import { Analytics } from "@vercel/analytics/react"
+import { NuqsAdapter } from "nuqs/adapters/next/app"
 
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
@@ -84,18 +85,20 @@ export default function RootLayout({ children }: React.PropsWithChildren) {
           fontMono.variable
         )}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <div className="relative flex min-h-screen flex-col">
-            <SiteHeader />
-            <main className="flex-1">{children}</main>
-          </div>
-          <TailwindIndicator />
-        </ThemeProvider>
+        <NuqsAdapter>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <div className="relative flex min-h-screen flex-col">
+              <SiteHeader />
+              <main className="flex-1">{children}</main>
+            </div>
+            <TailwindIndicator />
+          </ThemeProvider>
+        </NuqsAdapter>
         <Toaster richColors />
         <Analytics />
       </body>
diff --git a/src/components/date-range-picker.tsx b/src/components/date-range-picker.tsx
index 86825ee..fb0145f 100644
--- a/src/components/date-range-picker.tsx
+++ b/src/components/date-range-picker.tsx
@@ -1,10 +1,9 @@
 "use client"
 
 import * as React from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { CalendarIcon } from "@radix-ui/react-icons"
-import { addDays, format } from "date-fns"
-import type { DateRange } from "react-day-picker"
+import { format } from "date-fns"
+import { createParser, useQueryState } from "nuqs"
 
 import { cn } from "@/lib/utils"
 import { Button, type ButtonProps } from "@/components/ui/button"
@@ -15,6 +14,15 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
+const parseAsDate = createParser({
+  parse(queryValue) {
+    return new Date(queryValue)
+  },
+  serialize(value) {
+    return format(value, "yyyy-MM-dd")
+  },
+})
+
 interface DateRangePickerProps
   extends React.ComponentPropsWithoutRef<typeof PopoverContent> {
   /**
@@ -23,7 +31,7 @@ interface DateRangePickerProps
    * @type DateRange
    * @example { from: new Date(), to: new Date() }
    */
-  dateRange?: DateRange
+  // dateRange?: DateRange
 
   /**
    * The number of days to display in the date range picker.
@@ -31,7 +39,7 @@ interface DateRangePickerProps
    * @type number
    * @example 7
    */
-  dayCount?: number
+  // dayCount?: number
 
   /**
    * The placeholder text of the calendar trigger button.
@@ -63,8 +71,8 @@ interface DateRangePickerProps
 }
 
 export function DateRangePicker({
-  dateRange,
-  dayCount,
+  // dateRange,
+  // dayCount,
   placeholder = "Pick a date",
   triggerVariant = "outline",
   triggerSize = "default",
@@ -72,64 +80,17 @@ export function DateRangePicker({
   className,
   ...props
 }: DateRangePickerProps) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  const fromParam = searchParams.get("from")
-  const toParam = searchParams.get("to")
-
-  function calcDateRange() {
-    let fromDay: Date | undefined
-    let toDay: Date | undefined
-
-    if (dateRange) {
-      fromDay = dateRange.from
-      toDay = dateRange.to
-    } else if (dayCount) {
-      toDay = new Date()
-      fromDay = addDays(toDay, -dayCount)
-    }
-
-    return {
-      from: fromParam ? new Date(fromParam) : fromDay,
-      to: toParam ? new Date(toParam) : toDay,
-    }
-  }
-
-  const [date, setDate] = React.useState<DateRange | undefined>(() =>
-    calcDateRange()
+  const [fromDate, setFromDate] = useQueryState(
+    "from",
+    parseAsDate.withOptions({ shallow: false, history: "push" })
+  )
+  const [toDate, setToDate] = useQueryState(
+    "to",
+    parseAsDate.withOptions({ shallow: false, history: "push" })
   )
 
-  // Update query string
-  React.useEffect(() => {
-    const newSearchParams = new URLSearchParams(searchParams)
-    if (date?.from) {
-      newSearchParams.set("from", format(date.from, "yyyy-MM-dd"))
-    } else {
-      newSearchParams.delete("from")
-    }
-
-    if (date?.to) {
-      newSearchParams.set("to", format(date.to, "yyyy-MM-dd"))
-    } else {
-      newSearchParams.delete("to")
-    }
-
-    router.replace(`${pathname}?${newSearchParams.toString()}`, {
-      scroll: false,
-    })
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date?.from, date?.to])
-
-  // React.useEffect(() => {
-  //   const dateRange = calcDateRange()
-
-  //   setDate(dateRange)
-
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [fromParam, toParam])
+  const from = fromDate ?? undefined
+  const to = toDate ?? undefined
 
   return (
     <div className="grid gap-2">
@@ -140,19 +101,19 @@ export function DateRangePicker({
             size={triggerSize}
             className={cn(
               "w-full justify-start truncate text-left font-normal",
-              !date && "text-muted-foreground",
+              !fromDate && !toDate && "text-muted-foreground",
               triggerClassName
             )}
           >
             <CalendarIcon className="mr-2 size-4" />
-            {date?.from ? (
-              date.to ? (
+            {fromDate ? (
+              toDate ? (
                 <>
-                  {format(date.from, "LLL dd, y")} -{" "}
-                  {format(date.to, "LLL dd, y")}
+                  {format(fromDate, "LLL dd, y")} -{" "}
+                  {format(toDate, "LLL dd, y")}
                 </>
               ) : (
-                format(date.from, "LLL dd, y")
+                format(fromDate, "LLL dd, y")
               )
             ) : (
               <span>{placeholder}</span>
@@ -163,9 +124,15 @@ export function DateRangePicker({
           <Calendar
             initialFocus
             mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
+            defaultMonth={from}
+            selected={{ from, to }}
+            disabled={(date) => date > new Date()}
+            onSelect={(value) => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              setFromDate(value?.from ?? null)
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              setToDate(value?.to ?? null)
+            }}
             numberOfMonths={2}
           />
         </PopoverContent>