Feature/streamline backend requests

src/components/ExtensionCard.tsx

@@ -12,11 +12,10 @@ import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
-import client from 'util/client';
-import useLocalStorage from 'util/useLocalStorage';
 import { Box } from '@mui/system';
 import { IExtension, TranslationKey } from 'typings';
 import { useTranslation } from 'react-i18next';
+import requestManager from 'lib/RequestManager';
 
 interface IProps {
     extension: IExtension;
@@ -79,17 +78,26 @@ export default function ExtensionCard(props: IProps) {
         return installed ? InstalledState.UNINSTALL : InstalledState.INSTALL;
     });
 
-    const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
-    const [useCache] = useLocalStorage<boolean>('useCache', true);
-
     const langPress = lang === 'all' ? t('extension.language.all') : lang.toUpperCase();
 
     const requestExtensionAction = async (action: ExtensionAction): Promise<void> => {
         const nextAction = EXTENSION_ACTION_TO_NEXT_ACTION_MAP[action];
         const state = EXTENSION_ACTION_TO_STATE_MAP[action];
 
         setInstalledState(state);
-        await client.get(`/api/v1/extension/${action.toLowerCase()}/${pkgName}`);
+        switch (action) {
+            case ExtensionAction.INSTALL:
+                await requestManager.installExtension(pkgName);
+                break;
+            case ExtensionAction.UNINSTALL:
+                await requestManager.uninstallExtension(pkgName);
+                break;
+            case ExtensionAction.UPDATE:
+                await requestManager.updateExtension(pkgName);
+                break;
+            default:
+                throw new Error(`Unexpected ExtensionAction "${action}"`);
+        }
         setInstalledState(nextAction);
         notifyInstall();
     };
@@ -129,7 +137,7 @@ export default function ExtensionCard(props: IProps) {
                             mr: 2,
                         }}
                         alt={name}
-                        src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
+                        src={requestManager.getValidImgUrlFor(iconUrl)}
                     />
                     <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                         <Typography variant="h5" component="h2">

src/components/MangaCard.tsx

@@ -19,6 +19,7 @@ import { GridLayout, useLibraryOptionsContext } from 'components/context/Library
 import { BACK } from 'util/useBackTo';
 import { IMangaCard } from 'typings';
 import { useTranslation } from 'react-i18next';
+import requestManager from 'lib/RequestManager';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -87,8 +88,6 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
         options: { showUnreadBadge, showDownloadBadge },
     } = useLibraryOptionsContext();
 
-    const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
-    const [useCache] = useLocalStorage<boolean>('useCache', true);
     const [ItemWidth] = useLocalStorage<number>('ItemWidth', 300);
 
     const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
@@ -145,7 +144,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                 </BadgeContainer>
                                 <SpinnerImage
                                     alt={title}
-                                    src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                                    src={requestManager.getValidImgUrlFor(thumbnailUrl)}
                                     imgStyle={
                                         inLibraryIndicator && inLibrary
                                             ? {
@@ -232,7 +231,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                           imageRendering: 'pixelated',
                                       }
                             }
-                            src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
+                            src={requestManager.getValidImgUrlFor(thumbnailUrl)}
                         />
                         <Box
                             sx={{

src/components/SourceCard.tsx

@@ -16,9 +16,9 @@ import { Box, styled } from '@mui/system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
-import useLocalStorage from 'util/useLocalStorage';
 import { ISource } from 'typings';
 import { translateExtensionLanguage } from 'screens/util/Extensions';
+import requestManager from 'lib/RequestManager';
 
 const MobileWidthButtons = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -51,9 +51,6 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
 
     const history = useHistory();
 
-    const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
-    const [useCache] = useLocalStorage<boolean>('useCache', true);
-
     const redirectTo = (e: any, to: string) => {
         history.push(to);
 
@@ -86,7 +83,7 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
                                 flex: '0 0 auto',
                                 mr: 2,
                             }}
-                            src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
+                            src={requestManager.getValidImgUrlFor(iconUrl)}
                         />
                         <Box
                             sx={{

src/components/context/AppContext.tsx

@@ -14,7 +14,6 @@ import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 import createTheme from 'theme';
 import { QueryParamProvider } from 'use-query-params';
-import { fetcher } from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import DarkTheme from 'components/context/DarkTheme';
 
@@ -36,7 +35,7 @@ const AppContext: React.FC<Props> = ({ children }) => {
     const theme = useMemo(() => createTheme(darkTheme), [darkTheme]);
 
     return (
-        <SWRConfig value={{ fetcher }}>
+        <SWRConfig>
             <Router>
                 <StyledEngineProvider injectFirst>
                     <ThemeProvider theme={theme}>

src/components/library/UpdateChecker.tsx

@@ -12,10 +12,10 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 import CircularProgress from '@mui/material/CircularProgress';
 import { Box } from '@mui/system';
 import Typography from '@mui/material/Typography';
-import client from 'util/client';
 import makeToast from 'components/util/Toast';
 import { IUpdateStatus } from 'typings';
 import { useTranslation } from 'react-i18next';
+import requestManager from 'lib/RequestManager';
 
 interface IProgressProps {
     progress: number;
@@ -32,8 +32,6 @@ function Progress({ progress }: IProgressProps) {
     );
 }
 
-const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
-
 interface IUpdateCheckerProps {
     handleFinishedUpdate: (time: number) => void;
 }
@@ -48,15 +46,15 @@ function UpdateChecker({ handleFinishedUpdate }: IUpdateCheckerProps) {
         try {
             setLoading(true);
             setProgress(0);
-            await client.post('/api/v1/update/fetch');
+            await requestManager.startGlobalUpdate();
         } catch (e) {
             makeToast(t('global.error.label.update_failed'), 'error');
             setLoading(false);
         }
     };
 
     useEffect(() => {
-        const wsc = new WebSocket(`${baseWebsocketUrl}/api/v1/update`);
+        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

src/components/library/useSubscription.ts

@@ -7,14 +7,13 @@
  */
 
 import { useEffect, useState } from 'react';
-
-const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
+import requestManager from 'lib/RequestManager';
 
 const useSubscription = <T>(path: string, callback?: (newValue: T) => boolean | void) => {
     const [state, setState] = useState<T | undefined>();
 
     useEffect(() => {
-        const wsc = new WebSocket(`${baseWebsocketUrl}${path}`);
+        const wsc = new WebSocket(requestManager.getValidWebSocketUrl(path));
 
         wsc.onmessage = (e) => {
             const data = JSON.parse(e.data) as T;

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();
     };
 

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

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,25 +144,21 @@ 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 (
         <div className={classes.root}>
             <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>

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]);