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/UserList/BulkEditModal.tsx

@@ -5,6 +5,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { hasPermission } from '@server/lib/permissions';
+import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -45,18 +46,10 @@ const BulkEditModal = ({
   const updateUsers = async () => {
     try {
       setIsSaving(true);
-      const res = await fetch('/api/v1/user', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          ids: selectedUserIds,
-          permissions: currentPermission,
-        }),
+      const { data: updated } = await axios.put<User[]>(`/api/v1/user`, {
+        ids: selectedUserIds,
+        permissions: currentPermission,
       });
-      if (!res.ok) throw new Error();
-      const updated: User[] = await res.json();
       if (onComplete) {
         onComplete(updated);
       }

src/components/UserList/JellyfinImportModal.tsx

@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
+import axios from 'axios';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -59,17 +60,10 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
     setImporting(true);
 
     try {
-      const res = await fetch('/api/v1/user/import-from-jellyfin', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          jellyfinUserIds: selectedUsers,
-        }),
-      });
-      if (!res.ok) throw new Error();
-      const createdUsers = await res.json();
+      const { data: createdUsers } = await axios.post(
+        '/api/v1/user/import-from-jellyfin',
+        { jellyfinUserIds: selectedUsers }
+      );
 
       if (!createdUsers.length) {
         throw new Error('No users were imported from Jellyfin.');

src/components/UserList/PlexImportModal.tsx

@@ -3,6 +3,7 @@ import Modal from '@app/components/Common/Modal';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
+import axios from 'axios';
 import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -47,17 +48,10 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
     setImporting(true);
 
     try {
-      const res = await fetch('/api/v1/user/import-from-plex', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          plexIds: selectedUsers,
-        }),
-      });
-      if (!res.ok) throw new Error();
-      const createdUsers = await res.json();
+      const { data: createdUsers } = await axios.post(
+        '/api/v1/user/import-from-plex',
+        { plexIds: selectedUsers }
+      );
 
       if (!Array.isArray(createdUsers) || createdUsers.length === 0) {
         throw new Error('No users were imported from Plex.');

src/components/UserList/index.tsx

@@ -28,6 +28,7 @@ import {
 import { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
+import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -181,10 +182,7 @@ const UserList = () => {
     setDeleting(true);
 
     try {
-      const res = await fetch(`/api/v1/user/${deleteModal.user?.id}`, {
-        method: 'DELETE',
-      });
-      if (!res.ok) throw new Error();
+      await axios.delete(`/api/v1/user/${deleteModal.user?.id}`);
 
       addToast(intl.formatMessage(messages.userdeleted), {
         autoDismiss: true,
@@ -286,34 +284,20 @@ const UserList = () => {
           validationSchema={CreateUserSchema}
           onSubmit={async (values) => {
             try {
-              const res = await fetch('/api/v1/user', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                  username: values.username,
-                  email: values.email,
-                  password: values.genpassword ? null : values.password,
-                }),
+              await axios.post('/api/v1/user', {
+                username: values.username,
+                email: values.email,
+                password: values.genpassword ? null : values.password,
               });
-              if (!res.ok) throw new Error(res.statusText, { cause: res });
               addToast(intl.formatMessage(messages.usercreatedsuccess), {
                 appearance: 'success',
                 autoDismiss: true,
               });
               setCreateModal({ isOpen: false });
             } catch (e) {
-              let errorData;
-              try {
-                errorData = await e.cause?.text();
-                errorData = JSON.parse(errorData);
-              } catch {
-                /* empty */
-              }
               addToast(
                 intl.formatMessage(
-                  errorData.errors?.includes('USER_EXISTS')
+                  e?.response?.data?.errors?.includes('USER_EXISTS')
                     ? messages.usercreatedfailedexisting
                     : messages.usercreatedfailed
                 ),