From 45ebc50a327d1ab86f4cfea3ec99eb38be99f2f9 Mon Sep 17 00:00:00 2001
From: Matthew Warman <warmanmr@gmail.com>
Date: Wed, 22 May 2024 14:05:59 -0400
Subject: [PATCH] AxiosProvider useAxios refactoring

---
 src/api/useGetUser.ts                         |  2 +-
 src/hooks/__tests__/useAxios.test.ts          | 30 ++++++++++++++++
 src/hooks/useAxios.ts                         | 12 +++++++
 src/pages/UsersPage/api/useGetUserTasks.ts    |  2 +-
 src/pages/UsersPage/api/useGetUsers.ts        |  2 +-
 src/providers/AxiosProvider.tsx               | 12 ++-----
 .../__tests__/AxiosProvider.test.tsx          | 34 ++++---------------
 7 files changed, 53 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/__tests__/useAxios.test.ts
 create mode 100644 src/hooks/useAxios.ts

diff --git a/src/api/useGetUser.ts b/src/api/useGetUser.ts
index aa78ac2..026e3c5 100644
--- a/src/api/useGetUser.ts
+++ b/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';
 
diff --git a/src/hooks/__tests__/useAxios.test.ts b/src/hooks/__tests__/useAxios.test.ts
new file mode 100644
index 0000000..487fdb3
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/hooks/useAxios.ts b/src/hooks/useAxios.ts
new file mode 100644
index 0000000..76d560f
--- /dev/null
+++ b/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);
+};
diff --git a/src/pages/UsersPage/api/useGetUserTasks.ts b/src/pages/UsersPage/api/useGetUserTasks.ts
index 745ac4b..ea28f62 100644
--- a/src/pages/UsersPage/api/useGetUserTasks.ts
+++ b/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';
 
diff --git a/src/pages/UsersPage/api/useGetUsers.ts b/src/pages/UsersPage/api/useGetUsers.ts
index 4a2328c..2c05e30 100644
--- a/src/pages/UsersPage/api/useGetUsers.ts
+++ b/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';
 
diff --git a/src/providers/AxiosProvider.tsx b/src/providers/AxiosProvider.tsx
index d7b2966..5562617 100644
--- a/src/providers/AxiosProvider.tsx
+++ b/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;
diff --git a/src/providers/__tests__/AxiosProvider.test.tsx b/src/providers/__tests__/AxiosProvider.test.tsx
index ee603bf..e5ef75e 100644
--- a/src/providers/__tests__/AxiosProvider.test.tsx
+++ b/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();
-  });
-});