Merge 722d871 into 0027d84

gitify-app · Jun 19, 2024 · 65960f4 · 65960f4
2 parents 0027d84 + 722d871
commit 65960f4
Show file tree

Hide file tree

Showing 13 changed files with 1,888 additions and 23 deletions.
diff --git a/src/__mocks__/state-mocks.ts b/src/__mocks__/state-mocks.ts
@@ -84,6 +84,7 @@ export const mockSettings: SettingsState = {
   delayNotificationState: false,
   showPills: true,
   keyboardShortcut: true,
+  groupByRepository: true,
 };
 
 export const mockState: GitifyState = {

diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx
@@ -1,5 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { mockGitHubCloudAccount } from '../__mocks__/state-mocks';
+import { mockGitHubCloudAccount, mockSettings } from '../__mocks__/state-mocks';
+import { AppContext } from '../context/App';
 import { mockGitHubNotifications } from '../utils/api/__mocks__/response-mocks';
 import * as links from '../utils/links';
 import { AccountNotifications } from './AccountNotifications';
@@ -9,14 +10,35 @@ jest.mock('./RepositoryNotifications', () => ({
 }));
 
 describe('components/AccountNotifications.tsx', () => {
-  it('should render itself (github.com with notifications)', () => {
+  it('should render itself (github.com with notifications) - group by repositories', () => {
     const props = {
       account: mockGitHubCloudAccount,
       notifications: mockGitHubNotifications,
       showAccountHostname: true,
     };
 
-    const tree = render(<AccountNotifications {...props} />);
+    const tree = render(
+      <AppContext.Provider value={{ settings: mockSettings }}>
+        <AccountNotifications {...props} />
+      </AppContext.Provider>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself (github.com with notifications) - group by date', () => {
+    const props = {
+      account: mockGitHubCloudAccount,
+      notifications: mockGitHubNotifications,
+      showAccountHostname: true,
+    };
+
+    const tree = render(
+      <AppContext.Provider
+        value={{ settings: { ...mockSettings, groupByRepository: false } }}
+      >
+        <AccountNotifications {...props} />
+      </AppContext.Provider>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -27,7 +49,11 @@ describe('components/AccountNotifications.tsx', () => {
       showAccountHostname: true,
     };
 
-    const tree = render(<AccountNotifications {...props} />);
+    const tree = render(
+      <AppContext.Provider value={{ settings: mockSettings }}>
+        <AccountNotifications {...props} />
+      </AppContext.Provider>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -41,7 +67,11 @@ describe('components/AccountNotifications.tsx', () => {
     };
 
     await act(async () => {
-      render(<AccountNotifications {...props} />);
+      render(
+        <AppContext.Provider value={{ settings: mockSettings }}>
+          <AccountNotifications {...props} />
+        </AppContext.Provider>,
+      );
     });
 
     fireEvent.click(screen.getByTitle('Open Profile'));
@@ -58,12 +88,20 @@ describe('components/AccountNotifications.tsx', () => {
     };
 
     await act(async () => {
-      render(<AccountNotifications {...props} />);
+      render(
+        <AppContext.Provider value={{ settings: mockSettings }}>
+          <AccountNotifications {...props} />
+        </AppContext.Provider>,
+      );
     });
 
     fireEvent.click(screen.getByTitle('Hide account notifications'));
 
-    const tree = render(<AccountNotifications {...props} />);
+    const tree = render(
+      <AppContext.Provider value={{ settings: mockSettings }}>
+        <AccountNotifications {...props} />
+      </AppContext.Provider>,
+    );
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
@@ -3,10 +3,12 @@ import {
   ChevronLeftIcon,
   ChevronUpIcon,
 } from '@primer/octicons-react';
-import { type FC, useState } from 'react';
+import { type FC, useContext, useState } from 'react';
+import { AppContext } from '../context/App';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
+import { NotificationRow } from './NotificationRow';
 import { RepositoryNotifications } from './RepositoryNotifications';
 import { PlatformIcon } from './icons/PlatformIcon';
 
@@ -21,6 +23,8 @@ export const AccountNotifications: FC<IAccountNotifications> = (
 ) => {
   const { account, showAccountHostname, notifications } = props;
 
+  const { settings } = useContext(AppContext);
+
   const groupedNotifications = Object.values(
     notifications.reduce(
       (acc: { [key: string]: Notification[] }, notification) => {
@@ -85,18 +89,24 @@ export const AccountNotifications: FC<IAccountNotifications> = (
         </div>
       )}
 
-      {showAccountNotifications &&
-        Object.values(groupedNotifications).map((repoNotifications) => {
-          const repoSlug = repoNotifications[0].repository.full_name;
+      {showAccountNotifications && settings.groupByRepository
+        ? Object.values(groupedNotifications).map((repoNotifications) => {
+            const repoSlug = repoNotifications[0].repository.full_name;
 
-          return (
-            <RepositoryNotifications
-              key={repoSlug}
-              repoName={repoSlug}
-              repoNotifications={repoNotifications}
+            return (
+              <RepositoryNotifications
+                key={repoSlug}
+                repoName={repoSlug}
+                repoNotifications={repoNotifications}
+              />
+            );
+          })
+        : notifications.map((notification) => (
+            <NotificationRow
+              key={notification.id}
+              notification={notification}
             />
-          );
-        })}
+          ))}
     </>
   );
 };
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
@@ -21,7 +21,27 @@ describe('components/NotificationRow.tsx', () => {
     jest.clearAllMocks();
   });
 
-  it('should render itself & its children', async () => {
+  it('should render itself & its children - hide repository name', async () => {
+    jest
+      .spyOn(global.Date, 'now')
+      .mockImplementation(() => new Date('2024').valueOf());
+
+    const props = {
+      notification: mockSingleNotification,
+      account: mockGitHubCloudAccount,
+    };
+
+    const tree = render(
+      <AppContext.Provider
+        value={{ settings: { ...mockSettings, groupByRepository: false } }}
+      >
+        <NotificationRow {...props} />
+      </AppContext.Provider>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - show repository name', async () => {
     jest
       .spyOn(global.Date, 'now')
       .mockImplementation(() => new Date('2024').valueOf());

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
@@ -4,6 +4,7 @@ import {
   CommentIcon,
   FeedPersonIcon,
   IssueClosedIcon,
+  MarkGithubIcon,
   MilestoneIcon,
   ReadIcon,
   TagIcon,
@@ -28,7 +29,11 @@ import {
   getNotificationTypeIconColor,
   getPullRequestReviewIcon,
 } from '../utils/icons';
-import { openNotification, openUserProfile } from '../utils/links';
+import {
+  openNotification,
+  openRepository,
+  openUserProfile,
+} from '../utils/links';
 import { formatReason } from '../utils/reason';
 import { PillButton } from './buttons/PillButton';
 
@@ -100,6 +105,9 @@ export const NotificationRow: FC<INotificationRow> = ({
     notification.subject.linkedIssues?.length > 1 ? 'issues' : 'issue'
   } ${notification.subject?.linkedIssues?.join(', ')}`;
 
+  const repoAvatarUrl = notification.repository.owner.avatar_url;
+  const repoSlug = notification.repository.full_name;
+
   return (
     <div
       id={notification.id}
@@ -114,13 +122,41 @@ export const NotificationRow: FC<INotificationRow> = ({
         className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
         title={notificationTitle}
       >
-        <NotificationIcon size={16} aria-label={notification.subject.type} />
+        <NotificationIcon
+          size={settings.groupByRepository ? 16 : 20}
+          aria-label={notification.subject.type}
+        />
       </div>
 
       <div
         className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         onClick={() => handleNotification()}
       >
+        {!settings.groupByRepository && (
+          <div
+            className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
+            title={repoSlug}
+          >
+            <span>
+              {repoAvatarUrl ? (
+                <img
+                  className="size-4 rounded object-cover"
+                  src={repoAvatarUrl}
+                  alt={`${repoSlug}'s avatar`}
+                />
+              ) : (
+                <MarkGithubIcon size={16} />
+              )}
+            </span>
+            <span
+              className="cursor-pointer truncate opacity-90"
+              onClick={() => openRepository(notification.repository)}
+            >
+              {repoSlug}
+            </span>
+          </div>
+        )}
+
         <div
           className="mb-1 cursor-pointer truncate text-sm"
           role="main"