Allow extensions to use route resolvers (#2275)

- mapRoutes: don't wrap components in resolvers if they are already resolvers
- Extract defaultResolver into its own class
- Allow either route resolver instances, or components with an optional resolverClass which should accept the component and route name in its constructor.
- Introduce a resolver for DiscussionPage, so that routing from one post to another on the same discussion triggers a scroll instead of rerendering

js/src/forum/compat.js

@@ -71,6 +71,7 @@ import Search from './components/Search';
 import DiscussionListItem from './components/DiscussionListItem';
 import LoadingPost from './components/LoadingPost';
 import PostsUserPage from './components/PostsUserPage';
+import DiscussionPageResolver from './resolver/DiscussionPageResolver';
 import routes from './routes';
 import ForumApplication from './ForumApplication';
 
@@ -146,6 +147,7 @@ export default Object.assign(compat, {
   'components/DiscussionListItem': DiscussionListItem,
   'components/LoadingPost': LoadingPost,
   'components/PostsUserPage': PostsUserPage,
+  'resolvers/DiscussionPageResolver': DiscussionPageResolver,
   routes: routes,
   ForumApplication: ForumApplication,
 });

js/src/forum/resolver/DiscussionPageResolver.ts

@@ -0,0 +1,47 @@
+import DefaultResolver from '../../common/resolvers/DefaultResolver';
+
+/**
+ * This isn't exported as it is a temporary measure.
+ * A more robust system will be implemented alongside UTF-8 support in beta 15.
+ */
+function getDiscussionIdFromSlug(slug: string | undefined) {
+  if (!slug) return;
+  return slug.split('-')[0];
+}
+
+/**
+ * A custom route resolver for DiscussionPage that generates the same key to all posts
+ * on the same discussion. It triggers a scroll when going from one post to another
+ * in the same discussion.
+ */
+export default class DiscussionPageResolver extends DefaultResolver {
+  static scrollToPostNumber: number | null = null;
+
+  makeKey() {
+    const params = { ...m.route.param() };
+    if ('near' in params) {
+      delete params.near;
+    }
+    params.id = getDiscussionIdFromSlug(params.id);
+    return this.routeName.replace('.near', '') + JSON.stringify(params);
+  }
+
+  onmatch(args, requestedPath, route) {
+    if (route.includes('/d/:id') && getDiscussionIdFromSlug(args.id) === getDiscussionIdFromSlug(m.route.param('id'))) {
+      DiscussionPageResolver.scrollToPostNumber = parseInt(args.near);
+    }
+
+    return super.onmatch(args, requestedPath, route);
+  }
+
+  render(vnode) {
+    if (DiscussionPageResolver.scrollToPostNumber !== null) {
+      const number = DiscussionPageResolver.scrollToPostNumber;
+      // Scroll after a timeout to avoid clashes with the render.
+      setTimeout(() => app.current.get('stream').goToNumber(number));
+      DiscussionPageResolver.scrollToPostNumber = null;
+    }
+
+    return super.render(vnode);
+  }
+}

js/src/forum/routes.js

@@ -4,6 +4,7 @@ import PostsUserPage from './components/PostsUserPage';
 import DiscussionsUserPage from './components/DiscussionsUserPage';
 import SettingsPage from './components/SettingsPage';
 import NotificationsPage from './components/NotificationsPage';
+import DiscussionPageResolver from './resolver/DiscussionPageResolver';
 
 /**
  * The `routes` initializer defines the forum app's routes.
@@ -14,8 +15,8 @@ export default function (app) {
   app.routes = {
     index: { path: '/all', component: IndexPage },
 
-    discussion: { path: '/d/:id', component: DiscussionPage },
-    'discussion.near': { path: '/d/:id/:near', component: DiscussionPage },
+    discussion: { path: '/d/:id', component: DiscussionPage, resolverClass: DiscussionPageResolver },
+    'discussion.near': { path: '/d/:id/:near', component: DiscussionPage, resolverClass: DiscussionPageResolver },
 
     user: { path: '/u/:username', component: PostsUserPage },
     'user.posts': { path: '/u/:username', component: PostsUserPage },