Abstract away onNewRoute and routeHasChanged

This provides a cleaner interface for dealing with pages that handle multiple routes. We also move `modal` and `drawer` close calls to ensure those happen on route change with the same component.

js/src/common/components/Page.js

@@ -12,15 +12,18 @@ export default class Page extends Component {
 
     this.onNewRoute();
 
-    app.drawer.hide();
-    app.modal.close();
-
     /**
      * A class name to apply to the body while the route is active.
      *
      * @type {String}
      */
     this.bodyClass = '';
+
+    this.currentPath = m.route.get();
+  }
+
+  routeHasChanged() {
+    return this.currentPath !== m.route.get();
   }
 
   /**
@@ -30,8 +33,21 @@ export default class Page extends Component {
    * adjust the current route name.
    */
   onNewRoute() {
+    this.currentPath = m.route.get();
+
     app.previous = app.current;
     app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
+
+    app.drawer.hide();
+    app.modal.close();
+  }
+
+  onbeforeupdate(vnode, old) {
+    super.onbeforeupdate(vnode, old);
+
+    if (this.routeHasChanged()) {
+      this.onNewRoute();
+    }
   }
 
   oncreate(vnode) {

js/src/forum/components/DiscussionPage.js

@@ -32,23 +32,9 @@ export default class DiscussionPage extends Page {
      */
     this.near = m.route.param('near') || 0;
 
-    this.load();
-
-    // If the discussion list has been loaded, then we'll enable the pane (and
-    // hide it by default). Also, if we've just come from another discussion
-    // page, then we don't want Mithril to redraw the whole page – if it did,
-    // then the pane would redraw which would be slow and would cause problems with
-    // event handlers.
-    if (app.discussions.hasDiscussions()) {
-      app.pane.enable();
-      app.pane.hide();
-    }
-
     app.history.push('discussion');
 
     this.bodyClass = 'App--discussion';
-
-    this.prevRoute = m.route.get();
   }
 
   onremove() {
@@ -95,30 +81,32 @@ export default class DiscussionPage extends Page {
     );
   }
 
-  onbeforeupdate(vnode) {
+  onNewRoute() {
-    super.onbeforeupdate(vnode);
+    // If we have routed to the same discussion as we were viewing previously,
+    // prompt the post stream to jump to the new 'near' param.
+    // Otherwise, load in a new discussion. The `else` branch will
+    // be followed when `onNewRoute` is called from `oninit`.
+    const idParam = m.route.param('id');
+    if (this.discussion && idParam && idParam.split('-')[0] === this.discussion.id()) {
+      const near = m.route.param('near') || '1';
 
-    if (m.route.get() !== this.prevRoute) {
+      if (near !== String(this.near)) {
-      this.onNewRoute();
+        this.stream.goToNumber(near);
-      this.prevRoute = m.route.get();
+      }
 
-      // If we have routed to the same discussion as we were viewing previously,
+      this.near = near;
-      // cancel the unloading of this controller and instead prompt the post
+    } else {
-      // stream to jump to the new 'near' param.
+      super.onNewRoute();
-      if (this.discussion) {
-        const idParam = m.route.param('id');
 
-        if (idParam && idParam.split('-')[0] === this.discussion.id()) {
+      this.discussion = null;
-          const near = m.route.param('near') || '1';
 
-          if (near !== String(this.near)) {
+      this.load();
-            this.stream.goToNumber(near);
-          }
 
-          this.near = near;
+      // If the discussion list has been loaded, then we'll enable the pane (and
-        } else {
+      // hide it by default).
-          this.oninit(vnode);
+      if (app.discussions.hasDiscussions()) {
-        }
+        app.pane.enable();
+        app.pane.hide();
       }
     }
   }

js/src/forum/components/IndexPage.js

@@ -42,26 +42,16 @@ export default class IndexPage extends Page {
     app.history.push('index', app.translator.trans('core.forum.header.back_to_index_tooltip'));
 
     this.bodyClass = 'App--index';
-
-    this.currentPath = m.route.get();
   }
 
-  onbeforeupdate(vnode) {
+  onNewRoute() {
-    super.onbeforeupdate(vnode);
+    super.onNewRoute();
 
-    const curPath = m.route.get();
+    app.discussions.clear();
 
-    if (this.currentPath !== curPath) {
+    app.discussions.refreshParams(app.search.params());
-      this.onNewRoute();
 
-      app.discussions.clear();
+    this.setTitle();
-
-      app.discussions.refreshParams(app.search.params());
-
-      this.currentPath = curPath;
-
-      this.setTitle();
-    }
   }
 
   view() {

js/src/forum/components/UserPage.js

@@ -28,18 +28,13 @@ export default class UserPage extends Page {
 
     this.bodyClass = 'App--user';
 
-    this.prevUsername = m.route.param('username');
+    this.currUsername = m.route.param('username');
   }
 
-  onbeforeupdate() {
+  onNewRoute() {
-    const currUsername = m.route.param('username');
+    super.onNewRoute();
-    if (currUsername !== this.prevUsername) {
-      this.onNewRoute();
 
-      this.prevUsername = currUsername;
+    this.loadUser(m.route.param('username'));
-
-      this.loadUser(currUsername);
-    }
   }
 
   view() {