From a2b88f1cdd048f61cfeff1802faac8c9809be4ab Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 21 Jul 2024 20:31:10 +0800
Subject: [PATCH] Distinct both implementation of grouped notifications

---
 src/components/notification.jsx   |  6 ++++--
 src/pages/home.jsx                |  2 +-
 src/pages/notifications.jsx       |  4 ++--
 src/utils/group-notifications.jsx | 14 +++++++-------
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/notification.jsx b/src/components/notification.jsx
index cfe25022..9823c020 100644
--- a/src/components/notification.jsx
+++ b/src/components/notification.jsx
@@ -147,9 +147,11 @@ function Notification({
     report,
     event,
     moderation_warning,
+    // Client-side grouped notification
+    _ids,
     _accounts,
     _statuses,
-    // Grouped notification
+    // Server-side grouped notification
     sampleAccounts,
     notificationsCount,
   } = notification;
@@ -266,7 +268,7 @@ function Notification({
   return (
     <div
       class={`notification notification-${type}`}
-      data-notification-id={id}
+      data-notification-id={_ids || id}
       tabIndex="0"
     >
       <div
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index a9160737..6cfcfa19 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -177,7 +177,7 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
               .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
               .map((notification) => (
                 <Notification
-                  key={notification.ids || notification.id}
+                  key={notification._ids || notification.id}
                   instance={instance}
                   notification={notification}
                   disableContextMenu
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 2c7eb81d..6fa606ae 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -716,12 +716,12 @@ function Notifications({ columnMode }) {
                         hideTime: true,
                       });
                 return (
-                  <Fragment key={notification.ids || notification.id}>
+                  <Fragment key={notification._ids || notification.id}>
                     {differentDay && <h2 class="timeline-header">{heading}</h2>}
                     <Notification
                       instance={instance}
                       notification={notification}
-                      key={notification.ids || notification.id}
+                      key={notification._ids || notification.id}
                     />
                   </Fragment>
                 );
diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx
index 3390bd84..ee64ffef 100644
--- a/src/utils/group-notifications.jsx
+++ b/src/utils/group-notifications.jsx
@@ -99,12 +99,12 @@ export function groupNotifications2(groupNotifications) {
       const mappedNotification = notificationsMap2[key];
       if (mappedNotification) {
         mappedNotification._statuses.push(gn.status);
-        mappedNotification.ids += `-${gn.id}`;
+        mappedNotification._ids += `-${gn.id}`;
       } else {
         let n = (notificationsMap2[key] = {
-          ids: gn.id,
           ...gn,
           type,
+          _ids: gn.id,
           _statuses: [gn.status],
         });
         newGroupNotifications2.push(n);
@@ -145,18 +145,18 @@ export default function groupNotifications(notifications) {
       if (mappedAccount) {
         mappedAccount._types.push(type);
         mappedAccount._types.sort().reverse();
-        mappedNotification.ids += `-${id}`;
+        mappedNotification._ids += `-${id}`;
       } else {
         account._types = [type];
         mappedNotification._accounts.push(account);
-        mappedNotification.ids += `-${id}`;
+        mappedNotification._ids += `-${id}`;
       }
     } else {
       if (account) account._types = [type];
       let n = (notificationsMap[key] = {
-        ids: id,
         ...notification,
         type: virtualType,
+        _ids: id,
         _accounts: account ? [account] : [],
       });
       cleanNotifications[j++] = n;
@@ -179,12 +179,12 @@ export default function groupNotifications(notifications) {
       const mappedNotification = notificationsMap2[key];
       if (mappedNotification) {
         mappedNotification._statuses.push(notification.status);
-        mappedNotification.ids += `-${id}`;
+        mappedNotification._ids += `-${id}`;
       } else {
         let n = (notificationsMap2[key] = {
-          ids: id,
           ...notification,
           type,
+          _ids: id,
           _statuses: [notification.status],
         });
         cleanNotifications2[j++] = n;