refactor: chevron helper (#1574)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

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<IAccountNotifications> = (
     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<IAccountNotifications> = (
               }}
             />
             <InteractionButton
-              title={toggleAccountNotificationsLabel}
-              icon={ChevronIcon}
+              title={Chevron.label}
+              icon={Chevron.icon}
               size={Size.SMALL}
               onClick={toggleAccountNotifications}
             />

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<IRepositoryNotifications> = ({
     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<IRepositoryNotifications> = ({
               }}
             />
             <InteractionButton
-              title={toggleRepositoryNotificationsLabel}
-              icon={ChevronIcon}
+              title={Chevron.label}
+              icon={Chevron.icon}
               size={Size.SMALL}
               onClick={toggleRepositoryNotifications}
             />

src/renderer/types.ts

@@ -184,3 +184,8 @@ export enum Size {
   LARGE = 18,
   XLARGE = 20,
 }
+
+export type Chevron = {
+  icon: FC<OcticonProps>;
+  label: string;
+};

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',
+      });
+    });
+  });
 });

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`,
+  };
+}