feat: migrate to RelativeTime component

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

Author: setchy

src/renderer/components/notifications/NotificationFooter.tsx

@@ -1,15 +1,12 @@
 import type { FC, MouseEvent } from 'react';
 
 import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
-import { Avatar } from '@primer/react';
+import { Avatar, RelativeTime } from '@primer/react';
 
 import { IconColor, Opacity, Size } from '../../types';
 import type { Notification } from '../../typesGitHub';
 import { cn } from '../../utils/cn';
-import {
-  formatNotificationUpdatedAt,
-  isNonHumanUser,
-} from '../../utils/helpers';
+import { isNonHumanUser } from '../../utils/helpers';
 import { openUserProfile } from '../../utils/links';
 import { formatReason } from '../../utils/reason';
 import { Pills } from './Pills';
@@ -23,11 +20,6 @@ export const NotificationFooter: FC<INotificationFooter> = ({
 }: INotificationFooter) => {
   const reason = formatReason(notification.reason);
 
-  const updatedAt = formatNotificationUpdatedAt(notification);
-  const updatedLabel = notification.subject.user
-    ? `${notification.subject.user.login} updated ${updatedAt}`
-    : `Updated ${updatedAt}`;
-
   return (
     <div className="flex flex-wrap items-center gap-1">
       {notification.subject.user ? (
@@ -53,17 +45,12 @@ export const NotificationFooter: FC<INotificationFooter> = ({
           )}
         </>
       )}
-      <span
-        className={cn('text-xs capitalize', Opacity.MEDIUM)}
-        title={reason.description}
-      >
-        {reason.title}
-      </span>
-      <span
-        className={cn('text-xs capitalize', Opacity.MEDIUM)}
-        title={updatedLabel}
-      >
-        {updatedAt}
+      <span className={cn('text-xs', Opacity.MEDIUM)}>
+        <span className={'capitalize'} title={reason.description}>
+          {reason.title}
+        </span>
+        <span> • </span>
+        <RelativeTime datetime={notification.updated_at} />
       </span>
       <Pills notification={notification} />
     </div>

src/renderer/utils/helpers.test.ts

@@ -18,7 +18,6 @@ import * as apiRequests from './api/request';
 
 import {
   formatForDisplay,
-  formatNotificationUpdatedAt,
   generateGitHubWebUrl,
   generateNotificationReferrerId,
   getChevronDetails,
@@ -534,38 +533,6 @@ describe('renderer/utils/helpers.ts', () => {
         'Not Planned Issue',
       );
     });
-
-    describe('formatNotificationUpdatedAt', () => {
-      it('should use updated_at if last_read_at is null', () => {
-        const notification = {
-          ...mockSingleNotification,
-          last_read_at: null,
-          updated_at: '2021-06-23T17:00:00Z',
-        };
-
-        expect(formatNotificationUpdatedAt(notification)).toContain('ago');
-      });
-
-      it('should return empty if all dates are null', () => {
-        const notification = {
-          ...mockSingleNotification,
-          last_read_at: null,
-          updated_at: null,
-        };
-
-        expect(formatNotificationUpdatedAt(notification)).toBe('');
-      });
-
-      it('should return empty if unable to parse dates', () => {
-        const notification = {
-          ...mockSingleNotification,
-          last_read_at: 'not an iso date',
-          updated_at: 'not an iso date',
-        };
-
-        expect(formatNotificationUpdatedAt(notification)).toBe('');
-      });
-    });
   });
 
   describe('getChevronDetails', () => {

src/renderer/utils/helpers.ts

@@ -3,7 +3,6 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
 } from '@primer/octicons-react';
-import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 
 import { logError, logWarn } from '../../shared/logger';
 import type { Chevron, Hostname, Link } from '../types';
@@ -187,18 +186,6 @@ export function formatForDisplay(text: string[]): string {
     });
 }
 
-export function formatNotificationUpdatedAt(
-  notification: Notification,
-): string {
-  try {
-    return formatDistanceToNowStrict(parseISO(notification.updated_at), {
-      addSuffix: true,
-    });
-  } catch (e) {}
-
-  return '';
-}
-
 export function getChevronDetails(
   hasNotifications: boolean,
   isVisible: boolean,