Jean-Luc Makiola
448195016f
- 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
27 lines
793 B
TypeScript
27 lines
793 B
TypeScript
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 }
|
|
}
|