ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resolved Merged Conflicts (#127)

Browse Source
This commit is contained in:
abhijeetChawla
2022-03-03 18:19:01 +05:30
committed by GitHub
parent 052c9c3ba6
commit 03df6fbdf6
6 changed files with 300 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/App.tsx
View File

@@ -7,7 +7,8 @@
import React from 'react';
import {
BrowserRouter as Router, Switch,
BrowserRouter as Router,
Switch,
Route,
Redirect,
} from 'react-router-dom';
@@ -15,7 +16,10 @@ import { QueryParamProvider } from 'use-query-params';
import { Container } from '@mui/material';
import CssBaseline from '@mui/material/CssBaseline';
import {
createTheme, ThemeProvider, Theme, StyledEngineProvider,
createTheme,
ThemeProvider,
Theme,
StyledEngineProvider,
} from '@mui/material/styles';
import DefaultNavBar from 'components/navbar/DefaultNavBar';
import DarkTheme from 'components/context/DarkTheme';
@@ -36,15 +40,18 @@ import Browse from 'screens/Browse';
import Sources from 'screens/Sources';
import Extensions from 'screens/Extensions';
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {
}
interface DefaultTheme extends Theme {}
}
export default function App() {
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>('darkTheme', true);
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
'darkTheme',
true,
);
const darkThemeContext = {
darkTheme,
@@ -69,7 +76,6 @@ export default function App() {
border-radius: 5px;
}
`,
},
},
}),
@@ -81,99 +87,104 @@ export default function App() {
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<QueryParamProvider ReactRouterRoute={Route}>
<NavBarContextProvider>
<CssBaseline />
<DefaultNavBar />
<Container
id="appMainContainer"
maxWidth={false}
disableGutters
sx={{
mt: 8,
ml: { sm: 8 },
mb: { xs: 8, sm: 0 },
width: 'auto',
overflow: 'auto',
}}
>
<LibraryOptionsContextProvider>
<NavBarContextProvider>
<CssBaseline />
<DefaultNavBar />
<Container
id="appMainContainer"
maxWidth={false}
disableGutters
sx={{
mt: 8,
ml: { sm: 8 },
mb: { xs: 8, sm: 0 },
width: 'auto',
overflow: 'auto',
}}
>
<Switch>
{/* General Routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider
value={darkThemeContext}
>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch>
{/* General Routes */}
<Route
exact
path="/"
render={() => (
<Redirect to="/library" />
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader when changing chapters
render={(props: any) => (
<Reader
key={
props.match.params
.chapterIndex
}
/>
)}
/>
<Route path="/settings/about">
<About />
</Route>
<Route path="/settings/categories">
<Categories />
</Route>
<Route path="/settings/backup">
<Backup />
</Route>
<Route path="/settings">
<DarkTheme.Provider value={darkThemeContext}>
<Settings />
</DarkTheme.Provider>
</Route>
{/* Manga Routes */}
<Route path="/sources/:sourceId/search/">
<SearchSingle />
</Route>
<Route path="/sources/:sourceId/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/downloads">
<DownloadQueue />
</Route>
<Route path="/manga/:mangaId/chapter/:chapterNum">
<></>
</Route>
<Route path="/manga/:id">
<Manga />
</Route>
<Route path="/library">
<Library />
</Route>
<Route path="/updates">
<Updates />
</Route>
<Route path="/sources">
<Sources />
</Route>
<Route path="/extensions">
<Extensions />
</Route>
<Route path="/browse">
<Browse />
</Route>
</Switch>
</Container>
<Switch>
<Route
path="/manga/:mangaId/chapter/:chapterIndex"
// passing a key re-mounts the reader when changing chapters
render={
(props: any) => (
<Reader
key={props.match.params.chapterIndex}
/>
)
}
/>
</Switch>
</NavBarContextProvider>
</NavBarContextProvider>
</LibraryOptionsContextProvider>
</QueryParamProvider>
</ThemeProvider>
</StyledEngineProvider>

6
src/components/MangaCard.tsx
View File

@@ -14,6 +14,7 @@ import { Grid } from '@mui/material';
import useLocalStorage from 'util/useLocalStorage';
import SpinnerImage from 'components/util/SpinnerImage';
import { styled } from '@mui/system';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
const BottomGradient = styled('div')({
position: 'absolute',
@@ -76,6 +77,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
id, title, thumbnailUrl, downloadCount, unreadCount: unread,
},
} = props;
const { options: { showUnreadBadge, showDownloadBadge } } = useLibraryOptionsContext();
const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const [useCache] = useLocalStorage<boolean>('useCache', true);
@@ -99,14 +101,14 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
>
<BadgeContainer>
{unread! > 0 && (
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{downloadCount! > 0 && (
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}

24
src/components/context/LibraryOptionsContext.tsx Normal file
View File

@@ -0,0 +1,24 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* 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, { useContext } from 'react';
type ContextType = {
options: LibraryDisplayOptions;
setOptions: React.Dispatch<React.SetStateAction<LibraryDisplayOptions>>;
};
const LibraryOptionsContext = React.createContext<ContextType>({
options: { showDownloadBadge: false, showUnreadBadge: false },
setOptions: () => {},
});
export default LibraryOptionsContext;
export function useLibraryOptionsContext() {
return useContext(LibraryOptionsContext);
}

155
src/components/library/LibraryOptions.tsx
View File

@@ -6,24 +6,101 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React from 'react';
import React, { useState } from 'react';
import FilterListIcon from '@mui/icons-material/FilterList';
import SortIcon from '@mui/icons-material/Sort';
import { Drawer, FormControlLabel, IconButton } from '@mui/material';
import {
Drawer,
FormControlLabel,
IconButton,
Tabs,
Tab,
Box,
Stack,
Checkbox,
Radio,
Switch,
} from '@mui/material';
import useLibraryOptions from 'util/useLibraryOptions';
import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
import Switch from '@mui/material/Switch';
import Radio from '@mui/material/Radio';
import { Box } from '@mui/system';
import TabPanel from 'components/util/TabPanel';
import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
import SortIcon from '@mui/icons-material/Sort';
function Options() {
const {
downloaded, setDownloaded, unread, setUnread,
} = useLibraryOptions();
const [currentTab, setCurrentTab] = useState<number>(0);
const { options, setOptions } = useLibraryOptionsContext();
function setContextOptions(
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) {
setOptions((prev) => ({ ...prev, [e.target.name]: checked }));
}
return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<FormControlLabel control={<ThreeStateCheckbox name="Unread" checked={unread} onChange={setUnread} />} label="Unread" />
<FormControlLabel control={<ThreeStateCheckbox name="Downloaded" checked={downloaded} onChange={setDownloaded} />} label="Downloaded" />
<Box>
<Tabs
key={currentTab}
value={currentTab}
variant="fullWidth"
onChange={(e, newTab) => setCurrentTab(newTab)}
indicatorColor="primary"
textColor="primary"
>
<Tab label="Filter" value={0} />
<Tab label="Display" value={1} />
</Tabs>
<TabPanel index={0} currentIndex={currentTab}>
<Stack direction="column">
<FormControlLabel
control={(
<ThreeStateCheckbox
name="Unread"
checked={unread}
onChange={setUnread}
/>
)}
label="Unread"
/>
<FormControlLabel
control={(
<ThreeStateCheckbox
name="Downloaded"
checked={downloaded}
onChange={setDownloaded}
/>
)}
label="Downloaded"
/>
</Stack>
</TabPanel>
<TabPanel index={1} currentIndex={currentTab}>
<Stack direction="column">
<FormControlLabel
label="Unread Badges"
control={(
<Checkbox
name="showUnreadBadge"
checked={options.showUnreadBadge}
onChange={setContextOptions}
/>
)}
/>
<FormControlLabel
label="Download Badges"
control={(
<Checkbox
name="showDownloadBadge"
checked={options.showDownloadBadge}
onChange={setContextOptions}
/>
)}
/>
</Stack>
</TabPanel>
</Box>
);
}
@@ -33,20 +110,57 @@ function SortOptions() {
sorts, setSorts, sortDesc, setSortDesc,
} = useLibraryOptions();
const handleSortChange = (name: string) => (event: { target: { checked: boolean; }; }) => {
const handleSortChange = (name: string) => (event: { target: { checked: boolean } }) => {
setSorts(event.target.checked ? name : undefined);
};
const handleOrderChange = () => (event: { target: { checked: boolean; }; }) => {
const handleOrderChange = () => (event: { target: { checked: boolean } }) => {
setSortDesc(event.target.checked);
};
return (
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<FormControlLabel control={<Switch name="sortDesc" checked={sortDesc === true} onChange={handleOrderChange()} color="default" />} label="Asc/Desc" />
<FormControlLabel control={<Radio name="sortToRead" checked={sorts === 'sortToRead'} onChange={handleSortChange('sortToRead')} />} label="Sort by left to read" />
<FormControlLabel control={<Radio name="sortAlph" checked={sorts === 'sortAlph'} onChange={handleSortChange('sortAlph')} />} label="Sort alphbetical" />
<FormControlLabel control={<Radio name="sortID" checked={sorts === 'sortID' || sorts === undefined} onChange={handleSortChange('sortID')} />} label="Sort by ID" />
<FormControlLabel
control={(
<Switch
name="sortDesc"
checked={sortDesc === true}
onChange={handleOrderChange()}
color="default"
/>
)}
label="Asc/Desc"
/>
<FormControlLabel
control={(
<Radio
name="sortToRead"
checked={sorts === 'sortToRead'}
onChange={handleSortChange('sortToRead')}
/>
)}
label="Sort by left to read"
/>
<FormControlLabel
control={(
<Radio
name="sortAlph"
checked={sorts === 'sortAlph'}
onChange={handleSortChange('sortAlph')}
/>
)}
label="Sort alphbetical"
/>
<FormControlLabel
control={(
<Radio
name="sortID"
checked={sorts === 'sortID' || sorts === undefined}
onChange={handleSortChange('sortID')}
/>
)}
label="Sort by ID"
/>
</Box>
);
}
@@ -70,7 +184,10 @@ export default function LibraryOptions() {
onClose={() => setFiltersOpen(false)}
PaperProps={{
style: {
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
},
}}
>
@@ -90,13 +207,15 @@ export default function LibraryOptions() {
onClose={() => setSortsOpen(false)}
PaperProps={{
style: {
maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
maxWidth: 600,
padding: '1em',
marginLeft: 'auto',
marginRight: 'auto',
},
}}
>
<SortOptions />
</Drawer>
</>
);
}

25
src/components/library/LibraryOptionsProvider.tsx Normal file
View File

@@ -0,0 +1,25 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* 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 from 'react';
import LibraryOptionsContext from 'components/context/LibraryOptionsContext';
import useLocalStorage from 'util/useLocalStorage';
interface IProps {
children: React.ReactNode;
}
export default function LibraryOptionsContextProvider({ children }: IProps) {
const [options, setOptions] = useLocalStorage<LibraryDisplayOptions>('libraryOptions',
{ showDownloadBadge: false, showUnreadBadge: false });
return (
<LibraryOptionsContext.Provider value={{ options, setOptions }}>
{children}
</LibraryOptionsContext.Provider>
);
}

5
src/typings.d.ts vendored
View File

@@ -236,3 +236,8 @@ type ChapterOptionsReducerAction =
| { type: 'sortBy', sortBy: ChapterSortMode }
| { type: 'sortReverse' }
| { type: 'showChapterNumber' };
interface LibraryDisplayOptions {
showDownloadBadge: boolean
showUnreadBadge: boolean
}