partial implementation for Extenstion Preferences

webUI/src/src/App.tsx

@@ -26,6 +26,7 @@ import Categories from 'screens/settings/Categories';
 import Backup from 'screens/settings/Backup';
 import Library from 'screens/manga/Library';
 import SearchSingle from 'screens/manga/SearchSingle';
+import SourceConfigure from 'screens/manga/SourceConfigure';
 import Manga from 'screens/manga/Manga';
 import Anime from 'screens/anime/Anime';
 import MangaExtensions from 'screens/manga/MangaExtensions';
@@ -123,6 +124,9 @@ export default function App() {
                             <Route path="/sources/:sourceId/latest/">
                                 <SourceMangas popular={false} />
                             </Route>
+                            <Route path="/sources/:sourceId/configure/">
+                                <SourceConfigure />
+                            </Route>
                             <Route path="/manga/sources">
                                 <MangaSources />
                             </Route>

webUI/src/src/components/manga/SourceCard.tsx

@@ -76,7 +76,7 @@ export default function SourceCard(props: IProps) {
                     </div>
                 </div>
                 <div style={{ display: 'flex' }}>
-                    {isConfigurable && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/latest/`; }}>Configure</Button>}
+                    {isConfigurable && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/configure/`; }}>Configure</Button>}
                     <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/search/`; }}>Search</Button>
                     {supportsLatest && <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/latest/`; }}>Latest</Button>}
                     <Button variant="outlined" style={{ marginLeft: 20 }} onClick={() => { window.location.href = `/sources/${id}/popular/`; }}>Browse</Button>

webUI/src/src/components/manga/sourceConfiguration/CheckBoxPreference.tsx

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

webUI/src/src/screens/manga/SourceConfigure.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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, { 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 List from '@material-ui/core/List';
+
+function getPrefComponent(type: string) {
+    switch (type) {
+        case 'CheckBoxPreference':
+            return CheckBoxPreference;
+        default:
+            return CheckBoxPreference;
+    }
+}
+
+export default function SourceConfigure() {
+    const [sourcePreferences, setSourcePreferences] = useState<SourcePreferences[]>([]);
+    const { setTitle, setAction } = useContext(NavbarContext);
+
+    useEffect(() => { setTitle('Source Configuration'); setAction(<></>); }, []);
+
+    const { sourceId } = useParams<{ sourceId: string }>();
+
+    useEffect(() => {
+        client.get(`/api/v1/source/${sourceId}/preferences`)
+            .then((response) => response.data)
+            .then((data) => setSourcePreferences(data));
+    }, []);
+
+    console.log(sourcePreferences);
+    return (
+        <>
+            <List style={{ padding: 0 }}>
+
+                {sourcePreferences.map(
+                    (it) => React.createElement(getPrefComponent(it.type), it.props),
+                )}
+            </List>
+        </>
+    );
+}

webUI/src/src/typings.d.ts

@@ -168,3 +168,21 @@ interface IQueue {
     status: 'Stopped' | 'Started'
     queue: IDownloadChapter[]
 }
+
+interface SourcePreferences {
+    type: string
+    props: any
+}
+
+interface PreferenceProps {
+    key: string
+    title: string
+    summary: string
+    defaultValue: any
+    currentValue: any
+    defaultValueType: string
+}
+
+interface CheckBoxPreferenceProps extends PreferenceProps {
+
+}