feat: format display attributes on GitifyNotification

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

Author: setchy

src/renderer/components/notifications/NotificationFooter.tsx

@@ -5,7 +5,6 @@ import { RelativeTime, Stack, Text } from '@primer/react';
 import { type GitifyNotification, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openUserProfile } from '../../utils/links';
-import { createNotificationHandler } from '../../utils/notifications/handlers';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 import { MetricGroup } from '../metrics/MetricGroup';
 
@@ -16,8 +15,6 @@ interface NotificationFooterProps {
 export const NotificationFooter: FC<NotificationFooterProps> = ({
   notification,
 }: NotificationFooterProps) => {
-  const handler = createNotificationHandler(notification);
-
   return (
     <Stack
       align="center"
@@ -47,7 +44,7 @@ export const NotificationFooter: FC<NotificationFooterProps> = ({
       ) : (
         <AvatarWithFallback
           size={Size.SMALL}
-          userType={handler.defaultUserType()}
+          userType={notification.display.defaultUserType}
         />
       )}
 

src/renderer/components/notifications/NotificationHeader.tsx

@@ -7,7 +7,6 @@ import { type GitifyNotification, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openRepository } from '../../utils/links';
 import { isGroupByDate } from '../../utils/notifications/group';
-import { createNotificationHandler } from '../../utils/notifications/handlers';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 
 interface NotificationHeaderProps {
@@ -19,11 +18,6 @@ export const NotificationHeader: FC<NotificationHeaderProps> = ({
 }: NotificationHeaderProps) => {
   const { settings } = useAppContext();
 
-  const repoSlug = notification.repository.fullName;
-
-  const handler = createNotificationHandler(notification);
-  const notificationNumber = handler.formattedNotificationNumber(notification);
-
   return (
     isGroupByDate(settings) && (
       <div className="py-0.5">
@@ -40,8 +34,8 @@ export const NotificationHeader: FC<NotificationHeaderProps> = ({
             type="button"
           >
             <AvatarWithFallback
-              alt={repoSlug}
-              name={repoSlug}
+              alt={notification.repository.fullName}
+              name={notification.repository.fullName}
               size={Size.SMALL}
               src={notification.repository.owner.avatarUrl}
               userType={notification.repository.owner.type}
@@ -54,7 +48,7 @@ export const NotificationHeader: FC<NotificationHeaderProps> = ({
               !settings.showNumber && 'hidden',
             )}
           >
-            {notificationNumber}
+            {notification.display.number}
           </div>
         </Stack>
       </div>

src/renderer/components/notifications/NotificationRow.tsx

@@ -9,7 +9,6 @@ import { cn } from '../../utils/cn';
 import { isMarkAsDoneFeatureSupported } from '../../utils/features';
 import { openNotification } from '../../utils/links';
 import { isGroupByDate } from '../../utils/notifications/group';
-import { createNotificationHandler } from '../../utils/notifications/handlers';
 import { HoverButton } from '../primitives/HoverButton';
 import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationFooter } from './NotificationFooter';
@@ -62,13 +61,7 @@ export const NotificationRow: FC<NotificationRowProps> = ({
     unsubscribeNotification(notification);
   };
 
-  const handler = createNotificationHandler(notification);
-  const NotificationIcon = handler.iconType(notification);
-  const iconColor = handler.iconColor(notification);
-  const notificationType = handler.formattedNotificationType(notification);
-  const notificationNumber = handler.formattedNotificationNumber(notification);
-  const notificationTitle = handler.formattedNotificationTitle(notification);
-
+  const NotificationIcon = notification.display.icon.type;
   const isNotificationRead = !notification.unread;
 
   return (
@@ -84,11 +77,11 @@ export const NotificationRow: FC<NotificationRowProps> = ({
       id={notification.id}
     >
       <Stack align="center" direction="horizontal" gap="condensed">
-        <Tooltip direction="e" text={notificationType}>
+        <Tooltip direction="e" text={notification.display.type}>
           <button type="button">
             <NotificationIcon
-              aria-label={notificationType}
-              className={iconColor}
+              aria-label={notification.display.type}
+              className={notification.display.icon.color}
               size={Size.LARGE}
             />
           </button>
@@ -115,7 +108,7 @@ export const NotificationRow: FC<NotificationRowProps> = ({
             direction="horizontal"
             gap="condensed"
             justify="space-between"
-            title={notificationTitle}
+            title={notification.display.title}
           >
             <Text className={!settings.wrapNotificationTitle && 'truncate'}>
               {notification.subject.title}
@@ -127,7 +120,7 @@ export const NotificationRow: FC<NotificationRowProps> = ({
                 (isGroupByDate(settings) || !settings.showNumber) && 'hidden',
               )}
             >
-              {notificationNumber}
+              {notification.display.number}
             </Text>
           </Stack>
 

src/renderer/types.ts

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import type { OcticonProps } from '@primer/octicons-react';
+import type { Icon, OcticonProps } from '@primer/octicons-react';
 
 import type {
   DiscussionStateReason,
@@ -286,6 +286,17 @@ export interface GitifyNotification {
   account: Account;
   /** UI ordering index */
   order: number;
+
+  display: {
+    title: string;
+    type: string;
+    number: string;
+    icon: {
+      type: Icon;
+      color: IconColor;
+    };
+    defaultUserType: UserType;
+  };
 }
 
 /**

src/renderer/utils/api/transform.ts

@@ -34,6 +34,8 @@ export function transformNotification(
     repository: transformRepository(raw.repository),
     account,
     order,
+    // Display fields start as undefined, populated later post-enrichment
+    display: undefined,
   };
 }
 

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

@@ -5,6 +5,7 @@ import type { OcticonProps } from '@primer/octicons-react';
 import type {
   GitifyNotification,
   GitifySubject,
+  IconColor,
   Link,
   SettingsState,
   SubjectType,
@@ -40,7 +41,7 @@ export interface NotificationTypeHandler {
   /**
    * Return the icon color for this notification type.
    */
-  iconColor(notification: GitifyNotification): string;
+  iconColor(notification: GitifyNotification): IconColor;
 
   /**
    * Return the formatted notification type for this notification.

src/renderer/utils/notifications/notifications.ts

@@ -79,9 +79,10 @@ export async function getAllNotifications(
         try {
           const rawNotifications = (await accountNotifications.notifications)
             .data;
-          let notifications = rawNotifications.map((raw) =>
-            transformNotification(raw, accountNotifications.account),
-          );
+
+          let notifications = rawNotifications.map((raw) => {
+            return transformNotification(raw, accountNotifications.account);
+          });
 
           notifications = filterBaseNotifications(
             notifications,
@@ -98,6 +99,23 @@ export async function getAllNotifications(
             state.settings,
           );
 
+          notifications = notifications.map((notification) => {
+            const handler = createNotificationHandler(notification);
+            return {
+              ...notification,
+              display: {
+                title: handler.formattedNotificationTitle(notification),
+                type: handler.formattedNotificationType(notification),
+                number: handler.formattedNotificationNumber(notification),
+                icon: {
+                  type: handler.iconType(notification),
+                  color: handler.iconColor(notification),
+                },
+                defaultUserType: handler.defaultUserType(),
+              },
+            };
+          });
+
           return {
             account: accountNotifications.account,
             notifications: notifications,