97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import { QueryParams } from 'constants/query';
|
|
import useUrlQuery from 'hooks/useUrlQuery';
|
|
import { useCallback } from 'react';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { IDashboardVariable } from 'types/api/dashboard/getAll';
|
|
|
|
interface LocalStoreDashboardVariables {
|
|
[name: string]:
|
|
| IDashboardVariable['selectedValue'][]
|
|
| IDashboardVariable['selectedValue'];
|
|
}
|
|
|
|
interface UseVariablesFromUrlReturn {
|
|
getUrlVariables: () => LocalStoreDashboardVariables;
|
|
setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
|
|
updateUrlVariable: (
|
|
name: string,
|
|
selectedValue: IDashboardVariable['selectedValue'],
|
|
) => void;
|
|
clearUrlVariables: () => void;
|
|
}
|
|
|
|
const useVariablesFromUrl = (): UseVariablesFromUrlReturn => {
|
|
const urlQuery = useUrlQuery();
|
|
const history = useHistory();
|
|
|
|
const getUrlVariables = useCallback((): LocalStoreDashboardVariables => {
|
|
const variablesParam = urlQuery.get(QueryParams.variables);
|
|
|
|
if (!variablesParam) {
|
|
return {};
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(decodeURIComponent(variablesParam));
|
|
} catch (error) {
|
|
console.error('Failed to parse variables from URL:', error);
|
|
return {};
|
|
}
|
|
}, [urlQuery]);
|
|
|
|
const setUrlVariables = useCallback(
|
|
(variables: LocalStoreDashboardVariables): void => {
|
|
const params = new URLSearchParams(urlQuery.toString());
|
|
|
|
if (Object.keys(variables).length === 0) {
|
|
params.delete(QueryParams.variables);
|
|
} else {
|
|
try {
|
|
const encodedVariables = encodeURIComponent(JSON.stringify(variables));
|
|
params.set(QueryParams.variables, encodedVariables);
|
|
} catch (error) {
|
|
console.error('Failed to serialize variables for URL:', error);
|
|
}
|
|
}
|
|
|
|
history.replace({
|
|
search: params.toString(),
|
|
});
|
|
},
|
|
[history, urlQuery],
|
|
);
|
|
|
|
const clearUrlVariables = useCallback((): void => {
|
|
const params = new URLSearchParams(urlQuery.toString());
|
|
params.delete(QueryParams.variables);
|
|
params.delete('options');
|
|
|
|
history.replace({
|
|
search: params.toString(),
|
|
});
|
|
}, [history, urlQuery]);
|
|
|
|
const updateUrlVariable = useCallback(
|
|
(name: string, selectedValue: IDashboardVariable['selectedValue']): void => {
|
|
const currentVariables = getUrlVariables();
|
|
|
|
const updatedVariables = {
|
|
...currentVariables,
|
|
[name]: selectedValue,
|
|
};
|
|
|
|
setUrlVariables(updatedVariables as LocalStoreDashboardVariables);
|
|
},
|
|
[getUrlVariables, setUrlVariables],
|
|
);
|
|
|
|
return {
|
|
getUrlVariables,
|
|
setUrlVariables,
|
|
updateUrlVariable,
|
|
clearUrlVariables,
|
|
};
|
|
};
|
|
|
|
export default useVariablesFromUrl;
|