refactor: switch from Fetch API to Axios (#1520)

* refactor: switch from Fetch API to Axios

* fix: remove unwanted changes

* fix: rewrite error handling for Axios and remove IPv4 first setting

* style: run prettier

* style: run prettier

* fix: add back custom proxy agent

* fix: add back custom proxy agent

* fix: correct rebase issue

* fix: resolve review comments

src/components/TitleCard/ErrorCard.tsx

@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/solid';
+import axios from 'axios';
 import { useIntl } from 'react-intl';
 import { mutate } from 'swr';
 
@@ -24,10 +25,7 @@ const ErrorCard = ({ id, tmdbId, tvdbId, type, canExpand }: ErrorCardProps) => {
   const intl = useIntl();
 
   const deleteMedia = async () => {
-    const res = await fetch(`/api/v1/media/${id}`, {
-      method: 'DELETE',
-    });
-    if (!res.ok) throw new Error();
+    await axios.delete(`/api/v1/media/${id}`);
     mutate('/api/v1/media?filter=allavailable&take=20&sort=mediaAdded');
     mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0');
   };

src/components/TitleCard/index.tsx

@@ -23,6 +23,7 @@ import {
 import { MediaStatus } from '@server/constants/media';
 import type { Watchlist } from '@server/entity/Watchlist';
 import type { MediaType } from '@server/models/Search';
+import axios from 'axios';
 import Link from 'next/link';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -108,21 +109,13 @@ const TitleCard = ({
   const onClickWatchlistBtn = async (): Promise<void> => {
     setIsUpdating(true);
     try {
-      const res = await fetch('/api/v1/watchlist', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          tmdbId: id,
-          mediaType,
-          title,
-        }),
+      const response = await axios.post<Watchlist>('/api/v1/watchlist', {
+        tmdbId: id,
+        mediaType,
+        title,
       });
-      if (!res.ok) throw new Error();
-      const data: Watchlist = await res.json();
       mutate('/api/v1/discover/watchlist');
-      if (data) {
+      if (response.data) {
         addToast(
           <span>
             {intl.formatMessage(messages.watchlistSuccess, {
@@ -147,11 +140,9 @@ const TitleCard = ({
   const onClickDeleteWatchlistBtn = async (): Promise<void> => {
     setIsUpdating(true);
     try {
-      const res = await fetch('/api/v1/watchlist/' + id, {
-        method: 'DELETE',
-      });
-      if (!res.ok) throw new Error();
-      if (res.status === 204) {
+      const response = await axios.delete<Watchlist>('/api/v1/watchlist/' + id);
+
+      if (response.status === 204) {
         addToast(
           <span>
             {intl.formatMessage(messages.watchlistDeleted, {
@@ -182,21 +173,13 @@ const TitleCard = ({
     const topNode = cardRef.current;
 
     if (topNode) {
-      const res = await fetch('/api/v1/blacklist', {
-        method: 'POST',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
+      try {
+        await axios.post('/api/v1/blacklist', {
           tmdbId: id,
           mediaType,
           title,
           user: user?.id,
-        }),
-      });
-
-      if (res.status === 201) {
+        });
         addToast(
           <span>
             {intl.formatMessage(globalMessages.blacklistSuccess, {
@@ -207,21 +190,23 @@ const TitleCard = ({
           { appearance: 'success', autoDismiss: true }
         );
         setCurrentStatus(MediaStatus.BLACKLISTED);
-      } else if (res.status === 412) {
-        addToast(
-          <span>
-            {intl.formatMessage(globalMessages.blacklistDuplicateError, {
-              title,
-              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
-            })}
-          </span>,
-          { appearance: 'info', autoDismiss: true }
-        );
-      } else {
-        addToast(intl.formatMessage(globalMessages.blacklistError), {
-          appearance: 'error',
-          autoDismiss: true,
-        });
+      } catch (e) {
+        if (e?.response?.status === 412) {
+          addToast(
+            <span>
+              {intl.formatMessage(globalMessages.blacklistDuplicateError, {
+                title,
+                strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+              })}
+            </span>,
+            { appearance: 'info', autoDismiss: true }
+          );
+        } else {
+          addToast(intl.formatMessage(globalMessages.blacklistError), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        }
       }
 
       setIsUpdating(false);
@@ -239,9 +224,7 @@ const TitleCard = ({
     const topNode = cardRef.current;
 
     if (topNode) {
-      const res = await fetch('/api/v1/blacklist/' + id, {
-        method: 'DELETE',
-      });
+      const res = await axios.delete('/api/v1/blacklist/' + id);
 
       if (res.status === 204) {
         addToast(