implement source configuration

src/components/manga/sourceConfiguration/CheckBoxPreference.tsx

@@ -1,21 +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 ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import React from 'react';
-
-export default function CheckBoxPreference({ title, summary }: CheckBoxPreferenceProps) {
-    return (
-        <ListItem>
-            <ListItemText
-                primary={title}
-                secondary={summary}
-            />
-        </ListItem>
-    );
-}

src/components/manga/sourceConfiguration/EditTextPreference.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+
+export default function EditTextPreference(props: EditTextPreferenceProps) {
+    const {
+        title, summary, dialogTitle, dialogMessage, currentValue, updateValue,
+    } = props;
+
+    const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+    const handleDialogCancel = () => {
+        setDialogOpen(false);
+
+        // reset the dialog
+        setInternalCurrentValue(currentValue);
+    };
+
+    const handleDialogSubmit = () => {
+        setDialogOpen(false);
+
+        updateValue(internalCurrentValue);
+    };
+
+    return (
+        <>
+            <ListItem
+                button
+                onClick={() => setDialogOpen(true)}
+            >
+                <ListItemText
+                    primary={title}
+                    secondary={summary}
+                />
+            </ListItem>
+            <Dialog open={dialogOpen} onClose={handleDialogCancel}>
+                <DialogTitle>
+                    {dialogTitle}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        {dialogMessage}
+                    </DialogContentText>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        id="name"
+                        type="text"
+                        fullWidth
+                        value={internalCurrentValue}
+                        onChange={(e) => setInternalCurrentValue(e.target.value)}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleDialogCancel} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleDialogSubmit} color="primary">
+                        OK
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

src/components/manga/sourceConfiguration/ListPreference.tsx

