Bug Fixes..Notification load, Withdraw css fix

src/components/Partials/Header.jsx

@@ -12,9 +12,11 @@ import Icons from "../Helpers/Icons";
 import ModalCom from "../Helpers/ModalCom";
 import WalletHeader from "../MyWallet/WalletHeader";
 
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
 import siteLogo from "../../assets/images/wrenchboard.png";
+import formattedDate from "../../lib/fomattedDate";
+import { updateNotifications } from "../../store/notifications";
 import TimeDifference from "../Helpers/TimeDifference";
 
 export default function Header({ logoutModalHandler, sidebarHandler }) {
@@ -24,9 +26,16 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [moneyPopup, setPopup] = useToggle(false);
   const darkMode = useContext(DarkModeContext);
   const { userDetails } = useSelector((state) => state?.userDetails);
-  const { notifications } = useSelector((state) => state?.notifications);
   const [myWalletList, setMyWalletList] = useState([]);
   const api = useMemo(() => new usersService(), []);
+  const dispatch = useDispatch();
+  const [notificationData, setNotificationData] = useState({
+    loader: false,
+    data: {
+      raw: [],
+      header: [],
+    },
+  });
 
   const getMyWalletList = async () => {
     try {
@@ -93,6 +102,79 @@ 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];
@@ -249,7 +331,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">
-                  {notifications?.data?.raw?.length}
+                  {notificationData.loader
+                    ? "●"
+                    : notificationData.data.raw?.length}
                 </span>
               </div>
               <div
@@ -265,10 +349,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
                 <div className="content px-7 pb-7">
                   <ul>
-                    {notifications?.data?.header?.map((item, idx) => (
+                    {notificationData.data.header?.map((item, idx) => (
                       <li
                         className={`content-item ${
-                          idx === notifications?.data?.header?.length - 1
+                          idx === notificationData.data?.header?.length - 1
                             ? "py-5 "
                             : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
                         }`}