feat: toggle repository notification (#1245)

* feat: toggle repository notification

* feat: toggle repository notification

Author: setchy

src/components/AccountNotifications.tsx

@@ -31,30 +31,31 @@ export const AccountNotifications = (props: IProps) => {
     ),
   );
 
-  const [showNotifications, setShowNotifications] = useState(true);
+  const [showAccountNotifications, setShowAccountNotifications] =
+    useState(true);
 
-  const toggleNotifications = () => {
-    setShowNotifications(!showNotifications);
+  const toggleAccountNotifications = () => {
+    setShowAccountNotifications(!showAccountNotifications);
   };
 
   const ChevronIcon =
     notifications.length === 0
       ? ChevronLeftIcon
-      : showNotifications
+      : showAccountNotifications
         ? ChevronDownIcon
         : ChevronUpIcon;
 
-  const toggleNotificationsLabel =
+  const toggleAccountNotificationsLabel =
     notifications.length === 0
       ? 'No notifications for account'
-      : showNotifications
+      : showAccountNotifications
         ? 'Hide account notifications'
         : 'Show account notifications';
 
   return (
     <>
       {showAccountHostname && (
-        <div className="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
+        <div className="group flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
           <div>
             <PlatformIcon type={account.platform} size={16} />
             <button
@@ -66,19 +67,20 @@ export const AccountNotifications = (props: IProps) => {
               @{account.user.login}
             </button>
           </div>
-          <div>
+          <div className="opacity-0 transition-opacity group-hover:opacity-80">
             <button
               type="button"
-              title={toggleNotificationsLabel}
-              onClick={toggleNotifications}
+              className="h-full hover:text-green-500 focus:outline-none"
+              title={toggleAccountNotificationsLabel}
+              onClick={toggleAccountNotifications}
             >
               <ChevronIcon size={20} />
             </button>
           </div>
         </div>
       )}
 
-      {showNotifications &&
+      {showAccountNotifications &&
         Object.values(groupedNotifications).map((repoNotifications) => {
           const repoSlug = repoNotifications[0].repository.full_name;
 

src/components/Repository.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { mockGitHubCloudAccount } from '../__mocks__/state-mocks';
 import { AppContext } from '../context/App';
 import type { Link } from '../types';
@@ -91,4 +91,15 @@ describe('components/Repository.tsx', () => {
     );
     expect(tree).toMatchSnapshot();
   });
+
+  it('should toggle account notifications visibility', async () => {
+    await act(async () => {
+      render(<RepositoryNotifications {...props} />);
+    });
+
+    fireEvent.click(screen.getByTitle('Hide repository notifications'));
+
+    const tree = render(<RepositoryNotifications {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/Repository.tsx

@@ -1,5 +1,11 @@
-import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react';
-import { type FC, useCallback, useContext } from 'react';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MarkGithubIcon,
+  ReadIcon,
+} from '@primer/octicons-react';
+import { type FC, useCallback, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
 import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
@@ -28,10 +34,25 @@ export const RepositoryNotifications: FC<IProps> = ({
   const avatarUrl = repoNotifications[0].repository.owner.avatar_url;
   const repoSlug = repoNotifications[0].repository.full_name;
 
+  const [showRepositoryNotifications, setShowRepositoryNotifications] =
+    useState(true);
+
+  const toggleRepositoryNotifications = () => {
+    setShowRepositoryNotifications(!showRepositoryNotifications);
+  };
+
+  const ChevronIcon = showRepositoryNotifications
+    ? ChevronDownIcon
+    : ChevronUpIcon;
+
+  const toggleRepositoryNotificationsLabel = showRepositoryNotifications
+    ? 'Hide repository notifications'
+    : 'Show repository notifications';
+
   return (
     <>
-      <div className="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
-        <div className="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
+      <div className="group flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
+        <div className="mt-0 flex flex-1 space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
           {avatarUrl ? (
             <img
               className="size-5 rounded"
@@ -51,6 +72,14 @@ export const RepositoryNotifications: FC<IProps> = ({
         </div>
 
         <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
+          <button
+            type="button"
+            className="h-full hover:text-green-500 focus:outline-none"
+            title={toggleRepositoryNotificationsLabel}
+            onClick={toggleRepositoryNotifications}
+          >
+            <ChevronIcon size={16} />
+          </button>
           <button
             type="button"
             className="h-full hover:text-green-500 focus:outline-none"
@@ -73,9 +102,10 @@ export const RepositoryNotifications: FC<IProps> = ({
         </div>
       </div>
 
-      {repoNotifications.map((obj) => (
-        <NotificationRow key={obj.id} notification={obj} />
-      ))}
+      {showRepositoryNotifications &&
+        repoNotifications.map((obj) => (
+          <NotificationRow key={obj.id} notification={obj} />
+        ))}
     </>
   );
 };