replace axiosInstance in the useAssets hook to replace the api call with the useFetchClient get method

packages/core/upload/admin/src/hooks/tests/useAssets.test.js

@@ -5,10 +5,9 @@ import { QueryClientProvider, QueryClient } 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 { useNotifyAT } from '@strapi/design-system/LiveRegions';
 
-import { axiosInstance } from '../../utils';
 import { useAssets } from '../useAssets';
 
 const notifyStatusMock = jest.fn();
@@ -20,22 +19,18 @@ jest.mock('@strapi/design-system/LiveRegions', () => ({
   }),
 }));
 
-jest.mock('../../utils', () => ({
-  ...jest.requireActual('../../utils'),
-  axiosInstance: {
-    get: jest.fn().mockResolvedValue({
-      data: {
-        id: 1,
-      },
-    }),
-  },
-}));
-
 const notificationStatusMock = jest.fn();
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: () => notificationStatusMock,
+  useFetchClient: jest.fn().mockReturnValue({
+    get: jest.fn().mockResolvedValue({
+      data: {
+        id: 1,
+      },
+    }),
+  }),
 }));
 
 const client = new QueryClient({
@@ -82,6 +77,8 @@ describe('useAssets', () => {
     await waitFor(() => result.current.isSuccess);
     await waitForNextUpdate();
 
+    const { get } = useFetchClient();
+
     const expected = {
       filters: {
         $and: [
@@ -96,7 +93,7 @@ describe('useAssets', () => {
       },
     };
 
-    expect(axiosInstance.get).toBeCalledWith(
+    expect(get).toBeCalledWith(
       `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
@@ -106,6 +103,7 @@ describe('useAssets', () => {
 
     await waitFor(() => result.current.isSuccess);
     await waitForNextUpdate();
+    const { get } = useFetchClient();
 
     const expected = {
       filters: {
@@ -119,7 +117,7 @@ describe('useAssets', () => {
       },
     };
 
-    expect(axiosInstance.get).toBeCalledWith(
+    expect(get).toBeCalledWith(
       `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
@@ -131,6 +129,7 @@ describe('useAssets', () => {
 
     await waitFor(() => result.current.isSuccess);
     await waitForNextUpdate();
+    const { get } = useFetchClient();
 
     const expected = {
       filters: {
@@ -147,7 +146,7 @@ describe('useAssets', () => {
       },
     };
 
-    expect(axiosInstance.get).toBeCalledWith(
+    expect(get).toBeCalledWith(
       `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
@@ -159,6 +158,7 @@ describe('useAssets', () => {
 
     await waitFor(() => result.current.isSuccess);
     await waitForNextUpdate();
+    const { get } = useFetchClient();
 
     const expected = {
       filters: {
@@ -171,7 +171,7 @@ describe('useAssets', () => {
       _q: 'something',
     };
 
-    expect(axiosInstance.get).toBeCalledWith(
+    expect(get).toBeCalledWith(
       `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
@@ -184,6 +184,7 @@ describe('useAssets', () => {
 
     await waitFor(() => result.current.isSuccess);
     await waitForNextUpdate();
+    const { get } = useFetchClient();
 
     const expected = {
       filters: {
@@ -196,7 +197,7 @@ describe('useAssets', () => {
       _q: encodeURIComponent(_q),
     };
 
-    expect(axiosInstance.get).toBeCalledWith(
+    expect(get).toBeCalledWith(
       `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
@@ -206,7 +207,9 @@ describe('useAssets', () => {
 
     await waitFor(() => result.current.isSuccess);
 
-    expect(axiosInstance.get).toBeCalledTimes(0);
+    const { get } = useFetchClient();
+
+    expect(get).toBeCalledTimes(0);
   });
 
   test('calls notifyStatus in case of success', async () => {
@@ -224,8 +227,9 @@ describe('useAssets', () => {
   test('calls toggleNotification in case of error', async () => {
     const originalConsoleError = console.error;
     console.error = jest.fn();
+    const { get } = useFetchClient();
 
-    axiosInstance.get.mockRejectedValueOnce(new Error('Jest mock error'));
+    get.mockRejectedValueOnce(new Error('Jest mock error'));
 
     const { notifyStatus } = useNotifyAT();
     const toggleNotification = useNotification();

packages/core/upload/admin/src/hooks/useAssets.js

@@ -1,16 +1,17 @@
 import { stringify } from 'qs';
 import { useQuery } from 'react-query';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { useNotification } from '@strapi/helper-plugin';
+import { useNotification, useFetchClient } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 
 import pluginId from '../pluginId';
-import { axiosInstance, getRequestUrl } from '../utils';
+import { getRequestUrl } from '../utils';
 
 export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
+  const { get } = useFetchClient();
   const dataRequestURL = getRequestUrl('files');
   const { folder, _q, ...paramsExceptFolderAndQ } = query;
 
@@ -41,7 +42,14 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
 
   const getAssets = async () => {
     try {
-      const { data } = await axiosInstance.get(
+      const { data } = await get(
+        `${dataRequestURL}${stringify(params, {
+          encode: false,
+          addQueryPrefix: true,
+        })}`
+      );
+      console.log(
+        'getAssets new',
         `${dataRequestURL}${stringify(params, {
           encode: false,
           addQueryPrefix: true,