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
2025-04-08 13:20:10 +02:00
parent 21400cecdc
commit a488f850f3
112 changed files with 1654 additions and 3032 deletions
--- a/src/components/Discover/CreateSlider/index.tsx
+++ b/src/components/Discover/CreateSlider/index.tsx
@@ -14,6 +14,7 @@ import { DiscoverSliderType } from '@server/constants/discover';
 import type DiscoverSlider from '@server/entity/DiscoverSlider';
 import type { GenreSliderItem } from '@server/interfaces/api/discoverInterfaces';
 import type { Keyword, ProductionCompany } from '@server/models/common';
+import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -76,9 +77,11 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {

        const keywords = await Promise.all(
          slider.data.split(',').map(async (keywordId) => {
-            const res = await fetch(`/api/v1/keyword/${keywordId}`);
-            const keyword: Keyword = await res.json();
-            return keyword;
+            const keyword = await axios.get<Keyword>(
+              `/api/v1/keyword/${keywordId}`
+            );
+
+            return keyword.data;
          })
        );

@@ -95,13 +98,15 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
          return;
        }

-        const res = await fetch(
+        const response = await axios.get<TmdbGenre[]>(
          `/api/v1/genres/${
            slider.type === DiscoverSliderType.TMDB_MOVIE_GENRE ? 'movie' : 'tv'
          }`
        );
-        const genres: TmdbGenre[] = await res.json();
-        const genre = genres.find((genre) => genre.id === Number(slider.data));
+
+        const genre = response.data.find(
+          (genre) => genre.id === Number(slider.data)
+        );

        setDefaultDataValue([
          {
@@ -116,8 +121,11 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
          return;
        }

-        const res = await fetch(`/api/v1/studio/${slider.data}`);
-        const studio: ProductionCompany = await res.json();
+        const response = await axios.get<ProductionCompany>(
+          `/api/v1/studio/${slider.data}`
+        );
+
+        const studio = response.data;

        setDefaultDataValue([
          {
@@ -160,17 +168,16 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
  );

  const loadKeywordOptions = async (inputValue: string) => {
-    const res = await fetch(
-      `/api/v1/search/keyword?query=${encodeURIExtraParams(inputValue)}`,
+    const results = await axios.get<TmdbKeywordSearchResponse>(
+      '/api/v1/search/keyword',
      {
-        headers: {
-          'Content-Type': 'application/json',
+        params: {
+          query: encodeURIExtraParams(inputValue),
        },
      }
    );
-    const results: TmdbKeywordSearchResponse = await res.json();

-    return results.results.map((result) => ({
+    return results.data.results.map((result) => ({
      label: result.name,
      value: result.id,
    }));
@@ -181,37 +188,38 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
      return [];
    }

-    const res = await fetch(
-      `/api/v1/search/company?query=${encodeURIExtraParams(inputValue)}`,
+    const results = await axios.get<TmdbCompanySearchResponse>(
+      '/api/v1/search/company',
      {
-        headers: {
-          'Content-Type': 'application/json',
+        params: {
+          query: encodeURIExtraParams(inputValue),
        },
      }
    );
-    const results: TmdbCompanySearchResponse = await res.json();

-    return results.results.map((result) => ({
+    return results.data.results.map((result) => ({
      label: result.name,
      value: result.id,
    }));
  };

  const loadMovieGenreOptions = async () => {
-    const res = await fetch('/api/v1/discover/genreslider/movie');
-    const results: GenreSliderItem[] = await res.json();
+    const results = await axios.get<GenreSliderItem[]>(
+      '/api/v1/discover/genreslider/movie'
+    );

-    return results.map((result) => ({
+    return results.data.map((result) => ({
      label: result.name,
      value: result.id,
    }));
  };

  const loadTvGenreOptions = async () => {
-    const res = await fetch('/api/v1/discover/genreslider/tv');
-    const results: GenreSliderItem[] = await res.json();
+    const results = await axios.get<GenreSliderItem[]>(
+      '/api/v1/discover/genreslider/tv'
+    );

-    return results.map((result) => ({
+    return results.data.map((result) => ({
      label: result.name,
      value: result.id,
    }));
@@ -306,31 +314,17 @@ const CreateSlider = ({ onCreate, slider }: CreateSliderProps) => {
      onSubmit={async (values, { resetForm }) => {
        try {
          if (slider) {
-            const res = await fetch(`/api/v1/settings/discover/${slider.id}`, {
-              method: 'PUT',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                type: Number(values.sliderType),
-                title: values.title,
-                data: values.data,
-              }),
+            await axios.put(`/api/v1/settings/discover/${slider.id}`, {
+              type: Number(values.sliderType),
+              title: values.title,
+              data: values.data,
            });
-            if (!res.ok) throw new Error();
          } else {
-            const res = await fetch('/api/v1/settings/discover/add', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                type: Number(values.sliderType),
-                title: values.title,
-                data: values.data,
-              }),
+            await axios.post('/api/v1/settings/discover/add', {
+              type: Number(values.sliderType),
+              title: values.title,
+              data: values.data,
            });
-            if (!res.ok) throw new Error();
          }

          addToast(
--- a/src/components/Discover/DiscoverSliderEdit/index.tsx
+++ b/src/components/Discover/DiscoverSliderEdit/index.tsx
@@ -20,6 +20,7 @@ import {
 } from '@heroicons/react/24/solid';
 import { DiscoverSliderType } from '@server/constants/discover';
 import type DiscoverSlider from '@server/entity/DiscoverSlider';
+import axios from 'axios';
 import { useRef, useState } from 'react';
 import { useDrag, useDrop } from 'react-aria';
 import { useIntl } from 'react-intl';
@@ -77,10 +78,7 @@ const DiscoverSliderEdit = ({

  const deleteSlider = async () => {
    try {
-      const res = await fetch(`/api/v1/settings/discover/${slider.id}`, {
-        method: 'DELETE',
-      });
-      if (!res.ok) throw new Error();
+      await axios.delete(`/api/v1/settings/discover/${slider.id}`);
      addToast(intl.formatMessage(messages.deletesuccess), {
        appearance: 'success',
        autoDismiss: true,
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@@ -28,6 +28,7 @@ import {
 } from '@heroicons/react/24/solid';
 import { DiscoverSliderType } from '@server/constants/discover';
 import type DiscoverSlider from '@server/entity/DiscoverSlider';
+import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -75,14 +76,7 @@ const Discover = () => {

  const updateSliders = async () => {
    try {
-      const res = await fetch('/api/v1/settings/discover', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(sliders),
-      });
-      if (!res.ok) throw new Error();
+      await axios.post('/api/v1/settings/discover', sliders);

      addToast(intl.formatMessage(messages.updatesuccess), {
        appearance: 'success',
@@ -100,10 +94,7 @@ const Discover = () => {

  const resetSliders = async () => {
    try {
-      const res = await fetch('/api/v1/settings/discover/reset', {
-        method: 'GET',
-      });
-      if (!res.ok) throw new Error();
+      await axios.get('/api/v1/settings/discover/reset');

      addToast(intl.formatMessage(messages.resetsuccess), {
        appearance: 'success',