Extract Axios Config

frontend/src/api/AuthenticationApi.jsx

@@ -1,45 +1,5 @@
 import axios from 'axios';
-
+import axiosInstance from './configs/AxiosConfig';
-// 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);
-    }
-);
 
 // Function for user login
 const apiUserLogin = (data) => {

frontend/src/api/TaskApi.jsx

@@ -1,15 +1,5 @@
 import axios from 'axios';
-
+import axiosInstance from './configs/AxiosConfig';
-// 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',
-    }
-});
 
 export const fetchTodoTasks = () => {
     return axiosInstance

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;