Notification for header

src/middleware/AuthRoute.jsx

@@ -1,12 +1,14 @@
-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";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -18,9 +20,11 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
   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
@@ -84,7 +88,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               return;
             }
             setLoadProfileDetails(res.data);
-            dispatch(updateUserDetails({...res.data, loggedIn:true}));
+            dispatch(updateUserDetails({ ...res.data, loggedIn: true }));
             setIsLogin({ loading: false, status: true });
           })
           .catch((error) => {
@@ -95,6 +99,91 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
+  // 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: [] }));
@@ -126,22 +215,23 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [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)
-    });
-  },[])
+  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 ? (
     <LoadingSpinner size="32" color="sky-blue" height="h-screen" />
-  ) : 
-  !isLogin.status && !loggedIn ? (
+  ) : !isLogin.status && !loggedIn ? (
     <Navigate to={redirectPath} replace />
   ) : (
     children || <Outlet />