feat(filters): save active filters for movies and tv

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 = ({
             }
           }}
         />
-        <div className="pt-4">
+        <div className="flex flex-col gap-2 pt-4">
+          <Button
+            className="w-full"
+            buttonType="primary"
+            disabled={Object.keys(currentFilters).length === 0}
+            onClick={() => {
+              saveFilters(currentFilters);
+              onClose();
+            }}
+          >
+            <BookmarkSquareIcon />
+            <span>{intl.formatMessage(messages.saveActiveFilters)}</span>
+          </Button>
           <Button
             className="w-full"
             disabled={Object.keys(currentFilters).length === 0}
@@ -369,6 +408,7 @@ const FilterSlideover = ({
                 copyCurrent[k] = undefined;
               });
               batchUpdateQueryParams(copyCurrent);
+              removeSavedFilters();
               onClose();
             }}
           >

src/hooks/useSavedFilters.ts

@@ -0,0 +1,72 @@
+import type { FilterOptions } from '@app/components/Discover/constants';
+import { QueryFilterOptions } from '@app/components/Discover/constants';
+import useToasts from '@app/hooks/useToasts';
+import defineMessages from '@app/utils/defineMessages';
+import { useRef } from 'react';
+import { useIntl } from 'react-intl';
+
+type FilterType = 'movie' | 'tv';
+
+const storageKey = (type: FilterType) => `${type}-filters`;
+
+const messages = defineMessages('components.Discover.FilterSlideover', {
+  savingFilterError: 'Unable to save Filters',
+  removingFilterError: 'Unable to remove Filters',
+});
+
+const useSavedFilters = (type: FilterType) => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const key = storageKey(type);
+  const updateLocalStorage = useRef(true);
+
+  const saveFilters = (filters: FilterOptions) => {
+    try {
+      window.localStorage.setItem(key, JSON.stringify(filters));
+    } catch {
+      addToast(intl.formatMessage(messages.savingFilterError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+  };
+
+  const getSavedFilters = (): FilterOptions | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+
+    const raw = window.localStorage.getItem(key);
+
+    if (!raw) {
+      return null;
+    }
+
+    try {
+      return QueryFilterOptions.parse(JSON.parse(raw));
+    } catch {
+      window.localStorage.removeItem(key);
+      return null;
+    }
+  };
+
+  const removeSavedFilters = () => {
+    try {
+      window.localStorage.removeItem(key);
+    } catch {
+      addToast(intl.formatMessage(messages.removingFilterError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+  };
+
+  return {
+    saveFilters,
+    getSavedFilters,
+    removeSavedFilters,
+    updateLocalStorage,
+  };
+};
+
+export default useSavedFilters;

src/i18n/locale/de.json

@@ -1148,6 +1148,9 @@
   "components.Discover.FilterSlideover.runtimeText": "{minValue}-{maxValue} Minuten Laufzeit",
   "components.Discover.FilterSlideover.tmdbuserscore": "TMDB - Nutzerwertung",
   "components.Discover.FilterSlideover.to": "Bis",
+  "components.Discover.FilterSlideover.saveActiveFilters": "Aktive Filter speichern",
+  "components.Discover.FilterSlideover.savingFilterError": "Filter konnten nicht gespeichert werden",
+  "components.Discover.FilterSlideover.removingFilterError": "Filter konnten nicht gelöscht werden",
   "components.Discover.createnewslider": "Neuen Schieberegler erstellen",
   "components.Discover.FilterSlideover.studio": "Studio",
   "components.Discover.FilterSlideover.streamingservices": "Streamingdienste",

src/i18n/locale/en.json

@@ -93,8 +93,11 @@
   "components.Discover.FilterSlideover.originalLanguage": "Original Language",
   "components.Discover.FilterSlideover.ratingText": "Ratings between {minValue} and {maxValue}",
   "components.Discover.FilterSlideover.releaseDate": "Release Date",
+  "components.Discover.FilterSlideover.removingFilterError": "Unable to remove Filters",
   "components.Discover.FilterSlideover.runtime": "Runtime",
   "components.Discover.FilterSlideover.runtimeText": "{minValue}-{maxValue} minute runtime",
+  "components.Discover.FilterSlideover.saveActiveFilters": "Save Active Filters",
+  "components.Discover.FilterSlideover.savingFilterError": "Unable to save Filters",
   "components.Discover.FilterSlideover.status": "Status",
   "components.Discover.FilterSlideover.streamingservices": "Streaming Services",
   "components.Discover.FilterSlideover.studio": "Studio",