forked from github/plane
16a7bd3bda
* feat: added new issue subscriber table
* dev: notification model
* feat: added CRUD operation for issue subscriber
* Revert "feat: added CRUD operation for issue subscriber"
This reverts commit b22e062576.
* feat: added CRUD operation for issue subscriber
* dev: notification models and operations
* dev: remove delete endpoint response data
* dev: notification endpoints and fix bg worker for saving notifications
* feat: added list and unsubscribe function in issue subscriber
* dev: filter by snoozed and response update for list and permissions
* dev: update issue notifications
* dev: notification segregation
* dev: update notifications
* dev: notification filtering
* dev: add issue name in notifications
* dev: notification new endpoints
* fix: pushing local settings
* feat: notification workflow setup and made basic UI
* style: improved UX with toast alerts and other interactions
refactor: changed classnames according to new theme structure, changed all icons to material icons
* feat: showing un-read notification count
* feat: not showing 'subscribe' button on issue created by user & assigned to user
not showing 'Create by you' for view & guest of the workspace
---------
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
294 lines
12 KiB
TypeScript
294 lines
12 KiB
TypeScript
import React, { Fragment } from "react";
|
|
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/router";
|
|
|
|
// hooks
|
|
import useTheme from "hooks/use-theme";
|
|
|
|
import { Popover, Transition } from "@headlessui/react";
|
|
|
|
// hooks
|
|
import useWorkspaceMembers from "hooks/use-workspace-members";
|
|
import useUserNotification from "hooks/use-user-notifications";
|
|
|
|
// components
|
|
import { Spinner, Icon } from "components/ui";
|
|
import { SnoozeNotificationModal, NotificationCard } from "components/notifications";
|
|
|
|
// helpers
|
|
import { getNumberCount } from "helpers/string.helper";
|
|
|
|
// type
|
|
import type { NotificationType } from "types";
|
|
|
|
export const NotificationPopover = () => {
|
|
const {
|
|
notifications,
|
|
archived,
|
|
readNotification,
|
|
selectedNotificationForSnooze,
|
|
selectedTab,
|
|
setArchived,
|
|
setReadNotification,
|
|
setSelectedNotificationForSnooze,
|
|
setSelectedTab,
|
|
setSnoozed,
|
|
snoozed,
|
|
notificationsMutate,
|
|
markNotificationArchivedStatus,
|
|
markNotificationReadStatus,
|
|
markSnoozeNotification,
|
|
notificationCount,
|
|
totalNotificationCount,
|
|
} = useUserNotification();
|
|
|
|
const router = useRouter();
|
|
const { workspaceSlug } = router.query;
|
|
|
|
const { isOwner, isMember } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
|
|
|
|
// theme context
|
|
const { collapsed: sidebarCollapse } = useTheme();
|
|
|
|
const notificationTabs: Array<{
|
|
label: string;
|
|
value: NotificationType;
|
|
unreadCount?: number;
|
|
}> = [
|
|
{
|
|
label: "My Issues",
|
|
value: "assigned",
|
|
unreadCount: notificationCount?.my_issues,
|
|
},
|
|
{
|
|
label: "Created by me",
|
|
value: "created",
|
|
unreadCount: notificationCount?.created_issues,
|
|
},
|
|
{
|
|
label: "Subscribed",
|
|
value: "watching",
|
|
unreadCount: notificationCount?.watching_notifications,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<SnoozeNotificationModal
|
|
isOpen={selectedNotificationForSnooze !== null}
|
|
onClose={() => setSelectedNotificationForSnooze(null)}
|
|
onSubmit={markSnoozeNotification}
|
|
notification={
|
|
notifications?.find(
|
|
(notification) => notification.id === selectedNotificationForSnooze
|
|
) || null
|
|
}
|
|
onSuccess={() => {
|
|
notificationsMutate();
|
|
setSelectedNotificationForSnooze(null);
|
|
}}
|
|
/>
|
|
<Popover className="relative w-full">
|
|
{({ open: isActive, close: closePopover }) => (
|
|
<>
|
|
<Popover.Button
|
|
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
|
|
isActive
|
|
? "bg-custom-primary-100/10 text-custom-primary-100"
|
|
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
|
} ${sidebarCollapse ? "justify-center" : ""}`}
|
|
>
|
|
<Icon iconName="notifications" />
|
|
{sidebarCollapse ? null : <span>Notifications</span>}
|
|
{totalNotificationCount && totalNotificationCount > 0 ? (
|
|
<span className="ml-auto bg-custom-primary-300 rounded-full text-xs text-white px-1.5">
|
|
{getNumberCount(totalNotificationCount)}
|
|
</span>
|
|
) : null}
|
|
</Popover.Button>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel className="absolute bg-custom-background-100 flex flex-col left-0 md:left-full ml-8 z-10 top-0 pt-5 md:w-[36rem] w-[20rem] h-[27rem] border border-custom-background-90 shadow-lg rounded">
|
|
<div className="flex justify-between items-center md:px-6 px-2">
|
|
<h2 className="text-custom-sidebar-text-100 text-lg font-semibold mb-2">
|
|
Notifications
|
|
</h2>
|
|
<div className="flex gap-x-2 justify-center items-center">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
notificationsMutate();
|
|
const target = e.target as HTMLButtonElement;
|
|
target?.classList.add("animate-spin");
|
|
setTimeout(() => {
|
|
target?.classList.remove("animate-spin");
|
|
}, 1000);
|
|
}}
|
|
>
|
|
<Icon iconName="refresh" className="h-6 w-6 text-custom-text-300" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSnoozed(false);
|
|
setArchived(false);
|
|
setReadNotification((prev) => !prev);
|
|
}}
|
|
>
|
|
<Icon iconName="filter_list" className="h-6 w-6 text-custom-text-300" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setArchived(false);
|
|
setReadNotification(false);
|
|
setSnoozed((prev) => !prev);
|
|
}}
|
|
>
|
|
<Icon iconName="schedule" className="h-6 w-6 text-custom-text-300" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSnoozed(false);
|
|
setReadNotification(false);
|
|
setArchived((prev) => !prev);
|
|
}}
|
|
>
|
|
<Icon iconName="archive" className="h-6 w-6 text-custom-text-300" />
|
|
</button>
|
|
<button type="button" onClick={() => closePopover()}>
|
|
<Icon iconName="close" className="h-6 w-6 text-custom-text-300" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-col items-center">
|
|
{snoozed || archived || readNotification ? (
|
|
<div className="w-full mb-3">
|
|
<div className="flex flex-col flex-1 px-2 md:px-6 overflow-y-auto">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSnoozed(false);
|
|
setArchived(false);
|
|
setReadNotification(false);
|
|
}}
|
|
>
|
|
<h4 className="text-custom-text-300 text-center flex items-center">
|
|
<Icon iconName="arrow_back" className="h-5 w-5 text-custom-text-300" />
|
|
<span className="ml-2 font-semibold">
|
|
{snoozed
|
|
? "Snoozed Notifications"
|
|
: readNotification
|
|
? "Read Notifications"
|
|
: "Archived Notifications"}
|
|
</span>
|
|
</h4>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="border-b border-custom-border-300 md:px-6 px-2 w-full">
|
|
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
|
|
{notificationTabs.map((tab) =>
|
|
tab.value === "created" ? (
|
|
isMember || isOwner ? (
|
|
<button
|
|
type="button"
|
|
key={tab.value}
|
|
onClick={() => setSelectedTab(tab.value)}
|
|
className={`whitespace-nowrap border-b-2 pb-4 px-1 text-sm font-medium ${
|
|
tab.value === selectedTab
|
|
? "border-custom-primary-100 text-custom-primary-100"
|
|
: "border-transparent text-custom-text-500 hover:border-custom-border-300 hover:text-custom-text-200"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{tab.unreadCount && tab.unreadCount > 0 ? (
|
|
<span className="ml-3 bg-custom-background-1000/5 rounded-full text-custom-text-100 text-xs px-1.5">
|
|
{getNumberCount(tab.unreadCount)}
|
|
</span>
|
|
) : null}
|
|
</button>
|
|
) : null
|
|
) : (
|
|
<button
|
|
type="button"
|
|
key={tab.value}
|
|
onClick={() => setSelectedTab(tab.value)}
|
|
className={`whitespace-nowrap border-b-2 pb-4 px-1 text-sm font-medium ${
|
|
tab.value === selectedTab
|
|
? "border-custom-primary-100 text-custom-primary-100"
|
|
: "border-transparent text-custom-text-500 hover:border-custom-border-300 hover:text-custom-text-200"
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
{tab.unreadCount && tab.unreadCount > 0 ? (
|
|
<span className="ml-3 bg-custom-background-1000/5 rounded-full text-custom-text-100 text-xs px-1.5">
|
|
{getNumberCount(tab.unreadCount)}
|
|
</span>
|
|
) : null}
|
|
</button>
|
|
)
|
|
)}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="w-full flex-1 overflow-y-auto">
|
|
{notifications ? (
|
|
notifications.filter(
|
|
(notification) => notification.data.issue_activity.field !== "None"
|
|
).length > 0 ? (
|
|
notifications.map((notification) => (
|
|
<NotificationCard
|
|
key={notification.id}
|
|
notification={notification}
|
|
markNotificationArchivedStatus={markNotificationArchivedStatus}
|
|
markNotificationReadStatus={markNotificationReadStatus}
|
|
setSelectedNotificationForSnooze={setSelectedNotificationForSnooze}
|
|
markSnoozeNotification={markSnoozeNotification}
|
|
/>
|
|
))
|
|
) : (
|
|
<div className="flex flex-col w-full h-full justify-center items-center">
|
|
<Image
|
|
src="/empty-state/empty-notification.svg"
|
|
alt="Empty"
|
|
width={200}
|
|
height={200}
|
|
layout="fixed"
|
|
/>
|
|
<h4 className="text-custom-text-300 text-lg font-semibold">
|
|
You{"'"}re updated with all the notifications
|
|
</h4>
|
|
<p className="text-custom-text-300 text-sm mt-2">
|
|
You have read all the notifications.
|
|
</p>
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="flex w-full h-full justify-center items-center">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
</>
|
|
);
|
|
};
|