fix: notification read and snooze bugs (#2639)

* fix: marking notification as read doesn't remove it from un-read list

* refactor: arranged imports

* fix: past snooze notifications coming in snooze tab

web/components/notifications/notification-card.tsx

@@ -1,15 +1,13 @@
 import React from "react";
-
 import Image from "next/image";
 import { useRouter } from "next/router";
-
+import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
-
 // icons
 import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
-import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
+// constants
-
+import { snoozeOptions } from "constants/notification";
 // helper
 import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
 import {
@@ -19,14 +17,12 @@ import {
   renderShortDate,
   renderShortDateWithYearFormat,
 } from "helpers/date-time.helper";
-
 // type
 import type { IUserNotification } from "types";
-// constants
-import { snoozeOptions } from "constants/notification";
 
 type NotificationCardProps = {
   notification: IUserNotification;
+  isSnoozedTabOpen: boolean;
   markNotificationReadStatus: (notificationId: string) => Promise<void>;
   markNotificationReadStatusToggle: (notificationId: string) => Promise<void>;
   markNotificationArchivedStatus: (notificationId: string) => Promise<void>;
@@ -37,6 +33,7 @@ type NotificationCardProps = {
 export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
   const {
     notification,
+    isSnoozedTabOpen,
     markNotificationReadStatus,
     markNotificationReadStatusToggle,
     markNotificationArchivedStatus,
@@ -49,6 +46,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
 
   const { setToastAlert } = useToast();
 
+  if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null;
+
   return (
     <div
       onClick={() => {
@@ -92,7 +91,8 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         )}
       </div>
       <div className="space-y-2.5 w-full overflow-hidden">
-        { !notification.message ? <div className="text-sm w-full break-words">
+        {!notification.message ? (
+          <div className="text-sm w-full break-words">
             <span className="font-semibold">
               {notification.triggered_by_details.is_bot
                 ? notification.triggered_by_details.first_name
@@ -133,11 +133,12 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
                 "the issue and assigned it to you."
               )}
             </span>
-        </div> : <div className="text-sm w-full break-words">
+          </div>
-           <span className="semi-bold">
+        ) : (
-               { notification.message }
+          <div className="text-sm w-full break-words">
-           </span>
+            <span className="semi-bold">{notification.message}</span>
-         </div> }
+          </div>
+        )}
 
         <div className="flex justify-between gap-2 text-xs">
           <p className="text-custom-text-300">

web/components/notifications/notification-header.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-
-// components
-import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
-
-//icon
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
-
+// ui
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
-
 // type
 import type { NotificationType, NotificationCount } from "types";
 

web/components/notifications/notification-popover.tsx

@@ -1,13 +1,13 @@
 import React, { Fragment } from "react";
 import { Popover, Transition } from "@headlessui/react";
+import { Bell } from "lucide-react";
+import { observer } from "mobx-react-lite";
 // hooks
 import useUserNotification from "hooks/use-user-notifications";
 // components
 import { EmptyState } from "components/common";
 import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
 import { Loader, Tooltip } from "@plane/ui";
-// icons
-import { Bell } from "lucide-react";
 // images
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
@@ -15,7 +15,7 @@ import { getNumberCount } from "helpers/string.helper";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
-export const NotificationPopover = () => {
+export const NotificationPopover = observer(() => {
   const store: any = useMobxStore();
 
   const {
@@ -121,6 +121,7 @@ export const NotificationPopover = () => {
                           {notifications.map((notification) => (
                             <NotificationCard
                               key={notification.id}
+                              isSnoozedTabOpen={snoozed}
                               notification={notification}
                               markNotificationArchivedStatus={markNotificationArchivedStatus}
                               markNotificationReadStatus={markNotificationAsRead}
@@ -193,4 +194,4 @@ export const NotificationPopover = () => {
       </Popover>
     </>
   );
-};
+});

web/components/notifications/select-snooze-till-modal.tsx

@@ -2,14 +2,14 @@ import { Fragment, FC } from "react";
 import { useRouter } from "next/router";
 import { useForm, Controller } from "react-hook-form";
 import { Transition, Dialog } from "@headlessui/react";
+import { X } from "lucide-react";
 // date helper
 import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
 // hooks
 import useToast from "hooks/use-toast";
-// components
+// ui
 import { Button, CustomSelect } from "@plane/ui";
 import { CustomDatePicker } from "components/ui";
-import { X } from "lucide-react";
 // types
 import type { IUserNotification } from "types";
 
@@ -172,6 +172,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                               onChange(val);
                             }}
                             className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 focus:outline-none !text-sm"
+                            wrapperClassName="w-full"
                             noBorder
                             minDate={new Date()}
                           />

web/hooks/use-user-notifications.tsx

@@ -148,6 +148,8 @@ const useUserNotification = () => {
     handleReadMutation(isRead ? "unread" : "read");
     mutateNotification(notificationId, { read_at: isRead ? null : new Date() });
 
+    if (readNotification) removeNotification(notificationId);
+
     if (isRead) {
       await userNotificationServices
         .markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)