RepositoryNotifications.tsx

import { type FC, type MouseEvent, useState } from 'react';

import { CheckIcon, ReadIcon } from '@primer/octicons-react';
import { Button, Stack } from '@primer/react';

import { useAppContext } from '../../hooks/useAppContext';

import { HoverButton } from '../primitives/HoverButton';
import { HoverGroup } from '../primitives/HoverGroup';

import { type GitifyNotification, Opacity, Size } from '../../types';

import { isMarkAsDoneFeatureSupported } from '../../utils/api/features';
import { shouldRemoveNotificationsFromState } from '../../utils/notifications/remove';
import { openRepository } from '../../utils/system/links';
import { cn } from '../../utils/ui/cn';
import { getChevronDetails } from '../../utils/ui/display';
import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
import { NotificationRow } from './NotificationRow';

export interface RepositoryNotificationsProps {
  repoNotifications: GitifyNotification[];
  repoName: string;
}

export const RepositoryNotifications: FC<RepositoryNotificationsProps> = ({
  repoName,
  repoNotifications,
}) => {
  const { settings, markNotificationsAsRead, markNotificationsAsDone } =
    useAppContext();

  const [shouldAnimateRepositoryExit, setShouldAnimateRepositoryExit] =
    useState(false);
  const [
    isRepositoryNotificationsVisible,
    setIsRepositoryNotificationsVisible,
  ] = useState(true);

  const avatarUrl = repoNotifications[0].repository.owner.avatarUrl;
  const shouldAnimateExit = shouldRemoveNotificationsFromState(settings);

  const actionRepositoryInteraction = () => {
    openRepository(repoNotifications[0].repository);
  };

  const actionMarkAsDone = () => {
    setShouldAnimateRepositoryExit(shouldAnimateExit);
    markNotificationsAsDone(repoNotifications);
  };

  const actionMarkAsRead = () => {
    setShouldAnimateRepositoryExit(shouldAnimateExit);
    markNotificationsAsRead(repoNotifications);
  };

  const actionToggleRepositoryNotifications = () => {
    setIsRepositoryNotificationsVisible(!isRepositoryNotificationsVisible);
  };

  const areAllRepoNotificationsRead = repoNotifications.every(
    (notification) => !notification.unread,
  );

  const Chevron = getChevronDetails(
    true,
    isRepositoryNotificationsVisible,
    'repository',
  );

  return (
    <>
      <Stack
        className={cn(
          'group relative pr-1 py-0.5',
          'bg-gitify-repository',
          shouldAnimateRepositoryExit &&
            'translate-x-full opacity-0 transition duration-350 ease-in-out',
          areAllRepoNotificationsRead && Opacity.READ,
        )}
        direction="horizontal"
        onClick={actionToggleRepositoryNotifications}
      >
        <Button
          alignContent="center"
          count={repoNotifications.length}
          data-testid="open-repository"
          onClick={(event: MouseEvent<HTMLElement>) => {
            // Don't trigger onClick of parent element.
            event.stopPropagation();
            actionRepositoryInteraction();
          }}
          title="Open repository ↗"
          variant="invisible"
        >
          <AvatarWithFallback
            alt={repoName}
            name={repoName}
            size={Size.LARGE}
            src={avatarUrl}
            userType={repoNotifications[0].repository.owner.type}
          />
        </Button>

        {!shouldAnimateRepositoryExit && (
          <HoverGroup bgColor="group-hover:bg-gitify-repository">
            <HoverButton
              action={actionMarkAsRead}
              enabled={!areAllRepoNotificationsRead}
              icon={ReadIcon}
              label="Mark repository as read"
              testid="repository-mark-as-read"
            />

            <HoverButton
              action={actionMarkAsDone}
              enabled={
                isMarkAsDoneFeatureSupported(repoNotifications[0].account) &&
                !areAllRepoNotificationsRead
              }
              icon={CheckIcon}
              label="Mark repository as done"
              testid="repository-mark-as-done"
            />

            <HoverButton
              action={actionToggleRepositoryNotifications}
              icon={Chevron.icon}
              label={Chevron.label}
              testid="repository-toggle"
            />
          </HoverGroup>
        )}
      </Stack>

      {isRepositoryNotificationsVisible &&
        repoNotifications.map((notification) => (
          <NotificationRow
            isRepositoryAnimatingExit={shouldAnimateRepositoryExit}
            key={notification.id}
            notification={notification}
          />
        ))}
    </>
  );
};