Feature/modify download settings (#429)

* [Codegen] Update settings fragment

* Extract logic to change a number setting

* Show slider for global update interval setting

* Add download settings

src/screens/Settings.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import List from '@mui/material/List';
 import ListAltIcon from '@mui/icons-material/ListAlt';
@@ -29,18 +29,19 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import TextField from '@mui/material/TextField';
 import FavoriteIcon from '@mui/icons-material/Favorite';
-import Slider from '@mui/material/Slider';
-import { DialogTitle, Link, ListItemButton, MenuItem, Select } from '@mui/material';
-import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { Link, MenuItem, Select } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import LanguageIcon from '@mui/icons-material/Language';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
+import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { langCodeToName } from '@/util/language';
 import { useLocalStorage } from '@/util/useLocalStorage';
 import { ListItemLink } from '@/components/util/ListItemLink';
 import { DarkTheme } from '@/components/context/DarkTheme';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 
 export function Settings() {
     const { t, i18n } = useTranslation();
@@ -58,9 +59,9 @@ export function Settings() {
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogValue, setDialogValue] = useState(serverAddress);
 
-    const [dialogOpenItemWidth, setDialogOpenItemWidth] = useState(false);
-    const [ItemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', 300);
-    const [DialogItemWidth, setDialogItemWidth] = useState(ItemWidth);
+    const DEFAULT_ITEM_WIDTH = 300;
+    const itemWidthIcon = useMemo(() => <ViewModuleIcon />, []);
+    const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
 
     const handleDialogOpen = () => {
         setDialogValue(serverAddress);
@@ -78,29 +79,6 @@ export function Settings() {
         requestManager.updateClient({ baseURL: serverBaseUrl });
     };
 
-    const handleDialogOpenItemWidth = () => {
-        setDialogItemWidth(ItemWidth);
-        setDialogOpenItemWidth(true);
-    };
-
-    const handleDialogCancelItemWidth = () => {
-        setDialogOpenItemWidth(false);
-    };
-
-    const handleDialogSubmitItemWidth = () => {
-        setDialogOpenItemWidth(false);
-        setItemWidth(DialogItemWidth);
-    };
-
-    const handleDialogResetItemWidth = () => {
-        setDialogOpenItemWidth(false);
-        setItemWidth(300);
-    };
-
-    const handleChange = (event: Event, newValue: number | number[]) => {
-        setDialogItemWidth(newValue as number);
-    };
-
     return (
         <>
             <List sx={{ padding: 0 }}>
@@ -122,6 +100,12 @@ export function Settings() {
                     </ListItemIcon>
                     <ListItemText primary={t('library.title')} />
                 </ListItemLink>
+                <ListItemLink to="/settings/downloadSettings">
+                    <ListItemIcon>
+                        <GetAppOutlinedIcon />
+                    </ListItemIcon>
+                    <ListItemText primary={t('download.title')} />
+                </ListItemLink>
                 <ListItemLink to="/settings/backup">
                     <ListItemIcon>
                         <BackupIcon />
@@ -137,16 +121,20 @@ export function Settings() {
                         <Switch edge="end" checked={darkTheme} onChange={() => setDarkTheme(!darkTheme)} />
                     </ListItemSecondaryAction>
                 </ListItem>
-                <ListItemButton
-                    onClick={() => {
-                        handleDialogOpenItemWidth();
-                    }}
-                >
-                    <ListItemIcon>
-                        <ViewModuleIcon />
-                    </ListItemIcon>
-                    <ListItemText primary={t('settings.label.manga_item_width')} secondary={`px:${ItemWidth}`} />
-                </ListItemButton>
+                <NumberSetting
+                    settingTitle={t('settings.label.manga_item_width')}
+                    settingValue={`px:${itemWidth}`}
+                    settingIcon={itemWidthIcon}
+                    value={itemWidth}
+                    defaultValue={DEFAULT_ITEM_WIDTH}
+                    minValue={100}
+                    maxValue={1000}
+                    stepSize={10}
+                    dialogTitle={t('settings.label.manga_item_width')}
+                    valueUnit="px"
+                    showSlider
+                    handleUpdate={setItemWidth}
+                />
                 <ListItem>
                     <ListItemIcon>
                         <FavoriteIcon />
@@ -248,47 +236,6 @@ export function Settings() {
                     </Button>
                 </DialogActions>
             </Dialog>
-
-            <Dialog open={dialogOpenItemWidth} onClose={handleDialogCancelItemWidth}>
-                <DialogTitle>{t('settings.label.manga_item_width')}</DialogTitle>
-                <DialogContent
-                    sx={{
-                        width: '98%',
-                        margin: 'auto',
-                    }}
-                >
-                    <TextField
-                        sx={{
-                            width: '100%',
-                            margin: 'auto',
-                        }}
-                        autoFocus
-                        value={DialogItemWidth}
-                        type="number"
-                        onChange={(e) => setDialogItemWidth(parseInt(e.target.value, 10))}
-                    />
-                    <Slider
-                        aria-label="Manga Item width"
-                        defaultValue={300}
-                        value={DialogItemWidth}
-                        step={10}
-                        min={100}
-                        max={1000}
-                        onChange={handleChange}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={handleDialogResetItemWidth} color="primary">
-                        {t('global.button.reset_to_default')}
-                    </Button>
-                    <Button onClick={handleDialogCancelItemWidth} color="primary">
-                        {t('global.button.cancel')}
-                    </Button>
-                    <Button onClick={handleDialogSubmitItemWidth} color="primary">
-                        {t('global.button.ok')}
-                    </Button>
-                </DialogActions>
-            </Dialog>
         </>
     );
 }

src/screens/settings/DownloadSettings.tsx

@@ -0,0 +1,121 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { useContext, useEffect } from 'react';
+import List from '@mui/material/List';
+import { ListItem, ListItemText, Switch } from '@mui/material';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import ListSubheader from '@mui/material/ListSubheader';
+import { ServerDirSetting } from '@/components/settings/ServerDirSetting';
+import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
+import { ServerSettings } from '@/typings.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { DownloadAheadSetting } from '@/components/settings/downloads/DownloadAheadSetting.tsx';
+
+type DownloadSettingsType = Pick<
+    ServerSettings,
+    | 'downloadAsCbz'
+    | 'downloadsPath'
+    | 'autoDownloadNewChapters'
+    | 'autoDownloadAheadLimit'
+    | 'excludeEntryWithUnreadChapters'
+>;
+
+const extractDownloadSettings = (settings: ServerSettings): DownloadSettingsType => ({
+    downloadAsCbz: settings.downloadAsCbz,
+    downloadsPath: settings.downloadsPath,
+    autoDownloadNewChapters: settings.autoDownloadNewChapters,
+    autoDownloadAheadLimit: settings.autoDownloadAheadLimit,
+    excludeEntryWithUnreadChapters: settings.excludeEntryWithUnreadChapters,
+});
+
+export const DownloadSettings = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useContext(NavBarContext);
+
+    useSetDefaultBackTo('settings');
+
+    useEffect(() => {
+        setTitle(t('download.settings.title'));
+        setAction(null);
+    }, [t]);
+
+    const { data } = requestManager.useGetServerSettings();
+    const downloadSettings = data ? extractDownloadSettings(data.settings) : undefined;
+    const [mutateSettings] = requestManager.useUpdateServerSettings();
+
+    const updateSetting = <Setting extends keyof DownloadSettingsType>(
+        setting: Setting,
+        value: DownloadSettingsType[Setting],
+    ) => {
+        mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
+    };
+
+    return (
+        <List>
+            <ServerDirSetting
+                settingName={t('download.settings.download_path.label.title')}
+                dialogDescription={t('download.settings.download_path.label.description')}
+                dirPath={downloadSettings?.downloadsPath}
+                handlePathChange={(path) => updateSetting('downloadsPath', path)}
+            />
+            <ListItem>
+                <ListItemText primary={t('download.settings.file_type.label.cbz')} />
+                <ListItemSecondaryAction>
+                    <Switch
+                        edge="end"
+                        checked={!!downloadSettings?.downloadAsCbz}
+                        onChange={(e) => updateSetting('downloadAsCbz', e.target.checked)}
+                    />
+                </ListItemSecondaryAction>
+            </ListItem>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="download-settings-auto-download">
+                        {t('download.settings.auto_download.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText primary={t('download.settings.auto_download.label.new_chapters')} />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={!!downloadSettings?.autoDownloadNewChapters}
+                            onChange={(e) => updateSetting('autoDownloadNewChapters', e.target.checked)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
+                {downloadSettings?.autoDownloadNewChapters ? (
+                    <ListItem>
+                        <ListItemText
+                            primary={t('download.settings.auto_download.label.ignore_with_unread_chapters')}
+                        />
+                        <ListItemSecondaryAction>
+                            <Switch
+                                edge="end"
+                                checked={downloadSettings.excludeEntryWithUnreadChapters}
+                                onChange={(e) => updateSetting('excludeEntryWithUnreadChapters', e.target.checked)}
+                            />
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                ) : null}
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="download-settings-download-ahead">
+                        {t('download.settings.download_ahead.title')}
+                    </ListSubheader>
+                }
+            >
+                <DownloadAheadSetting />
+            </List>
+        </List>
+    );
+};