section sources by lang

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

View File

@ -77,7 +77,7 @@ fun getSourceList(): List<SourceDataClass> {
SourceDataClass(
it[SourceTable.id].value.toString(),
it[SourceTable.name],
Locale(it[SourceTable.lang]).getDisplayLanguage(Locale(it[SourceTable.lang])),
it[SourceTable.lang],
getExtensionIconUrl(ExtensionTable.select { ExtensionTable.id eq it[SourceTable.extension] }.first()[ExtensionTable.apkName]),
getHttpSource(it[SourceTable.id].value).supportsLatest
)

View File

@ -13,5 +13,7 @@ module.exports = {
// Indent props with 4 spaces
'react/jsx-indent-props': ['error', 4],
'no-plusplus': ['error', { 'allowForLoopAfterthoughts': true }]
},
};

View File

@ -9,11 +9,12 @@ 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 Switch from '@material-ui/core/Switch';
import IconButton from '@material-ui/core/IconButton';
import FilterListIcon from '@material-ui/icons/FilterList';
import { List, ListItemSecondaryAction, ListItemText } from '@material-ui/core';
import ListItem from '@material-ui/core/ListItem';
import { langCodeToName } from '../util/language';
const useStyles = makeStyles(() => createStyles({
paper: {
@ -72,21 +73,22 @@ export default function ExtensionLangSelect(props: IProps) {
open={open}
>
<DialogTitle>Enabled Languages</DialogTitle>
<DialogContent dividers>
<FormGroup>
<DialogContent dividers style={{ padding: 0 }}>
<List>
{allLangs.map((lang) => (
<FormControlLabel
control={(
<Checkbox
<ListItem key={lang}>
<ListItemText primary={langCodeToName(lang)} />
<ListItemSecondaryAction>
<Switch
checked={mShownLangs.indexOf(lang) !== -1}
onChange={(e) => handleChange(e, lang)}
color="default"
/>
)}
label={lang}
/>
</ListItemSecondaryAction>
</ListItem>
))}
</FormGroup>
</List>
</DialogContent>
<DialogActions>

View File

@ -10,6 +10,7 @@ import Button from '@material-ui/core/Button';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import useLocalStorage from '../util/useLocalStorage';
import { langCodeToName } from '../util/language';
const useStyles = makeStyles((theme) => ({
root: {
@ -67,7 +68,7 @@ export default function SourceCard(props: IProps) {
{name}
</Typography>
<Typography variant="caption" display="block" gutterBottom>
{lang}
{langCodeToName(lang)}
</Typography>
</div>
</div>

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>
))
))
}
</>

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);

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[]>([]);

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}>();

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);

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 />

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);

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>
)
))}
</>
);
}

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);

View File

@ -0,0 +1,50 @@
/* 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/. */
export const ISOLanguages = [
{ code: 'all', name: 'All', nativeName: 'All' },
{ code: 'installed', name: 'Installed', nativeName: 'Installed' },
{ code: 'en', name: 'English', nativeName: 'English' },
{ code: 'ca', name: 'Catalan; Valencian', nativeName: 'Català' },
{ code: 'de', name: 'German', nativeName: 'Deutsch' },
{ code: 'es', name: 'Spanish; Castilian', nativeName: 'Español' },
{ code: 'fr', name: 'French', nativeName: 'Français' },
{ code: 'id', name: 'Indonesian', nativeName: 'Indonesia' },
{ code: 'it', name: 'Italian', nativeName: 'Italiano' },
{ code: 'pt', name: 'Portuguese', nativeName: 'Português' },
{ code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt' },
{ code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
{ code: 'ru', name: 'Russian', nativeName: 'русский' },
{ code: 'ar', name: 'Arabic', nativeName: 'العربية' },
{ code: 'hi', name: 'Hindi', nativeName: 'हिन्दी' },
{ code: 'th', name: 'Thai', nativeName: 'ไทย' },
{ code: 'zh', name: 'Chinese', nativeName: '中文' },
{ code: 'ja', name: 'Japanese', nativeName: '日本語' },
{ code: 'ko', name: 'Korean', nativeName: '한국어' },
];
export function langCodeToName(code: string): string {
for (let i = 0; i < ISOLanguages.length; i++) {
if (ISOLanguages[i].code === code) return ISOLanguages[i].nativeName;
}
return 'Error';
}
export function defualtLangs() {
return [
// todo: infer this from the browser
'en',
];
}
export const langSortCmp = (a: string, b: string) => {
// puts english first for convience
const aLang = langCodeToName(a);
const bLang = langCodeToName(b);
if (a === 'en') return -1;
if (b === 'en') return 1;
return aLang > bLang ? 1 : -1;
};