* main: [offers][feat] revamp comments section [offers][feat] add job type for dashboard cards (#503) [offers][feat] add query params to offer table (#502) [offers][fix] Refactor UI (#500)pull/501/head^2
Bryann Yeap Kok Keong
3 years ago
commit
dcae3c1685
@ -0,0 +1,79 @@
|
||||
import { useRouter } from 'next/router';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
type SearchParamOptions<Value> = [Value] extends [string]
|
||||
? {
|
||||
defaultValues?: Array<Value>;
|
||||
paramToString?: (value: Value) => string | null;
|
||||
stringToParam?: (param: string) => Value | null;
|
||||
}
|
||||
: {
|
||||
defaultValues?: Array<Value>;
|
||||
paramToString: (value: Value) => string | null;
|
||||
stringToParam: (param: string) => Value | null;
|
||||
};
|
||||
|
||||
export const useSearchParam = <Value = string>(
|
||||
name: string,
|
||||
opts?: SearchParamOptions<Value>,
|
||||
) => {
|
||||
const {
|
||||
defaultValues,
|
||||
stringToParam = (param: string) => param,
|
||||
paramToString: valueToQueryParam = (value: Value) => String(value),
|
||||
} = opts ?? {};
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const [params, setParams] = useState<Array<Value>>(defaultValues || []);
|
||||
|
||||
useEffect(() => {
|
||||
if (router.isReady && !isInitialized) {
|
||||
// Initialize from query params
|
||||
const query = router.query[name];
|
||||
if (query) {
|
||||
const queryValues = Array.isArray(query) ? query : [query];
|
||||
setParams(
|
||||
queryValues
|
||||
.map(stringToParam)
|
||||
.filter((value) => value !== null) as Array<Value>,
|
||||
);
|
||||
}
|
||||
setIsInitialized(true);
|
||||
}
|
||||
}, [isInitialized, name, stringToParam, router]);
|
||||
|
||||
const setParamsCallback = useCallback(
|
||||
(newParams: Array<Value>) => {
|
||||
setParams(newParams);
|
||||
localStorage.setItem(
|
||||
name,
|
||||
JSON.stringify(
|
||||
newParams.map(valueToQueryParam).filter((param) => param !== null),
|
||||
),
|
||||
);
|
||||
},
|
||||
[name, valueToQueryParam],
|
||||
);
|
||||
|
||||
return [params, setParamsCallback, isInitialized] as const;
|
||||
};
|
||||
|
||||
export const useSearchParamSingle = <Value = string>(
|
||||
name: string,
|
||||
opts?: Omit<SearchParamOptions<Value>, 'defaultValues'> & {
|
||||
defaultValue?: Value;
|
||||
},
|
||||
) => {
|
||||
const { defaultValue, ...restOpts } = opts ?? {};
|
||||
const [params, setParams, isInitialized] = useSearchParam<Value>(name, {
|
||||
defaultValues: defaultValue !== undefined ? [defaultValue] : undefined,
|
||||
...restOpts,
|
||||
} as SearchParamOptions<Value>);
|
||||
|
||||
return [
|
||||
params[0],
|
||||
(value: Value) => setParams([value]),
|
||||
isInitialized,
|
||||
] as const;
|
||||
};
|
||||
Loading…
Reference in new issue