Introduce override filters while searching setting (#242)

* Introduced override filters while searching setting

* update branch; change strings and method names

* fix eslint issue

* code review changes

* moved search setting types into its own type

---------

Co-authored-by: akxer <>

src/components/library/LibraryMangaGrid.tsx

@@ -12,6 +12,7 @@ import { useLibraryOptionsContext } from 'components/context/LibraryOptionsConte
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useMediaQuery, useTheme } from '@mui/material';
 import { IMangaCard, LibrarySortMode, NullAndUndefined } from 'typings';
+import { useSearchSettings } from 'util/searchSettings';
 
 const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
 
@@ -53,12 +54,12 @@ const filterManga = (
     query: NullAndUndefined<string>,
     unread: NullAndUndefined<boolean>,
     downloaded: NullAndUndefined<boolean>,
+    ignoreFilters: boolean,
 ): IMangaCard[] =>
     mangas.filter(
         (manga) =>
             (queryFilter(query, manga) || queryGenreFilter(query, manga)) &&
-            downloadedFilter(downloaded, manga) &&
-            unreadFilter(unread, manga),
+            (ignoreFilters || (downloadedFilter(downloaded, manga) && unreadFilter(unread, manga))),
     );
 
 const sortByUnread = (a: IMangaCard, b: IMangaCard): number =>
@@ -120,11 +121,13 @@ const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: nu
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('sm'));
     const defaultPageNumber = isLargeScreen ? 4 : 1;
     const [lastPageNum, setLastPageNum] = useState<number>(defaultPageNumber);
+    const { settings } = useSearchSettings();
+
     useEffect(() => {
-        setFilteredManga(filterManga(mangas, query, unread, downloaded));
+        setFilteredManga(filterManga(mangas, query, unread, downloaded, settings.ignoreFilters));
         setLastPageNum(defaultPageNumber);
         window.scrollTo(0, 0);
-    }, [mangas, query, unread, downloaded]);
+    }, [mangas, query, unread, downloaded, settings.ignoreFilters]);
 
     useEffect(() => {
         setSortedManga(sortManga(filteredManga, options.sorts, options.sortDesc));

src/screens/Settings.tsx

@@ -35,6 +35,7 @@ import NavbarContext from 'components/context/NavbarContext';
 import DarkTheme from 'components/context/DarkTheme';
 import useLocalStorage from 'util/useLocalStorage';
 import ListItemLink from 'components/util/ListItemLink';
+import SearchSettings from 'screens/settings/SearchSettings';
 
 export default function Settings() {
     const { setTitle, setAction } = useContext(NavbarContext);
@@ -121,6 +122,7 @@ export default function Settings() {
                         <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
                     </ListItemSecondaryAction>
                 </ListItem>
+                <SearchSettings />
                 <ListItemButton>
                     <ListItemIcon>
                         <ViewModuleIcon />

src/screens/settings/SearchSettings.tsx

@@ -0,0 +1,34 @@
+import { ListItem, ListItemText, Switch } from '@mui/material';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import React from 'react';
+import { useSearchSettings } from 'util/searchSettings';
+import { requestUpdateServerMetadata } from 'util/metadata';
+import makeToast from 'components/util/Toast';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import SearchIcon from '@mui/icons-material/Search';
+import { SearchMetadataKeys } from 'typings';
+
+export default function SearchSettings() {
+    const { metadata, settings } = useSearchSettings();
+
+    const setSettingValue = (key: SearchMetadataKeys, value: boolean) => {
+        requestUpdateServerMetadata(metadata ?? {}, [[key, value]]).catch(() =>
+            makeToast('Failed to save the default search settings to the server', 'warning'),
+        );
+    };
+    return (
+        <ListItem>
+            <ListItemIcon>
+                <SearchIcon />
+            </ListItemIcon>
+            <ListItemText primary="Ignore Filters when Searching" />
+            <ListItemSecondaryAction>
+                <Switch
+                    edge="end"
+                    checked={settings.ignoreFilters}
+                    onChange={(e) => setSettingValue('ignoreFilters', e.target.checked)}
+                />
+            </ListItemSecondaryAction>
+        </ListItem>
+    );
+}

src/typings.ts

@@ -83,7 +83,9 @@ export type AllowedMetadataValueTypes = string | boolean | number | undefined;
 
 export type MangaMetadataKeys = keyof IReaderSettings;
 
-export type AppMetadataKeys = MangaMetadataKeys;
+export type SearchMetadataKeys = keyof ISearchSettings;
+
+export type AppMetadataKeys = MangaMetadataKeys | SearchMetadataKeys;
 
 export type MetadataKeyValuePair = [AppMetadataKeys, AllowedMetadataValueTypes];
 
@@ -190,6 +192,10 @@ export interface IReaderSettings {
     readerType: ReaderType;
 }
 
+export interface ISearchSettings {
+    ignoreFilters: boolean;
+}
+
 export interface IReaderPage {
     index: number;
     src: string;

src/util/searchSettings.ts

@@ -0,0 +1,31 @@
+import { useQuery } from 'util/client';
+import { getMetadataFrom } from 'util/metadata';
+import { IMetadata, ISearchSettings, MetadataKeyValuePair } from 'typings';
+
+export const getDefaultSettings = () =>
+    ({
+        ignoreFilters: false,
+    } as ISearchSettings);
+
+const getSearchSettingsWithDefaultValueFallback = (
+    meta?: IMetadata,
+    defaultSettings?: ISearchSettings,
+    applyMetadataMigration: boolean = true,
+): ISearchSettings => ({
+    ...(getMetadataFrom(
+        { meta },
+        Object.entries(defaultSettings ?? getDefaultSettings()) as MetadataKeyValuePair[],
+        applyMetadataMigration,
+    ) as unknown as ISearchSettings),
+});
+
+export const useSearchSettings = (): {
+    metadata?: IMetadata;
+    settings: ISearchSettings;
+    loading: boolean;
+} => {
+    const { data: meta, loading } = useQuery<IMetadata>('/api/v1/meta');
+    const settings = getSearchSettingsWithDefaultValueFallback(meta);
+
+    return { metadata: meta, settings, loading };
+};