clear individual notification

Prototypr · Jun 21, 2024 · 878028d · 878028d
1 parent fb20567
commit 878028d
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 25 deletions.
diff --git a/components/Navbar/parts/NotificationButton.js b/components/Navbar/parts/NotificationButton.js
@@ -3,10 +3,15 @@ import ActiveIconButtonLink from "./ActiveIconButtonLink";
 import { useEffect, useState } from "react";
 
 import { getUserNotificationCount } from "@/lib/api";
+// import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import axios from "axios";
 
 const NotificationButton = ({ user }) => {
   const [notificationCount, setNotificationCount] = useState(0);
 
+  const searchParams = useSearchParams();
+
   useEffect(() => {
     const fetchNotificationCount = async () => {
       const nc = await getUserNotificationCount({
@@ -15,23 +20,61 @@ const NotificationButton = ({ user }) => {
         offset: 0,
       });
 
-      if (nc?.userNotifications?.count || nc?.userNotifications?.count===0) {
+      if (nc?.userNotifications?.count || nc?.userNotifications?.count === 0) {
         setNotificationCount(nc?.userNotifications?.count);
       }
     };
 
+    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(() => {
+            fetchNotificationCount()
+          }, 10);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+
+      // location.reload()
+    };
+
     if (user?.isLoggedIn) {
       fetchNotificationCount();
     }
-  }, [user?.isLoggedIn]);
+    if (user?.isLoggedIn && searchParams) {
+      // Check if there is a clearNotification query parameter in the router path
+      const clearNotification = searchParams?.get("clearNotification");
+      if (clearNotification) {
+        clearNotifications(clearNotification);
+      }
+    }
+
+  }, [user?.isLoggedIn, searchParams]);
 
   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 className="leading-none my-auto text-center">
+              {notificationCount > 10 ? "10+" : notificationCount}
+            </div>
           </div>
         )}
       </ActiveIconButtonLink>

