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

@ -17,7 +17,7 @@ import SourceMangas from './screens/SourceMangas';
import Manga from './screens/Manga';
import Reader from './screens/Reader';
import Search from './screens/SearchSingle';
import NavBarTitle from './context/NavbarTitle';
import NavbarContext from './context/NavbarContext';
import DarkTheme from './context/DarkTheme';
import Library from './screens/Library';
import Settings from './screens/Settings';
@ -26,8 +26,11 @@ import useLocalStorage from './util/useLocalStorage';
export default function App() {
const [title, setTitle] = useState<string>('Tachidesk');
const [action, setAction] = useState<any>(<div />);
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
const navTitleContext = { title, setTitle };
const navBarContext = {
title, setTitle, action, setAction,
};
const darkThemeContext = { darkTheme, setDarkTheme };
const theme = React.useMemo(
@ -57,7 +60,7 @@ export default function App() {
return (
<Router>
<ThemeProvider theme={theme}>
<NavBarTitle.Provider value={navTitleContext}>
<NavbarContext.Provider value={navBarContext}>
<CssBaseline />
<NavBar />
<Container maxWidth={false} disableGutters>
@ -103,7 +106,7 @@ export default function App() {
/>
</Switch>
</Container>
</NavBarTitle.Provider>
</NavbarContext.Provider>
</ThemeProvider>
</Router>
);

View File

@ -40,6 +40,7 @@ const useStyles = makeStyles((theme) => ({
interface IProps {
extension: IExtension
notifyInstall: () => void
}
export default function ExtensionCard(props: IProps) {
@ -47,6 +48,7 @@ export default function ExtensionCard(props: IProps) {
extension: {
name, lang, versionName, installed, apkName, iconUrl,
},
notifyInstall,
} = props;
const [installedState, setInstalledState] = useState<string>((installed ? 'uninstall' : 'install'));
@ -60,6 +62,7 @@ export default function ExtensionCard(props: IProps) {
client.get(`/api/v1/extension/install/${apkName}`)
.then(() => {
setInstalledState('uninstall');
notifyInstall();
});
}
@ -67,7 +70,8 @@ export default function ExtensionCard(props: IProps) {
setInstalledState('uninstalling');
client.get(`/api/v1/extension/uninstall/${apkName}`)
.then(() => {
setInstalledState('install');
// setInstalledState('install');
notifyInstall();
});
}

View File

@ -0,0 +1,103 @@
/* 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, { useState } from 'react';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
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 IconButton from '@material-ui/core/IconButton';
import FilterListIcon from '@material-ui/icons/FilterList';
const useStyles = makeStyles(() => createStyles({
paper: {
maxHeight: 435,
width: '80%',
},
}));
interface IProps {
shownLangs: string[]
setShownLangs: (arg0: string[]) => void
allLangs: string[]
}
export default function ExtensionLangSelect(props: IProps) {
const { shownLangs, setShownLangs, allLangs } = props;
// hold a copy and only sate state on parent when OK pressed, improves performance
const [mShownLangs, setMShownLangs] = useState(shownLangs);
const classes = useStyles();
const [open, setOpen] = useState<boolean>(false);
const handleCancel = () => {
setOpen(false);
};
const handleOk = () => {
setOpen(false);
setShownLangs(mShownLangs);
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>, lang: string) => {
const { checked } = event.target as HTMLInputElement;
if (checked) {
setMShownLangs([...mShownLangs, lang]);
} else {
const clone = JSON.parse(JSON.stringify(mShownLangs));
clone.splice(clone.indexOf(lang), 1);
setMShownLangs(clone);
}
};
return (
<>
<IconButton
onClick={() => setOpen(true)}
aria-label="display more actions"
edge="end"
color="inherit"
>
<FilterListIcon />
</IconButton>
<Dialog
classes={classes}
maxWidth="xs"
open={open}
>
<DialogTitle>Enabled Languages</DialogTitle>
<DialogContent dividers>
<FormGroup>
{allLangs.map((lang) => (
<FormControlLabel
control={(
<Checkbox
checked={mShownLangs.indexOf(lang) !== -1}
onChange={(e) => handleChange(e, lang)}
color="default"
/>
)}
label={lang}
/>
))}
</FormGroup>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleCancel} color="primary">
Cancel
</Button>
<Button onClick={handleOk} color="primary">
Ok
</Button>
</DialogActions>
</Dialog>
</>
);
}

View File

@ -16,7 +16,7 @@ import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import TemporaryDrawer from './TemporaryDrawer';
import NavBarTitle from '../context/NavbarTitle';
import NavBarContext from '../context/NavbarContext';
import DarkTheme from '../context/DarkTheme';
const useStyles = makeStyles((theme) => ({
@ -44,7 +44,7 @@ export default function NavBar() {
const classes = useStyles();
const [drawerOpen, setDrawerOpen] = useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const { title } = useContext(NavBarTitle);
const { title, action } = useContext(NavBarContext);
const open = Boolean(anchorEl);
const { darkTheme } = useContext(DarkTheme);
@ -74,13 +74,14 @@ export default function NavBar() {
<Typography variant="h6" className={classes.title}>
{title}
</Typography>
{action}
{/* <IconButton
onClick={handleMenu}
aria-label="display more actions"
edge="end"
color="inherit"
>
<MoreIcon />
<FilterListIcon />
</IconButton> */}
{/* <Menu
id="menu-appbar"

View File

@ -7,11 +7,15 @@ import React from 'react';
type ContextType = {
title: string
setTitle: React.Dispatch<React.SetStateAction<string>>
action: any
setAction: React.Dispatch<React.SetStateAction<any>>
};
const NavBarTitle = React.createContext<ContextType>({
const NavBarContext = React.createContext<ContextType>({
title: 'Tachidesk',
setTitle: ():void => {},
action: <div />,
setAction: ():void => {},
});
export default NavBarTitle;
export default NavBarContext;

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