openreplay/frontend/app/hooks/useSessionSearchQueryHandler.ts
2024-11-15 11:29:02 +01:00

53 lines
1.6 KiB
TypeScript

import { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import { JsonUrlConverter } from 'App/utils/search';
import { useStore } from '@/mstore';
import Search from '@/mstore/types/search';
import { getFilterFromJson } from 'Types/filter/newFilter';
interface Props {
onBeforeLoad?: () => Promise<any>;
appliedFilter: any;
loading: boolean;
}
const useSessionSearchQueryHandler = (props: Props) => {
const { searchStore } = useStore();
const [beforeHookLoaded, setBeforeHookLoaded] = useState(!props.onBeforeLoad);
const { appliedFilter, loading } = props;
const history = useHistory();
useEffect(() => {
const applyFilterFromQuery = async () => {
if (!loading && !searchStore.urlParsed) {
if (props.onBeforeLoad) {
await props.onBeforeLoad();
setBeforeHookLoaded(true);
}
const converter = JsonUrlConverter.urlParamsToJson(history.location.search);
const json: any = getFilterFromJson(converter.toJSON());
const filter = new Search(json);
searchStore.applyFilter(filter, true);
searchStore.setUrlParsed()
}
};
void applyFilterFromQuery();
}, [loading]);
useEffect(() => {
const generateUrlQuery = () => {
if (!loading && beforeHookLoaded) {
const converter = JsonUrlConverter.jsonToUrlParams(appliedFilter);
history.replace({ search: converter });
}
};
generateUrlQuery();
}, [appliedFilter, loading, beforeHookLoaded]);
return null;
};
export default useSessionSearchQueryHandler;