refactor(handlers): icon color and formatted names

src/renderer/components/notifications/NotificationRow.tsx

@@ -8,8 +8,6 @@ import { GroupBy, Opacity, Size } from '../../types';
 import type { Notification } from '../../typesGitHub';
 import { cn } from '../../utils/cn';
 import { isMarkAsDoneFeatureSupported } from '../../utils/features';
-import { formatForDisplay } from '../../utils/helpers';
-import { getNotificationTypeIconColor } from '../../utils/icons';
 import { openNotification } from '../../utils/links';
 import { createNotificationHandler } from '../../utils/notifications/handlers';
 import { HoverButton } from '../primitives/HoverButton';
@@ -72,22 +70,11 @@ export const NotificationRow: FC<INotificationRow> = ({
   };
 
   const handler = createNotificationHandler(notification);
-
-  const NotificationIcon = handler.getIcon(notification.subject);
-  const iconColor = getNotificationTypeIconColor(notification.subject);
-
-  const notificationType = formatForDisplay([
-    notification.subject.state,
-    notification.subject.type,
-  ]);
-
-  const notificationNumber = notification.subject?.number
-    ? `#${notification.subject.number}`
-    : '';
-
-  const notificationTitle = notificationNumber
-    ? `${notification.subject.title} [${notificationNumber}]`
-    : notification.subject.title;
+  const NotificationIcon = handler.iconType(notification.subject);
+  const iconColor = handler.iconColor(notification.subject);
+  const notificationType = handler.formattedNotificationType(notification);
+  const notificationNumber = handler.formattedNotificationNumber(notification);
+  const notificationTitle = handler.formattedNotificationTitle(notification);
 
   const groupByDate = settings.groupBy === GroupBy.DATE;
 

src/renderer/utils/helpers.test.ts

@@ -16,7 +16,6 @@ import {
 } from './api/__mocks__/response-mocks';
 import * as apiRequests from './api/request';
 import {
-  formatForDisplay,
   generateGitHubWebUrl,
   generateNotificationReferrerId,
   getChevronDetails,
@@ -517,22 +516,6 @@ describe('renderer/utils/helpers.ts', () => {
     });
   });
 
-  describe('formatting', () => {
-    it('formatForDisplay', () => {
-      expect(formatForDisplay(null)).toBe('');
-      expect(formatForDisplay([])).toBe('');
-      expect(formatForDisplay(['open', 'PullRequest'])).toBe(
-        'Open Pull Request',
-      );
-      expect(formatForDisplay(['OUTDATED', 'Discussion'])).toBe(
-        'Outdated Discussion',
-      );
-      expect(formatForDisplay(['not_planned', 'Issue'])).toBe(
-        'Not Planned Issue',
-      );
-    });
-  });
-
   describe('getChevronDetails', () => {
     it('should return correct chevron details', () => {
       expect(getChevronDetails(true, true, 'account')).toEqual({

src/renderer/utils/helpers.ts

@@ -171,21 +171,6 @@ export async function generateGitHubWebUrl(
   return url.toString() as Link;
 }
 
-export function formatForDisplay(text: string[]): string {
-  if (!text) {
-    return '';
-  }
-
-  return text
-    .join(' ')
-    .replace(/([a-z])([A-Z])/g, '$1 $2') // Add space between lowercase character followed by an uppercase character
-    .replace(/_/g, ' ') // Replace underscores with spaces
-    .replace(/\w+/g, (word) => {
-      // Convert to proper case (capitalize first letter of each word)
-      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-    });
-}
-
 export function getChevronDetails(
   hasNotifications: boolean,
   isVisible: boolean,

src/renderer/utils/icons.test.ts

@@ -8,118 +8,15 @@ import {
 } from '@primer/octicons-react';
 
 import { IconColor } from '../types';
-import type {
-  GitifyPullRequestReview,
-  StateType,
-  Subject,
-  SubjectType,
-} from '../typesGitHub';
+import type { GitifyPullRequestReview } from '../typesGitHub';
 import {
   getAuthMethodIcon,
   getDefaultUserIcon,
-  getNotificationTypeIconColor,
   getPlatformIcon,
   getPullRequestReviewIcon,
 } from './icons';
 
 describe('renderer/utils/icons.ts', () => {
-  describe('getNotificationTypeIconColor', () => {
-    it('should format the notification color for check suite', () => {
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({
-            type: 'CheckSuite',
-            state: 'cancelled',
-          }),
-        ),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({
-            type: 'CheckSuite',
-            state: 'failure',
-          }),
-        ),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({
-            type: 'CheckSuite',
-            state: 'skipped',
-          }),
-        ),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({
-            type: 'CheckSuite',
-            state: 'success',
-          }),
-        ),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({
-            type: 'CheckSuite',
-            state: null,
-          }),
-        ),
-      ).toMatchSnapshot();
-    });
-
-    it('should format the notification color for state', () => {
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'ANSWERED' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'closed' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'completed' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'draft' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'merged' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({ state: 'not_planned' }),
-        ),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'open' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'reopened' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(createSubjectMock({ state: 'RESOLVED' })),
-      ).toMatchSnapshot();
-
-      expect(
-        getNotificationTypeIconColor(
-          createSubjectMock({
-            state: 'something_else_unknown' as StateType,
-          }),
-        ),
-      ).toMatchSnapshot();
-    });
-  });
-
   describe('getPullRequestReviewIcon', () => {
     let mockReviewSingleReviewer: GitifyPullRequestReview;
     let mockReviewMultipleReviewer: GitifyPullRequestReview;
@@ -235,17 +132,3 @@ describe('renderer/utils/icons.ts', () => {
     expect(getDefaultUserIcon('User')).toBe(FeedPersonIcon);
   });
 });
-
-function createSubjectMock(mocks: {
-  title?: string;
-  type?: SubjectType;
-  state?: StateType;
-}): Subject {
-  return {
-    title: mocks.title ?? 'Mock Subject',
-    type: mocks.type ?? ('Unknown' as SubjectType),
-    state: mocks.state ?? ('Unknown' as StateType),
-    url: null,
-    latest_comment_url: null,
-  };
-}

src/renderer/utils/icons.ts

@@ -15,32 +15,9 @@ import {
 } from '@primer/octicons-react';
 
 import { IconColor, type PullRequestApprovalIcon } from '../types';
-import type {
-  GitifyPullRequestReview,
-  Subject,
-  UserType,
-} from '../typesGitHub';
+import type { GitifyPullRequestReview, UserType } from '../typesGitHub';
 import type { AuthMethod, PlatformType } from './auth/types';
 
-export function getNotificationTypeIconColor(subject: Subject): IconColor {
-  switch (subject.state) {
-    case 'open':
-    case 'reopened':
-    case 'ANSWERED':
-    case 'success':
-      return IconColor.GREEN;
-    case 'closed':
-    case 'failure':
-      return IconColor.RED;
-    case 'completed':
-    case 'RESOLVED':
-    case 'merged':
-      return IconColor.PURPLE;
-    default:
-      return IconColor.GRAY;
-  }
-}
-
 export function getPullRequestReviewIcon(
   review: GitifyPullRequestReview,
 ): PullRequestApprovalIcon | null {

src/renderer/utils/notifications/handlers/checkSuite.test.ts

@@ -136,15 +136,15 @@ describe('renderer/utils/notifications/handlers/checkSuite.ts', () => {
     });
   });
 
