feat: format display attributes on GitifyNotification

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

Author: setchy

src/renderer/components/metrics/MetricGroup.test.tsx

@@ -49,7 +49,7 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
   describe('comment pills', () => {
     it('should render when no comments', async () => {
       const mockNotification = mockSingleNotification;
-      mockNotification.subject.comments = null;
+      mockNotification.subject.commentCount = null;
 
       const props = {
         notification: mockNotification,
@@ -61,7 +61,7 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
 
     it('should render when 1 comment', async () => {
       const mockNotification = mockSingleNotification;
-      mockNotification.subject.comments = 1;
+      mockNotification.subject.commentCount = 1;
 
       const props = {
         notification: mockNotification,
@@ -73,7 +73,7 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
 
     it('should render when more than 1 comments', async () => {
       const mockNotification = mockSingleNotification;
-      mockNotification.subject.comments = 2;
+      mockNotification.subject.commentCount = 2;
 
       const props = {
         notification: mockNotification,

src/renderer/components/metrics/MetricGroup.tsx

@@ -21,26 +21,38 @@ export const MetricGroup: FC<MetricGroupProps> = ({
 }: MetricGroupProps) => {
   const { settings } = useAppContext();
 
-  const commentsPillDescription = `${notification.subject.comments} ${
-    notification.subject.comments > 1 ? 'comments' : 'comment'
-  }`;
+  const linkedIssues = notification.subject.linkedIssues ?? [];
+  const hasLinkedIssues = linkedIssues.length > 0;
+  const linkedIssuesPillDescription = hasLinkedIssues
+    ? `Linked to ${
+        linkedIssues.length > 1 ? 'issues' : 'issue'
+      } ${linkedIssues.join(', ')}`
+    : '';
 
-  const labelsPillDescription = notification.subject.labels
-    ?.map((label) => `🏷️ ${label}`)
-    .join(', ');
+  const commentCount = notification.subject.commentCount ?? 0;
+  const hasComments = commentCount > 0;
+  const commentsPillDescription = hasComments
+    ? `${notification.subject.commentCount} ${
+        notification.subject.commentCount > 1 ? 'comments' : 'comment'
+      }`
+    : '';
 
-  const linkedIssuesPillDescription = `Linked to ${
-    notification.subject.linkedIssues?.length > 1 ? 'issues' : 'issue'
-  } ${notification.subject?.linkedIssues?.join(', ')}`;
+  const labels = notification.subject.labels ?? [];
+  const hasLabels = labels.length > 0;
+  const labelsPillDescription = hasLabels
+    ? labels.map((label) => `🏷️ ${label}`).join(', ')
+    : '';
+
+  const milestone = notification.subject.milestone;
 
   return (
     settings.showPills && (
       <div className="flex gap-1">
-        {notification.subject?.linkedIssues?.length > 0 && (
+        {hasLinkedIssues && (
           <MetricPill
             color={IconColor.GRAY}
             icon={IssueOpenedIcon}
-            metric={notification.subject.linkedIssues.length}
+            metric={linkedIssues.length}
             title={linkedIssuesPillDescription}
           />
         )}
@@ -62,33 +74,29 @@ export const MetricGroup: FC<MetricGroupProps> = ({
           );
         })}
 
-        {notification.subject?.comments > 0 && (
+        {hasComments && (
           <MetricPill
             color={IconColor.GRAY}
             icon={CommentIcon}
-            metric={notification.subject.comments}
+            metric={commentCount}
             title={commentsPillDescription}
           />
         )}
 
-        {notification.subject?.labels?.length > 0 && (
+        {hasLabels && (
           <MetricPill
             color={IconColor.GRAY}
             icon={TagIcon}
-            metric={notification.subject.labels.length}
+            metric={labels.length}
             title={labelsPillDescription}
           />
         )}
 
-        {notification.subject.milestone && (
+        {milestone && (
           <MetricPill
-            color={
-              notification.subject.milestone.state === 'OPEN'
-                ? IconColor.GREEN
-                : IconColor.RED
-            }
+            color={milestone.state === 'OPEN' ? IconColor.GREEN : IconColor.RED}
             icon={MilestoneIcon}
-            title={notification.subject.milestone.title}
+            title={milestone.title}
           />
         )}
       </div>