Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/swr for library screens #186

Merged
merged 7 commits into from
Nov 2, 2022
Merged

Feature/swr for library screens #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a0b0b71
Wrap data fetching in library and manga screen with swr for better de…
martinek Oct 28, 2022
d85da3d
Fix manga card layout
martinek Oct 28, 2022
b0f2e2f
Fix refresh button position on small screens
martinek Oct 28, 2022
9103cca
Revert "Fix manga card layout"
martinek Oct 30, 2022
839b1eb
Fix manga not setting title
martinek Oct 31, 2022
b05cc03
Move chapters loading to Manga component, join data fetching, add aut…
martinek Oct 31, 2022
9e31c5b
Revert some changes
martinek Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-virtuoso": "^1.8.6",
"swr": "^1.3.0",
"use-query-params": "^1.2.3",
"web-vitals": "^2.1.0"
},
Expand Down
207 changes: 106 additions & 101 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
Theme,
StyledEngineProvider,
} from '@mui/material/styles';
import { SWRConfig } from 'swr';
import { fetcher } from 'util/client';
import DefaultNavBar from 'components/navbar/DefaultNavBar';
import DarkTheme from 'components/context/DarkTheme';
import useLocalStorage from 'util/useLocalStorage';
Expand Down Expand Up @@ -83,111 +85,114 @@ export default function App() {
);

return (
<Router>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<QueryParamProvider ReactRouterRoute={Route}>
<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',
}}
>
<SWRConfig value={{ fetcher }}>
<Router>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<QueryParamProvider ReactRouterRoute={Route}>
<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/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/sources/all/search/">
<SearchAll />
</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/popular/">
<SourceMangas popular />
</Route>
<Route path="/sources/:sourceId/latest/">
<SourceMangas popular={false} />
</Route>
<Route path="/sources/:sourceId/configure/">
<SourceConfigure />
</Route>
<Route path="/sources/all/search/">
<SearchAll />
</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>
</LibraryOptionsContextProvider>
</QueryParamProvider>
</ThemeProvider>
</StyledEngineProvider>
</Router>
</NavBarContextProvider>
</LibraryOptionsContextProvider>
</QueryParamProvider>
</ThemeProvider>
</StyledEngineProvider>
</Router>
</SWRConfig>
);
}
56 changes: 31 additions & 25 deletions src/components/MangaDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ import React, { useContext, useEffect, useState } from 'react';
import NavbarContext from 'components/context/NavbarContext';
import client from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import Refresh from '@mui/icons-material/Refresh';
import CategorySelect from './navbar/action/CategorySelect';
import LoadingIconButton from './atoms/LoadingIconButton';

const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
root: {
Expand Down Expand Up @@ -118,6 +120,8 @@ const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({

interface IProps{
manga: IManga
onRefresh: () => Promise<any>
refreshing: boolean
}

function getSourceName(source: ISource) {
Expand All @@ -131,40 +135,42 @@ function getValueOrUnknown(val: string) {
return val || 'UNKNOWN';
}

export default function MangaDetails(props: IProps) {
export default function MangaDetails({ manga, onRefresh, refreshing }: IProps) {
const { setAction } = useContext(NavbarContext);

const { manga } = props;

const [inLibrary, setInLibrary] = useState<string>(
manga.inLibrary ? 'In Library' : 'Add To Library',
);

const [categoryDialogOpen, setCategoryDialogOpen] = useState<boolean>(false);

useEffect(() => {
if (inLibrary === 'In Library') {
setAction(
<>
<IconButton
onClick={() => setCategoryDialogOpen(true)}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<FilterListIcon />
</IconButton>
<CategorySelect
open={categoryDialogOpen}
setOpen={setCategoryDialogOpen}
mangaId={manga.id}
/>
</>,

);
} else { setAction(<></>); }
}, [inLibrary, categoryDialogOpen]);
setAction(
<>
<LoadingIconButton loading={refreshing} onClick={onRefresh}>
<Refresh />
</LoadingIconButton>
{inLibrary === 'In Library' && (
<>
<IconButton
onClick={() => setCategoryDialogOpen(true)}
aria-label="display more actions"
edge="end"
color="inherit"
size="large"
>
<FilterListIcon />
</IconButton>
<CategorySelect
open={categoryDialogOpen}
setOpen={setCategoryDialogOpen}
mangaId={manga.id}
/>
</>
)}
</>,
);
}, [inLibrary, categoryDialogOpen, refreshing, onRefresh]);

const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const [useCache] = useLocalStorage<boolean>('useCache', true);
Expand Down
32 changes: 32 additions & 0 deletions src/components/atoms/LoadingIconButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { CircularProgress, IconButton, IconButtonProps } from '@mui/material';
import React, { useState } from 'react';

interface IProps extends Omit<IconButtonProps, 'onClick'> {
loading?: boolean
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<any>
}

const LoadingIconButton = ({
onClick, children, loading: iLoading, ...rest
}: IProps) => {
const [sLoading, setLoading] = useState(false);
const loading = sLoading || iLoading;

const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
setLoading(true);
onClick(e).finally(() => setLoading(false));
};

return (
// eslint-disable-next-line react/jsx-props-no-spreading
<IconButton disabled={loading} {...rest} onClick={handleClick}>
{loading ? (<CircularProgress size={24} />) : children}
</IconButton>
);
};

LoadingIconButton.defaultProps = {
loading: false,
};

export default LoadingIconButton;
Loading