77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { useRouter } from "next/navigation";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { usePathname } from "next/navigation";
|
|
import React, { useCallback, useState } from "react";
|
|
|
|
export const interval = {
|
|
"24h": "Last 24 Hours",
|
|
"7d": "Last 7 Days",
|
|
"30d": "Last 30 Days",
|
|
"90d": "Last 3 Months",
|
|
} as const;
|
|
|
|
export type Interval = keyof typeof interval;
|
|
|
|
export type Props = {
|
|
defaultSelected: Interval;
|
|
};
|
|
|
|
export const IntervalSelect: React.FC<Props> = ({ defaultSelected }) => {
|
|
const [selected, setSelected] = useState<Interval>(defaultSelected);
|
|
const searchParams = useModifySearchParams();
|
|
|
|
return (
|
|
<Select
|
|
value={selected}
|
|
onValueChange={(i: Interval) => {
|
|
setSelected(i);
|
|
searchParams.set("interval", i);
|
|
}}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue defaultValue={selected} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{Object.entries(interval).map(([id, label]) => (
|
|
<SelectItem key={id} value={id}>
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Utility hook to modify the search params of the current URL
|
|
*/
|
|
export function useModifySearchParams() {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams()!;
|
|
|
|
const hrefWithSearchparam = useCallback(
|
|
(name: string, value: string) => {
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
params.set(name, value);
|
|
return `${pathname}?${params.toString()}`;
|
|
},
|
|
[pathname, searchParams],
|
|
);
|
|
|
|
return {
|
|
set: (key: string, value: string) => {
|
|
router.push(hrefWithSearchparam(key, value), { scroll: false });
|
|
},
|
|
};
|
|
}
|