diff --git a/src/renderer/components/AccountNotifications.tsx b/src/renderer/components/AccountNotifications.tsx index 5cd015fba..cc9f6bdce 100644 --- a/src/renderer/components/AccountNotifications.tsx +++ b/src/renderer/components/AccountNotifications.tsx @@ -1,7 +1,4 @@ import { - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, FeedPersonIcon, GitPullRequestIcon, IssueOpenedIcon, @@ -11,6 +8,7 @@ import { AppContext } from '../context/App'; import { type Account, type GitifyError, Opacity, Size } from '../types'; import type { Notification } from '../typesGitHub'; import { cn } from '../utils/cn'; +import { getChevronDetails } from '../utils/helpers'; import { openAccountProfile, openGitHubIssues, @@ -63,19 +61,11 @@ export const AccountNotifications: FC = ( setShowAccountNotifications(!showAccountNotifications); }; - const ChevronIcon = - notifications.length === 0 - ? ChevronLeftIcon - : showAccountNotifications - ? ChevronDownIcon - : ChevronRightIcon; - - const toggleAccountNotificationsLabel = - notifications.length === 0 - ? 'No notifications for account' - : showAccountNotifications - ? 'Hide account notifications' - : 'Show account notifications'; + const Chevron = getChevronDetails( + hasNotifications, + showAccountNotifications, + 'account', + ); const isGroupByRepository = settings.groupBy === 'REPOSITORY'; @@ -136,8 +126,8 @@ export const AccountNotifications: FC = ( }} /> diff --git a/src/renderer/components/RepositoryNotifications.tsx b/src/renderer/components/RepositoryNotifications.tsx index 877958600..f48d64377 100644 --- a/src/renderer/components/RepositoryNotifications.tsx +++ b/src/renderer/components/RepositoryNotifications.tsx @@ -1,16 +1,13 @@ -import { - CheckIcon, - ChevronDownIcon, - ChevronRightIcon, - MarkGithubIcon, - ReadIcon, -} from '@primer/octicons-react'; +import { CheckIcon, MarkGithubIcon, ReadIcon } from '@primer/octicons-react'; import { type FC, type MouseEvent, useContext, useState } from 'react'; import { AppContext } from '../context/App'; import { Opacity, Size } from '../types'; import type { Notification } from '../typesGitHub'; import { cn } from '../utils/cn'; -import { isMarkAsDoneFeatureSupported } from '../utils/helpers'; +import { + getChevronDetails, + isMarkAsDoneFeatureSupported, +} from '../utils/helpers'; import { openRepository } from '../utils/links'; import { HoverGroup } from './HoverGroup'; import { NotificationRow } from './NotificationRow'; @@ -39,13 +36,11 @@ export const RepositoryNotifications: FC = ({ setShowRepositoryNotifications(!showRepositoryNotifications); }; - const ChevronIcon = showRepositoryNotifications - ? ChevronDownIcon - : ChevronRightIcon; - - const toggleRepositoryNotificationsLabel = showRepositoryNotifications - ? 'Hide repository notifications' - : 'Show repository notifications'; + const Chevron = getChevronDetails( + true, + showRepositoryNotifications, + 'repository', + ); return ( <> @@ -108,8 +103,8 @@ export const RepositoryNotifications: FC = ({ }} /> diff --git a/src/renderer/types.ts b/src/renderer/types.ts index 8ddfd126b..715d77e60 100644 --- a/src/renderer/types.ts +++ b/src/renderer/types.ts @@ -184,3 +184,8 @@ export enum Size { LARGE = 18, XLARGE = 20, } + +export type Chevron = { + icon: FC; + label: string; +}; diff --git a/src/renderer/utils/helpers.test.ts b/src/renderer/utils/helpers.test.ts index 2ab16c3a5..3656aaf6b 100644 --- a/src/renderer/utils/helpers.test.ts +++ b/src/renderer/utils/helpers.test.ts @@ -5,6 +5,11 @@ import { mockPersonalAccessTokenAccount, } from '../__mocks__/state-mocks'; +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from '@primer/octicons-react'; import log from 'electron-log'; import { defaultSettings } from '../context/App'; import type { Hostname, Link, SettingsState } from '../types'; @@ -19,6 +24,7 @@ import { formatNotificationUpdatedAt, generateGitHubWebUrl, generateNotificationReferrerId, + getChevronDetails, getFilterCount, getPlatformFromHostname, isEnterpriseServerHost, @@ -629,4 +635,23 @@ describe('renderer/utils/helpers.ts', () => { expect(getFilterCount(settings)).toBe(1); }); }); + + describe('getChevronDetails', () => { + it('should return correct chevron details', () => { + expect(getChevronDetails(true, true, 'account')).toEqual({ + icon: ChevronDownIcon, + label: 'Hide account notifications', + }); + + expect(getChevronDetails(true, false, 'account')).toEqual({ + icon: ChevronRightIcon, + label: 'Show account notifications', + }); + + expect(getChevronDetails(false, false, 'account')).toEqual({ + icon: ChevronLeftIcon, + label: 'No notifications for account', + }); + }); + }); }); diff --git a/src/renderer/utils/helpers.ts b/src/renderer/utils/helpers.ts index e93142bd9..4014f56cd 100644 --- a/src/renderer/utils/helpers.ts +++ b/src/renderer/utils/helpers.ts @@ -1,7 +1,12 @@ +import { + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, +} from '@primer/octicons-react'; import { formatDistanceToNowStrict, parseISO } from 'date-fns'; import log from 'electron-log'; import { defaultSettings } from '../context/App'; -import type { Account, Hostname, Link, SettingsState } from '../types'; +import type { Account, Chevron, Hostname, Link, SettingsState } from '../types'; import type { Notification } from '../typesGitHub'; import { getHtmlUrl, getLatestDiscussion } from './api/client'; import type { PlatformType } from './auth/types'; @@ -209,3 +214,28 @@ export function getFilterCount(settings: SettingsState): number { return count; } + +export function getChevronDetails( + hasNotifications: boolean, + isVisible: boolean, + type: 'account' | 'repository', +): Chevron { + if (!hasNotifications) { + return { + icon: ChevronLeftIcon, + label: `No notifications for ${type}`, + }; + } + + if (isVisible) { + return { + icon: ChevronDownIcon, + label: `Hide ${type} notifications`, + }; + } + + return { + icon: ChevronRightIcon, + label: `Show ${type} notifications`, + }; +}