From 77e6f7d17022763dc966607d0133e91cf29a1c01 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sat, 18 Nov 2023 16:17:35 +0100 Subject: [PATCH 1/6] Move "Server Address" setting to server settings --- src/App.tsx | 2 + src/i18n/locale/en.json | 15 +- src/screens/Settings.tsx | 311 ++++++++++-------------- src/screens/settings/About.tsx | 2 +- src/screens/settings/ServerSettings.tsx | 105 ++++++++ 5 files changed, 240 insertions(+), 195 deletions(-) create mode 100644 src/screens/settings/ServerSettings.tsx diff --git a/src/App.tsx b/src/App.tsx index 62b198d220..6f011f1c53 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,6 +33,7 @@ import '@/i18n'; import { LibrarySettings } from '@/screens/settings/LibrarySettings'; import { DefaultNavBar } from '@/components/navbar/DefaultNavBar'; import { DownloadSettings } from '@/screens/settings/DownloadSettings.tsx'; +import { ServerSettings } from '@/screens/settings/ServerSettings.tsx'; if (__DEV__) { // Adds messages only in a dev environment @@ -66,6 +67,7 @@ export const App: React.FC = () => ( } /> } /> } /> + } /> {/* Manga Routes */} diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index 1d72108d44..6030f1cbca 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -488,7 +488,6 @@ "build_time": "Build time", "discord": "Discord", "github": "GitHub", - "server": "Server", "server_address": "Server address", "server_version": "Server version" }, @@ -534,11 +533,17 @@ "show_nsfw": "Show NSFW", "show_nsfw_description": "Hide NSFW extensions and sources" }, - "server_address": { - "dialog": { - "label": { - "enter_address": "Enter server address" + "server": { + "address": { + "dialog": { + "label": { + "enter_address": "Enter server address" + } } + }, + "title": { + "server": "Server", + "settings": "Server Settings" } }, "title": "Settings" diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx index dbe240e8cd..783363da02 100644 --- a/src/screens/Settings.tsx +++ b/src/screens/Settings.tsx @@ -6,14 +6,12 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { useContext, useEffect, useMemo, useState } from 'react'; +import { useContext, useEffect, useMemo } from 'react'; import AutoStoriesIcon from '@mui/icons-material/AutoStories'; import List from '@mui/material/List'; import ListAltIcon from '@mui/icons-material/ListAlt'; import BackupIcon from '@mui/icons-material/Backup'; import Brightness6Icon from '@mui/icons-material/Brightness6'; -import DnsIcon from '@mui/icons-material/Dns'; -import EditIcon from '@mui/icons-material/Edit'; import InfoIcon from '@mui/icons-material/Info'; import CachedIcon from '@mui/icons-material/Cached'; import ListItem from '@mui/material/ListItem'; @@ -21,21 +19,14 @@ import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import Switch from '@mui/material/Switch'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -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 { Link, MenuItem, Select, Tooltip } from '@mui/material'; +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 DnsIcon from '@mui/icons-material/Dns'; import { langCodeToName } from '@/util/language'; import { useLocalStorage } from '@/util/useLocalStorage'; import { ListItemLink } from '@/components/util/ListItemLink'; @@ -53,191 +44,133 @@ export function Settings() { }, [t]); const { darkTheme, setDarkTheme } = useContext(DarkTheme); - const [serverAddress, setServerAddress] = useLocalStorage('serverBaseURL', ''); const [showNsfw, setShowNsfw] = useLocalStorage('showNsfw', true); const [useCache, setUseCache] = useLocalStorage('useCache', true); - const [dialogOpen, setDialogOpen] = useState(false); - const [dialogValue, setDialogValue] = useState(serverAddress); const DEFAULT_ITEM_WIDTH = 300; const itemWidthIcon = useMemo(() => , []); const [itemWidth, setItemWidth] = useLocalStorage('ItemWidth', DEFAULT_ITEM_WIDTH); - const handleDialogOpen = () => { - setDialogValue(serverAddress); - setDialogOpen(true); - }; - - const handleDialogCancel = () => { - setDialogOpen(false); - }; - - const handleDialogSubmit = () => { - setDialogOpen(false); - const serverBaseUrl = dialogValue.replaceAll(/(\/)+$/g, ''); - setServerAddress(serverBaseUrl); - requestManager.updateClient({ baseURL: serverBaseUrl }); - }; - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - setDarkTheme(!darkTheme)} /> - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + setDarkTheme(!darkTheme)} /> + + + + + + + + - - - - - - - setShowNsfw(!showNsfw)} /> - - - - - - - - - setUseCache(!useCache)} /> - - - - - - - - {t('settings.label.language_description')} - - {t('global.language.title.weblate')} - - - } - /> - - - - - - - - - - - - { - handleDialogOpen(); - }} - size="large" - > - - - - - - - - - - - - - - - - {t('settings.server_address.dialog.label.enter_address')} - setDialogValue(e.target.value)} - /> - - - - - - - + + setShowNsfw(!showNsfw)} /> + + + + + + + + + setUseCache(!useCache)} /> + + + + + + + + {t('settings.label.language_description')} + + {t('global.language.title.weblate')} + + + } + /> + + + + + + + + + + + + + + + + + ); } diff --git a/src/screens/settings/About.tsx b/src/screens/settings/About.tsx index 85cad6e17b..3d0f5fccf3 100644 --- a/src/screens/settings/About.tsx +++ b/src/screens/settings/About.tsx @@ -45,7 +45,7 @@ export function About() { diff --git a/src/screens/settings/ServerSettings.tsx b/src/screens/settings/ServerSettings.tsx new file mode 100644 index 0000000000..b6ef278872 --- /dev/null +++ b/src/screens/settings/ServerSettings.tsx @@ -0,0 +1,105 @@ +/* + * 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, useState } from 'react'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; +import { List, Tooltip } from '@mui/material'; +import IconButton from '@mui/material/IconButton'; +import EditIcon from '@mui/icons-material/Edit'; +import Dialog from '@mui/material/Dialog'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import TextField from '@mui/material/TextField'; +import DialogActions from '@mui/material/DialogActions'; +import Button from '@mui/material/Button'; +import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx'; +import { requestManager } from '@/lib/requests/RequestManager.ts'; +import { useLocalStorage } from '@/util/useLocalStorage.tsx'; + +export const ServerSettings = () => { + const { t } = useTranslation(); + const { setTitle, setAction } = useContext(NavBarContext); + + useSetDefaultBackTo('settings'); + + useEffect(() => { + setTitle(t('download.settings.title')); + setAction(null); + }, [t]); + + const [serverAddress, setServerAddress] = useLocalStorage('serverBaseURL', ''); + + const [dialogOpen, setDialogOpen] = useState(false); + const [dialogValue, setDialogValue] = useState(serverAddress); + + const handleDialogOpen = () => { + setDialogValue(serverAddress); + setDialogOpen(true); + }; + + const handleDialogCancel = () => { + setDialogOpen(false); + }; + + const handleDialogSubmit = () => { + setDialogOpen(false); + const serverBaseUrl = dialogValue.replaceAll(/(\/)+$/g, ''); + setServerAddress(serverBaseUrl); + requestManager.updateClient({ baseURL: serverBaseUrl }); + }; + + return ( + <> + + + + + + { + handleDialogOpen(); + }} + size="large" + > + + + + + + + + + + {t('settings.server.address.dialog.label.enter_address')} + setDialogValue(e.target.value)} + /> + + + + + + + + ); +}; From f42d5d6bd22823dc8e8dc1a18b9d595ccdd1040c Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sat, 18 Nov 2023 16:06:42 +0100 Subject: [PATCH 2/6] Rename "ServerDirSetting" to "TextSetting" --- .../{ServerDirSetting.tsx => TextSetting.tsx} | 22 +++++++++---------- src/screens/settings/Backup.tsx | 8 +++---- src/screens/settings/DownloadSettings.tsx | 8 +++---- 3 files changed, 19 insertions(+), 19 deletions(-) rename src/components/settings/{ServerDirSetting.tsx => TextSetting.tsx} (86%) diff --git a/src/components/settings/ServerDirSetting.tsx b/src/components/settings/TextSetting.tsx similarity index 86% rename from src/components/settings/ServerDirSetting.tsx rename to src/components/settings/TextSetting.tsx index 00afa44b37..ec5477a6d3 100644 --- a/src/components/settings/ServerDirSetting.tsx +++ b/src/components/settings/TextSetting.tsx @@ -15,29 +15,29 @@ import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import DialogContentText from '@mui/material/DialogContentText'; -export const ServerDirSetting = ({ +export const TextSetting = ({ settingName, dialogDescription, - dirPath, - handlePathChange, + value, + handleChange, }: { settingName: string; dialogDescription: string; - dirPath?: string; - handlePathChange: (path: string) => void; + value?: string; + handleChange: (value: string) => void; }) => { const { t } = useTranslation(); const [isDialogOpen, setIsDialogOpen] = useState(false); - const [dialogDirPath, setDialogDirPath] = useState(dirPath ?? ''); + const [dialogDirPath, setDialogDirPath] = useState(value ?? ''); useEffect(() => { - if (!dirPath) { + if (!value) { return; } - setDialogDirPath(dirPath); - }, [dirPath]); + setDialogDirPath(value); + }, [value]); const closeDialog = () => { setIsDialogOpen(false); @@ -45,7 +45,7 @@ export const ServerDirSetting = ({ const updateSetting = () => { closeDialog(); - handlePathChange(dialogDirPath); + handleChange(dialogDirPath); }; return ( @@ -53,7 +53,7 @@ export const ServerDirSetting = ({ setIsDialogOpen(true)}> diff --git a/src/screens/settings/Backup.tsx b/src/screens/settings/Backup.tsx index c0b9339255..475246251d 100644 --- a/src/screens/settings/Backup.tsx +++ b/src/screens/settings/Backup.tsx @@ -21,7 +21,7 @@ import { ListItemLink } from '@/components/util/ListItemLink'; import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext'; import { BackupRestoreState } from '@/lib/graphql/generated/graphql.ts'; import { Progress } from '@/components/util/Progress.tsx'; -import { ServerDirSetting } from '@/components/settings/ServerDirSetting.tsx'; +import { TextSetting } from '@/components/settings/TextSetting.tsx'; import { NumberSetting } from '@/components/settings/NumberSetting.tsx'; import { TimeSetting } from '@/components/settings/TimeSetting.tsx'; import { ServerSettings } from '@/typings.ts'; @@ -188,11 +188,11 @@ export function Backup() { } > - updateSetting('backupPath', path)} + value={backupSettings?.backupPath} + handleChange={(path) => updateSetting('backupPath', path)} /> { return ( - updateSetting('downloadsPath', path)} + value={downloadSettings?.downloadsPath} + handleChange={(path) => updateSetting('downloadsPath', path)} /> From 6df0c0bc9ca63cc08ff4c5e4bf7d484f3627d042 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sat, 18 Nov 2023 16:22:42 +0100 Subject: [PATCH 3/6] Use "TextSetting" for server address --- src/components/settings/TextSetting.tsx | 16 ++--- src/screens/settings/ServerSettings.tsx | 84 ++++--------------------- 2 files changed, 21 insertions(+), 79 deletions(-) diff --git a/src/components/settings/TextSetting.tsx b/src/components/settings/TextSetting.tsx index ec5477a6d3..365e34b89c 100644 --- a/src/components/settings/TextSetting.tsx +++ b/src/components/settings/TextSetting.tsx @@ -22,21 +22,21 @@ export const TextSetting = ({ handleChange, }: { settingName: string; - dialogDescription: string; + dialogDescription?: string; value?: string; handleChange: (value: string) => void; }) => { const { t } = useTranslation(); const [isDialogOpen, setIsDialogOpen] = useState(false); - const [dialogDirPath, setDialogDirPath] = useState(value ?? ''); + const [dialogValue, setDialogValue] = useState(value ?? ''); useEffect(() => { if (!value) { return; } - setDialogDirPath(value); + setDialogValue(value); }, [value]); const closeDialog = () => { @@ -45,7 +45,7 @@ export const TextSetting = ({ const updateSetting = () => { closeDialog(); - handleChange(dialogDirPath); + handleChange(dialogValue); }; return ( @@ -61,16 +61,18 @@ export const TextSetting = ({ {settingName} - {dialogDescription} + {!!dialogDescription && ( + {dialogDescription} + )} setDialogDirPath(e.target.value)} + value={dialogValue} + onChange={(e) => setDialogValue(e.target.value)} /> diff --git a/src/screens/settings/ServerSettings.tsx b/src/screens/settings/ServerSettings.tsx index b6ef278872..e484ea7fa7 100644 --- a/src/screens/settings/ServerSettings.tsx +++ b/src/screens/settings/ServerSettings.tsx @@ -7,22 +7,12 @@ */ import { useTranslation } from 'react-i18next'; -import { useContext, useEffect, useState } from 'react'; -import ListItem from '@mui/material/ListItem'; -import ListItemText from '@mui/material/ListItemText'; -import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; -import { List, Tooltip } from '@mui/material'; -import IconButton from '@mui/material/IconButton'; -import EditIcon from '@mui/icons-material/Edit'; -import Dialog from '@mui/material/Dialog'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import TextField from '@mui/material/TextField'; -import DialogActions from '@mui/material/DialogActions'; -import Button from '@mui/material/Button'; +import { useContext, useEffect } from 'react'; +import { List } from '@mui/material'; import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx'; import { requestManager } from '@/lib/requests/RequestManager.ts'; import { useLocalStorage } from '@/util/useLocalStorage.tsx'; +import { TextSetting } from '@/components/settings/TextSetting.tsx'; export const ServerSettings = () => { const { t } = useTranslation(); @@ -37,69 +27,19 @@ export const ServerSettings = () => { const [serverAddress, setServerAddress] = useLocalStorage('serverBaseURL', ''); - const [dialogOpen, setDialogOpen] = useState(false); - const [dialogValue, setDialogValue] = useState(serverAddress); - - const handleDialogOpen = () => { - setDialogValue(serverAddress); - setDialogOpen(true); - }; - - const handleDialogCancel = () => { - setDialogOpen(false); - }; - - const handleDialogSubmit = () => { - setDialogOpen(false); - const serverBaseUrl = dialogValue.replaceAll(/(\/)+$/g, ''); + const handleChange = (address: string) => { + const serverBaseUrl = address.replaceAll(/(\/)+$/g, ''); setServerAddress(serverBaseUrl); requestManager.updateClient({ baseURL: serverBaseUrl }); }; return ( - <> - - - - - - { - handleDialogOpen(); - }} - size="large" - > - - - - - - - - - - {t('settings.server.address.dialog.label.enter_address')} - setDialogValue(e.target.value)} - /> - - - - - - - + + + ); }; From 2d7f1d42e87960159b0f934ebf27db00cba619e2 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sat, 18 Nov 2023 18:41:45 +0100 Subject: [PATCH 4/6] Reset value when closing the dialog --- src/components/settings/TextSetting.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/settings/TextSetting.tsx b/src/components/settings/TextSetting.tsx index 365e34b89c..e135e83b35 100644 --- a/src/components/settings/TextSetting.tsx +++ b/src/components/settings/TextSetting.tsx @@ -39,12 +39,16 @@ export const TextSetting = ({ setDialogValue(value); }, [value]); - const closeDialog = () => { + const closeDialog = (resetValue: boolean = true) => { + if (resetValue) { + setDialogValue(value ?? ''); + } + setIsDialogOpen(false); }; const updateSetting = () => { - closeDialog(); + closeDialog(false); handleChange(dialogValue); }; @@ -58,7 +62,7 @@ export const TextSetting = ({ /> - + closeDialog()} fullWidth> {settingName} {!!dialogDescription && ( @@ -76,7 +80,7 @@ export const TextSetting = ({ /> -