diff --git a/src/components/Discover/DiscoverMovies/index.tsx b/src/components/Discover/DiscoverMovies/index.tsx index 2cc5117707..021c0c22d7 100644 --- a/src/components/Discover/DiscoverMovies/index.tsx +++ b/src/components/Discover/DiscoverMovies/index.tsx @@ -9,6 +9,7 @@ import { } from '@app/components/Discover/constants'; import FilterSlideover from '@app/components/Discover/FilterSlideover'; import useDiscover from '@app/hooks/useDiscover'; +import usePersistentFilters from '@app/hooks/usePersistentFilteres'; import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams'; import Error from '@app/pages/_error'; import { BarsArrowDownIcon, FunnelIcon } from '@heroicons/react/24/solid'; @@ -50,6 +51,8 @@ const DiscoverMovies = () => { const preparedFilters = prepareFilterValues(router.query); + usePersistentFilters('dm-filter-settings'); + const { isLoadingInitialData, isEmpty, diff --git a/src/components/Discover/DiscoverTv/index.tsx b/src/components/Discover/DiscoverTv/index.tsx index 527393676b..33b932fa43 100644 --- a/src/components/Discover/DiscoverTv/index.tsx +++ b/src/components/Discover/DiscoverTv/index.tsx @@ -9,6 +9,7 @@ import { } from '@app/components/Discover/constants'; import FilterSlideover from '@app/components/Discover/FilterSlideover'; import useDiscover from '@app/hooks/useDiscover'; +import usePersistentFilters from '@app/hooks/usePersistentFilteres'; import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams'; import Error from '@app/pages/_error'; import { BarsArrowDownIcon, FunnelIcon } from '@heroicons/react/24/solid'; @@ -49,6 +50,7 @@ const DiscoverTv = () => { const [showFilters, setShowFilters] = useState(false); const preparedFilters = prepareFilterValues(router.query); const updateQueryParams = useUpdateQueryParams({}); + usePersistentFilters('dtv-filter-settings'); const { isLoadingInitialData, diff --git a/src/hooks/usePersistentFilteres.ts b/src/hooks/usePersistentFilteres.ts new file mode 100644 index 0000000000..609b70179a --- /dev/null +++ b/src/hooks/usePersistentFilteres.ts @@ -0,0 +1,28 @@ +import { useRouter } from 'next/router'; +import { useCallback, useEffect, useRef } from 'react'; + +const usePersistentFilters = (localStorageKey: string) => { + const router = useRouter(); + const initialLoadCompleteRef = useRef(false); + + const handleRouterReplace = useCallback(() => { + const savedFilters = localStorage.getItem(localStorageKey); + const parsedFilters = savedFilters ? JSON.parse(savedFilters) : null; + router.replace( + { pathname: router.pathname, query: parsedFilters }, + undefined, + { shallow: true } + ); + initialLoadCompleteRef.current = true; + }, [router, localStorageKey]); + + useEffect(() => { + if (!initialLoadCompleteRef.current && router.isReady) { + handleRouterReplace(); + } else if (initialLoadCompleteRef.current && router.isReady) { + localStorage.setItem(localStorageKey, JSON.stringify(router.query)); + } + }, [router.isReady, router.query, handleRouterReplace, localStorageKey]); +}; + +export default usePersistentFilters;