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

View File

@ -40,6 +40,7 @@ const useStyles = makeStyles((theme) => ({
interface IProps { interface IProps {
extension: IExtension extension: IExtension
notifyInstall: () => void
} }
export default function ExtensionCard(props: IProps) { export default function ExtensionCard(props: IProps) {
@ -47,6 +48,7 @@ export default function ExtensionCard(props: IProps) {
extension: { extension: {
name, lang, versionName, installed, apkName, iconUrl, name, lang, versionName, installed, apkName, iconUrl,
}, },
notifyInstall,
} = props; } = props;
const [installedState, setInstalledState] = useState<string>((installed ? 'uninstall' : 'install')); 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}`) client.get(`/api/v1/extension/install/${apkName}`)
.then(() => { .then(() => {
setInstalledState('uninstall'); setInstalledState('uninstall');
notifyInstall();
}); });
} }
@ -67,7 +70,8 @@ export default function ExtensionCard(props: IProps) {
setInstalledState('uninstalling'); setInstalledState('uninstalling');
client.get(`/api/v1/extension/uninstall/${apkName}`) client.get(`/api/v1/extension/uninstall/${apkName}`)
.then(() => { .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 Menu from '@material-ui/core/Menu';
import TemporaryDrawer from './TemporaryDrawer'; import TemporaryDrawer from './TemporaryDrawer';
import NavBarTitle from '../context/NavbarTitle'; import NavBarContext from '../context/NavbarContext';
import DarkTheme from '../context/DarkTheme'; import DarkTheme from '../context/DarkTheme';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@ -44,7 +44,7 @@ export default function NavBar() {
const classes = useStyles(); const classes = useStyles();
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const { title } = useContext(NavBarTitle); const { title, action } = useContext(NavBarContext);
const open = Boolean(anchorEl); const open = Boolean(anchorEl);
const { darkTheme } = useContext(DarkTheme); const { darkTheme } = useContext(DarkTheme);
@ -74,13 +74,14 @@ export default function NavBar() {
<Typography variant="h6" className={classes.title}> <Typography variant="h6" className={classes.title}>
{title} {title}
</Typography> </Typography>
{action}
{/* <IconButton {/* <IconButton
onClick={handleMenu} onClick={handleMenu}
aria-label="display more actions" aria-label="display more actions"
edge="end" edge="end"
color="inherit" color="inherit"
> >
<MoreIcon /> <FilterListIcon />
</IconButton> */} </IconButton> */}
{/* <Menu {/* <Menu
id="menu-appbar" id="menu-appbar"

View File

@ -7,11 +7,15 @@ import React from 'react';
type ContextType = { type ContextType = {
title: string title: string
setTitle: React.Dispatch<React.SetStateAction<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', title: 'Tachidesk',
setTitle: ():void => {}, 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 React, { useContext, useEffect, useState } from 'react';
import ExtensionCard from '../components/ExtensionCard'; import ExtensionCard from '../components/ExtensionCard';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; 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() { export default function Extensions() {
const { setTitle } = useContext(NavBarTitle); const { setTitle, setAction } = useContext(NavbarContext);
setTitle('Extensions'); const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', defualtLangs());
const [extensions, setExtensions] = useState<IExtension[]>([]);
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(() => { useEffect(() => {
client.get('/api/v1/extension/list') client.get('/api/v1/extension/list')
.then((response) => response.data) .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) { if (extensions.length === 0) {
return <h3>loading...</h3>; 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 { Tab, Tabs } from '@material-ui/core';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import MangaGrid from '../components/MangaGrid'; import MangaGrid from '../components/MangaGrid';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; import client from '../util/client';
interface IMangaCategory { interface IMangaCategory {
@ -37,7 +37,7 @@ function TabPanel(props: TabPanelProps) {
} }
export default function Library() { export default function Library() {
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
const [tabs, setTabs] = useState<IMangaCategory[]>([]); const [tabs, setTabs] = useState<IMangaCategory[]>([]);
const [tabNum, setTabNum] = useState<number>(0); 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 { useParams } from 'react-router-dom';
import ChapterCard from '../components/ChapterCard'; import ChapterCard from '../components/ChapterCard';
import MangaDetails from '../components/MangaDetails'; import MangaDetails from '../components/MangaDetails';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; import client from '../util/client';
export default function Manga() { export default function Manga() {
const { id } = useParams<{id: string}>(); const { id } = useParams<{id: string}>();
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
const [manga, setManga] = useState<IManga>(); const [manga, setManga] = useState<IManga>();
const [chapters, setChapters] = useState<IChapter[]>([]); const [chapters, setChapters] = useState<IChapter[]>([]);

View File

@ -4,7 +4,7 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; import client from '../util/client';
import useLocalStorage from '../util/useLocalStorage'; import useLocalStorage from '../util/useLocalStorage';
@ -20,7 +20,7 @@ const range = (n:number) => Array.from({ length: n }, (value, key) => key);
export default function Reader() { export default function Reader() {
const [serverAddress] = useLocalStorage<String>('serverBaseURL', ''); const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
const [pageCount, setPageCount] = useState<number>(-1); const [pageCount, setPageCount] = useState<number>(-1);
const { chapterId, mangaId } = useParams<{chapterId: string, mangaId: string}>(); 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 Button from '@material-ui/core/Button';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import MangaGrid from '../components/MangaGrid'; import MangaGrid from '../components/MangaGrid';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; import client from '../util/client';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
})); }));
export default function SearchSingle() { export default function SearchSingle() {
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
const { sourceId } = useParams<{sourceId: string}>(); const { sourceId } = useParams<{sourceId: string}>();
const classes = useStyles(); const classes = useStyles();
const [error, setError] = useState<boolean>(false); const [error, setError] = useState<boolean>(false);

View File

@ -14,7 +14,7 @@ import {
ListItemIcon, ListItemText, ListItemIcon, ListItemText,
} from '@material-ui/core'; } from '@material-ui/core';
import ListItem, { ListItemProps } from '@material-ui/core/ListItem'; import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import DarkTheme from '../context/DarkTheme'; import DarkTheme from '../context/DarkTheme';
import useLocalStorage from '../util/useLocalStorage'; import useLocalStorage from '../util/useLocalStorage';
@ -24,7 +24,7 @@ function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
} }
export default function Settings() { export default function Settings() {
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
setTitle('Settings'); setTitle('Settings');
const { darkTheme, setDarkTheme } = useContext(DarkTheme); const { darkTheme, setDarkTheme } = useContext(DarkTheme);
const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', ''); const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', '');

View File

@ -5,12 +5,12 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import MangaGrid from '../components/MangaGrid'; import MangaGrid from '../components/MangaGrid';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; import client from '../util/client';
export default function SourceMangas(props: { popular: boolean }) { export default function SourceMangas(props: { popular: boolean }) {
const { sourceId } = useParams<{sourceId: string}>(); const { sourceId } = useParams<{sourceId: string}>();
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
const [mangas, setMangas] = useState<IManga[]>([]); const [mangas, setMangas] = useState<IManga[]>([]);
const [hasNextPage, setHasNextPage] = useState<boolean>(false); const [hasNextPage, setHasNextPage] = useState<boolean>(false);
const [lastPageNum, setLastPageNum] = useState<number>(1); const [lastPageNum, setLastPageNum] = useState<number>(1);

View File

@ -4,11 +4,11 @@
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import SourceCard from '../components/SourceCard'; import SourceCard from '../components/SourceCard';
import NavBarTitle from '../context/NavbarTitle'; import NavbarContext from '../context/NavbarContext';
import client from '../util/client'; import client from '../util/client';
export default function Sources() { export default function Sources() {
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
setTitle('Sources'); setTitle('Sources');
const [sources, setSources] = useState<ISource[]>([]); const [sources, setSources] = useState<ISource[]>([]);
const [fetched, setFetched] = useState<boolean>(false); 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 DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText'; import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle'; import DialogTitle from '@material-ui/core/DialogTitle';
import NavBarTitle from '../../context/NavbarTitle'; import NavbarContext from '../../context/NavbarContext';
import client from '../../util/client'; import client from '../../util/client';
const getItemStyle = (isDragging, draggableStyle, palette) => ({ const getItemStyle = (isDragging, draggableStyle, palette) => ({
@ -40,7 +40,7 @@ const getItemStyle = (isDragging, draggableStyle, palette) => ({
}); });
export default function Categories() { export default function Categories() {
const { setTitle } = useContext(NavBarTitle); const { setTitle } = useContext(NavbarContext);
setTitle('Categories'); setTitle('Categories');
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState([]);
const [categoryToEdit, setCategoryToEdit] = useState(-1); // -1 means new category const [categoryToEdit, setCategoryToEdit] = useState(-1); // -1 means new category