diff --git a/src/components/Discover/FilterSlideover/index.tsx b/src/components/Discover/FilterSlideover/index.tsx index a20cb50142..03f08ed9c5 100644 --- a/src/components/Discover/FilterSlideover/index.tsx +++ b/src/components/Discover/FilterSlideover/index.tsx @@ -12,14 +12,16 @@ import { USCertificationSelector, WatchProviderSelector, } from '@app/components/Selector'; +import useSavedFilters from '@app/hooks/useSavedFilters'; import useSettings from '@app/hooks/useSettings'; import { useBatchUpdateQueryParams, useUpdateQueryParams, } from '@app/hooks/useUpdateQueryParams'; import defineMessages from '@app/utils/defineMessages'; -import { XCircleIcon } from '@heroicons/react/24/outline'; +import { BookmarkSquareIcon, XCircleIcon } from '@heroicons/react/24/outline'; import Datepicker from '@seerr-team/react-tailwindcss-datepicker'; +import { useEffect } from 'react'; import { useIntl } from 'react-intl'; const messages = defineMessages('components.Discover.FilterSlideover', { @@ -45,6 +47,7 @@ const messages = defineMessages('components.Discover.FilterSlideover', { voteCount: 'Number of votes between {minValue} and {maxValue}', status: 'Status', certification: 'Content Rating', + saveActiveFilters: 'Save Active Filters', }); type FilterSlideoverProps = { @@ -64,6 +67,30 @@ const FilterSlideover = ({ const { currentSettings } = useSettings(); const updateQueryParams = useUpdateQueryParams({}); const batchUpdateQueryParams = useBatchUpdateQueryParams({}); + const { + saveFilters, + getSavedFilters, + removeSavedFilters, + updateLocalStorage, + } = useSavedFilters(type); + + const savedFilters = getSavedFilters(); + + useEffect(() => { + if ( + savedFilters && + updateLocalStorage.current && + Object.keys(currentFilters).length === 0 + ) { + batchUpdateQueryParams(savedFilters); + updateLocalStorage.current = false; + } + }, [ + savedFilters, + batchUpdateQueryParams, + updateLocalStorage, + currentFilters, + ]); const dateGte = type === 'movie' ? 'primaryReleaseDateGte' : 'firstAirDateGte'; @@ -357,7 +384,19 @@ const FilterSlideover = ({ } }} /> -
+
+