migrate to axios, front-end part of configurable ServerAddress

webUI/react/src/components/CategorySelect.tsx

@@ -12,6 +12,7 @@ import Dialog from '@material-ui/core/Dialog';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormGroup from '@material-ui/core/FormGroup';
+import client from '../util/client';
 
 const useStyles = makeStyles(() => createStyles({
     paper: {
@@ -41,14 +42,14 @@ export default function CategorySelect(props: IProps) {
 
     useEffect(() => {
         let tmpCategoryInfos: ICategoryInfo[] = [];
-        fetch('http://127.0.0.1:4567/api/v1/category/')
-            .then((response) => response.json())
+        client.get('/api/v1/category/')
+            .then((response) => response.data)
             .then((data: ICategory[]) => {
                 tmpCategoryInfos = data.map((category) => ({ category, selected: false }));
             })
             .then(() => {
-                fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/category/`)
-                    .then((response) => response.json())
+                client.get(`/api/v1/manga/${mangaId}/category/`)
+                    .then((response) => response.data)
                     .then((data: ICategory[]) => {
                         data.forEach((category) => {
                             tmpCategoryInfos[category.order - 1].selected = true;
@@ -69,9 +70,9 @@ export default function CategorySelect(props: IProps) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>, categoryId: number) => {
         const { checked } = event.target as HTMLInputElement;
-        fetch(`http://127.0.0.1:4567/api/v1/manga/${mangaId}/category/${categoryId}`, {
-            method: checked ? 'GET' : 'DELETE', mode: 'cors',
-        })
+
+        const method = checked ? client.get : client.delete;
+        method(`/api/v1/manga/${mangaId}/category/${categoryId}`)
             .then(() => triggerUpdate());
     };
 

webUI/react/src/components/ExtensionCard.tsx

@@ -9,6 +9,7 @@ import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
+import client from '../util/client';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -53,16 +54,18 @@ export default function ExtensionCard(props: IProps) {
 
     function install() {
         setInstalledState('installing');
-        fetch(`http://127.0.0.1:4567/api/v1/extension/install/${apkName}`).then(() => {
-            setInstalledState('uninstall');
-        });
+        client.get(`/api/v1/extension/install/${apkName}`)
+            .then(() => {
+                setInstalledState('uninstall');
+            });
     }
 
     function uninstall() {
         setInstalledState('uninstalling');
-        fetch(`http://127.0.0.1:4567/api/v1/extension/uninstall/${apkName}`).then(() => {
-            setInstalledState('install');
-        });
+        client.get(`/api/v1/extension/uninstall/${apkName}`)
+            .then(() => {
+                setInstalledState('install');
+            });
     }
 
     function handleButtonClick() {

webUI/react/src/components/MangaDetails.tsx

@@ -4,6 +4,7 @@
 
 import { Button, createStyles, makeStyles } from '@material-ui/core';
 import React, { useState } from 'react';
+import client from '../util/client';
 import CategorySelect from './CategorySelect';
 
 const useStyles = makeStyles(() => createStyles({
@@ -30,14 +31,14 @@ export default function MangaDetails(props: IProps) {
 
     function addToLibrary() {
         setInLibrary('adding');
-        fetch(`http://127.0.0.1:4567/api/v1/manga/${manga.id}/library/`).then(() => {
+        client.get(`/api/v1/manga/${manga.id}/library/`).then(() => {
             setInLibrary('In Library');
         });
     }
 
     function removeFromLibrary() {
         setInLibrary('removing');
-        fetch(`http://127.0.0.1:4567/api/v1/manga/${manga.id}/library/`, { method: 'DELETE', mode: 'cors' }).then(() => {
+        client.delete(`/api/v1/manga/${manga.id}/library/`).then(() => {
             setInLibrary('Not In Library');
         });
     }