Improve embed architecture

- Fix composer preview button not working
- Fix inappropriate alert message when reply is submitted

extensions/embed/js/forum/src/components/DiscussionPage.js

@@ -1,27 +1,11 @@
-import Component from 'flarum/Component';
+import BaseDiscussionPage from 'flarum/components/DiscussionPage';
 import PostStream from 'flarum/components/PostStream';
 
-export default class DiscussionPage extends Component {
+export default class DiscussionPage extends BaseDiscussionPage {
   init() {
     super.init();
 
-    /**
+    this.bodyClass = null;
-     * The discussion that is being viewed.
-     *
-     * @type {Discussion}
-     */
-    const discussion = this.discussion = app.preloadedDocument();
-
-    let includedPosts = [];
-    if (discussion.payload && discussion.payload.included) {
-      includedPosts = discussion.payload.included
-        .filter(record => record.type === 'posts' && record.relationships && record.relationships.discussion)
-        .map(record => app.store.getById('posts', record.id))
-        .sort((a, b) => a.id() - b.id())
-        .slice(0, 20);
-    }
-
-    this.stream = new PostStream({discussion, includedPosts});
   }
 
   view() {
@@ -30,7 +14,7 @@ export default class DiscussionPage extends Component {
         <div class="container">
           <div className="DiscussionPage-discussion">
             <div className="DiscussionPage-stream">
-              {this.stream.render()}
+              {this.stream ? this.stream.render() : ''}
             </div>
           </div>
         </div>

extensions/embed/js/forum/src/main.js

@@ -3,12 +3,21 @@ import app from 'flarum/app';
 import Composer from 'flarum/components/Composer';
 import ModalManager from 'flarum/components/ModalManager';
 import AlertManager from 'flarum/components/AlertManager';
+import mapRoutes from 'flarum/utils/mapRoutes';
+import Pane from 'flarum/utils/Pane';
+import Drawer from 'flarum/utils/Drawer';
 
 import DiscussionPage from 'flarum/embed/components/DiscussionPage';
 
-app.initializers.add('boot', () => {
+app.initializers.boot.content = app => {
+  m.route.mode = 'pathname';
+
   override(m, 'route', function(original, root, arg1, arg2, vdom) {
-    if (root.addEventListener || root.attachEvent) {
+    if (arguments.length === 1) {
+
+    } else if (arguments.length === 4 && typeof arg1 === 'string') {
+
+    } else if (root.addEventListener || root.attachEvent) {
       root.href = vdom.attrs.href;
       root.target = '_blank';
 
@@ -17,12 +26,28 @@ app.initializers.add('boot', () => {
       return;
     }
 
-    original.apply(this, arguments);
+    return original.apply(this, Array.prototype.slice.call(arguments, 1));
   });
 
+  app.pane = new Pane(document.getElementById('app'));
+  app.drawer = new Drawer();
   app.composer = m.mount(document.getElementById('composer'), Composer.component());
   app.modal = m.mount(document.getElementById('modal'), ModalManager.component());
   app.alerts = m.mount(document.getElementById('alerts'), AlertManager.component());
 
-  m.mount(document.getElementById('content'), DiscussionPage.component());
+  app.viewingDiscussion = function(discussion) {
-});
+    return this.current instanceof DiscussionPage && this.current.discussion === discussion;
+  };
+
+  delete app.routes['index.filter'];
+  app.routes['discussion'] = {path: '/embed/:id', component: DiscussionPage.component()};
+  app.routes['discussion.near'] = {path: '/embed/:id/:near', component: DiscussionPage.component()};
+
+  const basePath = app.forum.attribute('basePath');
+  m.route.mode = 'pathname';
+  m.route(
+    document.getElementById('content'),
+    basePath + '/',
+    mapRoutes(app.routes, basePath)
+  );
+};

extensions/embed/src/Listener/AddEmbedRoute.php

@@ -28,6 +28,6 @@ class AddEmbedRoute
      */
     public function addEmbedRoute(ConfigureForumRoutes $event)
     {
-        $event->get('/embed/{id:\d+}', 'embed.discussion', 'Flarum\Embed\DiscussionController');
+        $event->get('/embed/{id:\d+(?:-[^/]*)?}[/{near:[^/]*}]', 'embed.discussion', 'Flarum\Embed\DiscussionController');
     }
 }