temple/Suwayomi-Server
1
0
Fork 0
mirror of https://github.com/Suwayomi/Suwayomi-Server.git synced 2026-07-02 10:24:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

section sources by lang

Browse Source
This commit is contained in:
Aria Moradi
2021-03-09 16:44:09 +03:30
parent 6f2f228e08
commit c842c51fb6
14 changed files with 163 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
webUI/react/src/screens/Extensions.tsx
View File

@@ -8,6 +8,7 @@ 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';
const allLangs: string[] = [];
@@ -19,7 +20,7 @@ function groupExtensions(extensions: IExtension[]) {
extensions.forEach((extension) => {
if (result[extension.lang] === undefined) {
result[extension.lang] = [];
allLangs.push(extension.lang);
if (extension.lang !== 'all') { allLangs.push(extension.lang); }
}
if (extension.installed) {
result.installed.push(extension);
@@ -28,14 +29,10 @@ function groupExtensions(extensions: IExtension[]) {
}
});
return result;
}
// put english first for convience
allLangs.sort(langSortCmp);
function defualtLangs() {
return [
'all',
'en',
];
return result;
}
export default function Extensions() {
@@ -72,32 +69,30 @@ export default function Extensions() {
}
}, [extensionsRaw]);
if (extensions.length === 0) {
if (Object.entries(extensions).length === 0) {
return <h3>loading...</h3>;
}
return (
<>
{
Object.entries(extensions).map(([lang, list]) => (
<>
{['installed', ...shownLangs].indexOf(lang) !== -1
(['installed', ...shownLangs].indexOf(lang) !== -1
&& (
<>
<h1 key={lang} style={{ marginLeft: 25 }}>{lang}</h1>
<React.Fragment key={lang}>
<h1 key={lang} style={{ marginLeft: 25 }}>
{langCodeToName(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();
}}
/>
))}
</>
) }
</>
</React.Fragment>
))
))
}
</>

7
webUI/react/src/screens/Library.tsx
View File

