Fix lifecyle method workarounds

js/src/common/components/Link.js

@@ -31,10 +31,12 @@ export default class Link extends Component {
       if (!('replace' in options)) options.replace = true;
     }
 
-    // Mithril 2 does not completely rerender the page if a route change leads to the same route
-    // (or the same component handling a different route).
-    // Here, the `force` parameter will use Mithril's key system to force a full rerender
-    // see https://mithril.js.org/route.html#key-parameter
+    // Mithril 2 does not completely rerender the page if a route change leads
+    // to the same route.
+    // Here, the `force` parameter will use Mithril's key system to force a full
+    // rerender. See https://mithril.js.org/route.html#key-parameter
+    // Routing to a different route handled by the same component will rerender
+    // the whole page regardless of this option.
     if (extract(attrs, 'force')) {
       if (!('state' in options)) options.state = {};
       if (!('key' in options.state)) options.state.key = Date.now();

js/src/common/components/Page.js

@@ -10,7 +10,11 @@ export default class Page extends Component {
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.onNewRoute();
+    app.previous = app.current;
+    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
+
+    app.drawer.hide();
+    app.modal.close();
 
     /**
      * A class name to apply to the body while the route is active.
@@ -20,20 +24,6 @@ export default class Page extends Component {
     this.bodyClass = '';
   }
 
-  /**
-   * A collections of actions to run when the route changes.
-   * This is extracted here, and not hardcoded in oninit, as oninit is not called
-   * when a different route is handled by the same component, but we still need to
-   * adjust the current route name.
-   */
-  onNewRoute() {
-    app.previous = app.current;
-    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
-
-    app.drawer.hide();
-    app.modal.close();
-  }
-
   oncreate(vnode) {
     super.oncreate(vnode);
 

js/src/common/utils/mapRoutes.js

@@ -15,7 +15,7 @@ export default function mapRoutes(routes, basePath = '') {
 
     map[basePath + route.path] = {
       render() {
-        return m(route.component, { routeName: key });
+        return [m(route.component, { routeName: key, key: JSON.stringify(m.route.param()) })];
       },
     };
   }

js/src/common/utils/setRouteWithForcedRefresh.ts

@@ -1,8 +1,10 @@
 import Mithril from 'mithril';
 
 /**
- * Mithril 2 does not completely rerender the page if a route change leads to the same route
- * (or the same component handling a different route). This util calls m.route.set, forcing a reonit.
+ * Mithril 2 does not completely rerender the page if a route change
+ * leads to the same route. This util calls m.route.set, forcing a reonit.
+ * For pages that are handled by the same component, but have a different
+ * route name, calling this function is not needed.
  *
  * @see https://mithril.js.org/route.html#key-parameter
  */

js/src/forum/components/DiscussionPage.js

@@ -47,8 +47,6 @@ export default class DiscussionPage extends Page {
     app.history.push('discussion');
 
     this.bodyClass = 'App--discussion';
-
-    this.prevRoute = m.route.get();
   }
 
   onremove() {
@@ -96,34 +94,6 @@ export default class DiscussionPage extends Page {
     );
   }
 
-  onbeforeupdate(vnode) {
-    super.onbeforeupdate(vnode);
-
-    if (m.route.get() !== this.prevRoute) {
-      this.onNewRoute();
-      this.prevRoute = m.route.get();
-
-      // If we have routed to the same discussion as we were viewing previously,
-      // cancel the unloading of this controller and instead prompt the post
-      // stream to jump to the new 'near' param.
-      if (this.discussion) {
-        const idParam = m.route.param('id');
-
-        if (idParam && idParam.split('-')[0] === this.discussion.id()) {
-          const near = m.route.param('near') || '1';
-
-          if (near !== String(this.near)) {
-            this.stream.goToNumber(near);
-          }
-
-          this.near = near;
-        } else {
-          this.oninit(vnode);
-        }
-      }
-    }
-  }
-
   /**
    * Load the discussion from the API or use the preloaded one.
    */
@@ -248,10 +218,7 @@ export default class DiscussionPage extends Page {
     // replace it into the window's history and our own history stack.
     const url = app.route.discussion(discussion, (this.near = startNumber));
 
-    this.prevRoute = url;
-    m.route.set(url, null, { replace: true });
     window.history.replaceState(null, document.title, url);
-
     app.history.push('discussion', discussion.title());
 
     // If the user hasn't read past here before, then we'll update their read

js/src/forum/components/IndexPage.js

@@ -42,26 +42,6 @@ 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) {
-    super.onbeforeupdate(vnode);
-
-    const curPath = m.route.get();
-
-    if (this.currentPath !== curPath) {
-      this.onNewRoute();
-
-      app.discussions.clear();
-
-      app.discussions.refreshParams(app.search.params());
-
-      this.currentPath = curPath;
-
-      this.setTitle();
-    }
   }
 
   view() {

js/src/forum/components/UserPage.js

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

js/src/forum/states/GlobalSearchState.js

@@ -1,4 +1,3 @@
-import setRouteWithForcedRefresh from '../../common/utils/setRouteWithForcedRefresh';
 import SearchState from './SearchState';
 
 export default class GlobalSearchState extends SearchState {
@@ -66,7 +65,7 @@ export default class GlobalSearchState extends SearchState {
       params.sort = sort;
     }
 
-    setRouteWithForcedRefresh(app.route(app.current.get('routeName'), params));
+    m.route.set(app.route(app.current.get('routeName'), params));
   }
 
   /**
@@ -90,6 +89,6 @@ export default class GlobalSearchState extends SearchState {
     const params = this.params();
     delete params.q;
 
-    setRouteWithForcedRefresh(app.route(app.current.get('routeName'), params));
+    m.route.set(app.route(app.current.get('routeName'), params));
   }
 }

js/src/forum/utils/History.js

@@ -1,5 +1,3 @@
-import setRouteWithForcedRefresh from '../../common/utils/setRouteWithForcedRefresh';
-
 /**
  * The `History` class keeps track and manages a stack of routes that the user
  * has navigated to in their session.
@@ -116,6 +114,6 @@ export default class History {
   home() {
     this.stack.splice(0);
 
-    setRouteWithForcedRefresh('/');
+    m.route.set('/');
   }
 }