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

Feature/streamline backend requests (#297)

Browse Source 
* 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"
This commit is contained in:
schroda
2023-05-18 13:25:19 +02:00
committed by GitHub
parent f86c7ea08a
commit a457d80c44
34 changed files with 950 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ExtensionCard.tsx
View File

@@ -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,9 +78,6 @@ 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> => {
@@ -89,7 +85,19 @@ export default function ExtensionCard(props: IProps) {
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">

7
src/components/MangaCard.tsx
View File

@@ -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={{

7
src/components/SourceCard.tsx
View File

@@ -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={{

3
src/components/context/AppContext.tsx
View File

@@ -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}>

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

@@ -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,7 +46,7 @@ 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);
@@ -56,7 +54,7 @@ function UpdateChecker({ handleFinishedUpdate }: IUpdateCheckerProps) {
};
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

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

@@ -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;

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

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

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

@@ -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

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

@@ -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>

22
src/components/manga/hooks.ts
View File

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

13
src/components/navbar/action/CategorySelect.tsx
View File

@@ -15,9 +15,8 @@ import Dialog from '@mui/material/Dialog';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';
import client, { useQuery } from 'util/client';
import { ICategory } from 'typings';
import { useTranslation } from 'react-i18next';
import requestManager from 'lib/RequestManager';
interface IProps {
open: boolean;
@@ -30,8 +29,8 @@ export default function CategorySelect(props: IProps) {
const { open, setOpen, mangaId } = props;
const { data: mangaCategoriesData, mutate } = useQuery<ICategory[]>(`/api/v1/manga/${mangaId}/category`);
const { data: categoriesData } = useQuery<ICategory[]>('/api/v1/category');
const { data: mangaCategoriesData, mutate } = requestManager.useGetMangaCategories(mangaId);
const { data: categoriesData } = requestManager.useGetCategories();
const allCategories = useMemo(() => {
const cats = [...(categoriesData ?? [])]; // make copy
@@ -54,8 +53,10 @@ export default function CategorySelect(props: IProps) {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>, categoryId: number) => {
const { checked } = event.target as HTMLInputElement;
const method = checked ? client.get : client.delete;
method(`/api/v1/manga/${mangaId}/category/${categoryId}`).then(() => mutate());
(checked
? requestManager.addMangaToCategory(mangaId, categoryId)
: requestManager.removeMangaFromCategory(mangaId, categoryId)
).then(() => mutate());
};
return (

5
src/components/reader/Page.tsx
View File

@@ -8,7 +8,6 @@
import React, { useRef } from 'react';
import SpinnerImage from 'components/util/SpinnerImage';
import useLocalStorage from 'util/useLocalStorage';
import Box from '@mui/system/Box';
import { IReaderSettings } from 'typings';
@@ -68,8 +67,6 @@ interface IProps {
const Page = React.forwardRef((props: IProps, ref: any) => {
const { src, index, onImageLoad, settings } = props;
const [useCache] = useLocalStorage<boolean>('useCache', true);
const imgRef = useRef<HTMLImageElement>(null);
const imgStyle = imageStyle(settings);
@@ -77,7 +74,7 @@ const Page = React.forwardRef((props: IProps, ref: any) => {
return (
<Box ref={ref} sx={{ margin: 'auto' }}>
<SpinnerImage
src={`${src}?useCache=${useCache}`}
src={src}
onImageLoad={onImageLoad}
alt={`Page #${index}`}
imgRef={imgRef}