-  it('getIcon', () => {
+  it('iconType', () => {
     expect(
-      checkSuiteHandler.getIcon(
+      checkSuiteHandler.iconType(
         createSubjectMock({ type: 'CheckSuite', state: null }),
       ).displayName,
     ).toBe('RocketIcon');
 
     expect(
-      checkSuiteHandler.getIcon(
+      checkSuiteHandler.iconType(
         createSubjectMock({
           type: 'CheckSuite',
           state: 'cancelled',
@@ -153,7 +153,7 @@ describe('renderer/utils/notifications/handlers/checkSuite.ts', () => {
     ).toBe('StopIcon');
 
     expect(
-      checkSuiteHandler.getIcon(
+      checkSuiteHandler.iconType(
         createSubjectMock({
           type: 'CheckSuite',
           state: 'failure',
@@ -162,7 +162,7 @@ describe('renderer/utils/notifications/handlers/checkSuite.ts', () => {
     ).toBe('XIcon');
 
     expect(
-      checkSuiteHandler.getIcon(
+      checkSuiteHandler.iconType(
         createSubjectMock({
           type: 'CheckSuite',
           state: 'skipped',
@@ -171,7 +171,7 @@ describe('renderer/utils/notifications/handlers/checkSuite.ts', () => {
     ).toBe('SkipIcon');
 
     expect(
-      checkSuiteHandler.getIcon(
+      checkSuiteHandler.iconType(
         createSubjectMock({
           type: 'CheckSuite',
           state: 'success',

src/renderer/utils/notifications/handlers/checkSuite.ts

@@ -17,9 +17,9 @@ import type {
   Notification,
   Subject,
 } from '../../../typesGitHub';
-import type { NotificationTypeHandler } from './types';
+import { DefaultHandler } from './default';
 
-class CheckSuiteHandler implements NotificationTypeHandler {
+class CheckSuiteHandler extends DefaultHandler {
   readonly type = 'CheckSuite';
 
   async enrich(
@@ -38,7 +38,7 @@ class CheckSuiteHandler implements NotificationTypeHandler {
     return null;
   }
 
-  getIcon(subject: Subject): FC<OcticonProps> | null {
+  iconType(subject: Subject): FC<OcticonProps> | null {
     switch (subject.state) {
       case 'cancelled':
         return StopIcon;

src/renderer/utils/notifications/handlers/commit.test.ts

@@ -97,9 +97,9 @@ describe('renderer/utils/notifications/handlers/commit.ts', () => {
     });
   });
 
-  it('getIcon', () => {
+  it('iconType', () => {
     expect(
-      commitHandler.getIcon(createSubjectMock({ type: 'Commit' })).displayName,
+      commitHandler.iconType(createSubjectMock({ type: 'Commit' })).displayName,
     ).toBe('GitCommitIcon');
   });
 });