feat: group by date

gitify-app · Jun 19, 2024 · 9c29ba2 · 9c29ba2
1 parent fe6ff87
commit 9c29ba2
Show file tree

Hide file tree

Showing 8 changed files with 1,782 additions and 14 deletions.
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
@@ -105,7 +105,6 @@ export const AccountNotifications: FC<IAccountNotifications> = (
             <NotificationRow
               key={notification.id}
               notification={notification}
-              showRepositoryName={true}
             />
           ))}
     </>

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
@@ -39,12 +39,10 @@ import { PillButton } from './buttons/PillButton';
 
 interface INotificationRow {
   notification: Notification;
-  showRepositoryName?: boolean;
 }
 
 export const NotificationRow: FC<INotificationRow> = ({
   notification,
-  showRepositoryName = false,
 }: INotificationRow) => {
   const {
     settings,
@@ -131,7 +129,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         onClick={() => handleNotification()}
       >
-        {showRepositoryName && (
+        {!settings.groupByRepository && (
           <div
             className="mb-1 flex items-center gap-1 cursor-pointer truncate text-sm font-medium "
             title={repoSlug}