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/Setup/JellyfinSetup.tsx

@@ -4,6 +4,7 @@ import defineMessages from '@app/utils/defineMessages';
 import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import { ApiErrorCode } from '@server/constants/error';
 import { MediaServerType, ServerType } from '@server/constants/server';
+import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -112,38 +113,19 @@ function JellyfinSetup({
       validationSchema={LoginSchema}
       onSubmit={async (values) => {
         try {
-          // Check if serverType is either 'Jellyfin' or 'Emby'
-          // if (serverType !== 'Jellyfin' && serverType !== 'Emby') {
-          //   throw new Error('Invalid serverType'); // You can customize the error message
-          // }
-
-          const res = await fetch('/api/v1/auth/jellyfin', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              username: values.username,
-              password: values.password,
-              hostname: values.hostname,
-              port: values.port,
-              useSsl: values.useSsl,
-              urlBase: values.urlBase,
-              email: values.email,
-              serverType: serverType,
-            }),
+          await axios.post('/api/v1/auth/jellyfin', {
+            username: values.username,
+            password: values.password,
+            hostname: values.hostname,
+            port: values.port,
+            useSsl: values.useSsl,
+            urlBase: values.urlBase,
+            email: values.email,
+            serverType: serverType,
           });
-          if (!res.ok) throw new Error(res.statusText, { cause: res });
         } catch (e) {
-          let errorData;
-          try {
-            errorData = await e.cause?.text();
-            errorData = JSON.parse(errorData);
-          } catch {
-            /* empty */
-          }
           let errorMessage = null;
-          switch (errorData?.message) {
+          switch (e?.response?.data?.message) {
             case ApiErrorCode.InvalidUrl:
               errorMessage = messages.invalidurlerror;
               break;

src/components/Setup/LoginWithPlex.tsx

@@ -1,6 +1,7 @@
 import PlexLoginButton from '@app/components/Login/PlexLoginButton';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
+import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -24,19 +25,9 @@ const LoginWithPlex = ({ onComplete }: LoginWithPlexProps) => {
 
   useEffect(() => {
     const login = async () => {
-      const res = await fetch('/api/v1/auth/plex', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          authToken,
-        }),
-      });
-      if (!res.ok) throw new Error();
-      const data = await res.json();
+      const response = await axios.post('/api/v1/auth/plex', { authToken });
 
-      if (data?.id) {
+      if (response.data?.id) {
         revalidate();
       }
     };

src/components/Setup/SetupLogin.tsx

@@ -4,6 +4,7 @@ import JellyfinSetup from '@app/components/Setup/JellyfinSetup';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
+import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -40,19 +41,11 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({
 
   useEffect(() => {
     const login = async () => {
-      const res = await fetch('/api/v1/auth/plex', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          authToken: authToken,
-        }),
+      const response = await axios.post('/api/v1/auth/plex', {
+        authToken: authToken,
       });
-      if (!res.ok) throw new Error();
-      const data = await res.json();
 
-      if (data?.email) {
+      if (response.data?.email) {
         revalidate();
       }
     };

src/components/Setup/index.tsx

@@ -15,6 +15,7 @@ import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
 import type { Library } from '@server/lib/settings';
+import axios from 'axios';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
@@ -57,27 +58,15 @@ const Setup = () => {
 
   const finishSetup = async () => {
     setIsUpdating(true);
-    const res = await fetch('/api/v1/settings/initialize', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-    if (!res.ok) throw new Error();
-    const data: { initialized: boolean } = await res.json();
+    const response = await axios.post<{ initialized: boolean }>(
+      '/api/v1/settings/initialize'
+    );
 
     setIsUpdating(false);
-    if (data.initialized) {
-      const mainRes = await fetch('/api/v1/settings/main', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ locale }),
-      });
-      if (!mainRes.ok) throw new Error();
-
+    if (response.data.initialized) {
+      await axios.post('/api/v1/settings/main', { locale });
       mutate('/api/v1/settings/public');
+
       router.push('/');
     }
   };
@@ -94,11 +83,9 @@ const Setup = () => {
       const endpoint = endpointMap[mediaServerType];
       if (!endpoint) return;
 
-      const res = await fetch(endpoint);
-      if (!res.ok) throw new Error('Fetch failed');
-      const data = await res.json();
+      const response = await axios.get(endpoint);
 
-      const hasEnabledLibraries = data?.libraries?.some(
+      const hasEnabledLibraries = response.data?.libraries?.some(
         (library: Library) => library.enabled
       );