AxiosProvider useAxios refactoring

src/api/useGetUser.ts

@@ -1,6 +1,6 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
 
-import { useAxios } from 'providers/AxiosProvider';
+import { useAxios } from 'hooks/useAxios';
 import { useConfig } from 'providers/ConfigProvider';
 import { QueryKeys } from 'utils/constants';
 

src/hooks/__tests__/useAxios.test.ts

@@ -0,0 +1,30 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderHook, waitFor } from 'test/test-utils';
+
+import * as UseAuth from 'hooks/useAuth';
+import { userTokensFixture } from '__fixtures__/tokens';
+
+import { useAxios } from 'hooks/useAxios';
+
+describe('useAxios', () => {
+  const useAuthSpy = vi.spyOn(UseAuth, 'useAuth');
+  const refetchUserTokensMock = vi.fn();
+
+  beforeEach(() => {
+    useAuthSpy.mockReturnValue({
+      isAuthenticated: true,
+      userToken: userTokensFixture,
+      refetchUserTokens: refetchUserTokensMock,
+    });
+  });
+
+  it('should return context', async () => {
+    // ARRANGE
+    const { result } = renderHook(() => useAxios());
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    // ASSERT
+    expect(result.current).toBeDefined();
+    expect(result.current.request).toBeDefined();
+  });
+});

src/hooks/useAxios.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { AxiosInstance } from 'axios';
+
+import { AxiosContext } from 'providers/AxiosProvider';
+
+/**
+ * The `useAxios` hook returns the current `AxiosContext` value.
+ * @returns {AxiosInstance} The current `AxiosContext` value, an `AxiosInstance`.
+ */
+export const useAxios = (): AxiosInstance => {
+  return useContext(AxiosContext);
+};

src/pages/UsersPage/api/useGetUserTasks.ts

@@ -1,6 +1,6 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
 
-import { useAxios } from 'providers/AxiosProvider';
+import { useAxios } from 'hooks/useAxios';
 import { useConfig } from 'providers/ConfigProvider';
 import { QueryKeys } from 'utils/constants';
 

src/pages/UsersPage/api/useGetUsers.ts

@@ -1,7 +1,7 @@
 import { UseQueryResult, useQuery } from '@tanstack/react-query';
 import { User } from 'api/useGetUser';
 
-import { useAxios } from 'providers/AxiosProvider';
+import { useAxios } from 'hooks/useAxios';
 import { useConfig } from 'providers/ConfigProvider';
 import { QueryKeys } from 'utils/constants';
 

src/providers/AxiosProvider.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import axios, { AxiosError, AxiosInstance, InternalAxiosRequestConfig } from 'axios';
 
 import { AuthContextValue } from './AuthProvider';
@@ -68,7 +68,7 @@ const customAxios = axios.create({
 /**
  * The `AxiosContext` instance.
  */
-const AxiosContext = React.createContext<AxiosInstance>(customAxios);
+export const AxiosContext = React.createContext<AxiosInstance>(customAxios);
 
 /**
  * The `AxiosContextProvider` React component creates, maintains, and provides
@@ -103,12 +103,4 @@ const AxiosContextProvider = ({ children }: PropsWithChildren) => {
   );
 };
 
-/**
- * The `useAxios` hook returns the current `AxiosContext` value.
- * @returns {AxiosInstance} The current `AxiosContext` value, an `AxiosInstance`.
- */
-export const useAxios = (): AxiosInstance => {
-  return useContext(AxiosContext);
-};
-
 export default AxiosContextProvider;

src/providers/__tests__/AxiosProvider.test.tsx

@@ -1,13 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, renderHook, screen, waitFor } from 'test/test-utils';
-
-import * as UseAuth from 'hooks/useAuth';
-
-import AxiosContextProvider, { useAxios } from 'providers/AxiosProvider';
 import { useEffect, useState } from 'react';
 import { InternalAxiosRequestConfig } from 'axios';
+import { render, screen } from 'test/test-utils';
+
+import { useAxios } from 'hooks/useAxios';
+import * as UseAuth from 'hooks/useAuth';
 import { userTokensFixture } from '__fixtures__/tokens';
 
+import AxiosContextProvider from 'providers/AxiosProvider';
+
 describe('AxiosProvider', () => {
   const useAuthSpy = vi.spyOn(UseAuth, 'useAuth');
   const refetchUserTokensMock = vi.fn();
@@ -75,26 +76,3 @@ describe('AxiosProvider', () => {
     expect(refetchUserTokensMock).not.toHaveBeenCalled();
   });
 });
-
-describe('useAxios', () => {
-  const useAuthSpy = vi.spyOn(UseAuth, 'useAuth');
-  const refetchUserTokensMock = vi.fn();
-
-  beforeEach(() => {
-    useAuthSpy.mockReturnValue({
-      isAuthenticated: true,
-      userToken: userTokensFixture,
-      refetchUserTokens: refetchUserTokensMock,
-    });
-  });
-
-  it('should return context', async () => {
-    // ARRANGE
-    const { result } = renderHook(() => useAxios());
-    await waitFor(() => expect(result.current).not.toBeNull());
-
-    // ASSERT
-    expect(result.current).toBeDefined();
-    expect(result.current.request).toBeDefined();
-  });
-});