Options panels refactoring (#196)

* Refactor library options to match chapter options using shared component

* Disable some eslint rules

* Cleanup SourceOptions layout to use same components as other panels

src/components/library/LibraryMangaGrid.tsx

@@ -83,7 +83,8 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
     } = props;
 
     const [query] = useQueryParam('query', StringParam);
-    const { options, active } = useLibraryOptionsContext();
+    const { options } = useLibraryOptionsContext();
+    const { unread, downloaded } = options;
     const filteredManga = filterManga(mangas);
     const sortedManga = sortManga(filteredManga);
     const DoneManga = sortedManga.map((ele) => {
@@ -91,7 +92,7 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
         ele.inLibrary = undefined;
         return ele;
     });
-    const showFilteredOutMessage = (active || query)
+    const showFilteredOutMessage = (unread != null || downloaded != null || query)
         && filteredManga.length === 0 && mangas.length > 0;
 
     return (

src/components/library/LibraryOptions.tsx

@@ -1,232 +0,0 @@
-/*
- * 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, { useState } from 'react';
-import FilterListIcon from '@mui/icons-material/FilterList';
-import {
-    Drawer,
-    FormControlLabel,
-    IconButton,
-    Tabs,
-    Tab,
-    Box,
-    Stack,
-    Checkbox,
-    ListItem,
-    ListItemButton,
-    ListItemIcon,
-    ListItemText,
-    Radio,
-} from '@mui/material';
-import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import TabPanel from 'components/util/TabPanel';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
-
-function filtersTab(currentTab: number) {
-    const { options: { unread, downloaded }, setOption } = useLibraryOptionsContext();
-
-    return (
-        <TabPanel index={0} currentIndex={currentTab}>
-            <Stack direction="column">
-                <FormControlLabel
-                    control={(
-                        <ThreeStateCheckbox
-                            name="Unread"
-                            checked={unread}
-                            onChange={(change) => setOption('unread', change)}
-                        />
-                    )}
-                    label="Unread"
-                />
-                <FormControlLabel
-                    control={(
-                        <ThreeStateCheckbox
-                            name="Downloaded"
-                            checked={downloaded}
-                            onChange={(change) => setOption('downloaded', change)}
-                        />
-                    )}
-                    label="Downloaded"
-                />
-            </Stack>
-        </TabPanel>
-    );
-}
-
-function sortsTab(currentTab: number) {
-    const { options: { sorts, sortDesc }, setOption } = useLibraryOptionsContext();
-
-    const handleChange = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index: string) => {
-        if (sorts === index) {
-            setOption('sortDesc', (sortDes) => !sortDes);
-        } else {
-            setOption('sortDesc', false);
-        }
-        setOption('sorts', index);
-    };
-
-    return (
-        <>
-            <TabPanel index={1} currentIndex={currentTab}>
-                <Stack direction="column">
-                    {
-                        ['sortToRead', 'sortAlph', 'sortID'].map((e) => {
-                            let icon;
-                            if (sorts === e) {
-                                icon = !sortDesc ? (<ArrowUpwardIcon color="primary" />)
-                                    : (<ArrowDownwardIcon color="primary" />);
-                            }
-                            icon = icon === undefined && sortDesc === undefined && e === 'sortID' ? (<ArrowDownwardIcon color="primary" />) : icon;
-                            return (
-                                <ListItem disablePadding>
-                                    <ListItemButton onClick={(event) => handleChange(event, e)}>
-                                        <ListItemIcon>{icon}</ListItemIcon>
-                                        <ListItemText primary={e} />
-                                    </ListItemButton>
-                                </ListItem>
-                            );
-                        })
-                    }
-                </Stack>
-            </TabPanel>
-        </>
-    );
-}
-
-function dispalyTab(currentTab: number) {
-    const { options, setOptions } = useLibraryOptionsContext();
-
-    function setContextOptions(
-        e: React.ChangeEvent<HTMLInputElement>,
-        checked: boolean,
-    ) {
-        setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
-    }
-
-    function setGridContextOptions(
-        e: React.ChangeEvent<HTMLInputElement>,
-        checked: boolean,
-    ) {
-        if (checked) {
-            setOptions((prev) => ({ ...prev, gridLayout: parseInt(e.target.name, 10) }));
-        }
-    }
-
-    return (
-        <TabPanel index={2} currentIndex={currentTab}>
-            <Stack direction="column">
-                DISPLAY MODE
-                <FormControlLabel
-                    label="Compact grid"
-                    control={(
-                        <Radio
-                            name="0"
-                            checked={options.gridLayout === 0 || options.gridLayout === undefined}
-                            onChange={setGridContextOptions}
-                        />
-                    )}
-                />
-                <FormControlLabel
-                    label="Comfortable grid"
-                    control={(
-                        <Radio
-                            name="1"
-                            checked={options.gridLayout === 1}
-                            onChange={setGridContextOptions}
-                        />
-                    )}
-                />
-                <FormControlLabel
-                    label="list"
-                    control={(
-                        <Radio
-                            name="2"
-                            checked={options.gridLayout === 2}
-                            onChange={setGridContextOptions}
-                        />
-                    )}
-                />
-                BADGES
-                <FormControlLabel
-                    label="Unread Badges"
-                    control={(
-                        <Checkbox
-                            name="showUnreadBadge"
-                            checked={options.showUnreadBadge}
-                            onChange={setContextOptions}
-                        />
-                    )}
-                />
-                <FormControlLabel
-                    label="Download Badges"
-                    control={(
-                        <Checkbox
-                            name="showDownloadBadge"
-                            checked={options.showDownloadBadge}
-                            onChange={setContextOptions}
-                        />
-                    )}
-                />
-            </Stack>
-        </TabPanel>
-    );
-}
-
-function Options() {
-    const [currentTab, setCurrentTab] = useState<number>(0);
-
-    return (
-        <Box>
-            <Tabs
-                key={currentTab}
-                value={currentTab}
-                variant="fullWidth"
-                onChange={(e, newTab) => setCurrentTab(newTab)}
-                indicatorColor="primary"
-                textColor="primary"
-            >
-                <Tab label="Filter" value={0} />
-                <Tab label="Sort" value={1} />
-                <Tab label="Display" value={2} />
-            </Tabs>
-            {filtersTab(currentTab)}
-            {sortsTab(currentTab)}
-            {dispalyTab(currentTab)}
-        </Box>
-    );
-}
-
-export default function LibraryOptions() {
-    const [filtersOpen, setFiltersOpen] = React.useState(false);
-    const { active } = useLibraryOptionsContext();
-    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>
-        </>
-    );
-}

src/components/library/LibraryOptionsPanel.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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 { FormLabel, RadioGroup } from '@mui/material';
+import CheckboxInput from 'components/atoms/CheckboxInput';
+import RadioInput from 'components/atoms/RadioInput';
+import SortRadioInput from 'components/atoms/SortRadioInput';
+import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import OptionsTabs from 'components/molecules/OptionsTabs';
+import React from 'react';
+
+const TITLES = {
+    filter: 'Filter',
+    sort: 'Sort',
+    display: 'Display',
+};
+
+const SORT_OPTIONS: [LibrarySortMode, string][] = [
+    ['sortToRead', 'By Unread chapters'],
+    ['sortAlph', 'Alphabetically'],
+    ['sortID', 'By ID'],
+];
+
+interface IProps {
+    open: boolean,
+    onClose: () => void,
+}
+
+const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
+    const { options, setOptions } = useLibraryOptionsContext();
+
+    const handleFilterChange = <T extends keyof LibraryOptions>(
+        key: T,
+        value: LibraryOptions[T],
+    ) => {
+        setOptions((v) => ({ ...v, [key]: value }));
+    };
+
+    return (
+        <OptionsTabs<'filter' | 'sort' | 'display'>
+            open={open}
+            onClose={onClose}
+            tabs={['filter', 'sort', 'display']}
+            tabTitle={(key) => TITLES[key]}
+            tabContent={(key) => {
+                if (key === 'filter') {
+                    return (
+                        <>
+                            <ThreeStateCheckboxInput label="Unread" checked={options.unread} onChange={(c) => handleFilterChange('unread', c)} />
+                            <ThreeStateCheckboxInput label="Downloaded" checked={options.downloaded} onChange={(c) => handleFilterChange('downloaded', c)} />
+                        </>
+                    );
+                }
+                if (key === 'sort') {
+                    return SORT_OPTIONS.map(([mode, label]) => (
+                        <SortRadioInput
+                            key={mode}
+                            label={label}
+                            checked={options.sorts === mode}
+                            sortDescending={options.sortDesc}
+                            onClick={() => (mode !== options.sorts
+                                ? handleFilterChange('sorts', mode)
+                                : handleFilterChange('sortDesc', !options.sortDesc))}
+                        />
+                    ));
+                }
+                if (key === 'display') {
+                    const { gridLayout, showDownloadBadge, showUnreadBadge } = options;
+                    return (
+                        <>
+                            <FormLabel>Display mode</FormLabel>
+                            <RadioGroup
+                                onChange={(e) => handleFilterChange('gridLayout', Number(e.target.value))}
+                                value={gridLayout}
+                            >
+                                <RadioInput label="Compact grid" value={0} checked={gridLayout == null || gridLayout === 0} />
+                                <RadioInput label="Comfortable grid" value={1} checked={gridLayout === 1} />
+                                <RadioInput label="List" value={2} checked={gridLayout === 2} />
+                            </RadioGroup>
+
+                            <FormLabel sx={{ mt: 2 }}>Badges</FormLabel>
+                            <CheckboxInput
+                                label="Unread Badges"
+                                checked={showUnreadBadge === true}
+                                onChange={() => handleFilterChange('showUnreadBadge', !showUnreadBadge)}
+                            />
+                            <CheckboxInput
+                                label="Download Badges"
+                                checked={showDownloadBadge === true}
+                                onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
+                            />
+                        </>
+                    );
+                }
+                return null;
+            }}
+        />
+    );
+};
+
+export default LibraryOptionsPanel;

src/components/library/LibraryOptionsProvider.tsx

@@ -5,44 +5,22 @@
  * 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 LibraryOptionsContext, { DefaultLibraryOptions } from 'components/context/LibraryOptionsContext';
+import React from 'react';
 import useLocalStorage from 'util/useLocalStorage';
 
 interface IProps {
     children: React.ReactNode;
 }
 
-export default function LibraryOptionsContextProvider({ children }: IProps) {
+const LibraryOptionsContextProvider: React.FC<IProps> = ({ children }) => {
     const [options, setOptions] = useLocalStorage<LibraryOptions>('libraryOptions', DefaultLibraryOptions);
 
-    function setOption<Name extends keyof LibraryOptions>(
-        option: Name,
-        value: React.SetStateAction<LibraryOptions[Name]>,
-    ) {
-        setOptions((opts) => ({
-            ...opts,
-            [option]: typeof value === 'function' ? value(opts[option]) : value,
-        }));
-    }
-
-    // TODO remove these fields when we have a better way to handle them
-    // eslint-disable-next-line eqeqeq
-    const active = !(options.unread == undefined) || !(options.downloaded == undefined);
-    // eslint-disable-next-line eqeqeq
-    const activeSort = (options.sortDesc != undefined) || (options.sorts != undefined);
-
     return (
-        <LibraryOptionsContext.Provider
-            value={{
-                options,
-                setOption,
-                setOptions,
-                active,
-                activeSort,
-            }}
-        >
+        <LibraryOptionsContext.Provider value={{ options, setOptions }}>
             {children}
         </LibraryOptionsContext.Provider>
     );
-}
+};
+
+export default LibraryOptionsContextProvider;

src/components/library/LibraryToolbarMenu.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 FilterList from '@mui/icons-material/FilterList';
+import { IconButton } from '@mui/material';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import React, { useState } from 'react';
+import LibraryOptionsPanel from './LibraryOptionsPanel';
+
+const LibraryToolbarMenu: React.FC = () => {
+    const [open, setOpen] = useState(false);
+    const { options } = useLibraryOptionsContext();
+    const active = options.downloaded != null || options.unread != null;
+
+    return (
+        <>
+            <IconButton
+                onClick={() => setOpen(!open)}
+                color={active ? 'warning' : 'default'}
+            >
+                <FilterList />
+            </IconButton>
+            <LibraryOptionsPanel open={open} onClose={() => setOpen(false)} />
+        </>
+    );
+};
+
+export default LibraryToolbarMenu;