From 03df6fbdf64eb6e5c5ea2d828708499ec14aa4f0 Mon Sep 17 00:00:00 2001 From: abhijeetChawla Date: Thu, 3 Mar 2022 18:19:01 +0530 Subject: [PATCH] Resolved Merged Conflicts (#127) --- src/App.tsx | 199 +++++++++--------- src/components/MangaCard.tsx | 6 +- .../context/LibraryOptionsContext.tsx | 24 +++ src/components/library/LibraryOptions.tsx | 155 ++++++++++++-- .../library/LibraryOptionsProvider.tsx | 25 +++ src/typings.d.ts | 5 + 6 files changed, 300 insertions(+), 114 deletions(-) create mode 100644 src/components/context/LibraryOptionsContext.tsx create mode 100644 src/components/library/LibraryOptionsProvider.tsx diff --git a/src/App.tsx b/src/App.tsx index 29d35154..e620069c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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('darkTheme', true); + const [darkTheme, setDarkTheme] = useLocalStorage( + 'darkTheme', + true, + ); const darkThemeContext = { darkTheme, @@ -69,7 +76,6 @@ export default function App() { border-radius: 5px; } `, - }, }, }), @@ -81,99 +87,104 @@ export default function App() { - - - - + + + + + + + {/* General Routes */} + ( + + )} + /> + + + + + + + + + + + + + + + + {/* Manga Routes */} + + + + + + + + + + + + + + + + + + <> + + + + + + + + + + + + + + + + + + + + + - {/* General Routes */} ( - + path="/manga/:mangaId/chapter/:chapterIndex" + // passing a key re-mounts the reader when changing chapters + render={(props: any) => ( + )} /> - - - - - - - - - - - - - - - - {/* Manga Routes */} - - - - - - - - - - - - - - - - - - <> - - - - - - - - - - - - - - - - - - - - - - ( - - ) - } - /> - - + + diff --git a/src/components/MangaCard.tsx b/src/components/MangaCard.tsx index 62224ddd..5006ac31 100644 --- a/src/components/MangaCard.tsx +++ b/src/components/MangaCard.tsx @@ -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((props: IProps, ref) id, title, thumbnailUrl, downloadCount, unreadCount: unread, }, } = props; + const { options: { showUnreadBadge, showDownloadBadge } } = useLibraryOptionsContext(); const [serverAddress] = useLocalStorage('serverBaseURL', ''); const [useCache] = useLocalStorage('useCache', true); @@ -99,14 +101,14 @@ const MangaCard = React.forwardRef((props: IProps, ref) > - {unread! > 0 && ( + { showUnreadBadge && unread! > 0 && ( {unread} )} - {downloadCount! > 0 && ( + { showDownloadBadge && downloadCount! > 0 && ( >; +}; + +const LibraryOptionsContext = React.createContext({ + options: { showDownloadBadge: false, showUnreadBadge: false }, + setOptions: () => {}, +}); + +export default LibraryOptionsContext; + +export function useLibraryOptionsContext() { + return useContext(LibraryOptionsContext); +} diff --git a/src/components/library/LibraryOptions.tsx b/src/components/library/LibraryOptions.tsx index 6fb222b7..c6d111c0 100644 --- a/src/components/library/LibraryOptions.tsx +++ b/src/components/library/LibraryOptions.tsx @@ -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(0); + const { options, setOptions } = useLibraryOptionsContext(); + + function setContextOptions( + e: React.ChangeEvent, + checked: boolean, + ) { + setOptions((prev) => ({ ...prev, [e.target.name]: checked })); + } + return ( - - } label="Unread" /> - } label="Downloaded" /> + + setCurrentTab(newTab)} + indicatorColor="primary" + textColor="primary" + > + + + + + + + )} + label="Unread" + /> + + )} + label="Downloaded" + /> + + + + + + )} + /> + + )} + /> + + ); } @@ -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 ( - } label="Asc/Desc" /> - } label="Sort by left to read" /> - } label="Sort alphbetical" /> - } label="Sort by ID" /> + + )} + label="Asc/Desc" + /> + + )} + label="Sort by left to read" + /> + + )} + label="Sort alphbetical" + /> + + )} + label="Sort by ID" + /> ); } @@ -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', }, }} > - ); } diff --git a/src/components/library/LibraryOptionsProvider.tsx b/src/components/library/LibraryOptionsProvider.tsx new file mode 100644 index 00000000..fa61b5fc --- /dev/null +++ b/src/components/library/LibraryOptionsProvider.tsx @@ -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('libraryOptions', + { showDownloadBadge: false, showUnreadBadge: false }); + + return ( + + {children} + + ); +} diff --git a/src/typings.d.ts b/src/typings.d.ts index 18d779c5..6e68fabf 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -236,3 +236,8 @@ type ChapterOptionsReducerAction = | { type: 'sortBy', sortBy: ChapterSortMode } | { type: 'sortReverse' } | { type: 'showChapterNumber' }; + +interface LibraryDisplayOptions { + showDownloadBadge: boolean + showUnreadBadge: boolean +}