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"; // images import emptyNotification from "public/empty-state/notification.svg"; // helpers import { getNumberCount } from "helpers/string.helper"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; export const NotificationPopover = observer(() => { const store: any = useMobxStore(); const { notifications, archived, readNotification, selectedNotificationForSnooze, selectedTab, setArchived, setReadNotification, setSelectedNotificationForSnooze, setSelectedTab, setSnoozed, snoozed, notificationMutate, markNotificationArchivedStatus, markNotificationReadStatus, markNotificationAsRead, markSnoozeNotification, notificationCount, totalNotificationCount, setSize, isLoadingMore, hasMore, isRefreshing, setFetchNotifications, markAllNotificationsAsRead, } = useUserNotification(); return ( <> setSelectedNotificationForSnooze(null)} onSubmit={markSnoozeNotification} notification={notifications?.find((notification) => notification.id === selectedNotificationForSnooze) || null} onSuccess={() => { setSelectedNotificationForSnooze(null); }} /> {({ open: isActive, close: closePopover }) => { if (isActive) setFetchNotifications(true); return ( <> {store?.theme?.sidebarCollapsed ? null : Notifications} {totalNotificationCount && totalNotificationCount > 0 ? ( store?.theme?.sidebarCollapsed ? ( ) : ( {getNumberCount(totalNotificationCount)} ) ) : null} {notifications ? ( notifications.length > 0 ? (
{notifications.map((notification) => ( ))}
{isLoadingMore && (
Loading...

Loading notifications

)} {hasMore && !isLoadingMore && ( )}
) : (
) ) : ( )}
); }}
); });