From ff84f020e39b20002a3be23981eb5cd1e240ce83 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Sat, 11 Nov 2023 22:59:07 +0700
Subject: [PATCH] Extract Axios Config

---
 frontend/src/api/AuthenticationApi.jsx   | 42 +-----------------------
 frontend/src/api/TaskApi.jsx             | 12 +------
 frontend/src/api/configs/AxiosConfig.jsx | 42 ++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/api/configs/AxiosConfig.jsx

diff --git a/frontend/src/api/AuthenticationApi.jsx b/frontend/src/api/AuthenticationApi.jsx
index 313d6f1..dc2de0c 100644
--- a/frontend/src/api/AuthenticationApi.jsx
+++ b/frontend/src/api/AuthenticationApi.jsx
@@ -1,45 +1,5 @@
 import axios from 'axios';
-
-// Create an Axios instance with common configurations
-const axiosInstance = axios.create({
-    baseURL: 'http://127.0.0.1:8000/api/',
-    timeout: 5000,
-    headers: {
-        'Authorization': "Bearer " + localStorage.getItem('access_token'),
-        'Content-Type': 'application/json',
-        'accept': 'application/json',
-    }
-});
-
-// Add a response interceptor to handle token refresh on 401 Unauthorized errors
-axiosInstance.interceptors.response.use(
-    response => response,
-    error => {
-        const originalRequest = error.config;
-        const refresh_token = localStorage.getItem('refresh_token');
-
-        // Check if the error is due to Unauthorized (401) and a refresh token is available
-        if (error.response.status === 401 && error.response.statusText === "Unauthorized" && refresh_token !== "undefined") {
-            return axiosInstance
-                .post('/token/refresh/', { refresh: refresh_token })
-                .then((response) => {
-                    // Update access and refresh tokens
-                    localStorage.setItem('access_token', response.data.access);
-                    localStorage.setItem('refresh_token', response.data.refresh);
-
-                    // Update the authorization header with the new access token
-                    axiosInstance.defaults.headers['Authorization'] = "Bearer " + response.data.access;
-                    originalRequest.headers['Authorization'] = "Bearer " + response.data.access;
-
-                    return axiosInstance(originalRequest); // Retry the original request
-                })
-                .catch(err => {
-                    console.log('Interceptors error: ', err);
-                });
-        }
-        return Promise.reject(error);
-    }
-);
+import axiosInstance from './configs/AxiosConfig';
 
 // Function for user login
 const apiUserLogin = (data) => {
diff --git a/frontend/src/api/TaskApi.jsx b/frontend/src/api/TaskApi.jsx
index e56662b..f4c3ef2 100644
--- a/frontend/src/api/TaskApi.jsx
+++ b/frontend/src/api/TaskApi.jsx
@@ -1,15 +1,5 @@
 import axios from 'axios';
-
-// Create an Axios instance with common configurations
-const axiosInstance = axios.create({
-    baseURL: 'http://127.0.0.1:8000/api/',
-    timeout: 5000,
-    headers: {
-        'Authorization': "Bearer " + localStorage.getItem('access_token'),
-        'Content-Type': 'application/json',
-        'accept': 'application/json',
-    }
-});
+import axiosInstance from './configs/AxiosConfig';
 
 export const fetchTodoTasks = () => {
     return axiosInstance
diff --git a/frontend/src/api/configs/AxiosConfig.jsx b/frontend/src/api/configs/AxiosConfig.jsx
new file mode 100644
index 0000000..80015ac
--- /dev/null
+++ b/frontend/src/api/configs/AxiosConfig.jsx
@@ -0,0 +1,42 @@
+import axios from 'axios';
+
+const axiosInstance = axios.create({
+    baseURL: 'http://127.0.0.1:8000/api/',
+    timeout: 5000,
+    headers: {
+        'Authorization': "Bearer " + localStorage.getItem('access_token'),
+        'Content-Type': 'application/json',
+        'accept': 'application/json',
+    },
+});
+
+// handling token refresh on 401 Unauthorized errors
+axiosInstance.interceptors.response.use(
+    response => response,
+    error => {
+        const originalRequest = error.config;
+        const refresh_token = localStorage.getItem('refresh_token');
+
+        // Check if the error is due to 401 and a refresh token is available
+        if (error.response.status === 401 && error.response.statusText === "Unauthorized" && refresh_token !== "undefined") {
+            return axiosInstance
+                .post('/token/refresh/', { refresh: refresh_token })
+                .then((response) => {
+
+                    localStorage.setItem('access_token', response.data.access);
+
+                    axiosInstance.defaults.headers['Authorization'] = "Bearer " + response.data.access;
+                    originalRequest.headers['Authorization'] = "Bearer " + response.data.access;
+
+                    return axiosInstance(originalRequest);
+                })
+                .catch(err => {
+                    console.log('Interceptors error: ', err);
+                });
+        }
+        return Promise.reject(error);
+    }
+);
+
+
+export default axiosInstance;