Feature/improve custom extension repos support (#540)

* Move "TextSetting" to new folder * Extract dialog of "TextSetting" * Immediately show dialog when adding a list item * Reuse "TextSettingProps" for "MutableListSetting" * Add "placeholder" prop to "MutableListSetting" * Prevent duplicates by default * Clear dialog values on save * Validate repo url
2024-01-07 16:30:40 +01:00
parent 39b79c6ebe
commit 8faa756ab5
9 changed files with 219 additions and 141 deletions
--- a/src/components/settings/MutableListSetting.tsx
+++ b/src/components/settings/MutableListSetting.tsx
@@ -15,7 +15,9 @@ import List from '@mui/material/List';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import DialogContentText from '@mui/material/DialogContentText';
-import { TextSetting, TextSettingProps } from '@/components/settings/TextSetting.tsx';
+import { TextSetting, TextSettingProps } from '@/components/settings/text/TextSetting.tsx';
+import { TextSettingDialog } from '@/components/settings/text/TextSettingDialog.tsx';
+import { makeToast } from '@/components/util/Toast.tsx';

 const MutableListItem = ({
    handleDelete,
@@ -35,24 +37,34 @@ const MutableListItem = ({
    );
 };

+type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placeholder'> & {
+    values?: string[];
+    description?: string;
+    addItemButtonTitle?: string;
+    handleChange: (values: string[]) => void;
+    allowDuplicates?: boolean;
+    validateItem?: (value: string) => boolean;
+    invalidItemError?: string;
+};
+
 export const MutableListSetting = ({
    settingName,
    description,
    values,
    handleChange,
    addItemButtonTitle,
-}: {
-    settingName: string;
-    description?: string;
-    values?: string[];
-    handleChange: (values: string[]) => void;
-    addItemButtonTitle?: string;
-}) => {
+    placeholder,
+    allowDuplicates = false,
+    validateItem = () => true,
+    invalidItemError,
+}: MutableListSettingProps) => {
    const { t } = useTranslation();

    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [dialogValues, setDialogValues] = useState(values ?? []);

+    const [isAddItemDialogOpen, setIsAddItemDialogOpen] = useState(false);
+
    useEffect(() => {
        if (!values) {
            return;
@@ -76,11 +88,25 @@ export const MutableListSetting = ({
            return;
        }

+        const isDuplicate = !allowDuplicates && dialogValues.includes(newValue);
+        if (isDuplicate) {
+            return;
+        }
+
+        if (newValue === '') {
+            return;
+        }
+
+        if (!validateItem(newValue)) {
+            makeToast(invalidItemError ?? t('global.error.label.invalid_input'), 'error');
+            return;
+        }
+
        setDialogValues(dialogValues.toSpliced(index, 1, newValue.trim()));
    };

    const saveChanges = () => {
-        closeDialog();
+        closeDialog(true);
        handleChange(dialogValues.filter((dialogValue) => dialogValue !== ''));
    };

@@ -105,8 +131,8 @@ export const MutableListSetting = ({
                    <List>
                        {dialogValues.map((dialogValue, index) => (
                            <MutableListItem
-                                settingName={dialogValue === '' ? t('global.label.placeholder') : ''}
-                                placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
+                                settingName=""
+                                placeholder={placeholder}
                                handleChange={(newValue: string) => updateSetting(index, newValue)}
                                handleDelete={() => updateSetting(index, undefined)}
                                value={dialogValue}
@@ -116,7 +142,7 @@ export const MutableListSetting = ({
                </DialogContent>
                <DialogActions>
                    <Stack sx={{ width: '100%' }} direction="row" justifyContent="space-between">
-                        <Button onClick={() => updateSetting(dialogValues.length, '')}>
+                        <Button onClick={() => setIsAddItemDialogOpen(true)}>
                            {addItemButtonTitle ?? t('global.button.add')}
                        </Button>
                        <Stack direction="row">
@@ -126,6 +152,16 @@ export const MutableListSetting = ({
                    </Stack>
                </DialogActions>
            </Dialog>
+
+            {isAddItemDialogOpen && (
+                <TextSettingDialog
+                    settingName=""
+                    placeholder={placeholder}
+                    handleChange={(newValue: string) => updateSetting(dialogValues.length, newValue)}
+                    isDialogOpen={isAddItemDialogOpen}
+                    setIsDialogOpen={setIsAddItemDialogOpen}
+                />
+            )}
        </>
    );
 };
--- a/src/components/settings/TextSetting.tsx
+++ b/src/components/settings/TextSetting.tsx
@@ -1,125 +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 { Button, Dialog, DialogTitle, InputAdornment, ListItemText } from '@mui/material';
-import DialogContent from '@mui/material/DialogContent';
-import TextField from '@mui/material/TextField';
-import DialogActions from '@mui/material/DialogActions';
-import ListItemButton from '@mui/material/ListItemButton';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import DialogContentText from '@mui/material/DialogContentText';
-import IconButton from '@mui/material/IconButton';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
-
-export type TextSettingProps = {
-    settingName: string;
-    dialogTitle?: string;
-    dialogDescription?: string;
-    value?: string;
-    handleChange: (value: string) => void;
-    isPassword?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-};
-
-export const TextSetting = ({
-    settingName,
-    dialogTitle = settingName,
-    dialogDescription,
-    value,
-    handleChange,
-    isPassword = false,
-    placeholder = '',
-    disabled = false,
-}: TextSettingProps) => {
-    const { t } = useTranslation();
-
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [dialogValue, setDialogValue] = useState(value ?? '');
-    const [showPassword, setShowPassword] = useState(false);
-
-    const handleClickShowPassword = () => setShowPassword((show) => !show);
-
-    useEffect(() => {
-        if (!value) {
-            return;
-        }
-
-        setDialogValue(value);
-    }, [value]);
-
-    const closeDialog = (resetValue: boolean = true) => {
-        if (resetValue) {
-            setDialogValue(value ?? '');
-        }
-
-        setShowPassword(false);
-        setIsDialogOpen(false);
-    };
-
-    const updateSetting = () => {
-        closeDialog(false);
-        handleChange(dialogValue);
-    };
-
-    return (
-        <>
-            <ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
-                <ListItemText
-                    primary={settingName}
-                    secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}
-                    secondaryTypographyProps={{
-                        sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
-                    }}
-                />
-            </ListItemButton>
-
-            <Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>
-                <DialogContent>
-                    <DialogTitle sx={{ paddingLeft: 0 }}>{dialogTitle}</DialogTitle>
-                    {!!dialogDescription && (
-                        <DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
-                    )}
-                    <TextField
-                        sx={{
-                            width: '100%',
-                            margin: 'auto',
-                        }}
-                        autoFocus
-                        placeholder={placeholder}
-                        value={dialogValue}
-                        type={isPassword && !showPassword ? 'password' : 'text'}
-                        onChange={(e) => setDialogValue(e.target.value)}
-                        InputProps={{
-                            endAdornment: isPassword ? (
-                                <InputAdornment position="end">
-                                    <IconButton
-                                        aria-label="toggle password visibility"
-                                        onClick={handleClickShowPassword}
-                                        edge="end"
-                                    >
-                                        {showPassword ? <VisibilityOff /> : <Visibility />}
-                                    </IconButton>
-                                </InputAdornment>
-                            ) : null,
-                        }}
-                    />
-                </DialogContent>
-                <DialogActions>
-                    <Button onClick={() => closeDialog()} color="primary">
-                        {t('global.button.cancel')}
-                    </Button>
-                    <Button onClick={() => updateSetting()} color="primary">
-                        {t('global.button.ok')}
-                    </Button>
-                </DialogActions>
-            </Dialog>
-        </>
-    );
-};
--- a/src/components/settings/text/TextSetting.tsx
+++ b/src/components/settings/text/TextSetting.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 { ListItemText } from '@mui/material';
+import ListItemButton from '@mui/material/ListItemButton';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { TextSettingDialog, TextSettingDialogProps } from '@/components/settings/text/TextSettingDialog.tsx';
+
+export type TextSettingProps = Omit<TextSettingDialogProps, 'isDialogOpen' | 'setIsDialogOpen'> & {
+    disabled?: boolean;
+};
+
+export const TextSetting = (props: TextSettingProps) => {
+    const { t } = useTranslation();
+
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const { settingName, value, isPassword = false, disabled = false } = props;
+
+    return (
+        <>
+            <ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
+                <ListItemText
+                    primary={settingName}
+                    secondary={isPassword ? value?.replace(/./g, '*') : value ?? t('global.label.loading')}
+                    secondaryTypographyProps={{
+                        sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
+                    }}
+                />
+            </ListItemButton>
+
+            <TextSettingDialog {...props} isDialogOpen={isDialogOpen} setIsDialogOpen={setIsDialogOpen} />
+        </>
+    );
+};
--- a/src/components/settings/text/TextSettingDialog.tsx
+++ b/src/components/settings/text/TextSettingDialog.tsx
@@ -0,0 +1,113 @@
+/*
+ * 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 { Button, Dialog, DialogTitle, InputAdornment } from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import DialogActions from '@mui/material/DialogActions';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type TextSettingDialogProps = {
+    settingName: string;
+    dialogTitle?: string;
+    dialogDescription?: string;
+    value?: string;
+    handleChange: (value: string) => void;
+    isPassword?: boolean;
+    placeholder?: string;
+    isDialogOpen: boolean;
+    setIsDialogOpen: (open: boolean) => void;
+};
+
+export const TextSettingDialog = ({
+    settingName,
+    dialogTitle = settingName,
+    dialogDescription,
+    value,
+    handleChange,
+    isPassword = false,
+    placeholder = '',
+    isDialogOpen,
+    setIsDialogOpen,
+}: TextSettingDialogProps) => {
+    const { t } = useTranslation();
+
+    const [dialogValue, setDialogValue] = useState(value ?? '');
+    const [showPassword, setShowPassword] = useState(false);
+
+    const handleClickShowPassword = () => setShowPassword((show) => !show);
+
+    useEffect(() => {
+        if (!value) {
+            return;
+        }
+
+        setDialogValue(value);
+    }, [value]);
+
+    const closeDialog = (resetValue: boolean = true) => {
+        if (resetValue) {
+            setDialogValue(value ?? '');
+        }
+
+        setShowPassword(false);
+        setIsDialogOpen(false);
+    };
+
+    const updateSetting = () => {
+        closeDialog(false);
+        handleChange(dialogValue);
+    };
+
+    return (
+        <Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>
+            <DialogContent>
+                <DialogTitle sx={{ paddingLeft: 0 }}>{dialogTitle}</DialogTitle>
+                {!!dialogDescription && (
+                    <DialogContentText sx={{ paddingBottom: '10px' }}>{dialogDescription}</DialogContentText>
+                )}
+                <TextField
+                    sx={{
+                        width: '100%',
+                        margin: 'auto',
+                    }}
+                    autoFocus
+                    placeholder={placeholder}
+                    value={dialogValue}
+                    type={isPassword && !showPassword ? 'password' : 'text'}
+                    onChange={(e) => setDialogValue(e.target.value)}
+                    InputProps={{
+                        endAdornment: isPassword ? (
+                            <InputAdornment position="end">
+                                <IconButton
+                                    aria-label="toggle password visibility"
+                                    onClick={handleClickShowPassword}
+                                    edge="end"
+                                >
+                                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                                </IconButton>
+                            </InputAdornment>
+                        ) : null,
+                    }}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => closeDialog()} color="primary">
+                    {t('global.button.cancel')}
+                </Button>
+                <Button onClick={() => updateSetting()} color="primary">
+                    {t('global.button.ok')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};