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

Feature/swr for library screens (#186)

Browse Source 
* Wrap data fetching in library and manga screen with swr for better dev and user experience. Refactor some API calls and data handling. Add manual refresh to manga detail.

* Fix manga card layout

* Fix refresh button position on small screens

* Revert "Fix manga card layout"

This reverts commit d85da3d8385e1ef64feed1789e4cd4591c8bd563.

* Fix manga not setting title

* Move chapters loading to Manga component, join data fetching, add auto online fetch if fetched data is old

* Revert some changes
This commit is contained in:
Valter Martinek
2022-11-02 10:42:02 +01:00
committed by GitHub
parent 14a9ffa558
commit 6f8755fa05
12 changed files with 345 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/App.tsx
View File

@@ -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';
@@ -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>
);
}