put Sources and Extensions in the same screen

This commit is contained in:
Aria Moradi
2021-10-26 14:57:11 +03:30
parent afcb6e2442
commit a1c84df0d5
7 changed files with 49 additions and 21 deletions

View File

@@ -20,7 +20,6 @@ import NavBar from 'components/navbar/NavBar';
import NavbarContext from 'context/NavbarContext';
import DarkTheme from 'context/DarkTheme';
import useLocalStorage from 'util/useLocalStorage';
import MangaSources from 'screens/manga/Sources';
import Settings from 'screens/Settings';
import About from 'screens/settings/About';
import Categories from 'screens/settings/Categories';
@@ -29,11 +28,11 @@ import Library from 'screens/manga/Library';
import SearchSingle from 'screens/manga/SearchSingle';
import SourceConfigure from 'screens/manga/SourceConfigure';
import Manga from 'screens/manga/Manga';
import MangaExtensions from 'screens/manga/Extensions';
import SourceMangas from 'screens/manga/SourceMangas';
import Reader from 'screens/manga/Reader';
import Updates from 'screens/manga/Updates';
import DownloadQueue from 'screens/manga/DownloadQueue';
import Browse from 'screens/manga/Browse';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -127,9 +126,6 @@ export default function App() {
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/extensions">
<MangaExtensions />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
@@ -139,9 +135,6 @@ export default function App() {
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/sources">
<MangaSources />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
@@ -157,6 +150,9 @@ export default function App() {
<Route path="/updates">
<Updates />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch>

View File

@@ -16,7 +16,6 @@ import { useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import ExtensionIcon from '@mui/icons-material/Extension';
import ExploreIcon from '@mui/icons-material/Explore';
import GetAppIcon from '@mui/icons-material/GetApp';
import SettingsIcon from '@mui/icons-material/Settings';
@@ -50,12 +49,8 @@ const navbarItems: Array<NavbarItem> = [
title: 'Updates',
IconComponent: NewReleasesIcon,
}, {
path: '/extensions',
title: 'Extensions',
IconComponent: ExtensionIcon,
}, {
path: '/sources',
title: 'Sources',
path: '/browse',
title: 'Browse',
IconComponent: ExploreIcon,
}, {
path: '/downloads',

View File

@@ -30,7 +30,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
import NavbarContext from '../context/NavbarContext';
import DarkTheme from '../context/DarkTheme';
import useLocalStorage from '../util/useLocalStorage';
import ListItemLink from '../util/ListItemLink';
import ListItemLink from '../components/util/ListItemLink';
export default function Settings() {
const { setTitle, setAction } = useContext(NavbarContext);

View File

@@ -5,8 +5,45 @@
* 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, useEffect, useState } from 'react';
import React, { useState } from 'react';
import makeStyles from '@mui/styles/makeStyles';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import TabPanel from 'components/util/TabPanel';
import Sources from 'screens/manga/Sources';
import Extensions from 'screens/manga/Extensions';
const useStyles = makeStyles({
noCapitalize: {
textTransform: 'none',
},
});
export default function Browse() {
return <h1>fek</h1>;
const classes = useStyles();
const [tabNum, setTabNum] = useState<number>(0);
return (
<>
<Tabs
value={tabNum}
onChange={(e, newTab) => setTabNum(newTab)}
indicatorColor="primary"
textColor="primary"
centered
variant="fullWidth"
scrollButtons
allowScrollButtonsMobile
>
<Tab className={classes.noCapitalize} label="Sources" />
<Tab className={classes.noCapitalize} label="Extensions" />
</Tabs>
<TabPanel index={0} currentIndex={tabNum}>
<Sources />
</TabPanel>
<TabPanel index={1} currentIndex={tabNum}>
<Extensions />
</TabPanel>
</>
);
}

View File

@@ -37,7 +37,7 @@ function groupByLang(sources: ISource[]) {
return result;
}
export default function MangaSources() {
export default function Sources() {
const { setTitle, setAction } = useContext(NavbarContext);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());

View File

@@ -5,7 +5,7 @@ import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import client from '../../util/client';
import ListItemLink from '../../util/ListItemLink';
import ListItemLink from '../../components/util/ListItemLink';
import NavbarContext from '../../context/NavbarContext';
const useStyles = makeStyles({

View File

@@ -11,7 +11,7 @@ import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import { fromEvent } from 'file-selector';
import makeToast from 'components/Toast';
import ListItemLink from '../../util/ListItemLink';
import ListItemLink from '../../components/util/ListItemLink';
import NavbarContext from '../../context/NavbarContext';
import client from '../../util/client';