feat: use last_read_at timestamp when available (#1103)

Author: setchy

src/components/NotificationRow.test.tsx

@@ -34,6 +34,23 @@ describe('components/NotificationRow.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render itself & its children when last_read_at is null', async () => {
+    jest
+      .spyOn(global.Date, 'now')
+      .mockImplementation(() => new Date('2024').valueOf());
+
+    const mockNotification = mockedSingleNotification;
+    mockNotification.last_read_at = null;
+
+    const props = {
+      notification: mockNotification,
+      hostname: 'github.com',
+    };
+
+    const tree = TestRenderer.create(<NotificationRow {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should render itself & its children without avatar', async () => {
     jest
       .spyOn(global.Date, 'now')

src/components/NotificationRow.tsx

@@ -5,7 +5,6 @@ import {
   FeedPersonIcon,
   ReadIcon,
 } from '@primer/octicons-react';
-import { formatDistanceToNow, parseISO } from 'date-fns';
 import {
   type FC,
   type KeyboardEvent,
@@ -18,7 +17,11 @@ import { AppContext } from '../context/App';
 import { IconColor } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openExternalLink } from '../utils/comms';
-import { formatForDisplay, openInBrowser } from '../utils/helpers';
+import {
+  formatForDisplay,
+  formatNotificationUpdatedAt,
+  openInBrowser,
+} from '../utils/helpers';
 import {
   getNotificationTypeIcon,
   getNotificationTypeIconColor,
@@ -73,9 +76,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   const NotificationIcon = getNotificationTypeIcon(notification.subject);
   const iconColor = getNotificationTypeIconColor(notification.subject);
 
-  const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), {
-    addSuffix: true,
-  });
+  const updatedAt = formatNotificationUpdatedAt(notification);
   const updatedLabel = notification.subject.user
     ? `${notification.subject.user.login} updated ${updatedAt}`
     : `Updated ${updatedAt}`;

src/components/__snapshots__/NotificationRow.test.tsx.snap

@@ -1,3 +1,4 @@
+import { formatDistanceToNow, parseISO } from 'date-fns';
 import type { AuthState } from '../types';
 import type {
   Discussion,
@@ -203,6 +204,16 @@ export function formatForDisplay(text: string[]): string {
     });
 }
 
+export function formatNotificationUpdatedAt(
+  notification: Notification,
+): string {
+  const date = notification.last_read_at ?? notification.updated_at;
+
+  return formatDistanceToNow(parseISO(date), {
+    addSuffix: true,
+  });
+}
+
 export async function openInBrowser(
   notification: Notification,
   accounts: AuthState,