plane/web/components/notifications/notification-header.tsx

import React from "react";

// components
import { CustomMenu, Icon, Tooltip } from "components/ui";
// helpers
import { getNumberCount } from "helpers/string.helper";

// type
import type { NotificationType, NotificationCount } from "types";

type NotificationHeaderProps = {
  notificationCount?: NotificationCount | null;
  notificationMutate: () => void;
  closePopover: () => void;
  isRefreshing?: boolean;
  snoozed: boolean;
  archived: boolean;
  readNotification: boolean;
  selectedTab: NotificationType;
  setSnoozed: React.Dispatch<React.SetStateAction<boolean>>;
  setArchived: React.Dispatch<React.SetStateAction<boolean>>;
  setReadNotification: React.Dispatch<React.SetStateAction<boolean>>;
  setSelectedTab: React.Dispatch<React.SetStateAction<NotificationType>>;
  markAllNotificationsAsRead: () => Promise<void>;
};

export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) => {
  const {
    notificationCount,
    notificationMutate,
    closePopover,
    isRefreshing,
    snoozed,
    archived,
    readNotification,
    selectedTab,
    setSnoozed,
    setArchived,
    setReadNotification,
    setSelectedTab,
    markAllNotificationsAsRead,
  } = props;

  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_issues,
    },
  ];

  return (
    <>
      <div className="flex items-center justify-between px-5 pt-5">
        <h2 className="text-xl font-semibold mb-2">Notifications</h2>
        <div className="flex gap-x-4 justify-center items-center text-custom-text-200">
          <Tooltip tooltipContent="Refresh">
            <button
              type="button"
              onClick={() => {
                notificationMutate();
              }}
            >
              <Icon iconName="refresh" className={`${isRefreshing ? "animate-spin" : ""}`} />
            </button>
          </Tooltip>
          <Tooltip tooltipContent="Unread notifications">
            <button
              type="button"
              onClick={() => {
                setSnoozed(false);
                setArchived(false);
                setReadNotification((prev) => !prev);
              }}
            >
              <Icon iconName="filter_list" />
            </button>
          </Tooltip>
          <CustomMenu
            customButton={
              <div className="grid place-items-center ">
                <Icon iconName="more_vert" />
              </div>
            }
          >
            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
              <div className="flex items-center gap-2">
                <Icon iconName="done_all" />
                Mark all as read
              </div>
            </CustomMenu.MenuItem>
            <CustomMenu.MenuItem
              renderAs="button"
              onClick={() => {
                setArchived(false);
                setReadNotification(false);
                setSnoozed((prev) => !prev);
              }}
            >
              <div className="flex items-center gap-2">
                <Icon iconName="schedule" />
                Show snoozed
              </div>
            </CustomMenu.MenuItem>
            <CustomMenu.MenuItem
              renderAs="button"
              onClick={() => {
                setSnoozed(false);
                setReadNotification(false);
                setArchived((prev) => !prev);
              }}
            >
              <div className="flex items-center gap-2">
                <Icon iconName="archive" />
                Show archived
              </div>
            </CustomMenu.MenuItem>
          </CustomMenu>
          <Tooltip tooltipContent="Close">
            <button type="button" onClick={() => closePopover()}>
              <Icon iconName="close" />
            </button>
          </Tooltip>
        </div>
      </div>
      <div className="border-b border-custom-border-300 w-full px-5 mt-5">
        {snoozed || archived || readNotification ? (
          <button
            type="button"
            onClick={() => {
              setSnoozed(false);
              setArchived(false);
              setReadNotification(false);
            }}
          >
            <h4 className="flex items-center gap-2 pb-4">
              <Icon iconName="arrow_back" />
              <span className="ml-2 font-medium">
                {snoozed
                  ? "Snoozed Notifications"
                  : readNotification
                  ? "Unread Notifications"
                  : "Archived Notifications"}
              </span>
            </h4>
          </button>
        ) : (
          <nav className="flex space-x-5 overflow-x-auto" aria-label="Tabs">
            {notificationTabs.map((tab) => (
              <button
                type="button"
                key={tab.value}
                onClick={() => setSelectedTab(tab.value)}
                className={`whitespace-nowrap border-b-2 pb-4 px-1 text-sm font-medium outline-none ${
                  tab.value === selectedTab
                    ? "border-custom-primary-100 text-custom-primary-100"
                    : "border-transparent text-custom-text-200"
                }`}
              >
                {tab.label}
                {tab.unreadCount && tab.unreadCount > 0 ? (
                  <span
                    className={`ml-2 rounded-full text-xs px-2 py-0.5 ${
                      tab.value === selectedTab
                        ? "bg-custom-primary-100 text-white"
                        : "bg-custom-background-80 text-custom-text-200"
                    }`}
                  >
                    {getNumberCount(tab.unreadCount)}
                  </span>
                ) : null}
              </button>
            ))}
          </nav>
        )}
      </div>
    </>
  );
};