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

Use gql for "subscriptions"

Browse Source
This commit is contained in:
schroda
2023-10-04 22:34:32 +02:00
parent b79fbcf71d
commit d3e15e9d3b
11 changed files with 136 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/library/LibraryMangaGrid.tsx
View File

@@ -110,12 +110,7 @@ interface LibraryMangaGridProps {
message?: string;
}
const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: number }> = ({
mangas,
isLoading,
message,
lastLibraryUpdate,
}) => {
const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({ mangas, isLoading, message }) => {
const { t } = useTranslation();
const [query] = useQueryParam('query', StringParam);
@@ -129,7 +124,7 @@ const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: nu
);
const sortedMangas = useMemo(
() => sortManga(filteredMangas, options.sorts, options.sortDesc),
[filteredMangas, lastLibraryUpdate, options.sorts, options.sortDesc],
[filteredMangas, options.sorts, options.sortDesc],
);
const showFilteredOutMessage =
@@ -137,7 +132,7 @@ const LibraryMangaGrid: React.FC<LibraryMangaGridProps & { lastLibraryUpdate: nu
useEffect(() => {
window.scrollTo(0, 0);
}, [filteredMangas]);
}, [query, unread, downloaded]);
return (
<MangaGrid

74
src/components/library/UpdateChecker.tsx
View File

@@ -6,16 +6,16 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useEffect, useState } from 'react';
import { useMemo } from 'react';
import IconButton from '@mui/material/IconButton';
import RefreshIcon from '@mui/icons-material/Refresh';
import CircularProgress from '@mui/material/CircularProgress';
import { Box } from '@mui/material';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { IUpdateStatus } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import makeToast from '@/components/util/Toast';
import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
interface IProgressProps {
progress: number;
@@ -32,62 +32,44 @@ function Progress({ progress }: IProgressProps) {
);
}
interface IUpdateCheckerProps {
handleFinishedUpdate: (time: number) => void;
}
const calcProgress = (status: UpdaterSubscription['updateStatusChanged'] | undefined) => {
if (!status) {
return 0;
}
function UpdateChecker({ handleFinishedUpdate }: IUpdateCheckerProps) {
const finishedUpdates = status.failedJobs.mangas.totalCount + status.completeJobs.mangas.totalCount;
const totalMangas = finishedUpdates + status.pendingJobs.mangas.totalCount + status.runningJobs.mangas.totalCount;
const progress = 100 * (finishedUpdates / totalMangas);
return Number.isNaN(progress) ? 0 : progress;
};
function UpdateChecker() {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [progress, setProgress] = useState(0);
const { data: updaterData } = requestManager.useUpdaterSubscription();
const status = updaterData?.updateStatusChanged;
const loading = !!status?.isRunning;
const progress = useMemo(
() => calcProgress(status),
[
status?.failedJobs.mangas.totalCount,
status?.completeJobs.mangas.totalCount,
status?.pendingJobs.mangas.totalCount,
status?.runningJobs.mangas.totalCount,
],
);
const onClick = async () => {
try {
setLoading(true);
setProgress(0);
await requestManager.startGlobalUpdate().response;
} catch (e) {
makeToast(t('global.error.label.update_failed'), 'error');
setLoading(false);
}
};
useEffect(() => {
const wsc = requestManager.getUpdateWebSocket();
// "loading" can't be used since it will be outdated once the state gets changed
// it could be used by adding it as a dependency of "useEffect" but then the socket would
// get closed and connected again every time it changes
let updateStarted = false;
wsc.onmessage = (e) => {
const { running, mangaStatusMap } = JSON.parse(e.data) as IUpdateStatus;
const { COMPLETE = [], RUNNING = [], PENDING = [] } = mangaStatusMap;
const currentProgress = 100 * (COMPLETE.length / (COMPLETE.length + RUNNING.length + PENDING.length));
const isUpdateFinished = currentProgress === 100;
const ignoreFaultyMessage = !updateStarted && !running && isUpdateFinished;
// for some reason the server sends 100% completed manga updates when connecting to the
// socket while no update is running
if (ignoreFaultyMessage) {
return;
}
updateStarted = running;
setLoading(running);
setProgress(Number.isNaN(currentProgress) ? 0 : currentProgress);
if (isUpdateFinished) {
handleFinishedUpdate(Date.now());
}
};
return () => wsc.close();
}, []);
return (
<IconButton onClick={onClick} disabled={loading}>
{loading ? <Progress progress={progress} /> : <RefreshIcon />}

37
src/components/library/useSubscription.ts
View File

@@ -1,37 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useEffect, useState } from 'react';
import requestManager from '@/lib/requests/RequestManager.ts';
const useSubscription = <T>(path: string, callback?: (newValue: T) => boolean | void) => {
const [state, setState] = useState<T | undefined>();
useEffect(() => {
const wsc = new WebSocket(requestManager.getValidWebSocketUrl(path));
wsc.onmessage = (e) => {
const data = JSON.parse(e.data) as T;
if (callback) {
// If callback is specified, only update state if callback returns true
// This is so that useSubscription can be used without causing rerender
if (callback(data) === true) {
setState(data);
}
} else {
setState(data);
}
};
return () => wsc.close();
}, [path]);
return { data: state };
};
export default useSubscription;

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

@@ -27,16 +27,15 @@ import Typography from '@mui/material/Typography';
import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { IDownloadChapter } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import { getUploadDateString } from '@/util/date';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import { ChapterType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { ChapterType, DownloadType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
interface IProps {
chapter: ChapterType;
chapterIds: number[];
downloadChapter: IDownloadChapter | undefined;
downloadChapter: DownloadType | undefined;
showChapterNumber: boolean;
onSelect: (selected: boolean) => void;
selected: boolean | null;

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

@@ -11,9 +11,8 @@ 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 { IDownloadChapter, IQueue, TranslationKey } from '@/typings';
import { TranslationKey } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import useSubscription from '@/components/library/useSubscription';
import ChapterCard from '@/components/manga/ChapterCard';
import ResumeFab from '@/components/manga/ResumeFAB';
import { filterAndSortChapters, useChapterOptions } from '@/components/manga/util';
@@ -22,7 +21,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 { ChapterType, MangaType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
import { ChapterType, DownloadType, MangaType, UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
listStyle: 'none',
@@ -70,7 +69,7 @@ const actionsStrings: {
export interface IChapterWithMeta {
chapter: ChapterType;
downloadChapter: IDownloadChapter | undefined;
downloadChapter: DownloadType | undefined;
selected: boolean | null;
}
@@ -83,8 +82,9 @@ const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
const { t } = useTranslation();
const [selection, setSelection] = useState<number[] | null>(null);
const prevQueueRef = useRef<IDownloadChapter[]>();
const queue = useSubscription<IQueue>('downloads').data?.queue;
const prevQueueRef = useRef<DownloadType[]>();
const { data: downloaderData } = requestManager.useDownloadSubscription();
const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
const [options, dispatch] = useChapterOptions(manga.id);
const { data: chaptersData, loading: isLoading, refetch } = requestManager.useGetMangaChapters(manga.id);
@@ -99,13 +99,15 @@ const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
const prevQueue = prevQueueRef.current;
const changedDownloads = queue.filter((cd) => {
const prevChapterDownload = prevQueue.find(
(pcd) => cd.chapterIndex === pcd.chapterIndex && cd.mangaId === pcd.mangaId,
(pcd) =>
cd.chapter.sourceOrder === pcd.chapter.sourceOrder &&
cd.chapter.manga.id === pcd.chapter.manga.id,
);
if (!prevChapterDownload) return true;
return cd.state !== prevChapterDownload.state;
});
if (changedDownloads.length > 0) {
if (changedDownloads.length > 0 || prevQueue?.length !== queue.length) {
refetch();
}
}
@@ -179,7 +181,7 @@ const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
() =>
visibleChapters.map((chapter) => {
const downloadChapter = queue?.find(
(cd) => cd.chapterIndex === chapter.sourceOrder && cd.mangaId === chapter.manga.id,
(cd) => cd.chapter.sourceOrder === chapter.sourceOrder && cd.chapter.manga.id === chapter.manga.id,
);
const selected = selection?.includes(chapter.id) ?? null;
return {

11
src/components/manga/MangaDetails.tsx
View File

@@ -12,7 +12,6 @@ import PublicIcon from '@mui/icons-material/Public';
import { styled } from '@mui/material/styles';
import React, { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { mutate } from 'swr';
import { t as translate } from 'i18next';
import Button from '@mui/material/Button';
import { ISource } from '@/typings';
@@ -177,17 +176,11 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
}, [manga.source]);
const addToLibrary = () => {
mutate(`/api/v1/manga/${manga.id}`, { ...manga, inLibrary: true }, { revalidate: false });
requestManager
.updateManga(manga.id, { inLibrary: true })
.response.then(() => mutate(`/api/v1/manga/${manga.id}`));
requestManager.updateManga(manga.id, { inLibrary: true });
};
const removeFromLibrary = () => {
mutate(`/api/v1/manga/${manga.id}`, { ...manga, inLibrary: false }, { revalidate: false });
requestManager
.updateManga(manga.id, { inLibrary: false })
.response.then(() => mutate(`/api/v1/manga/${manga.id}`));
requestManager.updateManga(manga.id, { inLibrary: false });
};
return (

15
src/components/molecules/DownloadStateIndicator.tsx
View File

@@ -10,17 +10,18 @@ import { CircularProgress, Box } from '@mui/material';
import Typography from '@mui/material/Typography';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { IDownloadChapter, TranslationKey } from '@/typings';
import { TranslationKey } from '@/typings';
import { DownloadState, DownloadType } from '@/lib/graphql/generated/graphql.ts';
interface DownloadStateIndicatorProps {
download: IDownloadChapter;
download: DownloadType;
}
const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in IDownloadChapter['state']]: TranslationKey } = {
Downloading: 'download.state.label.downloading',
Error: 'download.state.label.error',
Finished: 'download.state.label.finished',
Queued: 'download.state.label.queued',
const DOWNLOAD_STATE_TO_TRANSLATION_KEY_MAP: { [state in DownloadState]: TranslationKey } = {
DOWNLOADING: 'download.state.label.downloading',
ERROR: 'download.state.label.error',
FINISHED: 'download.state.label.finished',
QUEUED: 'download.state.label.queued',
} as const;
const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => {

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

@@ -18,9 +18,12 @@ import {
QueryHookOptions as ApolloQueryHookOptions,
QueryOptions as ApolloQueryOptions,
QueryResult,
SubscriptionHookOptions as ApolloSubscriptionHookOptions,
SubscriptionResult,
TypedDocumentNode,
useMutation,
useQuery,
useSubscription,
} from '@apollo/client';
import { OperationVariables } from '@apollo/client/core';
import { useEffect, useRef, useState } from 'react';
@@ -47,6 +50,8 @@ import {
DequeueChapterDownloadMutationVariables,
DequeueChapterDownloadsMutation,
DequeueChapterDownloadsMutationVariables,
DownloadStatusSubscription,
DownloadStatusSubscriptionVariables,
EnqueueChapterDownloadMutation,
EnqueueChapterDownloadMutationVariables,
EnqueueChapterDownloadsMutation,
@@ -127,6 +132,8 @@ import {
UpdateMangaMutation,
UpdateMangaMutationVariables,
UpdateMangaPatchInput,
UpdaterSubscription,
UpdaterSubscriptionVariables,
UpdateSourcePreferencesMutation,
UpdateSourcePreferencesMutationVariables,
ValidateBackupQuery,
@@ -188,12 +195,15 @@ import { GET_UPDATE_STATUS } from '@/lib/graphql/queries/UpdaterQuery.ts';
import { CustomCache } from '@/lib/requests/CustomCache.ts';
import { RESTORE_BACKUP } from '@/lib/graphql/mutations/BackupMutation.ts';
import { VALIDATE_BACKUP } from '@/lib/graphql/queries/BackupQuery.ts';
import { DOWNLOAD_STATUS_SUBSCRIPTION } from '@/lib/graphql/subscriptions/DownloaderSubscription.ts';
import { UPDATER_SUBSCRIPTION } from '@/lib/graphql/subscriptions/UpdaterSubscription.ts';
enum GQLMethod {
QUERY = 'QUERY',
USE_QUERY = 'USE_QUERY',
USE_MUTATION = 'USE_MUTATION',
MUTATION = 'MUTATION',
USE_SUBSCRIPTION = 'USE_SUBSCRIPTION',
}
type CustomApolloOptions = {
@@ -209,14 +219,12 @@ type CustomApolloOptions = {
*/
omitAbortSignal?: boolean;
};
type QueryOptions<Variables extends OperationVariables = OperationVariables, Data = any> = ApolloQueryOptions<
Variables,
Data
type QueryOptions<Variables extends OperationVariables = OperationVariables, Data = any> = Partial<
ApolloQueryOptions<Variables, Data>
> &
CustomApolloOptions;
type QueryHookOptions<Data = any, Variables extends OperationVariables = OperationVariables> = ApolloQueryHookOptions<
Data,
Variables
type QueryHookOptions<Data = any, Variables extends OperationVariables = OperationVariables> = Partial<
ApolloQueryHookOptions<Data, Variables>
> &
CustomApolloOptions;
type MutationHookOptions<Data = any, Variables extends OperationVariables = OperationVariables> = Partial<
@@ -227,10 +235,13 @@ type MutationOptions<Data = any, Variables extends OperationVariables = Operatio
ApolloMutationOptions<Data, Variables>
> &
CustomApolloOptions;
type ApolloPaginatedMutationOptions<
Data = any,
Variables extends OperationVariables = OperationVariables,
> = MutationHookOptions<Data, Variables> & { skipRequest?: boolean };
type ApolloPaginatedMutationOptions<Data = any, Variables extends OperationVariables = OperationVariables> = Partial<
MutationHookOptions<Data, Variables>
> & { skipRequest?: boolean };
type SubscriptionHookOptions<Data = any, Variables extends OperationVariables = OperationVariables> = Partial<
ApolloSubscriptionHookOptions<Data, Variables>
> &
Omit<CustomApolloOptions, 'omitAbortSignal'> & { omitAbortSignal?: never };
type AbortableRequest = { abortRequest: AbortController['abort'] };
@@ -292,22 +303,6 @@ export class RequestManager {
return this.restClient.getClient().defaults.baseURL!;
}
public getWebSocketBaseUrl(): string {
return this.getBaseUrl().replace('http', 'ws');
}
public getValidWebSocketUrl(path: string, apiVersion = RequestManager.API_VERSION): string {
return `${this.getWebSocketBaseUrl()}${apiVersion}${path}`;
}
public getUpdateWebSocket(): WebSocket {
return new WebSocket(this.getValidWebSocketUrl('update'));
}
public getDownloadWebSocket(): WebSocket {
return new WebSocket(this.getValidWebSocketUrl('downloads'));
}
public getValidUrlFor(endpoint: string, apiVersion: string = RequestManager.API_VERSION): string {
return `${this.getBaseUrl()}${apiVersion}${endpoint}`;
}
@@ -654,46 +649,55 @@ export class RequestManager {
private doRequestNew<Data, Variables extends OperationVariables = OperationVariables>(
method: GQLMethod.QUERY,
operation: TypedDocumentNode<Data, Variables>,
variables: Variables,
options?: Partial<QueryOptions<Variables, Data>>,
operation: DocumentNode | TypedDocumentNode<Data, Variables>,
variables: Variables | undefined,
options?: QueryOptions<Variables, Data>,
): AbortabaleApolloQueryResponse<Data>;
private doRequestNew<Data, Variables extends OperationVariables = OperationVariables>(
method: GQLMethod.USE_QUERY,
operation: TypedDocumentNode<Data, Variables>,
variables: Variables,
options?: Partial<QueryHookOptions<Data, Variables>>,
operation: DocumentNode | TypedDocumentNode<Data, Variables>,
variables: Variables | undefined,
options?: QueryHookOptions<Data, Variables>,
): AbortableApolloUseQueryResponse<Data, Variables>;
private doRequestNew<Data, Variables extends OperationVariables = OperationVariables>(
method: GQLMethod.USE_MUTATION,
operation: TypedDocumentNode<Data, Variables>,
operation: DocumentNode | TypedDocumentNode<Data, Variables>,
variables: Variables | undefined,
options?: Partial<MutationHookOptions<Data, Variables>>,
options?: MutationHookOptions<Data, Variables>,
): AbortableApolloUseMutationResponse<Data, Variables>;
private doRequestNew<Data, Variables extends OperationVariables = OperationVariables>(
method: GQLMethod.MUTATION,
operation: TypedDocumentNode<Data, Variables>,
variables: Variables,
options?: Partial<MutationOptions<Data, Variables>>,
operation: DocumentNode | TypedDocumentNode<Data, Variables>,
variables: Variables | undefined,
options?: MutationOptions<Data, Variables>,
): AbortableApolloMutationResponse<Data>;
private doRequestNew<Data, Variables extends OperationVariables = OperationVariables>(
method: GQLMethod.USE_SUBSCRIPTION,
operation: DocumentNode | TypedDocumentNode<Data, Variables>,
variables: Variables | undefined,
options?: SubscriptionHookOptions<Data, Variables>,
): SubscriptionResult<Data, Variables>;
private doRequestNew<Data, Variables extends OperationVariables = OperationVariables>(
method: GQLMethod,
operation: TypedDocumentNode<Data, Variables>,
variables: Variables,
operation: DocumentNode | TypedDocumentNode<Data, Variables>,
variables: Variables | undefined,
options?:
| QueryOptions<Variables, Data>
| QueryHookOptions<Data, Variables>
| MutationHookOptions<Data, Variables>
| MutationOptions<Data, Variables>,
| MutationOptions<Data, Variables>
| SubscriptionHookOptions<Data, Variables>,
):
| AbortabaleApolloQueryResponse<Data>
| AbortableApolloUseQueryResponse<Data, Variables>
| AbortableApolloUseMutationResponse<Data, Variables>
| AbortableApolloMutationResponse<Data> {
| AbortableApolloMutationResponse<Data>
| SubscriptionResult<Data, Variables> {
const { signal, abortRequest } = this.createAbortController();
switch (method) {
case GQLMethod.QUERY:
@@ -760,6 +764,12 @@ export class RequestManager {
}),
abortRequest,
};
case GQLMethod.USE_SUBSCRIPTION:
return useSubscription<Data, Variables>(operation, {
client: this.graphQLClient.client,
variables,
...(options as SubscriptionHookOptions<Data, Variables>),
});
default:
throw new Error(`unexpected GQLRequest type "${method}"`);
}
@@ -1566,6 +1576,18 @@ export class RequestManager {
): AbortableApolloUseQueryResponse<GetUpdateStatusQuery, GetUpdateStatusQueryVariables> {
return this.doRequestNew(GQLMethod.USE_QUERY, GET_UPDATE_STATUS, {}, options);
}
public useDownloadSubscription(
options?: SubscriptionHookOptions<DownloadStatusSubscription, DownloadStatusSubscriptionVariables>,
): SubscriptionResult<DownloadStatusSubscription, DownloadStatusSubscriptionVariables> {
return this.doRequestNew(GQLMethod.USE_SUBSCRIPTION, DOWNLOAD_STATUS_SUBSCRIPTION, {}, options);
}
public useUpdaterSubscription(
options?: SubscriptionHookOptions<UpdaterSubscription, UpdaterSubscriptionVariables>,
): SubscriptionResult<UpdaterSubscription, UpdaterSubscriptionVariables> {
return this.doRequestNew(GQLMethod.USE_SUBSCRIPTION, UPDATER_SUBSCRIPTION, {}, options);
}
}
const requestManager = new RequestManager();

27
src/screens/DownloadQueue.tsx
View File

@@ -18,31 +18,26 @@ import { DragDropContext, Draggable } from 'react-beautiful-dnd';
import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { IChapter, IQueue } from '@/typings';
import requestManager from '@/lib/requests/RequestManager.ts';
import StrictModeDroppable from '@/lib/StrictModeDroppable';
import makeToast from '@/components/util/Toast';
import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
import DownloadStateIndicator from '@/components/molecules/DownloadStateIndicator';
import useSubscription from '@/components/library/useSubscription';
import EmptyView from '@/components/util/EmptyView';
import NavbarContext from '@/components/context/NavbarContext';
const initialQueue = {
status: 'Stopped',
queue: [],
} as IQueue;
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
const DownloadQueue: React.FC = () => {
const { t } = useTranslation();
const { data: queueState } = useSubscription<IQueue>('downloads');
const { queue, status } = queueState ?? initialQueue;
const { data: downloaderData } = requestManager.useDownloadSubscription();
const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
const status = downloaderData?.downloadChanged.state ?? 'STARTED';
const { setTitle, setAction } = useContext(NavbarContext);
const toggleQueueStatus = () => {
if (status === 'Stopped') {
if (status === 'STOPPED') {
requestManager.startDownloads();
} else {
requestManager.stopDownloads();
@@ -60,8 +55,8 @@ const DownloadQueue: React.FC = () => {
return <EmptyView message={t('download.queue.label.no_downloads')} />;
}
const handleDelete = async (chapter: IChapter) => {
const isRunning = status === 'Started';
const handleDelete = async (chapter: ChapterType) => {
const isRunning = status === 'STARTED';
try {
if (isRunning) {
@@ -91,7 +86,7 @@ const DownloadQueue: React.FC = () => {
<>
<NavbarToolbar>
<IconButton onClick={toggleQueueStatus} size="large">
{status === 'Stopped' ? <PlayArrowIcon /> : <PauseIcon />}
{status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
</IconButton>
</NavbarToolbar>
<DragDropContext onDragEnd={onDragEnd}>
@@ -100,8 +95,8 @@ const DownloadQueue: React.FC = () => {
<Box ref={droppableProvided.innerRef} sx={{ pt: 1 }}>
{queue.map((item, index) => (
<Draggable
key={`${item.mangaId}-${item.chapterIndex}`}
draggableId={`${item.mangaId}-${item.chapterIndex}`}
key={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
draggableId={`${item.chapter.manga.id}-${item.chapter.sourceOrder}`}
index={index}
>
{(draggableProvided, snapshot) => (
@@ -129,7 +124,7 @@ const DownloadQueue: React.FC = () => {
<DragHandle />
</IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
<Typography variant="h6">{item.manga.title}</Typography>
<Typography variant="h6">{item.chapter.manga.title}</Typography>
<Typography variant="caption" display="block" gutterBottom>
{item.chapter.name}
</Typography>

9
src/screens/Library.tsx
View File

@@ -7,7 +7,7 @@
*/
import { Chip, Tab, Tabs, styled, Box } from '@mui/material';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import React, { useContext, useEffect, useMemo, useRef } from 'react';
import { useQueryParam, NumberParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import requestManager from '@/lib/requests/RequestManager.ts';
@@ -63,7 +63,6 @@ export default function Library() {
const { t } = useTranslation();
const { options } = useLibraryOptionsContext();
const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now());
const {
data: categoriesResponse,
error: tabsError,
@@ -85,7 +84,7 @@ export default function Library() {
data: categoryMangaResponse,
error: mangaError,
loading: mangaLoading,
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab });
} = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, nextFetchPolicy: 'cache-only' });
const mangas = (categoryMangaResponse?.category.mangas.nodes as unknown as MangaType[]) ?? [];
const { setTitle, setAction } = useContext(NavbarContext);
@@ -102,7 +101,7 @@ export default function Library() {
<>
<AppbarSearch />
<LibraryToolbarMenu />
<UpdateChecker handleFinishedUpdate={setLastLibraryUpdate} />
<UpdateChecker />
</>,
);
return () => {
@@ -136,7 +135,6 @@ export default function Library() {
return (
<LibraryMangaGrid
mangas={mangas}
lastLibraryUpdate={lastLibraryUpdate}
message={t('library.error.label.empty')}
isLoading={activeTab != null && mangaLoading}
/>
@@ -183,7 +181,6 @@ export default function Library() {
) : (
<LibraryMangaGrid
mangas={mangas}
lastLibraryUpdate={lastLibraryUpdate}
message={t('library.error.label.empty')}
isLoading={mangaLoading}
/>

28
src/screens/Updates.tsx
View File

@@ -13,18 +13,17 @@ import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import React, { useCallback, useContext, useEffect, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next';
import { GroupedVirtuoso } from 'react-virtuoso';
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';
import { ChapterType, DownloadType } from '@/lib/graphql/generated/graphql.ts';
const StyledGroupedVirtuoso = styled(GroupedVirtuoso)(({ theme }) => ({
// 64px header
@@ -96,11 +95,6 @@ const groupByDate = (updates: ChapterType[]): [date: string, items: number][] =>
return [...dateToItemMap.entries()];
};
const initialQueue = {
status: 'Stopped',
queue: [],
} as IQueue;
const Updates: React.FC = () => {
const { t } = useTranslation();
const location = useLocation();
@@ -120,20 +114,8 @@ const Updates: React.FC = () => {
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);
useEffect(() => {
const wsc = requestManager.getDownloadWebSocket();
wsc.onmessage = (e) => {
const data = JSON.parse(e.data) as IQueue;
setQueueState(data);
};
setWsClient(wsc);
return () => wsc.close();
}, []);
const { data: downloaderData } = requestManager.useDownloadSubscription();
const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
useEffect(() => {
setTitle(t('updates.title'));
@@ -146,7 +128,7 @@ const Updates: React.FC = () => {
sourceOrder,
manga: { id: mangaId },
} = chapter;
return queue.find((q) => sourceOrder === q.chapterIndex && mangaId === q.mangaId);
return queue.find((q) => sourceOrder === q.chapter.sourceOrder && mangaId === q.chapter.manga.id);
};
const downloadChapter = (chapter: ChapterType) => {