From 786f5bee43ad373f454f790cb93f466ace3f10cc Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 06:14:29 -0400 Subject: [PATCH 01/10] feat: group by date --- src/components/AccountNotifications.tsx | 31 ++++++++++++------ src/components/NotificationRow.tsx | 37 +++++++++++++++++++++- src/components/RepositoryNotifications.tsx | 7 ++-- 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index 57dba6da8..13b51f6df 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -7,6 +7,7 @@ import { type FC, useState } from 'react'; 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'; @@ -33,6 +34,9 @@ export const AccountNotifications: FC = ( ), ); + // TODO Remove this + const groupByRepo = false; + const [showAccountNotifications, setShowAccountNotifications] = useState(true); @@ -85,18 +89,25 @@ export const AccountNotifications: FC = ( )} - {showAccountNotifications && - Object.values(groupedNotifications).map((repoNotifications) => { - const repoSlug = repoNotifications[0].repository.full_name; + {showAccountNotifications && groupByRepo + ? Object.values(groupedNotifications).map((repoNotifications) => { + const repoSlug = repoNotifications[0].repository.full_name; - return ( - + ); + }) + : notifications.map((notification) => ( + - ); - })} + ))} ); }; diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 5c7c86f19..24402fbc5 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -4,6 +4,7 @@ import { CommentIcon, FeedPersonIcon, IssueClosedIcon, + MarkGithubIcon, MilestoneIcon, ReadIcon, TagIcon, @@ -28,16 +29,22 @@ 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'; interface INotificationRow { notification: Notification; + showRepositoryName?: boolean; } export const NotificationRow: FC = ({ notification, + showRepositoryName = false, }: INotificationRow) => { const { settings, @@ -100,6 +107,9 @@ export const NotificationRow: FC = ({ 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 (
= ({ className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap" onClick={() => handleNotification()} > + {showRepositoryName && ( +
+ + {repoAvatarUrl ? ( + {`${repoSlug}'s + ) : ( + + )} + + openRepository(notification.repository)} + > + {repoSlug} + +
+ )} +
= ({ }, [repoNotifications, markRepoNotificationsDone]); const avatarUrl = repoNotifications[0].repository.owner.avatar_url; - const repoSlug = repoNotifications[0].repository.full_name; const [showRepositoryNotifications, setShowRepositoryNotifications] = useState(true); @@ -60,7 +59,7 @@ export const RepositoryNotifications: FC = ({ {`${repoSlug}'s ) : ( @@ -104,8 +103,8 @@ export const RepositoryNotifications: FC = ({
{showRepositoryNotifications && - repoNotifications.map((obj) => ( - + repoNotifications.map((notification) => ( + ))} ); From fe6ff872d6a4bed816bdfa99ef711c645f3d88dd Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 06:26:09 -0400 Subject: [PATCH 02/10] feat: group by date --- src/__mocks__/state-mocks.ts | 1 + src/components/AccountNotifications.tsx | 10 +++++----- src/components/NotificationRow.tsx | 4 ++-- src/context/App.tsx | 1 + src/routes/Settings.tsx | 17 +++++++++++++++++ src/types.ts | 1 + 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/__mocks__/state-mocks.ts b/src/__mocks__/state-mocks.ts index b68810171..90cd9c0ea 100644 --- 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.tsx b/src/components/AccountNotifications.tsx index 13b51f6df..095564984 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -3,7 +3,8 @@ 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'; @@ -22,6 +23,8 @@ export const AccountNotifications: FC = ( ) => { const { account, showAccountHostname, notifications } = props; + const { settings } = useContext(AppContext); + const groupedNotifications = Object.values( notifications.reduce( (acc: { [key: string]: Notification[] }, notification) => { @@ -34,9 +37,6 @@ export const AccountNotifications: FC = ( ), ); - // TODO Remove this - const groupByRepo = false; - const [showAccountNotifications, setShowAccountNotifications] = useState(true); @@ -89,7 +89,7 @@ export const AccountNotifications: FC = (
)} - {showAccountNotifications && groupByRepo + {showAccountNotifications && settings.groupByRepository ? Object.values(groupedNotifications).map((repoNotifications) => { const repoSlug = repoNotifications[0].repository.full_name; diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 24402fbc5..2e9d7c333 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -133,13 +133,13 @@ export const NotificationRow: FC = ({ > {showRepositoryName && (
{repoAvatarUrl ? ( {`${repoSlug}'s diff --git a/src/context/App.tsx b/src/context/App.tsx index a9b6c33b6..4f520b39d 100644 --- a/src/context/App.tsx +++ b/src/context/App.tsx @@ -62,6 +62,7 @@ export const defaultSettings: SettingsState = { delayNotificationState: false, showPills: true, keyboardShortcut: true, + groupByRepository: true, }; interface AppContextState { diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 2ae06c275..c31bacbbf 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -193,6 +193,23 @@ export const SettingsRoute: FC = () => {
} /> + + updateSetting('groupByRepository', evt.target.checked) + } + tooltip={ +
+
+ Group notifications by repository name. +
+
If unchecked will group by date.
+
+ } + /> + Date: Wed, 19 Jun 2024 06:35:40 -0400 Subject: [PATCH 03/10] feat: group by date --- src/components/AccountNotifications.test.tsx | 52 +- src/components/AccountNotifications.tsx | 1 - src/components/NotificationRow.test.tsx | 22 +- src/components/NotificationRow.tsx | 4 +- .../AccountNotifications.test.tsx.snap | 1208 ++++++++++++++++- .../NotificationRow.test.tsx.snap | 459 ++++++- src/context/App.test.tsx | 2 + .../__snapshots__/Settings.test.tsx.snap | 48 + 8 files changed, 1782 insertions(+), 14 deletions(-) diff --git a/src/components/AccountNotifications.test.tsx b/src/components/AccountNotifications.test.tsx index ff5e5bbe7..27673a4e5 100644 --- 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(); + const tree = render( + + + , + ); + 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( + + + , + ); expect(tree).toMatchSnapshot(); }); @@ -27,7 +49,11 @@ describe('components/AccountNotifications.tsx', () => { showAccountHostname: true, }; - const tree = render(); + const tree = render( + + + , + ); expect(tree).toMatchSnapshot(); }); @@ -41,7 +67,11 @@ describe('components/AccountNotifications.tsx', () => { }; await act(async () => { - render(); + render( + + + , + ); }); fireEvent.click(screen.getByTitle('Open Profile')); @@ -58,12 +88,20 @@ describe('components/AccountNotifications.tsx', () => { }; await act(async () => { - render(); + render( + + + , + ); }); fireEvent.click(screen.getByTitle('Hide account notifications')); - const tree = render(); + const tree = render( + + + , + ); expect(tree).toMatchSnapshot(); }); }); diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx index 095564984..bbe895ed4 100644 --- a/src/components/AccountNotifications.tsx +++ b/src/components/AccountNotifications.tsx @@ -105,7 +105,6 @@ export const AccountNotifications: FC = ( ))} diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx index 29f28aeba..ba917f8f9 100644 --- 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( + + + , + ); + 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 index 2e9d7c333..f5fd4ac61 100644 --- 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 = ({ notification, - showRepositoryName = false, }: INotificationRow) => { const { settings, @@ -131,7 +129,7 @@ export const NotificationRow: FC = ({ className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap" onClick={() => handleNotification()} > - {showRepositoryName && ( + {!settings.groupByRepository && (
+
+
+
+ + + + +
+
+ +
+
+
+
+ + + + +
+
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ I am a robot and this is a test! +
+
+ +
+ Updated +
+
+ 7 years ago +
+
+ + +
+
+
+
+ + + +
+
+
+
+ + + + +
+
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ Improve the UI +
+
+
+ +
+
+ Authored +
+
+ 7 years ago +
+
+
+
+
+ + + +
+
+
+ , + "container":
+
+
+ + + + +
+
+ +
+
+
+
+ + + + +
+
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ I am a robot and this is a test! +
+
+ +
+ Updated +
+
+ 7 years ago +
+
+ + +
+
+
+
+ + + +
+
+
+
+ + + + +
+
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ Improve the UI +
+
+
+ +
+
+ Authored +
+
+ 7 years ago +
+
+
+
+
+ + + +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`components/AccountNotifications.tsx should render itself (github.com with notifications) - group by repositories 1`] = ` { "asFragment": [Function], "baseElement": @@ -432,6 +1319,325 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
+
+
+ + + + +
+
+
+ I am a robot and this is a test! +
+
+ +
+ Updated +
+
+ 7 years ago +
+
+ + +
+
+
+
+ + + +
+
+
+
+ + + + +
+
+
+ Improve the UI +
+
+
+ +
+
+ Authored +
+
+ 7 years ago +
+
+
+
+
+ + + +
+
+
+
+
+ + + + +
+
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ I am a robot and this is a test! +
+
+ +
+ Updated +
+
+ 7 years ago +
+
+ + +
+
+
+
+ + + +
+
+
+ , + "container":
+
+
+ + + + +
+
+
+ + gitify-app/notifications-test's avatar + + + gitify-app/notifications-test + +
+
+ I am a robot and this is a test! +
+
+ +
+ Updated +
+
+ 7 years ago +
+
+ + +
+
+
+
+ + + +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`components/NotificationRow.tsx should render itself & its children - show repository name 1`] = ` { "asFragment": [Function], "baseElement": diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx index 0f6ec61b6..b2627fcdc 100644 --- a/src/context/App.test.tsx +++ b/src/context/App.test.tsx @@ -380,6 +380,7 @@ describe('context/App.tsx', () => { delayNotificationState: false, showPills: true, keyboardShortcut: true, + groupByRepository: true, } as SettingsState, }); }); @@ -432,6 +433,7 @@ describe('context/App.tsx', () => { delayNotificationState: false, showPills: true, keyboardShortcut: true, + groupByRepository: true, } as SettingsState, }); }); diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap index 35f748409..9305455a7 100644 --- a/src/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/routes/__snapshots__/Settings.test.tsx.snap @@ -369,6 +369,54 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
+
+
+
+ +
+
+ +
+
+
From 4dd3b8b39e158f94228a5b672ea832297d3f5961 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 06:40:15 -0400 Subject: [PATCH 04/10] feat: group by date --- src/components/NotificationRow.tsx | 5 ++++- .../AccountNotifications.test.tsx.snap | 16 ++++++++-------- .../__snapshots__/NotificationRow.test.tsx.snap | 8 ++++---- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index f5fd4ac61..47b68ff64 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -122,7 +122,10 @@ export const NotificationRow: FC = ({ className={cn('mr-3 flex w-5 items-center justify-center', iconColor)} title={notificationTitle} > - +
)} - {showAccountNotifications && settings.groupByRepository + {showAccountNotifications && groupByRepository ? Object.values(groupedNotifications).map((repoNotifications) => { const repoSlug = repoNotifications[0].repository.full_name; diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx index ba917f8f9..7c385824a 100644 --- a/src/components/NotificationRow.test.tsx +++ b/src/components/NotificationRow.test.tsx @@ -5,7 +5,7 @@ import { mockSettings, } from '../__mocks__/state-mocks'; import { AppContext } from '../context/App'; -import type { Link } from '../types'; +import { GroupBy, type Link } from '../types'; import type { Milestone, UserType } from '../typesGitHub'; import { mockSingleNotification } from '../utils/api/__mocks__/response-mocks'; import * as comms from '../utils/comms'; @@ -21,7 +21,7 @@ describe('components/NotificationRow.tsx', () => { jest.clearAllMocks(); }); - it('should render itself & its children - hide repository name', async () => { + it('should render itself & its children - group by date', async () => { jest .spyOn(global.Date, 'now') .mockImplementation(() => new Date('2024').valueOf()); @@ -33,7 +33,7 @@ describe('components/NotificationRow.tsx', () => { const tree = render( , @@ -41,7 +41,7 @@ describe('components/NotificationRow.tsx', () => { expect(tree).toMatchSnapshot(); }); - it('should render itself & its children - show repository name', async () => { + it('should render itself & its children - group by repositories', async () => { jest .spyOn(global.Date, 'now') .mockImplementation(() => new Date('2024').valueOf()); @@ -52,7 +52,9 @@ describe('components/NotificationRow.tsx', () => { }; const tree = render( - + , ); diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index f23d3f9d3..0b82bbb62 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -108,6 +108,8 @@ export const NotificationRow: FC = ({ const repoAvatarUrl = notification.repository.owner.avatar_url; const repoSlug = notification.repository.full_name; + const groupByRepository = settings.groupBy === 'REPOSITORY'; + return (
= ({ title={notificationTitle} >
@@ -132,7 +134,7 @@ export const NotificationRow: FC = ({ className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap" onClick={() => handleNotification()} > - {!settings.groupByRepository && ( + {!groupByRepository && (
@@ -5088,7 +5088,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - hi } `; -exports[`components/NotificationRow.tsx should render itself & its children - show repository name 1`] = ` +exports[`components/NotificationRow.tsx should render itself & its children - group by repositories 1`] = ` { "asFragment": [Function], "baseElement": diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx index b2627fcdc..d68d37ff8 100644 --- a/src/context/App.test.tsx +++ b/src/context/App.test.tsx @@ -380,7 +380,7 @@ describe('context/App.tsx', () => { delayNotificationState: false, showPills: true, keyboardShortcut: true, - groupByRepository: true, + groupBy: 'REPOSITORY', } as SettingsState, }); }); @@ -433,7 +433,7 @@ describe('context/App.tsx', () => { delayNotificationState: false, showPills: true, keyboardShortcut: true, - groupByRepository: true, + groupBy: 'REPOSITORY', } as SettingsState, }); }); diff --git a/src/context/App.tsx b/src/context/App.tsx index 4f520b39d..9ed3d2460 100644 --- a/src/context/App.tsx +++ b/src/context/App.tsx @@ -13,6 +13,7 @@ import { type AccountNotifications, type AuthState, type GitifyError, + GroupBy, type SettingsState, type Status, Theme, @@ -62,7 +63,7 @@ export const defaultSettings: SettingsState = { delayNotificationState: false, showPills: true, keyboardShortcut: true, - groupByRepository: true, + groupBy: GroupBy.REPOSITORY, }; interface AppContextState { diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx index 9ed06b1ef..5b17f864f 100644 --- a/src/routes/Settings.test.tsx +++ b/src/routes/Settings.test.tsx @@ -323,7 +323,7 @@ describe('routes/Settings.tsx', () => { ).toMatchSnapshot(); }); - it('should toggle the groupByRepository checkbox', async () => { + it('should change the groupBy radio group', async () => { await act(async () => { render( { ); }); - fireEvent.click( - screen.getByLabelText('Group notifications by repository'), - { - target: { checked: true }, - }, - ); + fireEvent.click(screen.getByLabelText('Date')); expect(updateSetting).toHaveBeenCalledTimes(1); - expect(updateSetting).toHaveBeenCalledWith('groupByRepository', false); + expect(updateSetting).toHaveBeenCalledWith('groupBy', 'DATE'); }); it('should toggle the markAsDoneOnOpen checkbox', async () => { diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index c31bacbbf..ea8c364bb 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -21,7 +21,7 @@ import { Checkbox } from '../components/fields/Checkbox'; import { RadioGroup } from '../components/fields/RadioGroup'; import { AppContext } from '../context/App'; import { BUTTON_CLASS_NAME } from '../styles/gitify'; -import { Theme } from '../types'; +import { GroupBy, Theme } from '../types'; import { getAppVersion, quitApp } from '../utils/comms'; import Constants from '../utils/constants'; import { @@ -193,23 +193,18 @@ export const SettingsRoute: FC = () => {
} /> - - updateSetting('groupByRepository', evt.target.checked) - } - tooltip={ -
-
- Group notifications by repository name. -
-
If unchecked will group by date.
-
- } + { + updateSetting('groupBy', evt.target.value); + }} /> -
- +
- + Repository + +
+
+ + +
diff --git a/src/types.ts b/src/types.ts index e2ce7e510..71bd888a9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -68,7 +68,7 @@ interface NotificationSettingsState { showBots: boolean; markAsDoneOnOpen: boolean; delayNotificationState: boolean; - groupByRepository: boolean; + groupBy: GroupBy; } interface SystemSettingsState { @@ -89,6 +89,11 @@ export enum Theme { DARK = 'DARK', } +export enum GroupBy { + REPOSITORY = 'REPOSITORY', + DATE = 'DATE', +} + export type RadioGroupItem = { label: string; value: string; From a48c9ec20a4bd58b4afef26d5dc519ca3e148bae Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 12:40:05 -0400 Subject: [PATCH 08/10] refactor: use radio group --- src/routes/Settings.test.tsx | 45 ++++--- src/routes/Settings.tsx | 24 ++-- .../__snapshots__/Settings.test.tsx.snap | 118 +++++++++--------- 3 files changed, 93 insertions(+), 94 deletions(-) diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx index 5b17f864f..d6c2a2f23 100644 --- a/src/routes/Settings.test.tsx +++ b/src/routes/Settings.test.tsx @@ -179,6 +179,28 @@ describe('routes/Settings.tsx', () => { }); describe('Notifications section', () => { + it('should change the groupBy radio group', async () => { + await act(async () => { + render( + + + + + , + ); + }); + + fireEvent.click(screen.getByLabelText('Date')); + + expect(updateSetting).toHaveBeenCalledTimes(1); + expect(updateSetting).toHaveBeenCalledWith('groupBy', 'DATE'); + }); it('should toggle the showOnlyParticipating checkbox', async () => { await act(async () => { render( @@ -323,29 +345,6 @@ describe('routes/Settings.tsx', () => { ).toMatchSnapshot(); }); - it('should change the groupBy radio group', async () => { - await act(async () => { - render( - - - - - , - ); - }); - - fireEvent.click(screen.getByLabelText('Date')); - - expect(updateSetting).toHaveBeenCalledTimes(1); - expect(updateSetting).toHaveBeenCalledWith('groupBy', 'DATE'); - }); - it('should toggle the markAsDoneOnOpen checkbox', async () => { await act(async () => { render( diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index ea8c364bb..71439b57e 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -145,6 +145,18 @@ export const SettingsRoute: FC = () => { Notifications + { + updateSetting('groupBy', evt.target.value); + }} + /> { } /> - { - updateSetting('groupBy', evt.target.value); - }} - /> Notifications +
+
+
+ +
+
+
+ + +
+
+ + +
+
+
+
@@ -369,65 +428,6 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
-
-
-
- -
-
-
- - -
-
- - -
-
-
-
From 5ffea7fdd53894f09ca6de3fd6bf419cab605633 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 12:48:52 -0400 Subject: [PATCH 09/10] refactor: use radio group --- .../__snapshots__/AccountNotifications.test.tsx.snap | 9 +++------ .../__snapshots__/NotificationRow.test.tsx.snap | 6 ++---- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap index c31252d8a..151909ab5 100644 --- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap +++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap @@ -128,9 +128,8 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi > gitify-app's avatar
gitify-app's avatar
gitify-app's avatar
gitify-app's avatar
gitify-app's avatar
Date: Wed, 19 Jun 2024 18:23:24 -0400 Subject: [PATCH 10/10] refactor: use avatar icon component --- src/components/NotificationRow.tsx | 15 ++++++--------- .../AccountNotifications.test.tsx.snap | 8 ++++---- .../__snapshots__/NotificationRow.test.tsx.snap | 4 ++-- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx index 32fc494c6..7a6d6f734 100644 --- a/src/components/NotificationRow.tsx +++ b/src/components/NotificationRow.tsx @@ -141,15 +141,12 @@ export const NotificationRow: FC = ({ title={repoSlug} > - {repoAvatarUrl ? ( - {`${repoSlug}'s - ) : ( - - )} + gitify-app/notifications-test's avatar @@ -297,7 +297,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi gitify-app/notifications-test's avatar @@ -515,7 +515,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi gitify-app/notifications-test's avatar @@ -711,7 +711,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi gitify-app/notifications-test's avatar diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap index 18fd5b3d5..afe757105 100644 --- a/src/components/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap @@ -4673,7 +4673,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr gitify-app/notifications-test's avatar @@ -4872,7 +4872,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr gitify-app/notifications-test's avatar