From 8ffeac43159c39392117e0bd767de62e49758ebd Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Fri, 14 May 2021 21:04:26 -0400
Subject: [PATCH] NotificationListState separate content method

This fixes an error where an empty notification list wouldn't show the "empty" text.

It also simplifies flow of logic and breaks the component up a bit for readability.
---
 js/src/forum/components/NotificationList.js | 126 ++++++++++----------
 1 file changed, 63 insertions(+), 63 deletions(-)

diff --git a/js/src/forum/components/NotificationList.js b/js/src/forum/components/NotificationList.js
index 22a337efa..f469dd00d 100644
--- a/js/src/forum/components/NotificationList.js
+++ b/js/src/forum/components/NotificationList.js
@@ -12,7 +12,6 @@ import Discussion from '../../common/models/Discussion';
 export default class NotificationList extends Component {
   view() {
     const state = this.attrs.state;
-    const pages = state.getPages();
 
     return (
       <div className="NotificationList">
@@ -29,72 +28,73 @@ export default class NotificationList extends Component {
           </div>
         </div>
 
-        <div className="NotificationList-content">
-          {state.hasItems()
-            ? pages.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">{app.forum.attribute('title')}</div>
-                      )}
-
-                      <ul className="NotificationGroup-content">
-                        {group.notifications.map((notification) => {
-                          const NotificationComponent = app.notificationComponents[notification.contentType()];
-                          return NotificationComponent ? <li>{NotificationComponent.component({ notification })}</li> : '';
-                        })}
-                      </ul>
-                    </div>
-                  );
-                });
-              })
-            : ''}
-          {state.isLoading() ? (
-            <LoadingIndicator className="LoadingIndicator--block" />
-          ) : pages.length ? (
-            ''
-          ) : (
-            <div className="NotificationList-empty">{app.translator.trans('core.forum.notifications.empty_text')}</div>
-          )}
-        </div>
+        <div className="NotificationList-content">{this.content(state)}</div>
       </div>
     );
   }
 
+  content(state) {
+    if (state.isLoading()) {
+      return <LoadingIndicator className="LoadingIndicator--block" />;
+    }
+
+    if (state.hasItems()) {
+      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">{app.forum.attribute('title')}</div>
+              )}
+
+              <ul className="NotificationGroup-content">
+                {group.notifications.map((notification) => {
+                  const NotificationComponent = app.notificationComponents[notification.contentType()];
+                  return NotificationComponent ? <li>{NotificationComponent.component({ notification })}</li> : '';
+                })}
+              </ul>
+            </div>
+          );
+        });
+      });
+    }
+
+    return <div className="NotificationList-empty">{app.translator.trans('core.forum.notifications.empty_text')}</div>;
+  }
+
   oncreate(vnode) {
     super.oncreate(vnode);