notification clear all button

components/Navbar/parts/LocationMenu.jsx

@@ -11,8 +11,7 @@ const LocaleSwitcher = dynamic(() => import("../../Locale/LocaleSwitcher"), {
 
 import { useIntl } from "react-intl";
 import NewPostDialog from "./NewPostDialog";
-import { BellIcon } from "@/components/icons";
-import ActiveIconButtonLink from "./ActiveIconButtonLink";
+import NotificationButton from "./NotificationButton";
 
 export const LocationMenu = ({
   collapsed,
@@ -54,11 +53,7 @@ export const LocationMenu = ({
           </NavigationMenuItem>
         )
       )}
-      <div className="mr-3">
-        <ActiveIconButtonLink href="/notifications">
-          <BellIcon className={'mx-auto'} size={22} />
-        </ActiveIconButtonLink>
-      </div>
+     <NotificationButton user={user}/>
     </>
   );
 };

components/Navbar/parts/NotificationButton.js

@@ -0,0 +1,41 @@
+import { BellIcon } from "@/components/icons";
+import ActiveIconButtonLink from "./ActiveIconButtonLink";
+import { useEffect, useState } from "react";
+
+import { getUserNotificationCount } from "@/lib/api";
+
+const NotificationButton = ({ user }) => {
+  const [notificationCount, setNotificationCount] = useState(0);
+
+  useEffect(() => {
+    const fetchNotificationCount = async () => {
+      const nc = await getUserNotificationCount({
+        user,
+        pageSize: 10,
+        offset: 0,
+      });
+
+      if (nc?.userNotifications?.count || nc?.userNotifications?.count===0) {
+        setNotificationCount(nc?.userNotifications?.count);
+      }
+    };
+
+    if (user?.isLoggedIn) {
+      fetchNotificationCount();
+    }
+  }, [user?.isLoggedIn]);
+
+  return (
+    <div className="mr-3">
+      <ActiveIconButtonLink href="/notifications">
+        <BellIcon className={"mx-auto"} size={22} />
+        {notificationCount > 0 && (
+          <div className="absolute -top-0 mt-[3px] right-1 flex flex-col justify-center bg-blue-600 text-center mr-[10px] text-white text-[10px] rounded-full h-[14px] w-[14px] leading-none">
+            <div className="leading-none my-auto text-center">{notificationCount>10?'10+':notificationCount}</div>
+          </div>
+        )}
+      </ActiveIconButtonLink>
+    </div>
+  );
+};
+export default NotificationButton;

components/Notifications/EmptyState.js

@@ -0,0 +1,19 @@
+const NotificationEmptyState = () =>{
+    return(
+        <div className="mx-auto w-full rounded-lg border border-gray-300">
+        <div className="pt-20 pb-20 px-6">
+          <img
+            width="150"
+            className=" mx-auto"
+            src="https://letter-so.s3.amazonaws.com/prototypr/6dd2bd90-2c61-4163-bd5d-720567a692e6.png"
+            style={{ opacity: "0.92" }}
+          />
+          <h1 className="text-lg text-gray-500 pt-0 mt-4 mb-8 text-center">
+           No notifications yet.
+          </h1>
+        </div>
+      </div>
+    )
+}
+
+export default NotificationEmptyState

components/Notifications/NotificationCard/ProfileApprove.js

@@ -4,7 +4,7 @@ import { formatDistanceToNow } from "date-fns";
 import Link from "next/link";
 
 const ProfileApprove = ({ notification }) => {
-  return (
+    return (
     <div className="flex items-start justify-between">
       <div className="flex gap-6">
         <div className="flex flex-col h-full justify-center">
@@ -24,7 +24,7 @@ const ProfileApprove = ({ notification }) => {
             {notification.action_type == "approve" ? (
               <>
                 <Link
-                  href={`/people/${notification?.notifiers[0].slug}`}
+                  href={`/account`}
                   className="font-bold hover:underline"
                 >
                   Your profile
@@ -36,7 +36,7 @@ const ProfileApprove = ({ notification }) => {
                 <>
 
                 <Link
-                  href={`/people/${notification?.notifiers[0].slug}`}
+                  href={`/account`}
                   className="font-bold hover:underline"
                 >
                  Complete your profile
@@ -65,7 +65,7 @@ const ProfileApprove = ({ notification }) => {
       {notification.read == false || notification.read == "false" ? (
         <Link
           className="my-auto"
-          href={`/people/${notification?.notifiers[0].slug}`}
+          href={`/account`}
         >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>

components/Notifications/NotificationsList.js

@@ -10,18 +10,21 @@ import InterviewInviteBadge from "./NotificationCard/InterviewInviteBadge";
 import ClaimNotification from "./NotificationCard/ClaimNotification";
 import LikeNotification from "./NotificationCard/LikeNotification";
 import ProfileApprove from "./NotificationCard/ProfileApprove";
+import NotificationEmptyState from "./EmptyState";
+import axios from "axios";
+import { useRouter } from "next/navigation";
 
 const NotificationsList = () => {
   const { user } = useUser({
     redirectIfFound: false,
     redirectTo: "/",
   });
 
+  const router = useRouter();
+
   const { notifications, loading, refetch, total, pageSize } =
     useFetchNotifications(user);
 
-  console.log(notifications);
-
   const [currentPage, setCurrentPage] = useState(1);
 
   useEffect(() => {
@@ -33,26 +36,76 @@ const NotificationsList = () => {
     refetch(offset);
   };
 
+  const [showMarkAllAsRead, setShowMarkAllAsRead] = useState(false);
+  useEffect(() => {
+    for(let i = 0; i < notifications?.length; i++) {
+      if (notifications[i].read == 'false') {
+        setShowMarkAllAsRead(true);
+        break;
+      }
+    }
+
+  }, [notifications]);
+
+
+  const clearNotifications = async id => {
+    var data = JSON.stringify({
+      id: id ? id : "*",
+    });
+    var config = {
+      method: "post",
+      url: `${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/notificationsClear`,
+      headers: {
+        Authorization: `Bearer ${user.jwt}`,
+        "Content-Type": "application/json",
+      },
+      data: data,
+    };
+    // const loadingToastId = toast.loading("Sending verification email");
+
+    axios(config)
+      .then(function (response) {
+        setTimeout(() => {
+          // setIsLoading(false);
+          // showSuccessToast(loadingToastId);
+        }, 800);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+
+      location.reload() 
+  };
+
+
   return (
     <div className="flex flex-col">
       {/* <header className="bg-gray-900 text-white py-4 px-6">
         <h1 className="text-2xl font-bold">Notifications</h1>
       </header> */}
       <main className="flex-1 my-6">
         <div className="grid gap-4">
-          {loading
-            ? [1, 2, 3, 4, 5, 6].map(i => <Skeleton key={i} />)
-            : notifications?.map(notification => (
-                <NotificationItem
-                  key={notification.id}
-                  notification={notification}
-                />
-              ))}
+          {loading ? (
+            [1, 2, 3, 4, 5, 6].map(i => <Skeleton key={i} />)
+          ) : notifications?.length ? (
+            notifications.map(notification => (
+              <NotificationItem
+                key={notification.id}
+                notification={notification}
+              />
+            ))
+          ) : (
+            <NotificationEmptyState />
+          )}
         </div>
       </main>
-      <footer className="py-4 flex justify-end">
-        <Button>Mark All as Read</Button>
-      </footer>
+      {showMarkAllAsRead ? (
+        <footer className="py-4 flex justify-end">
+          <Button onClick={() => clearNotifications("*")}>
+            Mark All as Read
+          </Button>
+        </footer>
+      ) : null}
 
       <NewPagination
         total={total}
@@ -93,11 +146,9 @@ const NotificationItem = ({ notification }) => {
         <ClaimNotification notification={notification} />
       ) : notification?.entity_type == "like" ? (
         <LikeNotification notification={notification} />
-      ):notification?.entity_type == "profile" ? (
+      ) : notification?.entity_type == "profile" ? (
         <ProfileApprove notification={notification} />
-      ) :
-
-      (
+      ) : (
         <div>
           <h3 className="text-lg font-medium">{notification.title}</h3>
           <p className="text-gray-500">{notification.body}</p>