github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: notification read and snooze bugs (#2639)

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

* refactor: arranged imports

* fix: past snooze notifications coming in snooze tab
This commit is contained in:
Dakshesh Jain 2023-11-03 19:21:35 +05:30 committed by GitHub
parent c233e6e3b6
commit 91878fb3dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
web/components/notifications/notification-card.tsx
View File

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

9
web/components/notifications/notification-header.tsx
View File

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

9
web/components/notifications/notification-popover.tsx
View File

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

5
web/components/notifications/select-snooze-till-modal.tsx
View File

@ -2,14 +2,14 @@ import { Fragment, FC } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { Transition, Dialog } from "@headlessui/react"; import { Transition, Dialog } from "@headlessui/react";
import { X } from "lucide-react";
// date helper // date helper
import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper"; import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components // ui
import { Button, CustomSelect } from "@plane/ui"; import { Button, CustomSelect } from "@plane/ui";
import { CustomDatePicker } from "components/ui"; import { CustomDatePicker } from "components/ui";
import { X } from "lucide-react";
// types // types
import type { IUserNotification } from "types"; import type { IUserNotification } from "types";
@ -172,6 +172,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
onChange(val); 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" 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 noBorder
minDate={new Date()} minDate={new Date()}
/> />

2
web/hooks/use-user-notifications.tsx
View File

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