Extract flags list state (#24)

* Extract flags list state

extensions/flags/js/src/forum/addFlagsDropdown.js

@@ -6,7 +6,7 @@ import FlagsDropdown from './components/FlagsDropdown';
 export default function() {
   extend(HeaderSecondary.prototype, 'items', function(items) {
     if (app.forum.attribute('canViewFlags')) {
-      items.add('flags', <FlagsDropdown/>, 15);
+      items.add('flags', <FlagsDropdown state={app.flags} />, 15);
     }
   });
 }

extensions/flags/js/src/forum/addFlagsToPosts.js

@@ -20,19 +20,19 @@ export default function() {
 
     this.subtree.invalidate();
 
-    if (app.cache.flags) {
+    if (app.flags.cache) {
-      app.cache.flags.some((flag, i) => {
+      app.flags.cache.some((flag, i) => {
         if (flag.post() === post) {
-          app.cache.flags.splice(i, 1);
+          app.flags.cache.splice(i, 1);
 
-          if (app.cache.flagIndex === post) {
+          if (app.flags.index === post) {
-            let next = app.cache.flags[i];
+            let next = app.flags.cache[i];
 
-            if (!next) next = app.cache.flags[0];
+            if (!next) next = app.flags.cache[0];
 
             if (next) {
               const nextPost = next.post();
-              app.cache.flagIndex = nextPost;
+              app.flags.index = nextPost;
               m.route(app.route.post(nextPost));
             }
           }

extensions/flags/js/src/forum/components/FlagList.js

@@ -7,16 +7,11 @@ import humanTime from 'flarum/helpers/humanTime';
 
 export default class FlagList extends Component {
   init() {
-    /**
+    this.state = this.props.state;
-     * Whether or not the notifications are loading.
-     *
-     * @type {Boolean}
-     */
-    this.loading = false;
   }
 
   view() {
-    const flags = app.cache.flags || [];
+    const flags = this.state.cache;
 
     return (
       <div className="NotificationList FlagList">
@@ -34,7 +29,7 @@ export default class FlagList extends Component {
                     <a href={app.route.post(post)} className="Notification Flag" config={function(element, isInitialized) {
                       m.route.apply(this, arguments);
 
-                      if (!isInitialized) $(element).on('click', () => app.cache.flagIndex = post);
+                      if (!isInitialized) $(element).on('click', () => app.flags.index = post);
                     }}>
                       {avatar(post.user())}
                       {icon('fas fa-flag', {className: 'Notification-icon'})}
@@ -49,7 +44,7 @@ export default class FlagList extends Component {
                   </li>
                 );
               })
-              : !this.loading
+              : !this.state.loading
                 ? <div className="NotificationList-empty">{app.translator.trans('flarum-flags.forum.flagged_posts.empty_text')}</div>
                 : LoadingIndicator.component({className: 'LoadingIndicator--block'})}
           </ul>
@@ -57,28 +52,4 @@ export default class FlagList extends Component {
       </div>
     );
   }
-
-  /**
-   * Load flags into the application's cache if they haven't already
-   * been loaded.
-   */
-  load() {
-    if (app.cache.flags && !app.session.user.attribute('newFlagCount')) {
-      return;
-    }
-
-    this.loading = true;
-    m.redraw();
-
-    app.store.find('flags')
-      .then(flags => {
-        app.session.user.pushAttributes({newFlagCount: 0});
-        app.cache.flags = flags.sort((a, b) => b.createdAt() - a.createdAt());
-      })
-      .catch(() => {})
-      .then(() => {
-        this.loading = false;
-        m.redraw();
-      });
-  }
 }

extensions/flags/js/src/forum/components/FlagsDropdown.js

@@ -10,10 +10,12 @@ export default class FlagsDropdown extends NotificationsDropdown {
     super.initProps(props);
   }
 
-  init() {
+  getMenu() {
-    super.init();
+    return (
-
+      <div className={'Dropdown-menu ' + this.props.menuClassName} onclick={this.menuClick.bind(this)}>
-    this.list = new FlagList();
+        {this.showing ? FlagList.component({ state: this.props.state }) : ''}
+      </div>
+    );
   }
 
   goToRoute() {
@@ -21,7 +23,7 @@ export default class FlagsDropdown extends NotificationsDropdown {
   }
 
   getUnreadCount() {
-    return app.cache.flags ? app.cache.flags.length : app.forum.attribute('flagCount');
+    return app.flags.cache ? app.flags.cache.length : app.forum.attribute('flagCount');
   }
 
   getNewCount() {

extensions/flags/js/src/forum/components/FlagsPage.js

@@ -12,13 +12,12 @@ export default class FlagsPage extends Page {
 
     app.history.push('flags');
 
-    this.list = new FlagList();
+    app.flags.load();
-    this.list.load();
 
     this.bodyClass = 'App--flags';
   }
 
   view() {
-    return <div className="FlagsPage">{this.list.render()}</div>;
+    return <div className="FlagsPage"><FlagList state={app.flags}></FlagList></div>;
   }
 }

extensions/flags/js/src/forum/index.js

@@ -3,6 +3,7 @@ import Model from 'flarum/Model';
 
 import Flag from './models/Flag';
 import FlagsPage from './components/FlagsPage';
+import FlagListState from './states/FlagListState';
 import addFlagControl from './addFlagControl';
 import addFlagsDropdown from './addFlagsDropdown';
 import addFlagsToPosts from './addFlagsToPosts';
@@ -13,7 +14,9 @@ app.initializers.add('flarum-flags', () => {
 
   app.store.models.flags = Flag;
 
-  app.routes.flags = {path: '/flags', component: <FlagsPage/>};
+  app.routes.flags = { path: '/flags', component: <FlagsPage /> };
+
+  app.flags = new FlagListState(app);
 
   addFlagControl();
   addFlagsDropdown();

extensions/flags/js/src/forum/states/FlagListState.js

@@ -0,0 +1,38 @@
+export default class FlagListState {
+  constructor(app) {
+    this.app = app;
+
+    /**
+     * Whether or not the flags are loading.
+     *
+     * @type {Boolean}
+     */
+    this.loading = false;
+
+    this.cache = [];
+  }
+
+  /**
+   * Load flags into the application's cache if they haven't already
+   * been loaded.
+   */
+  load() {
+    if (this.cache.length && !this.app.session.user.attribute('newFlagCount')) {
+      return;
+    }
+
+    this.loading = true;
+    m.redraw();
+
+    this.app.store.find('flags')
+      .then(flags => {
+        this.app.session.user.pushAttributes({ newFlagCount: 0 });
+        this.cache = flags.sort((a, b) => b.createdAt() - a.createdAt());
+      })
+      .catch(() => { })
+      .then(() => {
+        this.loading = false;
+        m.redraw();
+      });
+  }
+}