From f182afb70d2d52c5a72e71e4445160684a2f8c76 Mon Sep 17 00:00:00 2001
From: nick-funk <code@nickfunk.com>
Date: Wed, 25 Oct 2023 17:10:08 -0600
Subject: [PATCH] use memo for notification seen state

---
 .../Notifications/NotificationContainer.tsx   | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx b/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx
index 705095d053..beaffb888b 100644
--- a/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx
+++ b/client/src/core/client/stream/tabs/Notifications/NotificationContainer.tsx
@@ -1,5 +1,5 @@
 import cn from "classnames";
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useMemo } from "react";
 import { graphql } from "react-relay";
 
 import { getURLWithCommentID } from "coral-framework/helpers";
@@ -19,16 +19,18 @@ const NotificationContainer: FunctionComponent<Props> = ({
   notification: { title, body, comment, createdAt },
   viewer,
 }) => {
-  if (!viewer) {
-    return null;
-  }
+  const seen = useMemo(() => {
+    if (!viewer) {
+      return false;
+    }
 
-  const createdAtDate = new Date(createdAt);
-  const lastSeenDate = viewer.lastSeenNotificationDate
-    ? new Date(viewer.lastSeenNotificationDate)
-    : new Date(0);
+    const createdAtDate = new Date(createdAt);
+    const lastSeenDate = viewer.lastSeenNotificationDate
+      ? new Date(viewer.lastSeenNotificationDate)
+      : new Date(0);
 
-  const seen = createdAtDate.getTime() <= lastSeenDate.getTime();
+    return createdAtDate.getTime() <= lastSeenDate.getTime();
+  }, [createdAt, viewer]);
 
   const commentURL = comment
     ? getURLWithCommentID(comment.story.url, comment.id)
@@ -44,7 +46,6 @@ const NotificationContainer: FunctionComponent<Props> = ({
       {title && <div className={cn(styles.title)}>{title}</div>}
       {body && <div className={cn(styles.body)}>{body}</div>}
       {comment && <a href={commentURL}>{commentURL}</a>}
-      {`seen: ${seen}`}
     </div>
   );
 };