login dash

src/middleware/AuthRoute.jsx

@@ -1,38 +1,31 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
+import usersService from '../services/UsersService'
+import LoadingSpinner from '../components/Spinners/LoadingSpinner'
+import WrenchBoard from "../assets/images/wrenchboard.png"
+import { useDispatch, useSelector } from "react-redux";
+import {updateUserDetails} from '../store/UserDetails'
+
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
+  const apiCall = new usersService()
+
+  const dispatch = useDispatch()
+
   const [lastActivityTime, setLastActivityTime] = useState(Date.now());
-  const isLogin = localStorage.getItem("email");
+  let [isLogin, setIsLogin] = useState({loading: true, status: false})
 
   const navigate = useNavigate();
-  const { pathname } = useLocation();
 
   //Removing Data stored at localStorage after session expires
   const expireSession = () => {
-    localStorage.removeItem("email");
     localStorage.removeItem('session_token');
-    localStorage.removeItem('firstname');
     localStorage.removeItem('member_id');
-    localStorage.removeItem('lastname');
-    localStorage.removeItem('state');
-    localStorage.removeItem('last_login');
     localStorage.removeItem('uid');
     localStorage.removeItem('session');
-    localStorage.removeItem('city');
-    localStorage.removeItem('country');
-    localStorage.removeItem('loglevel');
-    localStorage.removeItem('zip_code');
-    localStorage.removeItem('added');
     navigate("/login", { replace: true }); // redirects user to login page after session expires
   };
 
-  const checkInactivity = setInterval(() => {
-    if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) {
-      expireSession()
-    }
-  }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute
-
   // Reset last activity time on user input
   const resetTime = () => {
     setLastActivityTime(Date.now());
@@ -40,19 +33,52 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   window.addEventListener('mousemove', resetTime)
   window.addEventListener('keydown', resetTime)
 
+  const loadProfile = ()=>{ // function to load user profile
+    apiCall.loadProfile().then((res)=>{
+      if(res.data.internal_return < 0){
+        setIsLogin({loading: false, status: false})
+        return
+      }
+      dispatch(updateUserDetails(res.data))
+      setIsLogin({loading: false, status: true})
+    }).catch(error =>{
+      setIsLogin({loading: false, status: false})
+    })
+  }
+  const getProfile = useCallback(()=>{
+    loadProfile() // API CALL TO GET USER PROFILE
+  }, [])
+  
   useEffect(() => {
+    getProfile()
+
+    const checkInactivity = setInterval(() => {
+      if (Date.now() - lastActivityTime > process.env.REACT_APP_SESSION_EXPIRE_MINUTES) {
+        expireSession()
+      }
+    }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER) // Checks for inactivity every minute
+
     // cleaning up listeners
     return () => {
       clearInterval(checkInactivity)
       window.removeEventListener('mousemove', resetTime)
       window.removeEventListener('keydown', resetTime)
     }
-  }, [pathname, lastActivityTime])
+  }, [lastActivityTime])
 
-  if (!isLogin) {
-    return <Navigate to={redirectPath} replace />;
-  }
-  return children || <Outlet />;
+  return (
+    isLogin.loading ?
+      <LoadingSpinner size='32' color='sky-blue' height='h-screen' />
+      // Stills needs fixing
+      // <div className="h-screen m-auto">
+      //   <img src={WrenchBoard} alt="wrenchboard" className="h-10" />
+      // </div>
+      :
+      !isLogin.status ?
+      <Navigate to={redirectPath} replace />
+      :
+      (children || <Outlet />)
+  )
 };
 
-export default AuthRoute;
+export default AuthRoute;