❇️ [refactor][frontend] date range picker state should be props

Author: tomy0000000

frontend/src/components/date-range-picker.tsx

@@ -1,6 +1,5 @@
-import { addDays, format } from 'date-fns'
+import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
-import * as React from 'react'
 import { type DateRange } from 'react-day-picker'
 
 import { Button } from '@/components/ui/button'
@@ -12,12 +11,15 @@ import {
   PopoverTrigger
 } from '@/components/ui/popover'
 
-export function DatePickerWithRange() {
-  const [date, setDate] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), 0, 20),
-    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20)
-  })
+interface DateRangePickerProps {
+  dateRange: DateRange | undefined
+  setDateRange: (date: DateRange | undefined) => void
+}
 
+export function DatePickerWithRange({
+  dateRange,
+  setDateRange
+}: DateRangePickerProps) {
   return (
     <Field className="w-60 shrink-0">
       <FieldLabel htmlFor="date-picker-range">Date Range</FieldLabel>
@@ -29,14 +31,14 @@ export function DatePickerWithRange() {
             className="justify-start px-2.5 font-normal"
           >
             <CalendarIcon />
-            {date?.from ? (
-              date.to ? (
+            {dateRange?.from ? (
+              dateRange.to ? (
                 <>
-                  {format(date.from, 'LLL dd, y')} -{' '}
-                  {format(date.to, 'LLL dd, y')}
+                  {format(dateRange.from, 'LLL dd, y')} -{' '}
+                  {format(dateRange.to, 'LLL dd, y')}
                 </>
               ) : (
-                format(date.from, 'LLL dd, y')
+                format(dateRange.from, 'LLL dd, y')
               )
             ) : (
               <span>Pick a date</span>
@@ -46,9 +48,9 @@ export function DatePickerWithRange() {
         <PopoverContent className="w-auto p-0" align="start">
           <Calendar
             mode="range"
-            defaultMonth={date?.from}
-            selected={date}
-            onSelect={setDate}
+            defaultMonth={dateRange?.from}
+            selected={dateRange}
+            onSelect={setDateRange}
             numberOfMonths={2}
           />
         </PopoverContent>

frontend/src/routes/_auth/account/$id/transaction.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
-import { Fragment, useEffect } from 'react'
+import { Fragment, useEffect, useState } from 'react'
+import { type DateRange } from 'react-day-picker'
 import { toast } from 'sonner'
 
 import { Amount } from '@/components/amount'
@@ -375,6 +376,8 @@ function AccountTransactionPage() {
   const { id } = Route.useParams()
   const accountId = Number(id)
 
+  const [dateRange, setDateRange] = useState<DateRange | undefined>()
+
   const {
     isError,
     data: account,
@@ -406,7 +409,10 @@ function AccountTransactionPage() {
       {/* Date Picker */}
       <div className="bg-background sticky top-0 z-10 pt-4">
         <div className="flex items-end gap-3 overflow-x-auto">
-          <DatePickerWithRange />
+          <DatePickerWithRange
+            dateRange={dateRange}
+            setDateRange={setDateRange}
+          />
         </div>
 
         <Separator className="my-4 bg-foreground/30" />

frontend/src/routes/_auth/category.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
-import { Fragment, useEffect } from 'react'
+import { Fragment, useEffect, useState } from 'react'
+import { type DateRange } from 'react-day-picker'
 import { toast } from 'sonner'
 
 import { DatePickerWithRange } from '@/components/date-range-picker'
@@ -21,6 +22,7 @@ const transactions = [
 
 function CategoryPage() {
   const { client } = Route.useRouteContext()
+  const [dateRange, setDateRange] = useState<DateRange | undefined>()
 
   const {
     isError,
@@ -58,7 +60,10 @@ function CategoryPage() {
 
       <div className="flex-1 p-4">
         <ScrollArea className="h-full w-full rounded-md">
-          <DatePickerWithRange />
+          <DatePickerWithRange
+            dateRange={dateRange}
+            setDateRange={setDateRange}
+          />
           {transactions.map((transaction) => (
             <Fragment key={transaction.title}>
               <div className="text-sm">