notification bug fixed

src/components/Notification/index.jsx

@@ -12,32 +12,50 @@ const tabs = [
     title: "Today's",
   },
   {
-    id: 1,
+    id: 2,
     date: "days",
     title: "7 days",
   },
   {
-    id: 1,
+    id: 3,
     date: "all",
     title: "All",
   },
 ];
 
 export default function Notification() {
-  const [selectTab, setValue] = useState(tabs ? tabs[0].title : "");
+  const [selectTab, setValue] = useState(tabs ? tabs[2].title : "");
   const { notifications } = useSelector((state) => state?.notifications);
 
+  const [notificationData, setNotificationData] = useState(notifications?.data || [])
+
+  
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
-  const indexOfLastItem = Number(indexOfFirstItem) + 6;
+  const indexOfLastItem = Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentNotifications = notifications?.data?.raw?.slice(
+  const currentNotifications = notificationData?.slice(indexOfFirstItem, indexOfLastItem);
-    indexOfFirstItem,
-    indexOfLastItem
-  );
   
-  console.log(currentNotifications);
+  console.log('TESTING', currentNotifications)
   const filterHandler = (value) => {
     setValue(value);
+    switch(value){
+      case `Today's`:
+        // setNotificationData(notifications?.data?.slice(0,5))
+        setNotificationData(notifications?.data.filter(item => (new Date().getTime() - new Date(item.date).getTime())/(1000*60*60*24) <= 1))
+        setCurrentPage(0)
+        break;
+      case `All`:
+        setNotificationData(notifications?.data)
+        setCurrentPage(0)
+        break;
+      case `7 days`:
+        // setNotificationData(notifications?.data?.slice(0,2))
+        setNotificationData(notifications?.data.filter(item => (new Date().getTime() - new Date(item.date).getTime())/(1000*60*60*24) <= 7))
+        setCurrentPage(0)
+        break;
+      default:
+        break;
+    }
   };
 
   const handlePagination = (e) => {
@@ -57,7 +75,7 @@ export default function Notification() {
             </div>
             <div className="slider-btns flex space-x-4">
               {tabs.map(({ id, title, date }) => (
-                <div onClick={() => filterHandler(title)} className="relative">
+                <div key={id} onClick={() => filterHandler(title)} className="relative">
                   <span
                     className={`text-thin-light-gray text-18 cursor-pointer ${
                       selectTab === title ? "text-purple" : ""
@@ -67,7 +85,7 @@ export default function Notification() {
                   </span>
                   {date === "today" && (
                     <span className="absolute -right-3 -top-3 text-white text-xs w-5 h-5 rounded-full flex justify-center items-center bg-pink">
-                      {notifications?.data?.raw?.length}
+                      {notifications?.data?.length}
                     </span>
                   )}
                 </div>
@@ -104,9 +122,12 @@ export default function Notification() {
                 onClick={handlePagination}
                 prev={currentPage == 0 ? true : false}
                 next={
-                  currentPage + 6 >= currentNotifications?.length ? true : false
+                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                  notificationData.length
+                    ? true
+                    : false
                 }
-                data={currentNotifications}
+                data={notificationData}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/Partials/Header.jsx

@@ -29,13 +29,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [myWalletList, setMyWalletList] = useState([]);
   const api = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
-  const [notificationData, setNotificationData] = useState({
+
-    loader: false,
+  const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
-    data: {
-      raw: [],
-      header: [],
-    },
-  });
 
   const getMyWalletList = async () => {
     try {
@@ -102,79 +97,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     } else return balanceDropdown;
   };
 
-  useEffect(() => {
-    if (!userDetails?.loggedIn) {
-      const getNotifications = () => {
-        // function to load user notification
-        setNotificationData({
-          loader: true,
-          data: {
-            header: null,
-            raw: null
-          },
-        });
-        api
-          .getMyNotifications()
-          .then((res) => {
-            if (res.data.internal_return < 0) {
-              setNotificationData({ loader: false });
-              return;
-            }
-
-            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;
-              });
-            };
-
-            setNotificationData({
-              loader: false,
-              data: {
-                raw: _raw,
-                header: _header,
-              },
-            });
-            // Dispatch all notifications, sorted, and recent based on their filter type
-            dispatch(
-              updateNotifications({
-                loading: false,
-                data: {
-                  raw: _raw,
-                  today: _today,
-                  // days: _days(),
-                  sort: _sorted,
-                },
-              })
-            );
-          })
-          .catch((error) => {
-            setNotificationData({ loader: false });
-            throw new Error(error);
-          });
-      };
-      getNotifications();
-    }
-  }, [api, userDetails?.loggedIn]);
-
   // User Profile
   let { firstname, lastname, email, profile_pic } = userDetails;
   let userEmail = email?.split("@")[0];
@@ -331,9 +253,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               >
                 <Icons name="notification" />
                 <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
-                  {notificationData.loader
+                  {notifications?.loading
                     ? "●"
-                    : notificationData.data.raw?.length}
+                    : notifications?.data?.length}
                 </span>
               </div>
               <div
@@ -349,40 +271,46 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
                 <div className="content px-7 pb-7">
                   <ul>
-                    {notificationData.data.header?.map((item, idx) => (
+                    {notifications?.data?.length && notifications?.data?.map((item, idx) => 
-                      <li
+                    {
-                        className={`content-item ${
+                      if(idx < 5){
-                          idx === notificationData.data?.header?.length - 1
+                      return (
-                            ? "py-5 "
+                        <li
-                            : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                          className={`content-item ${
-                        }`}
+                            idx == 4
-                        key={idx}
+                              ? "py-5 "
-                      >
+                              : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                        <div className="notifications flex space-x-4 items-center">
+                          }`}
-                          <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
+                          key={idx}
-                            <img
+                        >
-                              src={require(`../../assets/images/notifications/${item?.icon}`)}
+                          <div className="notifications flex space-x-4 items-center">
-                              alt="icon"
+                            <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
-                              className="w-full h-full"
+                              <img
-                            />
+                                src={require(`../../assets/images/notifications/${item?.icon}`)}
-                          </div>
+                                alt="icon"
-                          <div className="name">
+                                className="w-full h-full"
-                            <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                              {item?.title}
-                              {/* <span className="ml-1 font-bold">
-                              successfully done
-                            </span> */}
-                            </p>
-                            <p className="text-sm text-thin-light-gray font-medium">
-                              <TimeDifference
-                                time={item?.date}
-                                key={item?.uid}
                               />
-                            </p>
+                            </div>
+                            <div className="name">
+                              <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
+                                {item?.title}
+                                {/* <span className="ml-1 font-bold">
+                                successfully done
+                              </span> */}
+                              </p>
+                              <p className="text-sm text-thin-light-gray font-medium">
+                                <TimeDifference
+                                  time={item?.date}
+                                  key={item?.uid}
+                                />
+                              </p>
+                            </div>
                           </div>
-                        </div>
+                        </li>
-                      </li>
+                      )
-                    ))}
+                      }
+                    })
+                    }
                   </ul>
 
                   <div className="add-money-btn flex justify-center items-center">

src/middleware/AuthRoute.jsx

@@ -89,7 +89,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
               return;
             }
             setLoadProfileDetails(res.data);
-            dispatch(updateUserDetails({ ...res.data, loggedIn: true }));
+            dispatch(updateUserDetails({ ...res.data }));
             setIsLogin({ loading: false, status: true });
           })
           .catch((error) => {
@@ -100,89 +100,64 @@ 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 = () => {
-      const getNotifications = () => {
+      // function to load user notification
-        // function to load user notification
+      dispatch(updateNotifications({ loading: true }));
-        dispatch(updateNotifications({ loading: true }));
+      apiCall
-        apiCall
+        .getMyNotifications()
-          .getMyNotifications()
+        .then((res) => {
-          .then((res) => {
+          if (res.data.internal_return < 0) {
-            if (res.data.internal_return < 0) {
+            dispatch(updateNotifications({ loading: false, data: null }));
-              dispatch(updateNotifications({ loading: false }));
+            return;
-              return;
+          }
-            }
+          setLoadProfileDetails(res.data);
-            setLoadProfileDetails(res.data);
 
-            const _raw = res.data?.result_list;
+          const _raw = res.data?.result_list;
 
-            //Sort the notifications in ascending order based on the API time
+          //Sort the notifications in ascending order based on the API time
-            const _sorted = _raw?.sort((a, b) => {
+          const _sorted = _raw?.sort((a, b) => {
-              const timeA = new Date(a?.date)?.getTime();
+            const timeA = new Date(a?.date)?.getTime();
-              const timeB = new Date(b?.date)?.getTime();
+            const timeB = new Date(b?.date)?.getTime();
-              return timeA - timeB;
+            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();
+          // 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,
+              // },
+              data: _sorted
+            })
+          );
+        })
+        .catch((error) => {
+          dispatch(updateNotifications({ loading: false, data: null }));
+        });
+    };
+    getNotifications();
   }, []);
 
   useEffect(() => {