Skip to content

Commit

Permalink
Use gql for "updating chapters"
Browse files Browse the repository at this point in the history
  • Loading branch information
@schroda
schroda committed Oct 27, 2023
1 parent c75e184 commit f0d55c0
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 44 deletions.
33 changes: 24 additions & 9 deletions src/components/manga/ChapterCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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());
};
Expand All @@ -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();
};

Expand Down Expand Up @@ -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" />}
Expand All @@ -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" />}
Expand Down
16 changes: 11 additions & 5 deletions src/components/manga/ChapterList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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',
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -266,6 +271,7 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
return (
<ChapterCard
{...chaptersWithMeta[index]}
chapterIds={mangaChapterIds}
showChapterNumber={options.showChapterNumber}
triggerChaptersUpdate={() => mutate()}
onSelect={() => handleSelection(index)}
Expand Down
73 changes: 57 additions & 16 deletions src/lib/requests/RequestManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
import { OperationVariables } from '@apollo/client/core';
import {
BackupValidationResult,
BatchChaptersChange,
ICategory,
IChapter,
IManga,
Expand All @@ -42,6 +41,10 @@ import { GraphQLClient } from '@/lib/requests/client/GraphQLClient.ts';
import {
CheckForServerUpdatesQuery,
CheckForServerUpdatesQueryVariables,
DeleteDownloadedChapterMutation,
DeleteDownloadedChapterMutationVariables,
DeleteDownloadedChaptersMutation,
DeleteDownloadedChaptersMutationVariables,
GetAboutQuery,
GetAboutQueryVariables,
GetExtensionsFetchMutation,
Expand All @@ -56,9 +59,16 @@ import {
GetSourcesQueryVariables,
InstallExternalExtensionMutation,
InstallExternalExtensionMutationVariables,
SetChapterMetadataMutation,
SetChapterMetadataMutationVariables,
SetGlobalMetadataMutation,
SetGlobalMetadataMutationVariables,
SetMangaMetadataMutation,
UpdateChapterMutation,
UpdateChapterMutationVariables,
UpdateChapterPatchInput,
UpdateChaptersMutation,
UpdateChaptersMutationVariables,
UpdateExtensionMutation,
UpdateExtensionMutationVariables,
UpdateExtensionPatchInput,
Expand All @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -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[]> {
Expand Down
2 changes: 1 addition & 1 deletion src/screens/DownloadQueue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
10 changes: 5 additions & 5 deletions src/screens/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const initialChapter = {
chapterCount: 0,
lastPageRead: 0,
name: 'Loading...',
};
} as IChapter;

export default function Reader() {
const { t } = useTranslation();
Expand Down Expand Up @@ -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) =>
Expand Down
7 changes: 0 additions & 7 deletions src/typings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/util/metadata.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

0 comments on commit f0d55c0

Please sign in to comment.