diff --git a/src/middleware/AuthRoute.jsx b/src/middleware/AuthRoute.jsx index 7357643..0a78f96 100644 --- a/src/middleware/AuthRoute.jsx +++ b/src/middleware/AuthRoute.jsx @@ -1,166 +1,269 @@ -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 { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { Navigate, Outlet, useNavigate } from "react-router-dom"; +import LoadingSpinner from "../components/Spinners/LoadingSpinner"; +import formattedDate from "../lib/fomattedDate"; +import usersService from "../services/UsersService"; +import { commonHeadBanner } from "../store/CommonHeadBanner"; import { updateUserDetails } from "../store/UserDetails"; import { updateJobs } from "../store/jobLists"; +import { updateNotifications } from "../store/notifications"; import { updateUserJobList } from "../store/userJobList"; -import { commonHeadBanner } from "../store/CommonHeadBanner"; import { recentActivitiesData } from "../store/RecentActivitiesData"; 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 [loadProfileDetails, setLoadProfileDetails] = useState([]); - const navigate = useNavigate(); + const apiCall = useMemo(() => new usersService(), []); + const dispatch = useDispatch(); + const [lastActivityTime, setLastActivityTime] = useState(Date.now()); + const [isLogin, setIsLogin] = useState({ loading: true, status: false }); + const [loadProfileDetails, setLoadProfileDetails] = useState([]); + const navigate = useNavigate(); - const { jobListTable } = useSelector((state) => state.tableReload); + const { jobListTable } = useSelector((state) => state.tableReload); - const { userDetails:{username, uid} } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active + const { + userDetails: { username, uid }, + } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active - let loggedIn = username && uid ? true : false // variable to determine if user is logged in + let loggedIn = username && uid ? true : false; // variable to determine if user is logged in - useEffect(() => { - //Removing Data stored at localStorage after session expires - const expireSession = () => { - localStorage.removeItem("uid"); - localStorage.removeItem("member_id"); - localStorage.removeItem("session_token"); - navigate("/login", { replace: true }); // redirects user to login page after session expires - }; + useEffect(() => { + //Removing Data stored at localStorage after session expires + const expireSession = () => { + localStorage.removeItem("uid"); + localStorage.removeItem("member_id"); + localStorage.removeItem("session_token"); + navigate("/login", { replace: true }); // redirects user to login page after session expires + }; - const checkInactivity = setInterval(() => { - let { account_type } = loadProfileDetails; - if (account_type === "FAMILY") { - if ( - Date.now() - lastActivityTime > - process.env.REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY - ) { - expireSession(); - } - } else { - 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 (!loggedIn) { - 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; + const checkInactivity = setInterval(() => { + let { account_type } = loadProfileDetails; + if (account_type === "FAMILY") { + if ( + Date.now() - lastActivityTime > + process.env.REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY + ) { + expireSession(); + } + } else { + if ( + Date.now() - lastActivityTime > + process.env.REACT_APP_SESSION_EXPIRE_MINUTES + ) { + expireSession(); + } } - setLoadProfileDetails(res.data); - dispatch(updateUserDetails({...res.data, loggedIn:true})); - setIsLogin({ loading: false, status: true }); - }) - .catch((error) => { - setIsLogin({ loading: false, status: false }); - }); - }; - loadProfile(); - } - }, []); + }, process.env.REACT_APP_SESSION_EXPIRE_CHECKER); // Checks for inactivity every minute - useEffect(() => { - const getMyJobList = async () => { - dispatch(updateUserJobList({ loading: true, data: [] })); - try { - const res = await apiCall.getMyJobList(); - // setMyJobList({loading: false, data:res.data}) - // setMyJobList(res.data); - dispatch(updateUserJobList({ loading: false, data: res.data })); - } catch (error) { - dispatch(updateUserJobList({ loading: false, data: [] })); - // setMyJobList({loading: false, data:[]}) - console.log("Error getting mode"); - } - }; - getMyJobList(); - }, [jobListTable]); + // cleaning up listeners + return () => { + clearInterval(checkInactivity); + }; + }, [lastActivityTime, navigate]); - 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]); + // Reset last activity time on user input + const resetTime = useCallback(() => { + setLastActivityTime(Date.now()); + }, []); - //FUNCTION TO GET COMMON HEAD DATA - useEffect(()=>{ - apiCall.getHeroJBanners().then((res) => { - if (res.data.internal_return < 0) { - return; - } - dispatch(commonHeadBanner(res.data)); - }) - .catch((error) => { - console.log('ERROR ', error) - }); - },[]) + useEffect(() => { + window.addEventListener("mousemove", resetTime); + window.addEventListener("keydown", resetTime); + + return () => { + window.removeEventListener("mousemove", resetTime); + window.removeEventListener("keydown", resetTime); + }; + }, [resetTime]); + + useEffect(() => { + if (!loggedIn) { + 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; + } + setLoadProfileDetails(res.data); + dispatch(updateUserDetails({ ...res.data, loggedIn: true })); + setIsLogin({ loading: false, status: true }); + }) + .catch((error) => { + setIsLogin({ loading: false, status: false }); + }); + }; + loadProfile(); + } + }, []); + + // const filterNotifications = (notifications, filterType) => { + // const currentDate = new Date(); + // if (filterType === "today") { + // return notifications?.filter((notification) => { + // const notificationDate = new Date(notification?.date); + // console.log(notificationDate) + // // return ( + // // notificationDate.getDate() === currentDate.getDate() && + // // notificationDate.getMonth() === currentDate.getMonth() && + // // notificationDate.getFullYear() === currentDate.getFullYear() + // // ); + // }); + // } else if (filterType === "days") { + // const sevenDaysAgo = new Date(currentDate); + // sevenDaysAgo.setDate(currentDate.getDate() - 7); + // return notifications?.filter((notification) => { + // const notificationDate = new Date(notification?.date); + // return notificationDate >= sevenDaysAgo; + // }); + // } else { + // return notifications; + // } + // }; + + useEffect(() => { + if (!loggedIn) { + const getNotifications = () => { + // function to load user notification + dispatch(updateNotifications({ loading: true })); + apiCall + .getMyNotifications() + .then((res) => { + if (res.data.internal_return < 0) { + dispatch(updateNotifications({ loading: false })); + return; + } + setLoadProfileDetails(res.data); + + const _raw = res.data?.result_list; + + //Sort the notifications in ascending order based on the API time + const _sorted = _raw?.sort((a, b) => { + const timeA = new Date(a?.date)?.getTime(); + const timeB = new Date(b?.date)?.getTime(); + return timeA - timeB; + }); + + // header component + const _header = _sorted?.slice(0, 5); + // Notification Layout + const _today = _sorted?.slice(0, 7); + + const _days = () => { + const sevenDaysAgo = new Date(); + sevenDaysAgo.setDate(new Date() - 7); + return _sorted?.filter((notification) => { + const notificationDate = new Date( + formattedDate(notification?.date) + ); + return notificationDate >= sevenDaysAgo; + }); + }; + + // Dispatch all notifications, sorted, and recent based on their filter type + dispatch( + updateNotifications({ + loading: false, + data: { + raw: _raw, + today: _today, + // days: _days(), + sort: _sorted, + header: _header, + }, + }) + ); + }) + .catch((error) => { + dispatch(updateNotifications({ loading: false })); + }); + }; + getNotifications(); + } + }, []); + + useEffect(() => { + const getMyJobList = async () => { + dispatch(updateUserJobList({ loading: true, data: [] })); + try { + const res = await apiCall.getMyJobList(); + // setMyJobList({loading: false, data:res.data}) + // setMyJobList(res.data); + dispatch(updateUserJobList({ loading: false, data: res.data })); + } catch (error) { + dispatch(updateUserJobList({ loading: false, data: [] })); + // setMyJobList({loading: false, data:[]}) + console.log("Error getting mode"); + } + }; + getMyJobList(); + }, [jobListTable]); + + 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]); + + //FUNCTION TO GET COMMON HEAD DATA + useEffect(()=>{ + apiCall.getHeroJBanners().then((res) => { + if (res.data.internal_return < 0) { + return; + } + dispatch(commonHeadBanner(res.data)); + }) + .catch((error) => { + console.log('ERROR ', error) + }); + },[]) // - //FUNCTION TO GET COMMON HEAD DATA - useEffect(()=>{ - apiCall.getRecentActivitiedData().then((res) => { - // debugger; - if (res.data?.internal_return < 0) { - return; - } - dispatch(recentActivitiesData(res.data)); - }) - .catch((error) => { - console.log('ERROR ', error) - }); - },[]) + //FUNCTION TO GET COMMON HEAD DATA + useEffect(()=>{ + apiCall.getRecentActivitiedData().then((res) => { + // debugger; + if (res.data?.internal_return < 0) { + return; + } + dispatch(recentActivitiesData(res.data)); + }) + .catch((error) => { + console.log('ERROR ', error) + }); + },[]) - return isLogin.loading && !loggedIn ? ( - - ) : - !isLogin.status && !loggedIn ? ( - - ) : ( - children || - ); + // useEffect(() => { + // apiCall + // .getHeroJBanners() + // .then((res) => { + // if (res.data.internal_return < 0) { + // return; + // } + // dispatch(commonHeadBanner(res.data)); + // }) + // .catch((error) => { + // console.log("ERROR ", error); + // }); + // }, []); + // + + return isLogin.loading && !loggedIn ? ( + + ) : !isLogin.status && !loggedIn ? ( + + ) : ( + children || + ); }; export default AuthRoute; diff --git a/src/store/RecentActivitiesData.js b/src/store/RecentActivitiesData.js new file mode 100644 index 0000000..e69a3ab --- /dev/null +++ b/src/store/RecentActivitiesData.js @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + recentActivitiesData: {} +}; + +export const recentActivitiesDataSlice = createSlice({ + name: "recentActivitiesData", + initialState, + reducers: { + recentActivitiesData: (state,action) => { + state.recentActivitiesData = {...action.payload} + }, + }, +}); + +// Action creators are generated for each case reducer function +export const { recentActivitiesData } = recentActivitiesDataSlice.actions; + +export default recentActivitiesDataSlice.reducer; \ No newline at end of file