From c9a854355444ecfaf27827b7cdc1ab914f786552 Mon Sep 17 00:00:00 2001
From: Ian Morland <16573496+imorland@users.noreply.github.com>
Date: Tue, 14 Dec 2021 22:11:48 +0000
Subject: [PATCH] feat: extract notification primaryControl items to an
 ItemList (#3204)

---
 js/src/forum/components/NotificationList.js | 28 +++++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/js/src/forum/components/NotificationList.js b/js/src/forum/components/NotificationList.js
index 6314b20a4..8c63fc328 100644
--- a/js/src/forum/components/NotificationList.js
+++ b/js/src/forum/components/NotificationList.js
@@ -5,6 +5,7 @@ import Button from '../../common/components/Button';
 import Link from '../../common/components/Link';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import Discussion from '../../common/models/Discussion';
+import ItemList from '../../common/utils/ItemList';
 
 /**
  * The `NotificationList` component displays a list of the logged-in user's
@@ -19,14 +20,7 @@ export default class NotificationList extends Component {
         <div className="NotificationList-header">
           <h4 className="App-titleControl App-titleControl--text">{app.translator.trans('core.forum.notifications.title')}</h4>
 
-          <div className="App-primaryControl">
-            <Button
-              className="Button Button--link"
-              icon="fas fa-check"
-              title={app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip')}
-              onclick={state.markAllAsRead.bind(state)}
-            />
-          </div>
+          <div className="App-primaryControl">{this.controlItems().toArray()}</div>
         </div>
 
         <div className="NotificationList-content">{this.content(state)}</div>
@@ -34,6 +28,24 @@ export default class NotificationList extends Component {
     );
   }
 
+  controlItems() {
+    const items = new ItemList();
+    const state = this.attrs.state;
+
+    items.add(
+      'mark_all_as_read',
+      <Button
+        className="Button Button--link"
+        icon="fas fa-check"
+        title={app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip')}
+        onclick={state.markAllAsRead.bind(state)}
+      />,
+      70
+    );
+
+    return items;
+  }
+
   content(state) {
     if (state.isLoading()) {
       return <LoadingIndicator className="LoadingIndicator--block" />;