63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
|
|
export default function useQueryParams<T>() {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const urlSearchParams = new URLSearchParams(searchParams?.toString());
|
|
|
|
// function setQueryParams(params: Partial<T>) {
|
|
// Object.entries(params).forEach(([key, value]) => {
|
|
// if (value === undefined || value === null) {
|
|
// urlSearchParams.delete(key);
|
|
// } else {
|
|
// urlSearchParams.set(key, String(value));
|
|
// }
|
|
// });
|
|
|
|
// const search = urlSearchParams.toString();
|
|
// const query = search ? `?${search}` : "";
|
|
// // replace since we don't want to build a history
|
|
// router.replace(`${pathname}${query}`);
|
|
// }
|
|
|
|
function setQueryParams(
|
|
props:
|
|
| ((
|
|
current: URLSearchParams,
|
|
obj: Record<string, string | string[]>
|
|
) => Partial<T>)
|
|
| Partial<T>
|
|
) {
|
|
let params = props;
|
|
if (typeof params === "function") {
|
|
params = params(urlSearchParams, Object.fromEntries(urlSearchParams));
|
|
}
|
|
console.log("Params", params);
|
|
Object.entries(params).forEach(([key, value]) => {
|
|
console.log("Value", value);
|
|
if (value === undefined || value === null) {
|
|
urlSearchParams.delete(key);
|
|
} else if (Array.isArray(value)) {
|
|
// clear
|
|
urlSearchParams.delete(key);
|
|
for (const val of value) {
|
|
console.log("Setting", val);
|
|
urlSearchParams.append(key, String(val));
|
|
}
|
|
} else {
|
|
urlSearchParams.set(key, String(value));
|
|
}
|
|
});
|
|
|
|
const search = urlSearchParams.toString();
|
|
const query = search ? `?${search}` : "";
|
|
// replace since we don't want to build a history
|
|
router.replace(`${pathname}${query}`);
|
|
}
|
|
|
|
return { queryParams: searchParams, setQueryParams };
|
|
}
|