Implement Unread Filter for Library (#54)

src/components/library/LibraryMangaGrid.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import React from 'react';
+import MangaGrid, { IMangaGridProps } from '../manga/MangaGrid';
+import useLibraryOptions, { NullAndUndefined } from '../../util/useLibraryOptions';
+
+const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
+
+function unreadFilter(unread: NullAndUndefined<boolean>, { unreadCount }: IMangaCard): boolean {
+    switch (unread) {
+        case true:
+            return !!unreadCount && unreadCount >= 1;
+        case false:
+            return unreadCount === 0;
+        default:
+            return true;
+    }
+}
+
+function filterManga(mangas: IMangaCard[]): IMangaCard[] {
+    const { unread } = useLibraryOptions();
+    return mangas
+        .filter((manga) => unreadFilter(unread, manga));
+}
+
+export default function LibraryMangaGrid(props: IMangaGridProps) {
+    const {
+        mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message,
+    } = props;
+
+    const { active } = useLibraryOptions();
+    const filteredManga = filterManga(mangas);
+    const showFilteredOutMessage = active && filteredManga.length === 0 && mangas.length > 0;
+
+    return (
+        <MangaGrid
+            mangas={filteredManga}
+            isLoading={isLoading}
+            hasNextPage={hasNextPage}
+            lastPageNum={lastPageNum}
+            setLastPageNum={setLastPageNum}
+            message={showFilteredOutMessage ? FILTERED_OUT_MESSAGE : message}
+        />
+    );
+}

src/components/library/LibraryOptions.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import React from 'react';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { Drawer, FormControlLabel, IconButton } from '@mui/material';
+import useLibraryOptions from '../../util/useLibraryOptions';
+import ThreeStateCheckbox from '../ThreeStateCheckbox';
+
+function Options() {
+    const { unread, setUnread } = useLibraryOptions();
+    return (
+        <div>
+            <FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
+        </div>
+    );
+}
+
+export default function LibraryOptions() {
+    const [filtersOpen, setFiltersOpen] = React.useState(false);
+    const { active } = useLibraryOptions();
+    return (
+        <>
+            <IconButton
+                onClick={() => setFiltersOpen(!filtersOpen)}
+                color={active ? 'warning' : 'default'}
+            >
+                <FilterListIcon />
+            </IconButton>
+
+            <Drawer
+                anchor="bottom"
+                open={filtersOpen}
+                onClose={() => setFiltersOpen(false)}
+                PaperProps={{
+                    style: {
+                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
+                    },
+                }}
+            >
+                <Options />
+            </Drawer>
+
+        </>
+    );
+}