section extension languages

This commit is contained in:
Aria Moradi
2021-03-08 21:04:42 +03:30
parent c78eaa8b96
commit 6f2f228e08
14 changed files with 228 additions and 33 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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', '');

View File

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

View File

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

View File

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