Pass session id to axios

2 files changed, 19 insertions, 20 deletions

diff --git a/blocks/eda-frontend/src/App.js b/blocks/eda-frontend/src/App.js
index 838c9c62..28ee86a5 100644
--- a/blocks/eda-frontend/src/App.js
+++ b/blocks/eda-frontend/src/App.js
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
-import { v4 as uuidv4 } from 'uuid'
+// import { v4 as uuidv4 } from 'uuid'
+import api from './utils/Api'
 import CircularProgress from '@material-ui/core/CircularProgress'
 
 import Navbar from './components/Shared/Navbar'
@@ -76,7 +77,6 @@ PublicRoute.propTypes = {
   restricted: PropTypes.bool
 }
 
-
 const App = () => {
   const [sessionId, setSessionId] = useState(null)
 
@@ -87,12 +87,11 @@ const App = () => {
 
       if (!existingSession) {
         // Generate a new session ID
-        const response = api.get("init-session")
-        setSessionData(response.data);
-        localStorage.setItem("session_id", response.data.session_id)
+        const response = api.get('init-session')
+        // setSessionData(response.data)
+        localStorage.setItem('session_id', response.data.session_id)
         // localStorage.setItem('session_id', newSession)
         existingSession = response.data.session_id
-
       }
 
       setSessionId(existingSession)
@@ -100,22 +99,9 @@ const App = () => {
     fetchSession()
   }, [])
 
-  // const get_sessionid = () => {
-  //   return sessionId
-  // }
-
   return (
     // Handles Routing for an application
     <HashRouter>
-      {/* <div>
-        <h1>React Session Management</h1>
-        {sessionId ? (
-          <p><strong>Session ID:</strong> {sessionId}<br />
-            <strong>Length:</strong> {sessionId.length}</p>
-        ) : (
-          <p>Generating session...</p>
-        )}
-      </div> */}
       <Switch>
         <PublicRoute exact path='/login' restricted nav={false} component={Login} />
         <PublicRoute exact path='/signup' restricted nav={false} component={SignUp} />
diff --git a/blocks/eda-frontend/src/utils/Api.js b/blocks/eda-frontend/src/utils/Api.js
index 983cd013..96a11c51 100644
--- a/blocks/eda-frontend/src/utils/Api.js
+++ b/blocks/eda-frontend/src/utils/Api.js
@@ -23,7 +23,7 @@ const getCookie = (name) => {
 
 const csrftoken = getCookie('csrftoken')
 
-export default axios.create({
+const api = axios.create({
   baseURL: '/api/',
   responseType: 'json',
   xsrfCookieName: 'csrftoken',
@@ -34,3 +34,16 @@ export default axios.create({
   },
   withCredentials: true
 })
+
+api.interceptors.request.use((config) => {
+  const sessionId = localStorage.getItem('session_id')
+  if (sessionId) {
+    config.headers['Session-ID'] = sessionId // Custom header for session ID
+    console.log('sessionId', sessionId)
+  }
+  return config
+}, (error) => {
+  return Promise.reject(error)
+})
+
+export default api