#11 Extend token refresh duration to 24 hours

src/api/axiosDefaults.js

@@ -2,4 +2,7 @@ import axios from "axios";
 
 axios.defaults.baseURL = 'https://travel-tickr-api-e57198555b47.herokuapp.com/' //url to api
 axios.defaults.headers.post['Content-Type'] = 'multipart/form-data' // multipart necessary since we have both text and images
-axios.defaults.withCredentials = true
+axios.defaults.withCredentials = true
+
+export const axiosReq  = axios.create();
+export const axiosRes = axios.create();

src/contexts/CurrentUserContext.js

@@ -1,5 +1,8 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import axios from "axios";
+import { axiosRes } from "../api/axiosDefaults";
+import { response } from "msw";
+import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
 
 export const CurrentUserContext = createContext();
 export const SetCurrentUserContext = createContext();
@@ -9,10 +12,11 @@ export const useSetCurrentUser = () => useContext(SetCurrentUserContext)
 
 export const CurrentUserProvider = ({ children }) => {
   const [currentUser, setCurrentUser] = useState(null);
+  const history = useHistory()
 
   const handleMount = async () => {
     try {
-      const { data } = await axios.get("dj-rest-auth/user/");
+      const { data } = await axiosRes.get("dj-rest-auth/user/");
     } catch (err) {
       console.log(err);
     }
@@ -22,6 +26,28 @@ export const CurrentUserProvider = ({ children }) => {
     handleMount();
   }, []);
 
+  useMemo(() => {
+    axiosRes.interceptors.response.use(
+      (response) => response,
+      async (err) => {
+        if (err.response?.status === 401){
+          try {
+            await axios.post('/dj-rest-auth/token/refresh/')
+          } catch (err) {
+            setCurrentUser(prevCurrentUser => {
+              if (prevCurrentUser) {
+                history.push('/login')
+              }
+              return null
+            })
+          }
+          return axios(err.config)
+        }
+        return Promise.reject(err)
+      }
+    )
+  })
+
   return (
     <CurrentUserContext.Provider value={currentUser}>
       <SetCurrentUserContext.Provider value={setCurrentUser}>