1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { buildPath } from '@/lib/url';
export function useNavigation() {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const [, teamId] = pathname.match(/\/teams\/([a-f0-9-]+)/) || [];
const [, websiteId] = pathname.match(/\/websites\/([a-f0-9-]+)/) || [];
const [queryParams, setQueryParams] = useState(Object.fromEntries(searchParams));
const updateParams = (params?: Record<string, string | number>) => {
return buildPath(pathname, { ...queryParams, ...params });
};
const replaceParams = (params?: Record<string, string | number>) => {
return buildPath(pathname, params);
};
const renderUrl = (path: string, params?: Record<string, string | number> | false) => {
return buildPath(
teamId ? `/teams/${teamId}${path}` : path,
params === false ? {} : { ...queryParams, ...params },
);
};
useEffect(() => {
setQueryParams(Object.fromEntries(searchParams));
}, [searchParams.toString()]);
return {
router,
pathname,
searchParams,
query: queryParams,
teamId,
websiteId,
updateParams,
replaceParams,
renderUrl,
};
}
|