section extension languages

webUI/react/src/App.tsx

@@ -17,7 +17,7 @@ import SourceMangas from './screens/SourceMangas';
 import Manga from './screens/Manga';
 import Reader from './screens/Reader';
 import Search from './screens/SearchSingle';
-import NavBarTitle from './context/NavbarTitle';
+import NavbarContext from './context/NavbarContext';
 import DarkTheme from './context/DarkTheme';
 import Library from './screens/Library';
 import Settings from './screens/Settings';
@@ -26,8 +26,11 @@ import useLocalStorage from './util/useLocalStorage';
 
 export default function App() {
     const [title, setTitle] = useState<string>('Tachidesk');
+    const [action, setAction] = useState<any>(<div />);
     const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
-    const navTitleContext = { title, setTitle };
+    const navBarContext = {
+        title, setTitle, action, setAction,
+    };
     const darkThemeContext = { darkTheme, setDarkTheme };
 
     const theme = React.useMemo(
@@ -57,7 +60,7 @@ export default function App() {
     return (
         <Router>
             <ThemeProvider theme={theme}>
-                <NavBarTitle.Provider value={navTitleContext}>
+                <NavbarContext.Provider value={navBarContext}>
                     <CssBaseline />
                     <NavBar />
                     <Container maxWidth={false} disableGutters>
@@ -103,7 +106,7 @@ export default function App() {
                             />
                         </Switch>
                     </Container>
-                </NavBarTitle.Provider>
+                </NavbarContext.Provider>
             </ThemeProvider>
         </Router>
     );

webUI/react/src/components/ExtensionCard.tsx

@@ -40,6 +40,7 @@ const useStyles = makeStyles((theme) => ({
 
 interface IProps {
     extension: IExtension
+    notifyInstall: () => void
 }
 
 export default function ExtensionCard(props: IProps) {
@@ -47,6 +48,7 @@ export default function ExtensionCard(props: IProps) {
         extension: {
             name, lang, versionName, installed, apkName, iconUrl,
         },
+        notifyInstall,
     } = props;
     const [installedState, setInstalledState] = useState<string>((installed ? 'uninstall' : 'install'));
 
@@ -60,6 +62,7 @@ export default function ExtensionCard(props: IProps) {
         client.get(`/api/v1/extension/install/${apkName}`)
             .then(() => {
                 setInstalledState('uninstall');
+                notifyInstall();
             });
     }
 
@@ -67,7 +70,8 @@ export default function ExtensionCard(props: IProps) {
         setInstalledState('uninstalling');
         client.get(`/api/v1/extension/uninstall/${apkName}`)
             .then(() => {
-                setInstalledState('install');
+                // setInstalledState('install');
+                notifyInstall();
             });
     }
 

webUI/react/src/components/ExtensionLangSelect.tsx

@@ -0,0 +1,103 @@
+/* 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 { makeStyles, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@material-ui/core/Dialog';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import IconButton from '@material-ui/core/IconButton';
+import FilterListIcon from '@material-ui/icons/FilterList';
+
+const useStyles = makeStyles(() => createStyles({
+    paper: {
+        maxHeight: 435,
+        width: '80%',
+    },
+}));
+
+interface IProps {
+    shownLangs: string[]
+    setShownLangs: (arg0: string[]) => void
+    allLangs: string[]
+}
+
+export default function ExtensionLangSelect(props: IProps) {
+    const { shownLangs, setShownLangs, allLangs } = props;
+    // hold a copy and only sate state on parent when OK pressed, improves performance
+    const [mShownLangs, setMShownLangs] = useState(shownLangs);
+    const classes = useStyles();
+    const [open, setOpen] = useState<boolean>(false);
+
+    const handleCancel = () => {
+        setOpen(false);
+    };
+
+    const handleOk = () => {
+        setOpen(false);
+        setShownLangs(mShownLangs);
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>, lang: string) => {
+        const { checked } = event.target as HTMLInputElement;
+
+        if (checked) {
+            setMShownLangs([...mShownLangs, lang]);
+        } else {
+            const clone = JSON.parse(JSON.stringify(mShownLangs));
+            clone.splice(clone.indexOf(lang), 1);
+            setMShownLangs(clone);
+        }
+    };
+
+    return (
+        <>
+            <IconButton
+                onClick={() => setOpen(true)}
+                aria-label="display more actions"
+                edge="end"
+                color="inherit"
+            >
+                <FilterListIcon />
+            </IconButton>
+            <Dialog
+                classes={classes}
+                maxWidth="xs"
+                open={open}
+            >
+                <DialogTitle>Enabled Languages</DialogTitle>
+                <DialogContent dividers>
+                    <FormGroup>
+                        {allLangs.map((lang) => (
+                            <FormControlLabel
+                                control={(
+                                    <Checkbox
+                                        checked={mShownLangs.indexOf(lang) !== -1}
+                                        onChange={(e) => handleChange(e, lang)}
+                                        color="default"
+                                    />
+                                )}
+                                label={lang}
+                            />
+                        ))}
+                    </FormGroup>
+
+                </DialogContent>
+                <DialogActions>
+                    <Button autoFocus onClick={handleCancel} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleOk} color="primary">
+                        Ok
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

webUI/react/src/components/NavBar.tsx

@@ -16,7 +16,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Menu from '@material-ui/core/Menu';
 
 import TemporaryDrawer from './TemporaryDrawer';
-import NavBarTitle from '../context/NavbarTitle';
+import NavBarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 
 const useStyles = makeStyles((theme) => ({
@@ -44,7 +44,7 @@ export default function NavBar() {
     const classes = useStyles();
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const { title } = useContext(NavBarTitle);
+    const { title, action } = useContext(NavBarContext);
     const open = Boolean(anchorEl);
 
     const { darkTheme } = useContext(DarkTheme);
@@ -74,13 +74,14 @@ export default function NavBar() {
                     <Typography variant="h6" className={classes.title}>
                         {title}
                     </Typography>
+                    {action}
                     {/* <IconButton
                         onClick={handleMenu}
                         aria-label="display more actions"
                         edge="end"
                         color="inherit"
                     >
-                        <MoreIcon />
+                        <FilterListIcon />
                     </IconButton> */}
                     {/* <Menu
                         id="menu-appbar"

webUI/react/src/context/NavbarContext.tsx

@@ -7,11 +7,15 @@ import React from 'react';
 type ContextType = {
     title: string
     setTitle: React.Dispatch<React.SetStateAction<string>>
+    action: any
+    setAction: React.Dispatch<React.SetStateAction<any>>
 };
 
-const NavBarTitle = React.createContext<ContextType>({
+const NavBarContext = React.createContext<ContextType>({
     title: 'Tachidesk',
     setTitle: ():void => {},
+    action: <div />,
+    setAction: ():void => {},
 });
 
-export default NavBarTitle;
+export default NavBarContext;

webUI/react/src/screens/Extensions.tsx

@@ -4,22 +4,102 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import ExtensionCard from '../components/ExtensionCard';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
+import useLocalStorage from '../util/useLocalStorage';
+import ExtensionLangSelect from '../components/ExtensionLangSelect';
+
+const allLangs: string[] = [];
+
+function groupExtensions(extensions: IExtension[]) {
+    allLangs.length = 0; // empty the array
+    const result = { installed: [] } as any;
+    extensions.sort((a, b) => ((a.apkName > b.apkName) ? 1 : -1));
+
+    extensions.forEach((extension) => {
+        if (result[extension.lang] === undefined) {
+            result[extension.lang] = [];
+            allLangs.push(extension.lang);
+        }
+        if (extension.installed) {
+            result.installed.push(extension);
+        } else {
+            result[extension.lang].push(extension);
+        }
+    });
+
+    return result;
+}
+
+function defualtLangs() {
+    return [
+        'all',
+        'en',
+    ];
+}
 
 export default function Extensions() {
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle, setAction } = useContext(NavbarContext);
+    const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', defualtLangs());
+
+    useEffect(() => {
         setTitle('Extensions');
-    const [extensions, setExtensions] = useState<IExtension[]>([]);
+        setAction(
+            <ExtensionLangSelect
+                shownLangs={shownLangs}
+                setShownLangs={setShownLangs}
+                allLangs={allLangs}
+            />,
+        );
+    }, [shownLangs]);
+
+    const [extensionsRaw, setExtensionsRaw] = useState<IExtension[]>([]);
+    const [extensions, setExtensions] = useState<any>({});
+
+    const [updateTriggerHolder, setUpdateTriggerHolder] = useState(0); // just a hack
+    const triggerUpdate = () => setUpdateTriggerHolder(updateTriggerHolder + 1); // just a hack
 
     useEffect(() => {
         client.get('/api/v1/extension/list')
             .then((response) => response.data)
-            .then((data) => setExtensions(data));
-    }, []);
+            .then((data) => setExtensionsRaw(data));
+    }, [updateTriggerHolder]);
+
+    useEffect(() => {
+        if (extensionsRaw.length > 0) {
+            const groupedExtension = groupExtensions(extensionsRaw);
+            setExtensions(groupedExtension);
+        }
+    }, [extensionsRaw]);
 
     if (extensions.length === 0) {
         return <h3>loading...</h3>;
     }
-    return <>{extensions.map((it) => <ExtensionCard extension={it} />)}</>;
+    return (
+        <>
+            {
+                Object.entries(extensions).map(([lang, list]) => (
+                    <>
+                        {['installed', ...shownLangs].indexOf(lang) !== -1
+                        && (
+                            <>
+                                <h1 key={lang} style={{ marginLeft: 25 }}>{lang}</h1>
+                                {(list as IExtension[]).map((it) => (
+                                    <ExtensionCard
+                                        key={it.apkName}
+                                        extension={it}
+                                        // eslint-disable-next-line max-len
+                                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                        notifyInstall={() => {
+                                            triggerUpdate();
+                                        }}
+                                    />
+                                ))}
+                            </>
+                        ) }
+                    </>
+                ))
+            }
+        </>
+    );
 }

webUI/react/src/screens/Library.tsx

@@ -5,7 +5,7 @@
 import { Tab, Tabs } from '@material-ui/core';
 import React, { useContext, useEffect, useState } from 'react';
 import MangaGrid from '../components/MangaGrid';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 
 interface IMangaCategory {
@@ -37,7 +37,7 @@ function TabPanel(props: TabPanelProps) {
 }
 
 export default function Library() {
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
     const [tabs, setTabs] = useState<IMangaCategory[]>([]);
     const [tabNum, setTabNum] = useState<number>(0);
 

webUI/react/src/screens/Manga.tsx

@@ -6,12 +6,12 @@ import React, { useEffect, useState, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import ChapterCard from '../components/ChapterCard';
 import MangaDetails from '../components/MangaDetails';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 
 export default function Manga() {
     const { id } = useParams<{id: string}>();
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
 
     const [manga, setManga] = useState<IManga>();
     const [chapters, setChapters] = useState<IChapter[]>([]);

webUI/react/src/screens/Reader.tsx

@@ -4,7 +4,7 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 import useLocalStorage from '../util/useLocalStorage';
 
@@ -20,7 +20,7 @@ const range = (n:number) => Array.from({ length: n }, (value, key) => key);
 
 export default function Reader() {
     const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
 
     const [pageCount, setPageCount] = useState<number>(-1);
     const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();

webUI/react/src/screens/SearchSingle.tsx

@@ -8,7 +8,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import { useParams } from 'react-router-dom';
 import MangaGrid from '../components/MangaGrid';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 
 const useStyles = makeStyles((theme) => ({
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function SearchSingle() {
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
     const { sourceId } = useParams<{sourceId: string}>();
     const classes = useStyles();
     const [error, setError] = useState<boolean>(false);

webUI/react/src/screens/Settings.tsx

@@ -14,7 +14,7 @@ import {
     ListItemIcon, ListItemText,
 } from '@material-ui/core';
 import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 import useLocalStorage from '../util/useLocalStorage';
 
@@ -24,7 +24,7 @@ function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
 }
 
 export default function Settings() {
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
     setTitle('Settings');
     const { darkTheme, setDarkTheme } = useContext(DarkTheme);
     const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', '');

webUI/react/src/screens/SourceMangas.tsx

@@ -5,12 +5,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import MangaGrid from '../components/MangaGrid';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 
 export default function SourceMangas(props: { popular: boolean }) {
     const { sourceId } = useParams<{sourceId: string}>();
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
     const [mangas, setMangas] = useState<IManga[]>([]);
     const [hasNextPage, setHasNextPage] = useState<boolean>(false);
     const [lastPageNum, setLastPageNum] = useState<number>(1);

webUI/react/src/screens/Sources.tsx

@@ -4,11 +4,11 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import SourceCard from '../components/SourceCard';
-import NavBarTitle from '../context/NavbarTitle';
+import NavbarContext from '../context/NavbarContext';
 import client from '../util/client';
 
 export default function Sources() {
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
     setTitle('Sources');
     const [sources, setSources] = useState<ISource[]>([]);
     const [fetched, setFetched] = useState<boolean>(false);

webUI/react/src/screens/settings/Categories.jsx

@@ -27,7 +27,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import NavBarTitle from '../../context/NavbarTitle';
+import NavbarContext from '../../context/NavbarContext';
 import client from '../../util/client';
 
 const getItemStyle = (isDragging, draggableStyle, palette) => ({
@@ -40,7 +40,7 @@ const getItemStyle = (isDragging, draggableStyle, palette) => ({
 });
 
 export default function Categories() {
-    const { setTitle } = useContext(NavBarTitle);
+    const { setTitle } = useContext(NavbarContext);
     setTitle('Categories');
     const [categories, setCategories] = useState([]);
     const [categoryToEdit, setCategoryToEdit] = useState(-1); // -1 means new category