can work with anime extensions successfully

webUI/react/src/screens/anime/AnimeExtensions.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 ExtensionCard from 'components/anime/ExtensionCard';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import useLocalStorage from 'util/useLocalStorage';
+import ExtensionLangSelect from 'components/manga/ExtensionLangSelect';
+import { defualtLangs, langCodeToName, langSortCmp } from 'util/language';
+
+const allLangs: string[] = [];
+
+function groupExtensions(extensions: IExtension[]) {
+    allLangs.length = 0; // empty the array
+    const result = { installed: [], 'updates pending': [] } as any;
+    extensions.sort((a, b) => ((a.apkName > b.apkName) ? 1 : -1));
+
+    extensions.forEach((extension) => {
+        if (result[extension.lang] === undefined) {
+            result[extension.lang] = [];
+            if (extension.lang !== 'all') { allLangs.push(extension.lang); }
+        }
+        if (extension.installed) {
+            if (extension.hasUpdate) {
+                result['updates pending'].push(extension);
+            } else {
+                result.installed.push(extension);
+            }
+        } else {
+            result[extension.lang].push(extension);
+        }
+    });
+
+    // put english first for convience
+    allLangs.sort(langSortCmp);
+
+    return result;
+}
+
+function extensionDefaultLangs() {
+    return [...defualtLangs(), 'all'];
+}
+
+export default function AnimeExtensions() {
+    const { setTitle, setAction } = useContext(NavbarContext);
+    const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', extensionDefaultLangs());
+
+    useEffect(() => {
+        setTitle('Extensions');
+        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/anime/extension/list')
+            .then((response) => response.data)
+            .then((data) => setExtensionsRaw(data));
+    }, [updateTriggerHolder]);
+
+    useEffect(() => {
+        if (extensionsRaw.length > 0) {
+            const groupedExtension = groupExtensions(extensionsRaw);
+            setExtensions(groupedExtension);
+        }
+    }, [extensionsRaw]);
+
+    if (Object.entries(extensions).length === 0) {
+        return <h3>loading...</h3>;
+    }
+    const groupsToShow = ['updates pending', 'installed', ...shownLangs];
+    return (
+        <>
+            {
+                Object.entries(extensions).map(([lang, list]) => (
+                    ((groupsToShow.indexOf(lang) !== -1 && (list as []).length > 0)
+                        && (
+                            <React.Fragment key={lang}>
+                                <h1 key={lang} style={{ marginLeft: 25 }}>
+                                    {langCodeToName(lang)}
+                                </h1>
+                                {(list as IExtension[]).map((it) => (
+                                    <ExtensionCard
+                                        key={it.apkName}
+                                        extension={it}
+                                        notifyInstall={() => {
+                                            triggerUpdate();
+                                        }}
+                                    />
+                                ))}
+                            </React.Fragment>
+                        ))
+                ))
+            }
+        </>
+    );
+}

webUI/react/src/screens/manga/Library.tsx

@@ -7,10 +7,10 @@
 
 import { Tab, Tabs } from '@material-ui/core';
 import React, { useContext, useEffect, useState } from 'react';
-import MangaGrid from '../components/MangaGrid';
-import NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
-import cloneObject from '../util/cloneObject';
+import MangaGrid from 'components/manga/MangaGrid';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import cloneObject from 'util/cloneObject';
 
 interface IMangaCategory {
     category: ICategory

webUI/react/src/screens/manga/Manga.tsx

@@ -9,12 +9,12 @@ import React, { useEffect, useState, useContext } from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { useParams } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
-import ChapterCard from '../components/ChapterCard';
-import MangaDetails from '../components/MangaDetails';
-import NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
-import LoadingPlaceholder from '../components/LoadingPlaceholder';
-import makeToast from '../components/Toast';
+import ChapterCard from 'components/manga/ChapterCard';
+import MangaDetails from 'components/manga/MangaDetails';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import makeToast from 'components/Toast';
 
 const useStyles = makeStyles((theme: Theme) => ({
     root: {

webUI/react/src/screens/manga/MangaExtensions.tsx

@@ -6,12 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
-import ExtensionCard from '../components/ExtensionCard';
-import NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
-import useLocalStorage from '../util/useLocalStorage';
-import ExtensionLangSelect from '../components/ExtensionLangSelect';
-import { defualtLangs, langCodeToName, langSortCmp } from '../util/language';
+import ExtensionCard from 'components/manga/ExtensionCard';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import useLocalStorage from 'util/useLocalStorage';
+import ExtensionLangSelect from 'components/manga/ExtensionLangSelect';
+import { defualtLangs, langCodeToName, langSortCmp } from 'util/language';
 
 const allLangs: string[] = [];
 
@@ -46,7 +46,7 @@ function extensionDefaultLangs() {
     return [...defualtLangs(), 'all'];
 }
 
-export default function Extensions() {
+export default function MangaExtensions() {
     const { setTitle, setAction } = useContext(NavbarContext);
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', extensionDefaultLangs());
 

webUI/react/src/screens/manga/Reader.tsx

@@ -9,15 +9,15 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import HorizontalPager from '../components/reader/pager/HorizontalPager';
-import PageNumber from '../components/reader/PageNumber';
-import WebtoonPager from '../components/reader/pager/PagedPager';
-import VerticalPager from '../components/reader/pager/VerticalPager';
-import ReaderNavBar, { defaultReaderSettings } from '../components/navbar/ReaderNavBar';
-import NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
-import useLocalStorage from '../util/useLocalStorage';
-import cloneObject from '../util/cloneObject';
+import HorizontalPager from 'components/manga/reader/pager/HorizontalPager';
+import PageNumber from 'components/manga/reader/PageNumber';
+import WebtoonPager from 'components/manga/reader/pager/PagedPager';
+import VerticalPager from 'components/manga/reader/pager/VerticalPager';
+import ReaderNavBar, { defaultReaderSettings } from 'components/navbar/ReaderNavBar';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import useLocalStorage from 'util/useLocalStorage';
+import cloneObject from 'util/cloneObject';
 
 const useStyles = (settings: IReaderSettings) => makeStyles({
     root: {

webUI/react/src/screens/manga/SearchSingle.tsx

@@ -10,9 +10,9 @@ import { makeStyles } from '@material-ui/core/styles';
 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 NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
+import MangaGrid from 'components/manga/MangaGrid';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
 
 const useStyles = makeStyles((theme) => ({
     root: {

webUI/react/src/screens/manga/SourceMangas.tsx

@@ -7,9 +7,9 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import MangaGrid from '../components/MangaGrid';
-import NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
+import MangaGrid from 'components/manga/MangaGrid';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
 
 export default function SourceMangas(props: { popular: boolean }) {
     const { setTitle, setAction } = useContext(NavbarContext);

webUI/react/src/screens/manga/Sources.tsx

@@ -6,12 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
-import ExtensionLangSelect from '../components/ExtensionLangSelect';
-import SourceCard from '../components/SourceCard';
-import NavbarContext from '../context/NavbarContext';
-import client from '../util/client';
-import { defualtLangs, langCodeToName, langSortCmp } from '../util/language';
-import useLocalStorage from '../util/useLocalStorage';
+import ExtensionLangSelect from 'components/manga/ExtensionLangSelect';
+import SourceCard from 'components/manga/SourceCard';
+import NavbarContext from 'context/NavbarContext';
+import client from 'util/client';
+import { defualtLangs, langCodeToName, langSortCmp } from 'util/language';
+import useLocalStorage from 'util/useLocalStorage';
 
 function sourceToLangList(sources: ISource[]) {
     const result: string[] = [];