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;