refactor(core): improve extensibility on steroids

Author: DavideIadeluca

framework/core/js/src/forum/components/NotificationList.js

@@ -85,63 +85,112 @@ export default class NotificationList extends Component {
       return <div className="NotificationList-empty">{app.translator.trans('core.forum.notifications.empty_text')}</div>;
     }
 
-    return state.getPages().map((page) => {
-      const groups = [];
-      const discussions = {};
-
-      page.items.forEach((notification) => {
-        const subject = notification.subject();
-
-        if (typeof subject === 'undefined') return;
-
-        // Get the discussion that this notification is related to. If it's not
-        // directly related to a discussion, it may be related to a post or
-        // other entity which is related to a discussion.
-        let discussion = null;
-        if (subject instanceof Discussion) discussion = subject;
-        else if (subject && subject.discussion) discussion = subject.discussion();
-
-        // If the notification is not related to a discussion directly or
-        // indirectly, then we will assign it to a neutral group.
-        const key = discussion ? discussion.id() : 0;
-        discussions[key] = discussions[key] || { discussion: discussion, notifications: [] };
-        discussions[key].notifications.push(notification);
-
-        if (groups.indexOf(discussions[key]) === -1) {
-          groups.push(discussions[key]);
-        }
-      });
-
-      return groups.map((group) => {
-        const badges = group.discussion && group.discussion.badges().toArray();
-
-        return (
-          <div className="NotificationGroup">
-            {group.discussion ? (
-              <Link className="NotificationGroup-header" href={app.route.discussion(group.discussion)}>
-                {badges && !!badges.length && <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul>}
-                <span>{group.discussion.title()}</span>
-              </Link>
-            ) : (
-              <div className="NotificationGroup-header">{this.groupTitle(group)}</div>
-            )}
-
-            <ul className="NotificationGroup-content">
-              {group.notifications.map((notification) => {
-                const NotificationComponent = app.notificationComponents[notification.contentType()];
-                return (
-                  !!NotificationComponent && (
-                    <li>
-                      <NotificationComponent notification={notification} />
-                    </li>
-                  )
-                );
-              })}
-            </ul>
-          </div>
-        );
-      });
+    return state.getPages().flatMap((page) => this.pageItems(page).toArray());
+  }
+
+  pageItems(page) {
+    const items = new ItemList();
+
+    const groups = this.buildGroups(page);
+
+    groups.forEach((group, index) => {
+      items.add(`group-${index}`, this.groupView(group), -index);
     });
+
+    return items;
+  }
+
+  buildGroups(page) {
+    const groups = [];
+    const discussions = {};
+
+    page.items.forEach((notification) => {
+      const subject = notification.subject();
+      if (typeof subject === 'undefined') return;
+
+      // Get the discussion that this notification is related to. If it's not
+      // directly related to a discussion, it may be related to a post or
+      // other entity which is related to a discussion.
+      let discussion = null;
+      if (subject instanceof Discussion) discussion = subject;
+      else if (subject && subject.discussion) discussion = subject.discussion();
+
+      // If the notification is not related to a discussion directly or
+      // indirectly, then we will assign it to a neutral group.
+      const key = discussion ? discussion.id() : 0;
+      discussions[key] = discussions[key] || { discussion, notifications: [] };
+      discussions[key].notifications.push(notification);
+
+      if (groups.indexOf(discussions[key]) === -1) {
+        groups.push(discussions[key]);
+      }
+    });
+
+    return groups;
+  }
+
+  groupKey(group, fallbackIndex) {
+    return group.discussion ? group.discussion.id() : `neutral-${fallbackIndex}`;
+  }
+
+  groupView(group) {
+    const badges = group.discussion && group.discussion.badges().toArray();
+
+    const items = this.groupItems(group, badges).toArray();
+
+    return <div className="NotificationGroup">{items}</div>;
+  }
+
+  groupItems(group, badges) {
+    const items = new ItemList();
+
+    items.add('header', this.groupHeaderItems(group, badges).toArray()[0], 100);
+
+    items.add('body', this.groupBodyItems(group).toArray()[0], 90);
+
+    return items;
+  }
+
+  groupHeaderItems(group, badges) {
+    const items = new ItemList();
+
+    if (group.discussion) {
+      items.add(
+        'discussion',
+        <Link className="NotificationGroup-header" href={app.route.discussion(group.discussion)}>
+          {badges && !!badges.length && <ul className="NotificationGroup-badges badges">{listItems(badges)}</ul>}
+          <span>{group.discussion.title()}</span>
+        </Link>,
+        100
+      );
+    } else {
+      items.add('neutral', <div className="NotificationGroup-header">{this.groupTitle(group)}</div>, 0);
+    }
+
+    return items;
+  }
+
+  groupBodyItems(group) {
+    const items = new ItemList();
+
+    items.add(
+      'list',
+      <ul className="NotificationGroup-content">{group.notifications.map((n, i) => this.notificationItem(n, i)).filter(Boolean)}</ul>,
+      100
+    );
+
+    return items;
+  }
+
+  notificationItem(notification) {
+    const NotificationComponent = app.notificationComponents[notification.contentType()];
+    if (!NotificationComponent) return null;
+
+    return (
+      <li>
+        <NotificationComponent notification={notification} />
+      </li>
+    );
   }
 
   groupTitle(group) {