feat(02-01): create useMonthParam hook and MonthNavigator component
- useMonthParam reads/writes month URL search param with YYYY-MM fallback - navigateMonth handles year rollover via Date constructor - MonthNavigator renders prev/next arrows with Select dropdown - Dropdown lists available budget months with locale-aware formatting
This commit is contained in:
26
src/hooks/useMonthParam.ts
Normal file
26
src/hooks/useMonthParam.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { useSearchParams } from "react-router-dom"
|
||||
|
||||
export function useMonthParam() {
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
|
||||
const monthParam = searchParams.get("month")
|
||||
const now = new Date()
|
||||
const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`
|
||||
const month = monthParam || currentMonth
|
||||
|
||||
const setMonth = (newMonth: string) => {
|
||||
setSearchParams((prev) => {
|
||||
prev.set("month", newMonth)
|
||||
return prev
|
||||
})
|
||||
}
|
||||
|
||||
const navigateMonth = (delta: number) => {
|
||||
const [year, mo] = month.split("-").map(Number)
|
||||
const d = new Date(year, mo - 1 + delta, 1)
|
||||
const next = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`
|
||||
setMonth(next)
|
||||
}
|
||||
|
||||
return { month, setMonth, navigateMonth }
|
||||
}
|
||||
Reference in New Issue
Block a user