Ebube
103 lines
3.2 KiB
React
103 lines
3.2 KiB
React
import { useEffect, useState, useCallback, useMemo } from "react";
|
|
import { Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import usersService from "../services/UsersService";
|
|
import LoadingSpinner from "../components/Spinners/LoadingSpinner";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { updateUserDetails } from "../store/UserDetails";
|
|
import { updateJobs } from "../store/jobLists";
|
|
|
|
const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|
const apiCall = useMemo(() => new usersService(), []);
|
|
const dispatch = useDispatch();
|
|
const [lastActivityTime, setLastActivityTime] = useState(Date.now());
|
|
const [isLogin, setIsLogin] = useState({ loading: true, status: false });
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
//Removing Data stored at localStorage after session expires
|
|
const expireSession = () => {
|
|
localStorage.clear();
|
|
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
|
|
|
|
// cleaning up listeners
|
|
return () => {
|
|
clearInterval(checkInactivity);
|
|
};
|
|
}, [lastActivityTime, navigate]);
|
|
|
|
// Reset last activity time on user input
|
|
const resetTime = useCallback(() => {
|
|
setLastActivityTime(Date.now());
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("mousemove", resetTime);
|
|
window.addEventListener("keydown", resetTime);
|
|
|
|
return () => {
|
|
window.removeEventListener("mousemove", resetTime);
|
|
window.removeEventListener("keydown", resetTime);
|
|
};
|
|
}, [resetTime]);
|
|
|
|
useEffect(() => {
|
|
if (!isLogin.status) {
|
|
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 });
|
|
});
|
|
};
|
|
loadProfile();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// Getting market data
|
|
const getMarketActiveJobList = async () => {
|
|
try {
|
|
const res = await apiCall.getActiveJobList();
|
|
dispatch(updateJobs(res.data));
|
|
} catch (error) {
|
|
console.log("Error getting mode");
|
|
}
|
|
};
|
|
getMarketActiveJobList();
|
|
}, [apiCall, dispatch]);
|
|
|
|
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;
|