From fffc8cc983f3ee6a6c783842aeff9f1c2b4cec01 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 6 Jan 2023 12:51:53 +0800
Subject: [PATCH] Further grouping of notifications

---
 src/app.css                 |  8 ++++++++
 src/pages/notifications.jsx | 35 +++++++++++++++--------------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/app.css b/src/app.css
index 26751dd5..0e50fd3b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -820,6 +820,14 @@ meter.donut:is(.danger, .explode):after {
   filter: brightness(0.8);
 }
 
+/* AVATARS STACK */
+
+.avatars-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
 @media (min-width: 40em) {
   html,
   body {
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 378aca72..cf425c83 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -112,7 +112,7 @@ function Notification({ notification }) {
           </p>
         )}
         {_accounts?.length > 1 && (
-          <p>
+          <p class="avatars-stack">
             {_accounts.map((account, i) => (
               <>
                 <a
@@ -126,7 +126,7 @@ function Notification({ notification }) {
                   <Avatar
                     url={account.avatarStatic}
                     size={
-                      _accounts.length < 10
+                      _accounts.length < 30
                         ? 'xl'
                         : _accounts.length < 100
                         ? 'l'
@@ -163,28 +163,23 @@ function NotificationsList({ notifications, emptyCopy }) {
   // Create new flat list of notifications
   // Combine sibling notifications based on type and status id, ignore the id
   // Concat all notification.account into an array of _accounts
-  const cleanNotifications = [
-    {
-      ...notifications[0],
-      _accounts: [notifications[0].account],
-    },
-  ];
-  for (let i = 1, j = 0; i < notifications.length; i++) {
+  const notificationsMap = {};
+  const cleanNotifications = [];
+  for (let i = 0, j = 0; i < notifications.length; i++) {
     const notification = notifications[i];
-    const cleanNotification = cleanNotifications[j];
-    const { status, account, type } = notification;
-    if (
-      account &&
-      cleanNotification?.account &&
-      cleanNotification?.status?.id === status?.id &&
-      cleanNotification?.type === type
-    ) {
-      cleanNotification._accounts.push(account);
+    // const cleanNotification = cleanNotifications[j];
+    const { status, account, type, created_at } = notification;
+    const createdAt = new Date(created_at).toLocaleDateString();
+    const key = `${status?.id}-${type}-${createdAt}`;
+    const mappedNotification = notificationsMap[key];
+    if (mappedNotification?.account) {
+      mappedNotification._accounts.push(account);
     } else {
-      cleanNotifications[++j] = {
+      let n = (notificationsMap[key] = {
         ...notification,
         _accounts: [account],
-      };
+      });
+      cleanNotifications[j++] = n;
     }
   }
   // console.log({ notifications, cleanNotifications });