From 6beffcc26324ae7a06b3c13e452b92325c2e679a Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 10 May 2024 16:43:09 -0400
Subject: [PATCH 1/2] fix: use last_read_at when available

---
 src/components/NotificationRow.tsx | 11 ++++++-----
 src/utils/helpers.ts               | 11 +++++++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index bae5af4bc..fb50f7174 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -4,7 +4,6 @@ import {
   FeedPersonIcon,
   ReadIcon,
 } from '@primer/octicons-react';
-import { formatDistanceToNow, parseISO } from 'date-fns';
 import {
   type FC,
   type KeyboardEvent,
@@ -16,7 +15,11 @@ import {
 import { AppContext } from '../context/App';
 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,
@@ -71,9 +74,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}`;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index b6501bd61..535f17725 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -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,

From 3275af9767c6392c0a2e3254b2b25c5bb4722a24 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 10 May 2024 16:51:33 -0400
Subject: [PATCH 2/2] test: use last_read_at when available

---
 src/components/NotificationRow.test.tsx       |  17 ++
 .../NotificationRow.test.tsx.snap             | 232 ++++++++++++++++++
 2 files changed, 249 insertions(+)

diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index 3703b110e..1844498cb 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/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')
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 2dd1b9f71..dbc5bdda0 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -232,6 +232,238 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
 </div>
 `;
 
+exports[`components/NotificationRow.tsx should render itself & its children when last_read_at is null 1`] = `
+<div
+  className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+  id="138661096"
+>
+  <div
+    className="flex justify-center items-center w-5 text-green-500"
+    title="Open Issue"
+  >
+    <svg
+      aria-label="Issue"
+      className="octicon octicon-issue-opened"
+      fill="currentColor"
+      focusable="false"
+      height={18}
+      role="img"
+      style={
+        {
+          "display": "inline-block",
+          "overflow": "visible",
+          "userSelect": "none",
+          "verticalAlign": "text-bottom",
+        }
+      }
+      viewBox="0 0 16 16"
+      width={18}
+    >
+      <path
+        d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+      />
+    </svg>
+  </div>
+  <div
+    className="flex-1 overflow-hidden"
+    onClick={[Function]}
+    onKeyDown={[Function]}
+  >
+    <div
+      className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
+      role="main"
+      title="I am a robot and this is a test!"
+    >
+      I am a robot and this is a test!
+    </div>
+    <div
+      className="text-xs text-capitalize whitespace-nowrap overflow-ellipsis overflow-hidden"
+    >
+      <span
+        className="flex items-center"
+      >
+        <span
+          className="flex"
+          title="gitify-app updated over 6 years ago"
+        >
+          <span
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            title="View User Profile"
+          >
+            <img
+              alt="gitify-app's avatar"
+              className="rounded-full w-4 h-4 cursor-pointer"
+              src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+              title="gitify-app"
+            />
+          </span>
+          <span
+            className="ml-1"
+            title="You're watching the repository."
+          >
+            Updated
+          </span>
+          <span
+            className="ml-1"
+          >
+            over 6 years ago
+          </span>
+          <span
+            className="ml-1"
+            title="octocat approved these changes"
+          >
+            <svg
+              aria-label="octocat approved these changes"
+              className="text-green-500"
+              fill="currentColor"
+              focusable="false"
+              height={16}
+              role="img"
+              style={
+                {
+                  "display": "inline-block",
+                  "overflow": "visible",
+                  "userSelect": "none",
+                  "verticalAlign": "text-bottom",
+                }
+              }
+              viewBox="0 0 16 16"
+              width={16}
+            >
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </span>
+          <span
+            className="ml-1"
+            title="gitify-app requested changes"
+          >
+            <svg
+              aria-label="gitify-app requested changes"
+              className="text-red-500"
+              fill="currentColor"
+              focusable="false"
+              height={16}
+              role="img"
+              style={
+                {
+                  "display": "inline-block",
+                  "overflow": "visible",
+                  "userSelect": "none",
+                  "verticalAlign": "text-bottom",
+                }
+              }
+              viewBox="0 0 16 16"
+              width={16}
+            >
+              <path
+                d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+  >
+    <button
+      className="focus:outline-none h-full hover:text-green-500"
+      onClick={[Function]}
+      title="Mark as Done"
+      type="button"
+    >
+      <svg
+        aria-label="Mark as Done"
+        className="octicon octicon-check"
+        fill="currentColor"
+        focusable="false"
+        height={16}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={16}
+      >
+        <path
+          d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+        />
+      </svg>
+    </button>
+    <button
+      className="focus:outline-none h-full hover:text-red-500"
+      onClick={[Function]}
+      title="Unsubscribe from Thread"
+      type="button"
+    >
+      <svg
+        aria-label="Unsubscribe from Thread"
+        className="octicon octicon-bell-slash"
+        fill="currentColor"
+        focusable="false"
+        height={14}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={14}
+      >
+        <path
+          d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+        />
+      </svg>
+    </button>
+    <button
+      className="focus:outline-none h-full hover:text-green-500"
+      onClick={[Function]}
+      title="Mark as Read"
+      type="button"
+    >
+      <svg
+        aria-label="Mark as Read"
+        className="octicon octicon-read"
+        fill="currentColor"
+        focusable="false"
+        height={14}
+        role="img"
+        style={
+          {
+            "display": "inline-block",
+            "overflow": "visible",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={14}
+      >
+        <path
+          d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+        />
+      </svg>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`components/NotificationRow.tsx should render itself & its children without avatar 1`] = `
 <div
   className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"