From ab8ffd068600f90a6d3ac9b18ca252738ceb142a Mon Sep 17 00:00:00 2001
From: Simone Taeggi <startae14@gmail.com>
Date: Thu, 26 Jan 2023 15:16:24 +0100
Subject: [PATCH] replace axiosInstance in the useEditFolder hook to replace
 the api call with the useFetchClient post and put methods and update test

---
 .../src/hooks/tests/useEditFolder.test.js     | 25 +++++++++----------
 .../upload/admin/src/hooks/useEditFolder.js   | 12 +++++----
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js b/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js
index 691fb2dee7..2136ba45ac 100644
--- a/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js
+++ b/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js
@@ -4,9 +4,8 @@ import { QueryClientProvider, QueryClient, useQueryClient } from 'react-query';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 
-import { NotificationsProvider, useNotification } from '@strapi/helper-plugin';
+import { NotificationsProvider, useNotification, useFetchClient } from '@strapi/helper-plugin';
 
-import { axiosInstance } from '../../utils';
 import { useEditFolder } from '../useEditFolder';
 
 const FOLDER_CREATE_FIXTURE = {
@@ -20,19 +19,15 @@ const FOLDER_EDIT_FIXTURE = {
   parent: 1,
 };
 
-jest.mock('../../utils', () => ({
-  ...jest.requireActual('../../utils'),
-  axiosInstance: {
-    put: jest.fn().mockResolvedValue({ name: 'folder-edited' }),
-    post: jest.fn().mockResolvedValue({ name: 'folder-created' }),
-  },
-}));
-
 const notificationStatusMock = jest.fn();
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: () => notificationStatusMock,
+  useFetchClient: jest.fn().mockReturnValue({
+    put: jest.fn().mockResolvedValue({ name: 'folder-edited' }),
+    post: jest.fn().mockResolvedValue({ name: 'folder-created' }),
+  }),
 }));
 
 const refetchQueriesMock = jest.fn();
@@ -83,6 +78,7 @@ describe('useEditFolder', () => {
   });
 
   test('calls the proper endpoint when creating a folder (post)', async () => {
+    const { post } = useFetchClient();
     const {
       result: { current },
     } = await setup();
@@ -92,10 +88,12 @@ describe('useEditFolder', () => {
       await editFolder(FOLDER_CREATE_FIXTURE);
     });
 
-    expect(axiosInstance.post).toHaveBeenCalledWith('/upload/folders/', expect.any(Object));
+    expect(post).toHaveBeenCalledWith('/upload/folders/', expect.any(Object));
   });
 
   test('calls the proper endpoint when creating a folder (put)', async () => {
+    const { put } = useFetchClient();
+
     const {
       result: { current },
     } = await setup();
@@ -111,10 +109,11 @@ describe('useEditFolder', () => {
       );
     });
 
-    expect(axiosInstance.put).toHaveBeenCalledWith('/upload/folders/2', expect.any(Object));
+    expect(put).toHaveBeenCalledWith('/upload/folders/2', expect.any(Object));
   });
 
   test('calls the proper endpoint when editing a folder', async () => {
+    const { put } = useFetchClient();
     const {
       result: { current },
     } = await setup();
@@ -130,7 +129,7 @@ describe('useEditFolder', () => {
       );
     });
 
-    expect(axiosInstance.put).toHaveBeenCalledWith('/upload/folders/2', expect.any(Object));
+    expect(put).toHaveBeenCalledWith('/upload/folders/2', expect.any(Object));
   });
 
   test('does not call toggleNotification in case of success', async () => {
diff --git a/packages/core/upload/admin/src/hooks/useEditFolder.js b/packages/core/upload/admin/src/hooks/useEditFolder.js
index e9a842be4e..661496df9b 100644
--- a/packages/core/upload/admin/src/hooks/useEditFolder.js
+++ b/packages/core/upload/admin/src/hooks/useEditFolder.js
@@ -1,20 +1,22 @@
 import { useMutation, useQueryClient } from 'react-query';
+import { useFetchClient } from '@strapi/helper-plugin';
 
 import pluginId from '../pluginId';
-import { axiosInstance, getRequestUrl } from '../utils';
+import { getRequestUrl } from '../utils';
 
-const editFolderRequest = ({ attrs, id }) => {
+const editFolderRequest = (put, post, { attrs, id }) => {
   const isEditing = !!id;
-  const method = isEditing ? 'put' : 'post';
+  const method = isEditing ? put : post;
   const url = getRequestUrl(`folders/${id ?? ''}`);
 
-  return axiosInstance[method](url, attrs).then((res) => res.data);
+  return method(url, attrs).then((res) => res.data);
 };
 
 export const useEditFolder = () => {
   const queryClient = useQueryClient();
+  const { put, post } = useFetchClient();
 
-  const mutation = useMutation((...args) => editFolderRequest(...args), {
+  const mutation = useMutation((...args) => editFolderRequest(put, post, ...args), {
     onSuccess() {
       queryClient.refetchQueries([pluginId, 'folders'], { active: true });
       queryClient.refetchQueries([pluginId, 'folder', 'structure'], { active: true });