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

Use gql for "updating chapters"

Browse Source
This commit is contained in:
schroda
2023-09-01 20:36:40 +02:00
parent c75e184c57
commit f0d55c01c8
7 changed files with 99 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/manga/ChapterCard.tsx
View File

@@ -31,9 +31,11 @@ import { IChapter, IDownloadChapter } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import { getUploadDateString } from '@/util/date';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
interface IProps {
chapter: IChapter;
chapterIds: number[];
triggerChaptersUpdate: () => void;
downloadChapter: IDownloadChapter | undefined;
showChapterNumber: boolean;
@@ -45,7 +47,15 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
const { t } = useTranslation();
const theme = useTheme();
const { chapter, triggerChaptersUpdate, downloadChapter: dc, showChapterNumber, onSelect, selected } = props;
const {
chapter,
chapterIds,
triggerChaptersUpdate,
downloadChapter: dc,
showChapterNumber,
onSelect,
selected,
} = props;
const isSelecting = selected !== null;
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -62,13 +72,20 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
setAnchorEl(null);
};
const sendChange = (key: string, value: any) => {
type UpdatePatchInput = UpdateChapterPatchInput & { markPrevRead?: boolean };
const sendChange = <Key extends keyof UpdatePatchInput>(key: Key, value: UpdatePatchInput[Key]) => {
handleClose();
if (key === 'markPrevRead') {
const index = chapterIds.findIndex((chapterId) => chapterId === chapter.id);
requestManager.updateChapters(chapterIds.slice(index, -1), { isRead: true });
return;
}
requestManager
.updateChapter(chapter.mangaId, chapter.index, {
.updateChapter(chapter.id, {
[key]: value,
lastPageRead: key === 'read' ? 0 : undefined,
lastPageRead: key === 'isRead' ? 0 : undefined,
})
.response.then(() => triggerChaptersUpdate());
};
@@ -79,9 +96,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
};
const deleteChapter = () => {
requestManager
.deleteDownloadedChapter(chapter.mangaId, chapter.index)
.response.then(() => triggerChaptersUpdate());
requestManager.deleteDownloadedChapter(chapter.id).response.then(() => triggerChaptersUpdate());
handleClose();
};
@@ -177,7 +192,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
<ListItemText>{t('chapter.action.download.add.label.action')}</ListItemText>
</MenuItem>
)}
<MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
<MenuItem onClick={() => sendChange('isBookmarked', !chapter.bookmarked)}>
<ListItemIcon>
{chapter.bookmarked && <BookmarkRemove fontSize="small" />}
{!chapter.bookmarked && <BookmarkAdd fontSize="small" />}
@@ -187,7 +202,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
{!chapter.bookmarked && t('chapter.action.bookmark.add.label.action')}
</ListItemText>
</MenuItem>
<MenuItem onClick={() => sendChange('read', !chapter.read)}>
<MenuItem onClick={() => sendChange('isRead', !chapter.read)}>
<ListItemIcon>
{chapter.read && <RemoveDone fontSize="small" />}
{!chapter.read && <Done fontSize="small" />}

16
src/components/manga/ChapterList.tsx
View File

@@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography';
import React, { ComponentProps, useEffect, useMemo, useRef, useState } from 'react';
import { Virtuoso } from 'react-virtuoso';
import { useTranslation } from 'react-i18next';
import { BatchChaptersChange, IChapter, IDownloadChapter, IQueue, TranslationKey } from '@/typings';
import { IChapter, IDownloadChapter, IQueue, TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import useSubscription from '@/components/library/useSubscription';
import ChapterCard from '@/components/manga/ChapterCard';
@@ -22,6 +22,7 @@ import makeToast from '@/components/util/Toast';
import ChaptersToolbarMenu from '@/components/manga/ChaptersToolbarMenu';
import SelectionFAB from '@/components/manga/SelectionFAB';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
listStyle: 'none',
@@ -87,6 +88,7 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
const [options, dispatch] = useChapterOptions(mangaId);
const { data: chaptersData, mutate, isLoading } = requestManager.useGetMangaChapters(mangaId);
const chapters = useMemo(() => chaptersData ?? [], [chaptersData]);
const mangaChapterIds = useMemo(() => chapters.map((chapter) => chapter.id), [chapters]);
useEffect(() => {
if (prevQueueRef.current && queue) {
@@ -154,17 +156,20 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
if (action === 'download') {
actionPromise = requestManager.addChaptersToDownloadQueue(chapterIds).response;
} else {
const change: BatchChaptersChange = {};
const change: UpdateChapterPatchInput = {};
if (action === 'delete') change.delete = true;
else if (action === 'bookmark') change.isBookmarked = true;
if (action === 'bookmark') change.isBookmarked = true;
else if (action === 'unbookmark') change.isBookmarked = false;
else if (action === 'mark_as_read' || action === 'mark_as_unread') {
change.isRead = action === 'mark_as_read';
change.lastPageRead = 0;
}
actionPromise = requestManager.updateChapters(chapterIds, change).response;
if (action === 'delete') {
actionPromise = requestManager.deleteDownloadedChapters(chapterIds).response;
} else {
actionPromise = requestManager.updateChapters(chapterIds, change).response;
}
}
actionPromise
@@ -266,6 +271,7 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
return (
<ChapterCard
{...chaptersWithMeta[index]}
chapterIds={mangaChapterIds}
showChapterNumber={options.showChapterNumber}
triggerChaptersUpdate={() => mutate()}
onSelect={() => handleSelection(index)}