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

[Codegen] Use gql for "loading chapters"

Browse Source
This commit is contained in:
schroda
2023-09-30 16:55:35 +02:00
parent 78049282a7
commit aad87463f3
16 changed files with 500 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/screens/Manga.tsx
View File

@@ -97,7 +97,7 @@ const Manga: React.FC = () => {
{isLoading && <LoadingPlaceholder />}
{manga && <MangaDetails manga={manga} />}
<ChapterList mangaId={id} />
{manga && <ChapterList manga={manga} isRefreshing={refreshing} />}
</Box>
);
};

98
src/screens/Reader.tsx
View File

@@ -7,11 +7,11 @@
*/
import CircularProgress from '@mui/material/CircularProgress';
import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { Box } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { ChapterOffset, IChapter, IReaderSettings, ReaderType, TranslationKey } from '@/typings';
import { ChapterOffset, IReaderSettings, ReaderType, TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import {
checkAndHandleMissingStoredReaderSettings,
@@ -27,12 +27,12 @@ import VerticalPager from '@/components/reader/pager/VerticalPager';
import ReaderNavBar from '@/components/navbar/ReaderNavBar';
import NavbarContext from '@/components/context/NavbarContext';
import makeToast from '@/components/util/Toast';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { ChapterType, MangaType } from '@/lib/graphql/generated/graphql.ts';
const isDupChapter = async (chapterIndex: number, currentChapter: IChapter) => {
const nextChapter = await requestManager.getChapter(currentChapter.mangaId, chapterIndex).response;
const isDupChapter = async (chapterIndex: number, currentChapter: ChapterType) => {
const nextChapter = await requestManager.getChapter(currentChapter.manga.id, chapterIndex).response;
return nextChapter.chapterNumber === currentChapter.chapterNumber;
return nextChapter.data.chapter.chapterNumber === currentChapter.chapterNumber;
};
/**
@@ -42,7 +42,7 @@ const isDupChapter = async (chapterIndex: number, currentChapter: IChapter) => {
*/
const getOffsetChapter = async (
chapterIndex: number,
currentChapter: IChapter,
currentChapter: ChapterType,
skipDupChapters: boolean,
offset: ChapterOffset,
): Promise<number> => {
@@ -82,11 +82,11 @@ const getReaderComponent = (readerType: ReaderType) => {
const range = (n: number) => Array.from({ length: n }, (value, key) => key);
const initialChapter = {
pageCount: -1,
index: -1,
sourceOrder: -1,
chapterCount: 0,
lastPageRead: 0,
name: 'Loading...',
} as IChapter;
} as unknown as ChapterType;
export default function Reader() {
const { t } = useTranslation();
@@ -104,17 +104,48 @@ export default function Reader() {
genre: [],
inLibraryAt: 0,
lastReadAt: 0,
chapters: { totalCount: 0 },
}) as unknown as MangaType,
[mangaId],
);
const { data, loading: isMangaLoading } = requestManager.useGetManga(mangaId);
const loadedChapter = useRef<ChapterType | null>(null);
const isChapterLoaded =
Number(mangaId) === loadedChapter.current?.manga.id &&
Number(chapterIndex) === loadedChapter.current?.sourceOrder &&
loadedChapter.current?.pageCount !== -1;
const manga = (data?.manga as MangaType) ?? initialManga;
const { data: chapter = initialChapter, isLoading: isChapterLoading } = requestManager.useGetChapter(
mangaId,
chapterIndex,
{ disableCache: true, revalidateOnFocus: false },
);
const { data: chapterData, loading: isChapterLoading } = requestManager.useGetMangaChapter(mangaId, chapterIndex, {
skip: isChapterLoaded,
});
const getLoadedChapter = () => {
const isAChapterLoaded = loadedChapter.current;
const isSameAsLoadedChapter = isAChapterLoaded && isChapterLoaded;
if (isSameAsLoadedChapter) {
return loadedChapter.current;
}
if (chapterData?.chapter) {
return chapterData.chapter as ChapterType;
}
return null;
};
loadedChapter.current = getLoadedChapter();
const chapter = loadedChapter.current ?? initialChapter;
const [fetchPages, { loading: areChapterPagesLoading }] = requestManager.useGetChapterPagesFetch(chapter.id);
useEffect(() => {
if (!isChapterLoading && chapter.pageCount === -1) {
fetchPages();
}
}, [chapter.id]);
const isLoading = isChapterLoading || areChapterPagesLoading || chapter.pageCount === -1;
const [wasLastPageReadSet, setWasLastPageReadSet] = useState(false);
const [curPage, setCurPage] = useState<number>(0);
const [pageToScrollTo, setPageToScrollTo] = useState<number | undefined>(undefined);
@@ -136,12 +167,7 @@ export default function Reader() {
setRetrievingNextChapter(true);
try {
setHistory(
await getOffsetChapter(
chapter.index + offset,
chapter as IChapter,
settings.skipDupChapters,
offset,
),
await getOffsetChapter(chapter.sourceOrder + offset, chapter, settings.skipDupChapters, offset),
);
} catch (error) {
const offsetToTranslationKeyMap: { [chapterOffset in ChapterOffset]: TranslationKey } = {
@@ -158,7 +184,7 @@ export default function Reader() {
);
useEffect(() => {
if (isChapterLoading || !chapter) {
if (isLoading || !chapter) {
return;
}
@@ -167,13 +193,13 @@ export default function Reader() {
// last page, also probably read = true, we will load the first page.
setCurPage(0);
} else setCurPage(chapter.lastPageRead);
}, [chapter, isChapterLoading]);
}, [chapter, isLoading]);
useEffect(() => {
if (!manga?.title || (chapter as IChapter)?.name === t('global.label.loading')) {
if (!manga?.title || chapter.name === t('global.label.loading')) {
setTitle(t('reader.title'));
} else {
setTitle(`${manga.title}: ${(chapter as IChapter).name}`);
setTitle(`${manga.title}: ${chapter.name}`);
}
}, [t, manga, chapter]);
@@ -193,7 +219,7 @@ export default function Reader() {
settings={settings}
setSettingValue={setSettingValue}
manga={manga}
chapter={chapter as IChapter}
chapter={chapter}
curPage={curPage}
scrollToPage={setPageToScrollTo}
openNextChapter={openNextChapter}
@@ -212,17 +238,20 @@ export default function Reader() {
}
// do not mutate the chapter, this will cause the page to jump around due to always scrolling to the last read page
if (curPage !== -1) {
requestManager.updateChapter(chapter.id, { lastPageRead: curPage });
}
const updateLastPageRead = curPage !== -1;
const updateIsRead = curPage === chapter.pageCount - 1;
const updateChapter = updateLastPageRead || updateIsRead;
if (curPage === chapter.pageCount - 1) {
requestManager.updateChapter(chapter.id, { isRead: true });
if (updateChapter) {
requestManager.updateChapter(chapter.id, {
lastPageRead: updateLastPageRead ? curPage : undefined,
isRead: updateIsRead ? true : undefined,
});
}
}, [curPage]);
const nextChapter = useCallback(() => {
if (chapter.index < chapter.chapterCount) {
if (chapter.sourceOrder < manga.chapters.totalCount) {
requestManager.updateChapter(chapter.id, {
lastPageRead: chapter.pageCount - 1,
isRead: true,
@@ -235,10 +264,10 @@ export default function Reader() {
}),
);
}
}, [chapter.index, chapter.chapterCount, chapter.pageCount, manga.id, settings.skipDupChapters]);
}, [chapter.sourceOrder, manga.chapters.totalCount, chapter.pageCount, manga.id, settings.skipDupChapters]);
const prevChapter = useCallback(() => {
if (chapter.index > 1) {
if (chapter.sourceOrder > 1) {
openNextChapter(ChapterOffset.PREV, (prevChapterIndex) =>
navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
replace: true,
@@ -246,7 +275,7 @@ export default function Reader() {
}),
);
}
}, [chapter.index, manga.id, settings.skipDupChapters]);
}, [chapter.sourceOrder, manga.id, settings.skipDupChapters]);
// return spinner while chpater data is loading
if (chapter.pageCount === -1) {
@@ -283,6 +312,7 @@ export default function Reader() {
>
<PageNumber settings={settings} curPage={curPage} pageCount={chapter.pageCount} />
<ReaderComponent
key={chapter.id}
pages={pages}
pageCount={chapter.pageCount}
setCurPage={setCurPage}

52
src/screens/Updates.tsx
View File

@@ -18,12 +18,13 @@ import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next';
import { GroupedVirtuoso } from 'react-virtuoso';
import { IChapter, IMangaChapter, IQueue } from '@/typings';
import { IQueue } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import LoadingPlaceholder from '@/components/util/LoadingPlaceholder';
import EmptyView from '@/components/util/EmptyView';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import NavbarContext from '@/components/context/NavbarContext';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
// 64px header
@@ -81,14 +82,14 @@ function getDateString(date: Date) {
return date.toLocaleDateString();
}
const groupByDate = (updates: IMangaChapter[]): [date: string, items: number][] => {
const groupByDate = (updates: ChapterType[]): [date: string, items: number][] => {
if (!updates.length) {
return [];
}
const dateToItemMap = new Map<string, number>();
updates.forEach((item) => {
const date = getDateString(epochToDate(item.chapter.fetchedAt));
const date = getDateString(epochToDate(Number(item.fetchedAt)));
dateToItemMap.set(date, (dateToItemMap.get(date) ?? 0) + 1);
});
@@ -106,19 +107,18 @@ const Updates: React.FC = () => {
const { setTitle, setAction } = useContext(NavbarContext);
const {
data: pages = [{ hasNextPage: false, page: [] }],
isLoading,
size: loadedPages,
setSize: setPages,
} = requestManager.useGetRecentlyUpdatedChapters();
const { hasNextPage } = pages[pages.length - 1];
const updateEntries = useMemo(
() => pages.map((page) => page.page).reduce((lastPageChapters, chapters) => [...lastPageChapters, ...chapters]),
[pages],
);
data: chapterUpdateData,
loading: isLoading,
fetchMore,
} = requestManager.useGetRecentlyUpdatedChapters(undefined, {
fetchPolicy: 'cache-and-network',
notifyOnNetworkStatusChange: true,
});
const hasNextPage = !!chapterUpdateData?.chapters.pageInfo.hasNextPage;
const endCursor = chapterUpdateData?.chapters.pageInfo.endCursor;
const updateEntries = (chapterUpdateData?.chapters.nodes as ChapterType[]) ?? [];
const groupedUpdates = useMemo(() => groupByDate(updateEntries), [updateEntries]);
const groupCounts: number[] = useMemo(() => groupedUpdates.map((group) => group[1]), [groupedUpdates]);
const [, setWsClient] = useState<WebSocket>();
const [{ queue }, setQueueState] = useState<IQueue>(initialQueue);
@@ -140,12 +140,15 @@ const Updates: React.FC = () => {
setAction(null);
}, [t]);
const downloadForChapter = (chapter: IChapter) => {
const { index, mangaId } = chapter;
return queue.find((q) => index === q.chapterIndex && mangaId === q.mangaId);
const downloadForChapter = (chapter: ChapterType) => {
const {
sourceOrder,
manga: { id: mangaId },
} = chapter;
return queue.find((q) => sourceOrder === q.chapterIndex && mangaId === q.mangaId);
};
const downloadChapter = (chapter: IChapter) => {
const downloadChapter = (chapter: ChapterType) => {
requestManager.addChapterToDownloadQueue(chapter.id);
};
@@ -154,8 +157,8 @@ const Updates: React.FC = () => {
return;
}
setPages(loadedPages + 1);
}, [hasNextPage, loadedPages]);
fetchMore({ variables: { offset: updateEntries.length } });
}, [hasNextPage, endCursor]);
if (!isLoading && updateEntries.length === 0) {
return <EmptyView message={t('updates.error.label.no_updates_available')} />;
@@ -179,7 +182,8 @@ const Updates: React.FC = () => {
</StyledGroupHeader>
)}
itemContent={(index) => {
const { chapter, manga } = updateEntries[index];
const chapter = updateEntries[index];
const { manga } = chapter;
const download = downloadForChapter(chapter);
return (
@@ -187,7 +191,7 @@ const Updates: React.FC = () => {
<Card>
<CardActionArea
component={Link}
to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
to={`/manga/${chapter.manga.id}/chapter/${chapter.sourceOrder}`}
state={location.state}
>
<CardContent
@@ -208,7 +212,7 @@ const Updates: React.FC = () => {
marginRight: 2,
imageRendering: 'pixelated',
}}
src={requestManager.getValidImgUrlFor(manga.thumbnailUrl)}
src={requestManager.getValidImgUrlFor(manga.thumbnailUrl ?? '')}
/>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography variant="h5" component="h2">
@@ -220,7 +224,7 @@ const Updates: React.FC = () => {
</Box>
</Box>
{download && <DownloadStateIndicator download={download} />}
{download == null && !chapter.downloaded && (
{download == null && !chapter.isDownloaded && (
<IconButton
onClick={(e) => {
e.stopPropagation();