@@ -37,16 +37,15 @@ function TabPanel(props: TabPanelProps) {
}
export default function Library() {
const { setTitle } = useContext(NavbarContext);
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Library'); setAction(<></>); }, []);
const [tabs, setTabs] = useState<IMangaCategory[]>([]);
const [tabNum, setTabNum] = useState<number>(0);
// a hack so MangaGrid doesn't stop working. I won't change it in case
// if I do manga pagination for library..
const [lastPageNum, setLastPageNum] = useState<number>(1);
useEffect(() => {
setTitle('Library');
}, []);
const handleTabChange = (newTab: number) => {
setTabNum(newTab);

4
webUI/react/src/screens/Manga.tsx
View File

@@ -10,8 +10,10 @@ import NavbarContext from '../context/NavbarContext';
import client from '../util/client';
export default function Manga() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Manga'); setAction(<></>); }, []);
const { id } = useParams<{id: string}>();
const { setTitle } = useContext(NavbarContext);
const [manga, setManga] = useState<IManga>();
const [chapters, setChapters] = useState<IChapter[]>([]);

4
webUI/react/src/screens/Reader.tsx
View File

@@ -19,8 +19,10 @@ const style = {
const range = (n:number) => Array.from({ length: n }, (value, key) => key);
export default function Reader() {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Reader'); setAction(<></>); }, []);
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const { setTitle } = useContext(NavbarContext);
const [pageCount, setPageCount] = useState<number>(-1);
const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>();

4
webUI/react/src/screens/SearchSingle.tsx
View File

@@ -21,7 +21,9 @@ const useStyles = makeStyles((theme) => ({
}));
export default function SearchSingle() {
const { setTitle } = useContext(NavbarContext);
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Search'); setAction(<></>); }, []);
const { sourceId } = useParams<{sourceId: string}>();
const classes = useStyles();
const [error, setError] = useState<boolean>(false);

9
webUI/react/src/screens/Settings.tsx
View File

@@ -2,7 +2,7 @@
* 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, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import List from '@material-ui/core/List';
import InboxIcon from '@material-ui/icons/Inbox';
import Brightness6Icon from '@material-ui/icons/Brightness6';
@@ -24,8 +24,9 @@ function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
}
export default function Settings() {
const { setTitle } = useContext(NavbarContext);
setTitle('Settings');
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Settings'); setAction(<></>); }, []);
const { darkTheme, setDarkTheme } = useContext(DarkTheme);
const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', '');
const [dialogOpen, setDialogOpen] = useState(false);
@@ -47,7 +48,7 @@ export default function Settings() {
return (
<>
<List component="nav" style={{ padding: 0 }}>
<List style={{ padding: 0 }}>
<ListItemLink href="/settings/categories">
<ListItemIcon>
<InboxIcon />

4
webUI/react/src/screens/SourceMangas.tsx
View File

@@ -9,8 +9,10 @@ import NavbarContext from '../context/NavbarContext';
import client from '../util/client';
export default function SourceMangas(props: { popular: boolean }) {
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Source'); setAction(<></>); }, []);
const { sourceId } = useParams<{sourceId: string}>();
const { setTitle } = useContext(NavbarContext);
const [mangas, setMangas] = useState<IManga[]>([]);
const [hasNextPage, setHasNextPage] = useState<boolean>(false);
const [lastPageNum, setLastPageNum] = useState<number>(1);

60
webUI/react/src/screens/Sources.tsx
View File

@@ -3,16 +3,53 @@
* 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';
function sourceToLangList(sources: ISource[]) {
const result: string[] = [];
sources.forEach((source) => {
if (result.indexOf(source.lang) === -1 && langCodeToName(source.lang) !== 'Error') { result.push(source.lang); }
});
result.sort(langSortCmp);
return result;
}
function groupByLang(sources: ISource[]) {
const result = {} as any;
sources.forEach((source) => {
if (result[source.lang] === undefined) { result[source.lang] = [] as ISource[]; }
result[source.lang].push(source);
});
return result;
}
export default function Sources() {
const { setTitle } = useContext(NavbarContext);
setTitle('Sources');
const { setTitle, setAction } = useContext(NavbarContext);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', defualtLangs());
const [sources, setSources] = useState<ISource[]>([]);
const [fetched, setFetched] = useState<boolean>(false);
useEffect(() => {
setTitle('Sources');
setAction(
<ExtensionLangSelect
shownLangs={shownLangs}
setShownLangs={setShownLangs}
allLangs={sourceToLangList(sources)}
/>,
);
}, [shownLangs, sources]);
useEffect(() => {
client.get('/api/v1/source/list')
.then((response) => response.data)
@@ -23,5 +60,22 @@ export default function Sources() {
if (fetched) return (<h3>No sources found. Install Some Extensions first.</h3>);
return (<h3>loading...</h3>);
}
return <>{sources.map((it) => <SourceCard source={it} />)}</>;
return (
<>
{/* eslint-disable-next-line max-len */}
{Object.entries(groupByLang(sources)).sort((a, b) => langSortCmp(a[0], b[0])).map(([lang, list]) => (
shownLangs.indexOf(lang) !== -1 && (
<React.Fragment key={lang}>
<h1 key={lang} style={{ marginLeft: 25 }}>{langCodeToName(lang)}</h1>
{(list as ISource[]).map((source) => (
<SourceCard
key={source.id}
source={source}
/>
))}
</React.Fragment>
)
))}
</>
);
}

5
webUI/react/src/screens/settings/Categories.jsx
View File

@@ -40,8 +40,9 @@ const getItemStyle = (isDragging, draggableStyle, palette) => ({
});
export default function Categories() {
const { setTitle } = useContext(NavbarContext);
setTitle('Categories');
const { setTitle, setAction } = useContext(NavbarContext);
useEffect(() => { setTitle('Categories'); setAction(<></>); }, []);
const [categories, setCategories] = useState([]);
const [categoryToEdit, setCategoryToEdit] = useState(-1); // -1 means new category
const [dialogOpen, setDialogOpen] = useState(false);