victorAnumudu
87 lines
2.8 KiB
React
87 lines
2.8 KiB
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());
|
|
let [isLogin, setIsLogin] = useState({loading: true, status: false})
|
|
|
|
const navigate = useNavigate();
|
|
|
|
//Removing Data stored at localStorage after session expires
|
|
const expireSession = () => {
|
|
localStorage.removeItem('session_token');
|
|
localStorage.removeItem('member_id');
|
|
localStorage.removeItem('uid');
|
|
localStorage.removeItem('session');
|
|
navigate("/login", { replace: true }); // redirects user to login page after session expires
|
|
};
|
|
|
|
// Reset last activity time on user input
|
|
const resetTime = () => {
|
|
setLastActivityTime(Date.now());
|
|
}
|
|
window.addEventListener('mousemove', resetTime)
|
|
window.addEventListener('keydown', resetTime)
|
|
|
|
const loadProfile = ()=>{ // function to load user profile
|
|
setIsLogin({loading: true, status: false})
|
|
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(() => {
|
|
if(!isLogin.status){
|
|
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)
|
|
}
|
|
}, [lastActivityTime])
|
|
|
|
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; |