refactor: switch from Axios for Fetch API (#840)

* refactor: switch ExternalAPI to Fetch API

* fix: add missing auth token in Plex request

* fix: send proper URL params

* ci: try to fix format checker

* ci: ci: try to fix format checker

* ci: try to fix format checker

* refactor: make tautulli use the ExternalAPI class

* refactor: add rate limit to fetch api

* refactor: add rate limit to fetch api

* refactor: switch server from axios to fetch api

* refactor: switch frontend from axios to fetch api

* fix: switch from URL objects to strings

* fix: use the right search params for ExternalAPI

* fix: better log for ExternalAPI errors

* feat: add retry to external API requests

* fix: try to fix network errors with IPv6

* fix: imageProxy rate limit

* revert: remove retry to external API requests

* feat: set IPv4 first as an option

* fix(jellyfinapi): add missing argument in JellyfinAPI constructor

* refactor: clean the rate limit utility

src/components/IssueDetails/IssueComment/index.tsx

@@ -5,7 +5,6 @@ import defineMessages from '@app/utils/defineMessages';
 import { Menu, Transition } from '@headlessui/react';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
-import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -49,7 +48,10 @@ const IssueComment = ({
 
   const deleteComment = async () => {
     try {
-      await axios.delete(`/api/v1/issueComment/${comment.id}`);
+      const res = await fetch(`/api/v1/issueComment/${comment.id}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error();
     } catch (e) {
       // something went wrong deleting the comment
     } finally {
@@ -175,9 +177,14 @@ const IssueComment = ({
               <Formik
                 initialValues={{ newMessage: comment.message }}
                 onSubmit={async (values) => {
-                  await axios.put(`/api/v1/issueComment/${comment.id}`, {
-                    message: values.newMessage,
-                  });
+                  const res = await fetch(
+                    `/api/v1/issueComment/${comment.id}`,
+                    {
+                      method: 'PUT',
+                      body: JSON.stringify({ message: values.newMessage }),
+                    }
+                  );
+                  if (!res.ok) throw new Error();
 
                   if (onUpdate) {
                     onUpdate();

src/components/IssueDetails/index.tsx

@@ -11,7 +11,7 @@ import useDeepLinks from '@app/hooks/useDeepLinks';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import Error from '@app/pages/_error';
+import ErrorPage from '@app/pages/_error';
 import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
 import {
@@ -27,7 +27,6 @@ import { MediaServerType } from '@server/constants/server';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
-import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
 import Image from 'next/image';
@@ -116,7 +115,7 @@ const IssueDetails = () => {
   }
 
   if (!data || !issueData) {
-    return <Error statusCode={404} />;
+    return <ErrorPage statusCode={404} />;
   }
 
   const belongsToUser = issueData.createdBy.id === currentUser?.id;
@@ -125,9 +124,11 @@ const IssueDetails = () => {
 
   const editFirstComment = async (newMessage: string) => {
     try {
-      await axios.put(`/api/v1/issueComment/${firstComment.id}`, {
-        message: newMessage,
+      const res = await fetch(`/api/v1/issueComment/${firstComment.id}`, {
+        method: 'PUT',
+        body: JSON.stringify({ message: newMessage }),
       });
+      if (!res.ok) throw new Error();
 
       addToast(intl.formatMessage(messages.toasteditdescriptionsuccess), {
         appearance: 'success',
@@ -144,7 +145,10 @@ const IssueDetails = () => {
 
   const updateIssueStatus = async (newStatus: 'open' | 'resolved') => {
     try {
-      await axios.post(`/api/v1/issue/${issueData.id}/${newStatus}`);
+      const res = await fetch(`/api/v1/issue/${issueData.id}/${newStatus}`, {
+        method: 'POST',
+      });
+      if (!res.ok) throw new Error();
 
       addToast(intl.formatMessage(messages.toaststatusupdated), {
         appearance: 'success',
@@ -161,7 +165,10 @@ const IssueDetails = () => {
 
   const deleteIssue = async () => {
     try {
-      await axios.delete(`/api/v1/issue/${issueData.id}`);
+      const res = await fetch(`/api/v1/issue/${issueData.id}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error();
 
       addToast(intl.formatMessage(messages.toastissuedeleted), {
         appearance: 'success',
@@ -490,9 +497,14 @@ const IssueDetails = () => {
                 }}
                 validationSchema={CommentSchema}
                 onSubmit={async (values, { resetForm }) => {
-                  await axios.post(`/api/v1/issue/${issueData?.id}/comment`, {
-                    message: values.message,
-                  });
+                  const res = await fetch(
+                    `/api/v1/issue/${issueData?.id}/comment`,
+                    {
+                      method: 'POST',
+                      body: JSON.stringify({ message: values.message }),
+                    }
+                  );
+                  if (!res.ok) throw new Error();
                   revalidateIssue();
                   resetForm();
                 }}