mirror of
https://github.com/Suwayomi/Suwayomi-Server.git
synced 2026-07-02 10:24:35 -05:00
section extension languages
This commit is contained in:
@@ -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);
|
||||
setTitle('Extensions');
|
||||
const [extensions, setExtensions] = useState<IExtension[]>([]);
|
||||
const { setTitle, setAction } = useContext(NavbarContext);
|
||||
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', defualtLangs());
|
||||
|
||||
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/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();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
) }
|
||||
</>
|
||||
))
|
||||
}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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[]>([]);
|
||||
|
||||
@@ -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}>();
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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', '');
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user