Feature/streamline backend requests (#297)

* Introduce "RequestManager" * Use "RequestManager" - Simple replacements - Get rid of all "util/client" imports - replace old requests with new "RequestManager" - remove "fetcher" from global SWR config instead of using the SWR hooks by themselves, the "requestManager" is supposed to be used * Use "RequestManager" - Do requests via SWR hooks Use SWR hooks at places where it's easily usable * Prevent trailing slashes in the "baseUrl"
2023-05-18 13:25:19 +02:00
parent f86c7ea08a
commit a457d80c44
34 changed files with 950 additions and 333 deletions
--- a/src/components/manga/ChapterCard.tsx
+++ b/src/components/manga/ChapterCard.tsx
@@ -27,11 +27,11 @@ import Typography from '@mui/material/Typography';
 import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import client from 'util/client';
 import { BACK } from 'util/useBackTo';
 import { getUploadDateString } from 'util/date';
 import { IChapter, IDownloadChapter } from 'typings';
 import { useTranslation } from 'react-i18next';
+import requestManager from 'lib/RequestManager';

 interface IProps {
    chapter: IChapter;
@@ -66,23 +66,23 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
    const sendChange = (key: string, value: any) => {
        handleClose();

-        const formData = new FormData();
-        formData.append(key, value);
-        if (key === 'read') {
-            formData.append('lastPageRead', '0');
-        }
-        client
-            .patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData)
+        requestManager
+            .updateChapter(chapter.mangaId, chapter.index, {
+                [key]: value,
+                lastPageRead: key === 'read' ? 0 : undefined,
+            })
            .then(() => triggerChaptersUpdate());
    };

    const downloadChapter = () => {
-        client.get(`/api/v1/download/${chapter.mangaId}/chapter/${chapter.index}`);
+        requestManager.addChapterToDownloadQueue(chapter.mangaId, chapter.index);
        handleClose();
    };

    const deleteChapter = () => {
-        client.delete(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`).then(() => triggerChaptersUpdate());
+        requestManager
+            .removeChapterFromDownloadQueue(chapter.mangaId, chapter.index)
+            .then(() => triggerChaptersUpdate());
        handleClose();
    };

--- a/src/components/manga/ChapterList.tsx
+++ b/src/components/manga/ChapterList.tsx
@@ -17,12 +17,12 @@ import EmptyView from 'components/util/EmptyView';
 import makeToast from 'components/util/Toast';
 import React, { ComponentProps, useEffect, useMemo, useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
-import client, { useQuery } from 'util/client';
 import ChaptersToolbarMenu from 'components/manga/ChaptersToolbarMenu';
 import SelectionFAB from 'components/manga/SelectionFAB';
 import { BatchChaptersChange, IChapter, IDownloadChapter, IQueue, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { DEFAULT_FULL_FAB_HEIGHT } from 'components/util/StyledFab';
+import requestManager from 'lib/RequestManager';

 const StyledVirtuoso = styled(Virtuoso)(({ theme }) => ({
    listStyle: 'none',
@@ -83,14 +83,10 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {

    const [selection, setSelection] = useState<number[] | null>(null);
    const prevQueueRef = useRef<IDownloadChapter[]>();
-    const queue = useSubscription<IQueue>('/api/v1/downloads').data?.queue;
+    const queue = useSubscription<IQueue>('downloads').data?.queue;

    const [options, dispatch] = useChapterOptions(mangaId);
-    const {
-        data: chaptersData,
-        mutate,
-        isLoading,
-    } = useQuery<IChapter[]>(`/api/v1/manga/${mangaId}/chapters?onlineFetch=false`);
+    const { data: chaptersData, mutate, isLoading } = requestManager.useGetMangaChapters(mangaId);
    const chapters = useMemo(() => chaptersData ?? [], [chaptersData]);

    useEffect(() => {
@@ -157,7 +153,7 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
        let actionPromise: Promise<any>;

        if (action === 'download') {
-            actionPromise = client.post('/api/v1/download/batch', { chapterIds });
+            actionPromise = requestManager.addChaptersToDownloadQueue(chapterIds);
        } else {
            const change: BatchChaptersChange = {};

@@ -169,7 +165,7 @@ const ChapterList: React.FC<IProps> = ({ mangaId }) => {
                change.lastPageRead = 0;
            }

-            actionPromise = client.post('/api/v1/chapter/batch', { chapterIds, change });
+            actionPromise = requestManager.updateChapters(chapterIds, change);
        }

        actionPromise
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -16,11 +16,10 @@ import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
-import client from 'util/client';
-import useLocalStorage from 'util/useLocalStorage';
 import { IManga, ISource } from 'typings';
 import { t as translate } from 'i18next';
 import makeToast from 'components/util/Toast';
+import requestManager from 'lib/RequestManager';

 const useStyles = (inLibrary: boolean) =>
    makeStyles((theme: Theme) => ({
@@ -136,9 +135,6 @@ function getValueOrUnknown(val: string) {
 const MangaDetails: React.FC<IProps> = ({ manga }) => {
    const { t } = useTranslation();

-    const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
-    const [useCache] = useLocalStorage<boolean>('useCache', true);
-
    const classes = useStyles(manga.inLibrary)();

    useEffect(() => {
@@ -148,17 +144,13 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
    }, [manga.source]);

    const addToLibrary = () => {
-        mutate(`/api/v1/manga/${manga.id}/?onlineFetch=false`, { ...manga, inLibrary: true }, { revalidate: false });
-        client
-            .get(`/api/v1/manga/${manga.id}/library/`)
-            .then(() => mutate(`/api/v1/manga/${manga.id}/?onlineFetch=false`));
+        mutate(`/api/v1/manga/${manga.id}`, { ...manga, inLibrary: true }, { revalidate: false });
+        requestManager.addMangaToLibrary(manga.id).then(() => mutate(`/api/v1/manga/${manga.id}`));
    };

    const removeFromLibrary = () => {
-        mutate(`/api/v1/manga/${manga.id}/?onlineFetch=false`, { ...manga, inLibrary: false }, { revalidate: false });
-        client
-            .delete(`/api/v1/manga/${manga.id}/library/`)
-            .then(() => mutate(`/api/v1/manga/${manga.id}/?onlineFetch=false`));
+        mutate(`/api/v1/manga/${manga.id}`, { ...manga, inLibrary: false }, { revalidate: false });
+        requestManager.removeMangaFromLibrary(manga.id).then(() => mutate(`/api/v1/manga/${manga.id}`));
    };

    return (
@@ -166,7 +158,7 @@ const MangaDetails: React.FC<IProps> = ({ manga }) => {
            <div className={classes.top}>
                <div className={classes.leftRight}>
                    <div className={classes.leftSide}>
-                        <img src={`${serverAddress}${manga.thumbnailUrl}?useCache=${useCache}`} alt="Manga Thumbnail" />
+                        <img src={requestManager.getValidImgUrlFor(manga.thumbnailUrl)} alt="Manga Thumbnail" />
                    </div>
                    <div className={classes.rightSide}>
                        <h1>{manga.title}</h1>
--- a/src/components/manga/hooks.ts
+++ b/src/components/manga/hooks.ts
@@ -8,7 +8,7 @@

 import { useCallback, useState } from 'react';
 import { mutate } from 'swr';
-import { fetcher } from 'util/client';
+import requestManager from 'lib/RequestManager';

 // eslint-disable-next-line import/prefer-default-export
 export const useRefreshManga = (mangaId: string) => {
@@ -17,14 +17,18 @@ export const useRefreshManga = (mangaId: string) => {
    const handleRefresh = useCallback(async () => {
        setFetchingOnline(true);
        await Promise.all([
-            fetcher(`/api/v1/manga/${mangaId}/?onlineFetch=true`).then((res) =>
-                mutate(`/api/v1/manga/${mangaId}/?onlineFetch=false`, res, { revalidate: false }),
-            ),
-            fetcher(`/api/v1/manga/${mangaId}/chapters?onlineFetch=true`).then((res) =>
-                mutate(`/api/v1/manga/${mangaId}/chapters?onlineFetch=false`, res, {
-                    revalidate: false,
-                }),
-            ),
+            requestManager
+                .getClient()
+                .get(`/api/v1/manga/${mangaId}/?onlineFetch=true`)
+                .then((res) => mutate(`/api/v1/manga/${mangaId}`, res.data, { revalidate: false })),
+            requestManager
+                .getClient()
+                .get(`/api/v1/manga/${mangaId}/chapters?onlineFetch=true`)
+                .then((res) =>
+                    mutate(`/api/v1/manga/${mangaId}/chapters`, res.data, {
+                        revalidate: false,
+                    }),
+                ),
        ]).finally(() => setFetchingOnline(false));
    }, [mangaId]);