From 9eefb8bf971fefaf2c0d0d478f5e42188a77b488 Mon Sep 17 00:00:00 2001 From: dakshesh14 Date: Fri, 3 Nov 2023 16:15:09 +0530 Subject: [PATCH 1/3] fix: marking notification as read doesn't remove it from un-read list --- web/hooks/use-user-notifications.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web/hooks/use-user-notifications.tsx b/web/hooks/use-user-notifications.tsx index 866aaffb54e..a609213958f 100644 --- a/web/hooks/use-user-notifications.tsx +++ b/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) From 67aa865d37beca05b50ce4134f88078f1cce07c4 Mon Sep 17 00:00:00 2001 From: dakshesh14 Date: Fri, 3 Nov 2023 16:15:44 +0530 Subject: [PATCH 2/3] refactor: arranged imports --- .../notifications/notification-card.tsx | 99 +++++++++---------- .../notifications/notification-header.tsx | 9 +- .../notifications/notification-popover.tsx | 8 +- .../select-snooze-till-modal.tsx | 5 +- 4 files changed, 57 insertions(+), 64 deletions(-) diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx index 7518df92a58..819eda00030 100644 --- a/web/components/notifications/notification-card.tsx +++ b/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,11 +17,8 @@ import { renderShortDate, renderShortDateWithYearFormat, } from "helpers/date-time.helper"; - // type import type { IUserNotification } from "types"; -// constants -import { snoozeOptions } from "constants/notification"; type NotificationCardProps = { notification: IUserNotification; @@ -92,52 +87,54 @@ export const NotificationCard: React.FC = (props) => { )}
- { !notification.message ?
- - {notification.triggered_by_details.is_bot - ? notification.triggered_by_details.first_name - : notification.triggered_by_details.display_name}{" "} - - {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "} - {notification.data.issue_activity.field === "comment" - ? "commented" - : notification.data.issue_activity.field === "None" - ? null - : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "} - {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None" - ? "to" - : ""} - - {" "} - {notification.data.issue_activity.field !== "None" ? ( - notification.data.issue_activity.field !== "comment" ? ( - notification.data.issue_activity.field === "target_date" ? ( - renderShortDateWithYearFormat(notification.data.issue_activity.new_value) - ) : notification.data.issue_activity.field === "attachment" ? ( - "the issue" - ) : notification.data.issue_activity.field === "description" ? ( - stripAndTruncateHTML(notification.data.issue_activity.new_value, 55) + {!notification.message ? ( +
+ + {notification.triggered_by_details.is_bot + ? notification.triggered_by_details.first_name + : notification.triggered_by_details.display_name}{" "} + + {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "} + {notification.data.issue_activity.field === "comment" + ? "commented" + : notification.data.issue_activity.field === "None" + ? null + : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "} + {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None" + ? "to" + : ""} + + {" "} + {notification.data.issue_activity.field !== "None" ? ( + notification.data.issue_activity.field !== "comment" ? ( + notification.data.issue_activity.field === "target_date" ? ( + renderShortDateWithYearFormat(notification.data.issue_activity.new_value) + ) : notification.data.issue_activity.field === "attachment" ? ( + "the issue" + ) : notification.data.issue_activity.field === "description" ? ( + stripAndTruncateHTML(notification.data.issue_activity.new_value, 55) + ) : ( + notification.data.issue_activity.new_value + ) ) : ( - notification.data.issue_activity.new_value + + {`"`} + {notification.data.issue_activity.new_value.length > 55 + ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..." + : notification.data.issue_activity.issue_comment} + {`"`} + ) ) : ( - - {`"`} - {notification.data.issue_activity.new_value.length > 55 - ? notification?.data?.issue_activity?.issue_comment?.slice(0, 50) + "..." - : notification.data.issue_activity.issue_comment} - {`"`} - - ) - ) : ( - "the issue and assigned it to you." - )} - -
:
- - { notification.message } - -
} + "the issue and assigned it to you." + )} + +
+ ) : ( +
+ {notification.message} +
+ )}

diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx index 282756b98ad..44bce904900 100644 --- a/web/components/notifications/notification-header.tsx +++ b/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"; diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx index a8d5d1587fb..7fe1d6d44f3 100644 --- a/web/components/notifications/notification-popover.tsx +++ b/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 { @@ -193,4 +193,4 @@ export const NotificationPopover = () => { ); -}; +}); diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx index 8107f012f4d..4cc13a50d89 100644 --- a/web/components/notifications/select-snooze-till-modal.tsx +++ b/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 = (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()} /> From 83eaac6c22bb355d5ed3cc327a4136159a105c16 Mon Sep 17 00:00:00 2001 From: dakshesh14 Date: Fri, 3 Nov 2023 16:32:10 +0530 Subject: [PATCH 3/3] fix: past snooze notifications coming in snooze tab --- web/components/notifications/notification-card.tsx | 4 ++++ web/components/notifications/notification-popover.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx index 819eda00030..978d13f0ae3 100644 --- a/web/components/notifications/notification-card.tsx +++ b/web/components/notifications/notification-card.tsx @@ -22,6 +22,7 @@ import type { IUserNotification } from "types"; type NotificationCardProps = { notification: IUserNotification; + isSnoozedTabOpen: boolean; markNotificationReadStatus: (notificationId: string) => Promise; markNotificationReadStatusToggle: (notificationId: string) => Promise; markNotificationArchivedStatus: (notificationId: string) => Promise; @@ -32,6 +33,7 @@ type NotificationCardProps = { export const NotificationCard: React.FC = (props) => { const { notification, + isSnoozedTabOpen, markNotificationReadStatus, markNotificationReadStatusToggle, markNotificationArchivedStatus, @@ -44,6 +46,8 @@ export const NotificationCard: React.FC = (props) => { const { setToastAlert } = useToast(); + if (isSnoozedTabOpen && new Date(notification.snoozed_till!) < new Date()) return null; + return (

{ diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx index 7fe1d6d44f3..41977da9e61 100644 --- a/web/components/notifications/notification-popover.tsx +++ b/web/components/notifications/notification-popover.tsx @@ -121,6 +121,7 @@ export const NotificationPopover = observer(() => { {notifications.map((notification) => (