Roughly implement routes and data preloading

Only preloading data for basic requests w/o query params, at least for
the moment - if we have to preload for something like
/?q=test&sort=newest, we end up having to duplicate a whole lot of
logic between JS/PHP.

framework/core/js/forum/src/components/discussion-list.js

@@ -78,10 +78,16 @@ export default class DiscussionList extends Component {
   }
 
   loadResults(offset) {
-    var params = this.params();
-    params.page = {offset};
-    params.include = params.include.join(',');
-    return app.store.find('discussions', params);
+    if (app.preload.response) {
+      var discussions = app.store.pushPayload(app.preload.response);
+      app.preload.response = null;
+      return m.deferred().resolve(discussions).promise;
+    } else {
+      var params = this.params();
+      params.page = {offset};
+      params.include = params.include.join(',');
+      return app.store.find('discussions', params);
+    }
   }
 
   loadMore() {

framework/core/js/forum/src/components/discussion-page.js

@@ -44,7 +44,21 @@ export default class DiscussionPage extends mixin(Component, evented) {
 
     var params = this.params();
     params.include = params.include.join(',');
-    app.store.find('discussions', m.route.param('id'), params).then(this.setupDiscussion.bind(this));
+
+    var discussion;
+    if (app.preload.response) {
+      // We must wrap this in a setTimeout because if we are mounting this
+      // component for the first time on page load, then any calls to m.redraw
+      // will be ineffective and thus any configs (scroll code) will be run
+      // before stuff is drawn to the page.
+      setTimeout(() => {
+        var discussion = app.store.pushPayload(app.preload.response);
+        app.preload.response = null;
+        this.setupDiscussion(discussion);
+      });
+    } else {
+      app.store.find('discussions', m.route.param('id'), params).then(this.setupDiscussion.bind(this));
+    }
 
     // Trigger a redraw only if we're not already in a computation (e.g. route change)
     m.startComputation();
@@ -77,12 +91,19 @@ export default class DiscussionPage extends mixin(Component, evented) {
     app.setTitle(discussion.title());
 
     var includedPosts = [];
-    discussion.payload.included && discussion.payload.included.forEach(record => {
-      if (record.type === 'posts' && (record.contentType !== 'comment' || record.contentHtml)) {
-        includedPosts.push(app.store.getById('posts', record.id));
+    if (discussion.payload && discussion.payload.included) {
+      discussion.payload.included.forEach(record => {
+        if (record.type === 'posts' && (record.contentType !== 'comment' || record.contentHtml)) {
+          includedPosts.push(app.store.getById('posts', record.id));
+        }
+      });
+      includedPosts.sort((a, b) => a.id() - b.id());
+    } else {
+      var posts = discussion.posts();
+      if (posts) {
+        includedPosts = posts.filter(post => post);
       }
-    });
-    includedPosts.sort((a, b) => a.id() - b.id());
+    }
 
     this.stream = new PostStream({ discussion, includedPosts });
     this.stream.on('positionChanged', this.positionChanged.bind(this));

framework/core/js/forum/src/components/post-scrubber.js

@@ -199,9 +199,8 @@ export default class PostScrubber extends Component {
 
     if (isInitialized) { return; }
 
-    this.renderScrollbar();
-
     context.onunload = this.ondestroy.bind(this);
+
     this.scrollListener.start();
 
     // Whenever the window is resized, adjust the height of the scrollbar

framework/core/js/forum/src/components/search-box.js

@@ -23,7 +23,7 @@ export default class SearchBox extends Component {
   constructor(props) {
     super(props);
 
-    this.value = m.prop(this.getCurrentSearch() || '');
+    this.value = m.prop();
     this.hasFocus = m.prop(false);
 
     this.sources = this.sourceItems().toArray();
@@ -40,10 +40,16 @@ export default class SearchBox extends Component {
   }
 
   getCurrentSearch() {
-    return typeof app.current.searching === 'function' && app.current.searching();
+    return app.current && typeof app.current.searching === 'function' && app.current.searching();
   }
 
   view() {
+    // Initialize value in the view rather than the constructor so that we have
+    // access to app.current.
+    if (typeof this.value() === 'undefined') {
+      this.value(this.getCurrentSearch() || '');
+    }
+
     var currentSearch = this.getCurrentSearch();
 
     return m('div.search-box.dropdown', {
@@ -104,7 +110,7 @@ export default class SearchBox extends Component {
 
           case 13: // Return
             this.$('input').blur();
-            this.getItem(this.index()).find('a')[0].dispatchEvent(new Event('click'));
+            m.route(this.getItem(this.index()).find('a').attr('href'));
             break;
 
           case 27: // Escape

framework/core/js/forum/src/initializers/boot.js

@@ -18,8 +18,11 @@ export default function(app) {
 
   app.history = new History();
   app.pane = new Pane(id('page'));
+  app.search = new SearchBox();
   app.cache = {};
 
+  m.startComputation();
+
   m.mount(id('back-control'), BackButton.component({ className: 'back-control', drawer: true }));
   m.mount(id('back-button'), BackButton.component());
 
@@ -39,10 +42,12 @@ export default function(app) {
   app.modal = m.mount(id('modal'), Modal.component());
   app.alerts = m.mount(id('alerts'), Alerts.component());
 
-  m.route.mode = 'hash';
+  m.route.mode = 'pathname';
   m.route(id('content'), '/', mapRoutes(app.routes));
 
-  app.search = new SearchBox();
+  m.endComputation();
 
   new ScrollListener(top => $('body').toggleClass('scrolled', top > 0)).start();
+
+  app.booted = true;
 }