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

Feature/refactor source mangas screen (#314)

Browse Source 
* Refactor "SourceMangas"

* Refactor "SourceMangas" - Show loading placeholder on filter reset or submit

Due to the url being the same for all "filter requests" the loading state doesn't get changed by SWR.
Instead, only the "isValidating" state gets updated.

* Refactor "SourceMangas" - Update routing

* Refactor "SourceMangas" - Prevent duplicated mangas in grid

There is a possibility that the "latest" endpoint returns the same manga on different pages

* Always set the toolbar content on the manga page

"setAction" wasn't called on the manga page, thus, in case the previous page didn't unset the action, it never got unset

* Rename source content type "Browse" to "Popular"
This commit is contained in:
schroda
2023-05-28 12:16:06 +02:00
committed by GitHub
parent 1480507c35
commit 46a7ff6e3b
8 changed files with 318 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/screens/Manga.tsx
View File

@@ -14,7 +14,6 @@ import ChapterList from 'components/manga/ChapterList';
import { useRefreshManga } from 'components/manga/hooks';
import MangaDetails from 'components/manga/MangaDetails';
import MangaToolbarMenu from 'components/manga/MangaToolbarMenu';
import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
import EmptyView from 'components/util/EmptyView';
import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import React, { useContext, useEffect, useRef } from 'react';
@@ -27,7 +26,7 @@ const AUTOFETCH_AGE = 60 * 60 * 24; // 24 hours
const Manga: React.FC = () => {
const { t } = useTranslation();
const { setTitle } = useContext(NavbarContext);
const { setTitle, setAction } = useContext(NavbarContext);
const { id } = useParams<{ id: string }>();
const autofetchedRef = useRef(false);
@@ -36,7 +35,7 @@ const Manga: React.FC = () => {
const [refresh, { loading: refreshing }] = useRefreshManga(id);
useSetDefaultBackTo(
manga?.inLibrary === false && manga.sourceId != null ? `/sources/${manga.sourceId}/popular` : '/library',
manga?.inLibrary === false && manga.sourceId != null ? `/sources/${manga.sourceId}` : '/library',
);
useEffect(() => {
@@ -56,39 +55,42 @@ const Manga: React.FC = () => {
useEffect(() => {
setTitle(manga?.title ?? t('manga.title'));
setAction(null);
}, [t, manga?.title]);
useEffect(() => {
setAction(
<Stack direction="row" alignItems="center">
{error && !isValidating && !refreshing && (
<Tooltip
title={
<>
{t('manga.error.label.request_failure')}
<br />
{error.message ?? error}
</>
}
>
<IconButton onClick={() => mutate()}>
<Warning color="error" />
</IconButton>
</Tooltip>
)}
{manga && (refreshing || isValidating) && (
<IconButton disabled>
<CircularProgress size={16} />
</IconButton>
)}
{manga && <MangaToolbarMenu manga={manga} onRefresh={refresh} refreshing={refreshing} />}
</Stack>,
);
}, [t, error, isValidating, refreshing, mutate, manga, refresh]);
if (error && !manga) {
return <EmptyView message={t('manga.error.label.request_failure')} messageExtra={error.message ?? error} />;
}
return (
<Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
<NavbarToolbar>
<Stack direction="row" alignItems="center">
{error && !isValidating && !refreshing && (
<Tooltip
title={
<>
{t('manga.error.label.request_failure')}
<br />
{error.message ?? error}
</>
}
>
<IconButton onClick={() => mutate()}>
<Warning color="error" />
</IconButton>
</Tooltip>
)}
{manga && (refreshing || isValidating) && (
<IconButton disabled>
<CircularProgress size={16} />
</IconButton>
)}
{manga && <MangaToolbarMenu manga={manga} onRefresh={refresh} refreshing={refreshing} />}
</Stack>
</NavbarToolbar>
{isLoading && <LoadingPlaceholder />}
{manga && <MangaDetails manga={manga} />}