diff --git a/components/Notifications/NotificationCard/ClaimNotification.js b/components/Notifications/NotificationCard/ClaimNotification.js
@@ -20,7 +20,7 @@ const ClaimNotification = ({ notification }) => {
               <>
                 You've been added as a creator of {" "}
                 <Link
-                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
                   className="font-bold hover:underline"
                 >
                   {notification.post.title}
@@ -34,7 +34,7 @@ const ClaimNotification = ({ notification }) => {
           <p className="text-sm text-gray-500 max-w-[42rem] line-clamp-2 mr-4">
             <Link
               className="hover:underline"
-              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
             >
               <span className="font-medium text-gray-700">
                 {notification.post.title}:
@@ -52,7 +52,7 @@ const ClaimNotification = ({ notification }) => {
       {notification.read == false || notification.read == "false" ? (
         <Link
           className="my-auto"
-          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
         >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>

diff --git a/components/Notifications/NotificationCard/CreatorBadgeNotification.js b/components/Notifications/NotificationCard/CreatorBadgeNotification.js
@@ -20,7 +20,7 @@ const CreatorBadgeNotification = ({ notification }) => {
               <>
                 You've been added as a creator of {" "}
                 <Link
-                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
                   className="font-bold hover:underline"
                 >
                   {notification.post.title}
@@ -34,7 +34,7 @@ const CreatorBadgeNotification = ({ notification }) => {
           <p className="text-sm text-gray-500 max-w-[42rem] line-clamp-2 mr-4">
             <Link
               className="hover:underline"
-              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
             >
               <span className="font-medium text-gray-700">
                 {notification.post.title}:
@@ -52,7 +52,7 @@ const CreatorBadgeNotification = ({ notification }) => {
       {notification.read == false || notification.read == "false" ? (
         <Link
           className="my-auto"
-          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
         >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>

diff --git a/components/Notifications/NotificationCard/InterviewInviteBadge.js b/components/Notifications/NotificationCard/InterviewInviteBadge.js
@@ -20,8 +20,8 @@ const InterviewInviteBadge = ({ notification }) => {
               <>
                 You're invited to answer an interview article about {" "}
                 <Link
-                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
-                  className="font-bold hover:underline"
+              href={{ pathname:`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`, query: { clearNotification: notification.id } }}
+              className="font-bold hover:underline"
                 >
                   {notification.post.title}
                 </Link>
@@ -34,7 +34,8 @@ const InterviewInviteBadge = ({ notification }) => {
           <p className="text-sm text-gray-500 max-w-[42rem] line-clamp-2 mr-4">
             <Link
               className="hover:underline"
-              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+              href={{ pathname:`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`, query: { clearNotification: notification.id } }}
+              // as={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
             >
               Get featured in the newsletter for telling your story about
               <span className="font-medium text-gray-700">
@@ -50,7 +51,7 @@ const InterviewInviteBadge = ({ notification }) => {
           </div>
           <div className="mt-4">
             <Link
-              href={`${process.env.NEXT_PUBLIC_HOME_URL}/toolbox/post/${notification?.post?.id}/interview`}
+              href={`${process.env.NEXT_PUBLIC_HOME_URL}/toolbox/post/${notification?.post?.id}/interview?clearNotification=${notification.id}`}
               className="font-bold hover:underline"
             >
               <button className="bg-gray-100 border font-normal border-gray-300/70 text-gray-600 px-3 py-1 text-sm rounded-lg">
@@ -63,8 +64,8 @@ const InterviewInviteBadge = ({ notification }) => {
       {notification.read == false || notification.read == "false" ? (
         <Link
           className="my-auto"
-          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
-        >
+          href={`${process.env.NEXT_PUBLIC_HOME_URL}/toolbox/post/${notification?.post?.id}/interview?clearNotification=${notification.id}`}
+          >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>
       ) : null}

diff --git a/components/Notifications/NotificationCard/LikeNotification.js b/components/Notifications/NotificationCard/LikeNotification.js
@@ -22,7 +22,7 @@ const LikeNotification = ({ notification }) => {
                   {notification?.notifiers?.map(notifier => {
                     return (
                       <Link
-                        href={`/people/${notifier.slug}`}
+                        href={`/people/${notifier.slug}?clearNotification=${notification.id}`}
                         className="hover:underline"
                       >
                         {notifier.firstName?notifier.firstName:notifier.username}
@@ -32,7 +32,7 @@ const LikeNotification = ({ notification }) => {
                 </span>{" "}
                 reacted to your post, {""}
                 <Link
-                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
                   className="font-bold hover:underline"
                 >
                   {notification.post.title}
@@ -46,7 +46,7 @@ const LikeNotification = ({ notification }) => {
           <p className="text-sm text-gray-500 max-w-[42rem] line-clamp-2 mr-4">
             <Link
               className="hover:underline"
-              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
             >
               <span className="font-medium text-gray-700">
                 {notification.post.title}:
@@ -64,7 +64,7 @@ const LikeNotification = ({ notification }) => {
       {notification.read == false || notification.read == "false" ? (
         <Link
           className="my-auto"
-          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
         >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>

diff --git a/components/Notifications/NotificationCard/PostNotification.js b/components/Notifications/NotificationCard/PostNotification.js
@@ -20,7 +20,7 @@ const PostNotification = ({ notification }) => {
               <>
                 Your post,{" "}
                 <Link
-                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+                  href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
                   className="font-bold hover:underline"
                 >
                   {notification.post.title}
@@ -34,7 +34,7 @@ const PostNotification = ({ notification }) => {
           <p className="text-sm text-gray-500 max-w-[42rem] line-clamp-2 mr-4">
             <Link
               className="hover:underline"
-              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+              href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
             >
               <span className="font-medium text-gray-700">
                 {notification.post.title}:
@@ -52,7 +52,7 @@ const PostNotification = ({ notification }) => {
       {notification.read == false || notification.read == "false" ? (
         <Link
           className="my-auto"
-          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}`}
+          href={`/${notification.post.type == "article" ? "post" : "toolbox"}/${notification?.post.slug}?clearNotification=${notification.id}`}
         >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>

diff --git a/components/Notifications/NotificationCard/ProfileApprove.js b/components/Notifications/NotificationCard/ProfileApprove.js
@@ -24,7 +24,7 @@ const ProfileApprove = ({ notification }) => {
             {notification.action_type == "approve" ? (
               <>
                 <Link
-                  href={`/account`}
+                  href={`/account?clearNotification=${notification.id}`}
                   className="font-bold hover:underline"
                 >
                   Your profile
@@ -36,7 +36,7 @@ const ProfileApprove = ({ notification }) => {
                 <>
 
                 <Link
-                  href={`/account`}
+                  href={`/account?clearNotification=${notification.id}`}
                   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={`/account`}
+          href={`/account?clearNotification=${notification.id}`}
         >
           <div className="rounded-full flex-none bg-blue-500 h-[9px] w-[9px] my-auto mr-2"></div>
         </Link>