@@ -0,0 +1,149 @@
+/*
+ * 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, useEffect } from 'react';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Button from '@mui/material/Button';
+
+interface IListDialogProps{
+    value: string
+    open: boolean
+    onClose: (arg0: string | null) => void
+    options: string[]
+}
+
+function ListDialog(props: IListDialogProps) {
+    const {
+        value: valueProp, open, onClose, options,
+    } = props;
+    const [value, setValue] = React.useState(valueProp);
+    const radioGroupRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (!open) {
+            setValue(valueProp);
+        }
+    }, [valueProp, open]);
+
+    const handleEntering = () => {
+        if (radioGroupRef.current != null) {
+            radioGroupRef?.current.focus();
+        }
+    };
+
+    const handleCancel = () => {
+        onClose(null);
+    };
+
+    const handleOk = () => {
+        onClose(value);
+    };
+
+    const handleChange = (event: any) => {
+        setValue(event.target.value);
+    };
+
+    return (
+        <Dialog
+            sx={{ '& .MuiDialog-paper': { width: '80%', maxHeight: 435 } }}
+            maxWidth="xs"
+            TransitionProps={{ onEntering: handleEntering }}
+            open={open}
+        >
+            <DialogTitle>Phone Ringtone</DialogTitle>
+            <DialogContent dividers>
+                <RadioGroup
+                    ref={radioGroupRef}
+                    aria-label="ringtone"
+                    name="ringtone"
+                    value={value}
+                    onChange={handleChange}
+                >
+                    {options.map((option) => (
+                        <FormControlLabel
+                            value={option}
+                            key={option}
+                            control={<Radio />}
+                            label={option}
+                        />
+                    ))}
+                </RadioGroup>
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={handleCancel}>
+                    Cancel
+                </Button>
+                <Button onClick={handleOk}>Ok</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default function ListPreference(props: ListPreferenceProps) {
+    const {
+        title, summary, currentValue, updateValue, entryValues, entries,
+    } = props;
+    const [internalCurrentValue, setInternalCurrentValue] = useState<string>(currentValue);
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        setInternalCurrentValue(currentValue);
+    }, [currentValue]);
+
+    const findEntryOf = (value: string) => {
+        const idx = entryValues.indexOf(value);
+        return entries[idx];
+    };
+
+    const findEntryValueOf = (value: string) => {
+        const idx = entries.indexOf(value);
+        return entryValues[idx];
+    };
+
+    const getSummary = () => {
+        if (summary === '%s') {
+            return findEntryOf(currentValue);
+        }
+        return summary;
+    };
+
+    const handleDialogClose = (newValue: string | null) => {
+        if (newValue !== null) {
+            updateValue(findEntryValueOf(newValue));
+
+            // appear smooth
+            setInternalCurrentValue(newValue);
+        }
+
+        setDialogOpen(false);
+    };
+
+    return (
+        <>
+            <ListItem
+                button
+                onClick={() => setDialogOpen(true)}
+            >
+                <ListItemText primary={title} secondary={getSummary()} />
+            </ListItem>
+            <ListDialog
+                open={dialogOpen}
+                onClose={handleDialogClose}
+                value={findEntryOf(internalCurrentValue)}
+                options={entries}
+            />
+        </>
+    );
+}

src/components/manga/sourceConfiguration/TwoStatePreference.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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, useEffect } from 'react';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import Switch from '@mui/material/Switch';
+import Checkbox from '@mui/material/Checkbox';
+
+function getTwoStateType(type: 'Checkbox' | 'Switch') {
+    if (type === 'Switch') { return Switch; }
+    return Checkbox;
+}
+
+function TwoSatePreference(props: TwoStatePreferenceProps) {
+    const {
+        title, summary, currentValue, updateValue, type,
+    } = props;
+    const [internalCurrentValue, setInternalCurrentValue] = useState<boolean>(currentValue);
+
+    useEffect(() => {
+        setInternalCurrentValue(currentValue);
+    }, [currentValue]);
+
+    return (
+        <ListItem>
+            <ListItemText primary={title} secondary={summary} />
+            <ListItemSecondaryAction>
+                {React.createElement(getTwoStateType(type),
+                    {
+                        edge: 'end',
+                        checked: internalCurrentValue,
+                        onChange: () => {
+                            updateValue(!currentValue);
+
+                            // appear smooth
+                            setInternalCurrentValue(!currentValue);
+                        },
+                    })}
+            </ListItemSecondaryAction>
+        </ListItem>
+    );
+}
+
+export function CheckBoxPreference(props: CheckBoxPreferenceProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <TwoSatePreference {...props} type="Checkbox" />;
+}
+export function SwitchPreferenceCompat(props: SwitchPreferenceCompatProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <TwoSatePreference {...props} type="Switch" />;
+}
+
+export default { CheckBoxPreference, SwitchPreferenceCompat };

src/screens/manga/SourceConfigure.tsx

@@ -9,13 +9,22 @@ import React, { useContext, useEffect, useState } from 'react';
 import NavbarContext from 'context/NavbarContext';
 import { useParams } from 'react-router-dom';
 import client from 'util/client';
-import CheckBoxPreference from 'components/manga/sourceConfiguration/CheckBoxPreference';
+import { SwitchPreferenceCompat, CheckBoxPreference } from 'components/manga/sourceConfiguration/TwoStatePreference';
+import ListPreference from 'components/manga/sourceConfiguration/ListPreference';
+import EditTextPreference from 'components/manga/sourceConfiguration/EditTextPreference';
 import List from '@mui/material/List';
+import cloneObject from 'util/cloneObject';
 
 function getPrefComponent(type: string) {
     switch (type) {
         case 'CheckBoxPreference':
             return CheckBoxPreference;
+        case 'SwitchPreferenceCompat':
+            return SwitchPreferenceCompat;
+        case 'ListPreference':
+            return ListPreference;
+        case 'EditTextPreference':
+            return EditTextPreference;
         default:
             return CheckBoxPreference;
     }
@@ -25,6 +34,9 @@ export default function SourceConfigure() {
     const [sourcePreferences, setSourcePreferences] = useState<SourcePreferences[]>([]);
     const { setTitle, setAction } = useContext(NavbarContext);
 
+    const [updateTriggerHolder, setUpdateTriggerHolder] = useState<number>(0); // just a hack
+    const triggerUpdate = () => setUpdateTriggerHolder(updateTriggerHolder + 1); // just a hack
+
     useEffect(() => { setTitle('Source Configuration'); setAction(<></>); }, []);
 
     const { sourceId } = useParams<{ sourceId: string }>();
@@ -33,14 +45,29 @@ export default function SourceConfigure() {
         client.get(`/api/v1/source/${sourceId}/preferences`)
             .then((response) => response.data)
             .then((data) => setSourcePreferences(data));
-    }, []);
+    }, [updateTriggerHolder]);
+
+    const updateValue = (position: number) => (
+        (value: any) => {
+            client.post(`/api/v1/source/${sourceId}/preferences`,
+                JSON.stringify({ position, value: value.toString() }))
+                .then(() => triggerUpdate());
+        }
+    );
 
     return (
         <>
             <List style={{ padding: 0 }}>
-
                 {sourcePreferences.map(
-                    (it) => React.createElement(getPrefComponent(it.type), it.props),
+                    (it, index) => {
+                        const props = cloneObject(it.props);
+                        props.updateValue = updateValue(index);
+                        props.key = index;
+
+                        // TypeScript is dumb in detecting extra props
+                        // @ts-ignore
+                        return React.createElement(getPrefComponent(it.type), props);
+                    },
                 )}
             </List>
         </>

src/screens/manga/SourceMangas.tsx

@@ -24,7 +24,10 @@ export default function SourceMangas(props: { popular: boolean }) {
     const [lastPageNum, setLastPageNum] = useState<number>(1);
 
     useEffect(() => {
-        setTitle('Source');
+        setTitle('Source'); // title is deligated to `MangaGrid` but we set it here once
+    }, []);
+
+    useEffect(() => {
         setAction(
             <>
                 {isConfigurable && (
@@ -34,8 +37,6 @@ export default function SourceMangas(props: { popular: boolean }) {
                         edge="end"
                         color="inherit"
                         size="large"
-                        // TODO: enable source configuration
-                        style={{ display: 'none' }}
                     >
                         <SettingsIcon />
                     </IconButton>

src/typings.d.ts

@@ -142,7 +142,7 @@ interface INavbarOverride {
 }
 
 type ReaderType =
-'ContinuesVertical'|
+'ContinuesVertical' |
 'Webtoon' |
 'SingleVertical' |
 'SingleRTL' |
@@ -150,7 +150,7 @@ type ReaderType =
 'DoubleVertical' |
 'DoubleRTL' |
 'DoubleLTR' |
-'ContinuesHorizontalLTR'|
+'ContinuesHorizontalLTR' |
 'ContinuesHorizontalRTL';
 
 interface IReaderSettings{
@@ -200,11 +200,6 @@ interface IQueue {
     queue: IDownloadChapter[]
 }
 
-interface SourcePreferences {
-    type: string
-    props: any
-}
-
 interface PreferenceProps {
     key: string
     title: string
@@ -212,8 +207,29 @@ interface PreferenceProps {
     defaultValue: any
     currentValue: any
     defaultValueType: string
+
+    // intetnal props
+    updateValue: any
 }
 
-interface CheckBoxPreferenceProps extends PreferenceProps {
+interface TwoStatePreferenceProps extends PreferenceProps {
 
+    // intetnal props
+    type: 'Switch' | 'Checkbox'
+}
+interface CheckBoxPreferenceProps extends PreferenceProps {}
+interface SwitchPreferenceCompatProps extends PreferenceProps {}
+interface ListPreferenceProps extends PreferenceProps {
+    entries: string[]
+    entryValues: string[]
+}
+interface EditTextPreferenceProps extends PreferenceProps {
+    dialogTitle: string
+    dialogMessage: string
+    text: string
+}
+
+interface SourcePreferences {
+    type: string
+    props: any
 }