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" />}

14
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,18 +156,21 @@ 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;
}
if (action === 'delete') {
actionPromise = requestManager.deleteDownloadedChapters(chapterIds).response;
} else {
actionPromise = requestManager.updateChapters(chapterIds, change).response;
}
}
actionPromise
.then(() => makeToast(t(actionsStrings[action].success, { count: chapterIds.length }), 'success'))
@@ -266,6 +271,7 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
return (
<ChapterCard
{...chaptersWithMeta[index]}
chapterIds={mangaChapterIds}
showChapterNumber={options.showChapterNumber}
triggerChaptersUpdate={() => mutate()}
onSelect={() => handleSelection(index)}

73
src/lib/requests/RequestManager.ts
View File

@@ -23,7 +23,6 @@ import {
import { OperationVariables } from '@apollo/client/core';
import {
BackupValidationResult,
BatchChaptersChange,
ICategory,
IChapter,
IManga,
@@ -42,6 +41,10 @@ import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
import {
CheckForServerUpdatesQuery,
CheckForServerUpdatesQueryVariables,
DeleteDownloadedChapterMutation,
DeleteDownloadedChapterMutationVariables,
DeleteDownloadedChaptersMutation,
DeleteDownloadedChaptersMutationVariables,
GetAboutQuery,
GetAboutQueryVariables,
GetExtensionsFetchMutation,
@@ -56,9 +59,16 @@ import {
GetSourcesQueryVariables,
InstallExternalExtensionMutation,
InstallExternalExtensionMutationVariables,
SetChapterMetadataMutation,
SetChapterMetadataMutationVariables,
SetGlobalMetadataMutation,
SetGlobalMetadataMutationVariables,
SetMangaMetadataMutation,
UpdateChapterMutation,
UpdateChapterMutationVariables,
UpdateChapterPatchInput,
UpdateChaptersMutation,
UpdateChaptersMutationVariables,
UpdateExtensionMutation,
UpdateExtensionMutationVariables,
UpdateExtensionPatchInput,
@@ -82,6 +92,9 @@ import { SET_MANGA_METADATA, UPDATE_MANGA, UPDATE_MANGA_CATEGORIES } from '@/lib
import { GET_MANGA, GET_MANGAS } from '@/lib/graphql/queries/MangaQuery.ts';
import { GET_CATEGORIES, GET_CATEGORY, GET_CATEGORY_MANGAS } from '@/lib/graphql/queries/CategoryQuery.ts';
import { GET_SOURCE_MANGAS_FETCH } from '@/lib/graphql/mutations/SourceMutation.ts';
import { DELETE_DOWNLOADED_CHAPTER, DELETE_DOWNLOADED_CHAPTERS } from '@/lib/graphql/mutations/DownloaderMutation.ts';
import { GET_CHAPTER, GET_CHAPTERS } from '@/lib/graphql/queries/ChapterQuery.ts';
import { SET_CHAPTER_METADATA, UPDATE_CHAPTER, UPDATE_CHAPTERS } from '@/lib/graphql/mutations/ChapterMutation.ts';
enum SWRHttpMethod {
SWR_GET,
@@ -747,27 +760,47 @@ export class RequestManager {
return this.doRequest(HttpMethod.GET, `manga/${mangaId}/chapter/${chapterIndex}`);
}
public deleteDownloadedChapter(mangaId: number | string, chapterIndex: number | string): AbortableAxiosResponse {
return this.doRequest(HttpMethod.DELETE, `manga/${mangaId}/chapter/${chapterIndex}`);
public deleteDownloadedChapter(id: number): AbortableApolloMutationResponse<DeleteDownloadedChapterMutation> {
return this.doRequestNew<DeleteDownloadedChapterMutation, DeleteDownloadedChapterMutationVariables>(
GQLMethod.MUTATION,
DELETE_DOWNLOADED_CHAPTER,
{ input: { id } },
{ refetchQueries: [GET_MANGA, GET_MANGAS, GET_CATEGORY_MANGAS, GET_CHAPTERS] },
);
}
public deleteDownloadedChapters(ids: number[]): AbortableApolloMutationResponse<DeleteDownloadedChaptersMutation> {
return this.doRequestNew<DeleteDownloadedChaptersMutation, DeleteDownloadedChaptersMutationVariables>(
GQLMethod.MUTATION,
DELETE_DOWNLOADED_CHAPTERS,
{ input: { ids } },
{ refetchQueries: [GET_MANGA, GET_MANGAS, GET_CATEGORY_MANGAS, GET_CHAPTERS] },
);
}
public updateChapter(
mangaId: number | string,
chapterIndex: number | string,
change: { read?: boolean; bookmarked?: boolean; markPrevRead?: boolean; lastPageRead?: number } = {},
): AbortableAxiosResponse {
return this.doRequest(HttpMethod.PATCH, `manga/${mangaId}/chapter/${chapterIndex}`, { formData: change });
id: number,
patch: UpdateChapterPatchInput,
): AbortableApolloMutationResponse<UpdateChapterMutation> {
return this.doRequestNew<UpdateChapterMutation, UpdateChapterMutationVariables>(
GQLMethod.MUTATION,
UPDATE_CHAPTER,
{ input: { id, patch } },
{ refetchQueries: [GET_MANGA, GET_MANGAS, GET_CATEGORY_MANGAS, GET_CHAPTER, GET_CHAPTERS] },
);
}
public setChapterMeta(
mangaId: number | string,
chapterIndex: number | string,
chapterId: number,
key: string,
value: any,
): AbortableAxiosResponse {
return this.doRequest(HttpMethod.PATCH, `manga/${mangaId}/chapter/${chapterIndex}/meta`, {
formData: { key, value },
});
): AbortableApolloMutationResponse<SetChapterMetadataMutation> {
return this.doRequestNew<SetChapterMetadataMutation, SetChapterMetadataMutationVariables>(
GQLMethod.MUTATION,
SET_CHAPTER_METADATA,
{ input: { meta: { chapterId, key, value: `${value}` } } },
{ refetchQueries: [GET_CHAPTER, GET_CHAPTERS] },
);
}
public getChapterPageUrl(mangaId: number | string, chapterIndex: number | string, page: number): string {
@@ -777,8 +810,16 @@ export class RequestManager {
);
}
public updateChapters(chapterIds: number[], change: BatchChaptersChange): AbortableAxiosResponse {
return this.doRequest(HttpMethod.POST, `chapter/batch`, { data: { chapterIds, change } });
public updateChapters(
ids: number[],
patch: UpdateChapterPatchInput,
): AbortableApolloMutationResponse<UpdateChaptersMutation> {
return this.doRequestNew<UpdateChaptersMutation, UpdateChaptersMutationVariables>(
GQLMethod.MUTATION,
UPDATE_CHAPTERS,
{ input: { ids, patch } },
{ refetchQueries: [GET_MANGA, GET_MANGAS, GET_CATEGORY_MANGAS, GET_CHAPTER, GET_CHAPTERS] },
);
}
public useGetCategories(swrOptions?: SWROptions<ICategory[]>): AbortableSWRResponse<ICategory[]> {

2
src/screens/DownloadQueue.tsx
View File

@@ -74,7 +74,7 @@ const DownloadQueue: React.FC = () => {
requestManager.removeChapterFromDownloadQueue(chapter.mangaId, chapter.index).response,
// delete partial download, should be handle server side?
// bug: The folder and the last image downloaded are not deleted
requestManager.deleteDownloadedChapter(chapter.mangaId, chapter.index).response,
requestManager.deleteDownloadedChapter(chapter.id).response,
]);
} catch (error) {
makeToast(t('download.queue.error.label.failed_to_remove'), 'error');

10
src/screens/Reader.tsx
View File

@@ -85,7 +85,7 @@ const initialChapter = {
chapterCount: 0,
lastPageRead: 0,
name: 'Loading...',
};
} as IChapter;
export default function Reader() {
const { t } = useTranslation();
@@ -207,19 +207,19 @@ 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(manga.id, chapter.index, { lastPageRead: curPage });
requestManager.updateChapter(chapter.id, { lastPageRead: curPage });
}
if (curPage === chapter.pageCount - 1) {
requestManager.updateChapter(manga.id, chapter.index, { read: true });
requestManager.updateChapter(chapter.id, { isRead: true });
}
}, [curPage]);
const nextChapter = useCallback(() => {
if (chapter.index < chapter.chapterCount) {
requestManager.updateChapter(manga.id, chapter.index, {
requestManager.updateChapter(chapter.id, {
lastPageRead: chapter.pageCount - 1,
read: true,
isRead: true,
});
openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>

7
src/typings.ts
View File

@@ -368,13 +368,6 @@ export interface LibraryOptions {
showTabSize: boolean;
}
export interface BatchChaptersChange {
delete?: boolean;
isRead?: boolean;
isBookmarked?: boolean;
lastPageRead?: number;
}
export type UpdateCheck = {
channel: 'Stable' | 'Preview';
tag: string;

2
src/util/metadata.ts
View File

@@ -315,7 +315,7 @@ export const requestUpdateMetadataValue = async (
// eslint-disable-next-line no-case-declarations
const { manga, chapter } = metadataHolder as IMangaChapter;
endpoint = `manga/${manga.id}/chapter/${chapter.index}/meta`;
await requestManager.setChapterMeta(manga.id, chapter.index, metadataKey, value).response;
await requestManager.setChapterMeta(chapter.id, metadataKey, value).response;
break;
case 'global':
endpoint = 'meta';