Extract base Page class

framework/core/js/forum/src/components/DiscussionPage.js

@@ -1,4 +1,4 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import ItemList from 'flarum/utils/ItemList';
 import DiscussionHero from 'flarum/components/DiscussionHero';
 import PostStream from 'flarum/components/PostStream';
@@ -6,15 +6,13 @@ import PostStreamScrubber from 'flarum/components/PostStreamScrubber';
 import LoadingIndicator from 'flarum/components/LoadingIndicator';
 import SplitDropdown from 'flarum/components/SplitDropdown';
 import listItems from 'flarum/helpers/listItems';
-import mixin from 'flarum/utils/mixin';
-import evented from 'flarum/utils/evented';
 import DiscussionControls from 'flarum/utils/DiscussionControls';
 
 /**
  * The `DiscussionPage` component displays a whole discussion page, including
  * the discussion list pane, the hero, the posts, and the sidebar.
  */
-export default class DiscussionPage extends mixin(Component, evented) {
+export default class DiscussionPage extends Page {
   constructor(...args) {
     super(...args);
 
@@ -43,18 +41,14 @@ export default class DiscussionPage extends mixin(Component, evented) {
       app.pane.enable();
       app.pane.hide();
 
-      if (app.current instanceof DiscussionPage) {
+      if (app.previous instanceof DiscussionPage) {
         m.redraw.strategy('diff');
       }
     }
 
-    // Push onto the history stack, but use a generalised key so that navigating
-    // to a few different discussions won't override the behaviour of the back
-    // button.
     app.history.push('discussion');
-    app.current = this;
+
-    app.drawer.hide();
+    this.bodyClass = 'App--discussion';
-    app.modal.close();
   }
 
   onunload(e) {
@@ -121,13 +115,6 @@ export default class DiscussionPage extends mixin(Component, evented) {
     );
   }
 
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    $('#app').addClass('App--discussion');
-    context.onunload = () => $('#app').removeClass('App--discussion');
-  }
-
   /**
    * Clear and reload the discussion.
    */
@@ -197,8 +184,6 @@ export default class DiscussionPage extends mixin(Component, evented) {
     this.stream = new PostStream({discussion, includedPosts});
     this.stream.on('positionChanged', this.positionChanged.bind(this));
     this.stream.goToNumber(m.route.param('near') || includedPosts[0].number(), true);
-
-    this.trigger('loaded', discussion);
   }
 
   /**

framework/core/js/forum/src/components/IndexPage.js

@@ -1,6 +1,6 @@
-import Component from 'flarum/Component';
+import { extend } from 'flarum/extend';
+import Page from 'flarum/components/Page';
 import ItemList from 'flarum/utils/ItemList';
-import affixSidebar from 'flarum/utils/affixSidebar';
 import listItems from 'flarum/helpers/listItems';
 import DiscussionList from 'flarum/components/DiscussionList';
 import WelcomeHero from 'flarum/components/WelcomeHero';
@@ -16,22 +16,22 @@ import SelectDropdown from 'flarum/components/SelectDropdown';
  * The `IndexPage` component displays the index page, including the welcome
  * hero, the sidebar, and the discussion list.
  */
-export default class IndexPage extends Component {
+export default class IndexPage extends Page {
   constructor(...args) {
     super(...args);
 
     // If the user is returning from a discussion page, then take note of which
     // discussion they have just visited. After the view is rendered, we will
     // scroll down so that this discussion is in view.
-    if (app.current instanceof DiscussionPage) {
+    if (app.previous instanceof DiscussionPage) {
-      this.lastDiscussion = app.current.discussion;
+      this.lastDiscussion = app.previous.discussion;
     }
 
     // If the user is coming from the discussion list, then they have either
     // just switched one of the parameters (filter, sort, search) or they
     // probably want to refresh the results. We will clear the discussion list
     // cache so that results are reloaded.
-    if (app.current instanceof IndexPage) {
+    if (app.previous instanceof IndexPage) {
       app.cache.discussionList = null;
     }
 
@@ -55,9 +55,8 @@ export default class IndexPage extends Component {
     }
 
     app.history.push('index');
-    app.current = this;
+
-    app.drawer.hide();
+    this.bodyClass = 'App--index';
-    app.modal.close();
   }
 
   onunload() {
@@ -71,7 +70,7 @@ export default class IndexPage extends Component {
       <div className="IndexPage">
         {this.hero()}
         <div className="container">
-          <nav className="IndexPage-nav sideNav" config={affixSidebar}>
+          <nav className="IndexPage-nav sideNav">
             <ul>{listItems(this.sidebarItems().toArray())}</ul>
           </nav>
           <div className="IndexPage-results sideNavOffset">
@@ -87,13 +86,11 @@ export default class IndexPage extends Component {
   }
 
   config(isInitialized, context) {
+    super.config(...arguments);
+
     if (isInitialized) return;
 
-    $('#app').addClass('App--index');
+    extend(context, 'onunload', () => $('#app').css('min-height', ''));
-    context.onunload = () => {
-      $('#app').removeClass('App--index')
-        .css('min-height', '');
-    };
 
     app.setTitle('');
     app.setTitleCount(0);

framework/core/js/forum/src/components/NotificationsPage.js

@@ -1,21 +1,20 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import NotificationList from 'flarum/components/NotificationList';
 
 /**
  * The `NotificationsPage` component shows the notifications list. It is only
  * used on mobile devices where the notifications dropdown is within the drawer.
  */
-export default class NotificationsPage extends Component {
+export default class NotificationsPage extends Page {
   constructor(...args) {
     super(...args);
 
-    app.current = this;
     app.history.push('notifications');
-    app.drawer.hide();
-    app.modal.close();
 
     this.list = new NotificationList();
     this.list.load();
+
+    this.bodyClass = 'App--notifications';
   }
 
   view() {

framework/core/js/forum/src/components/Page.js

@@ -0,0 +1,35 @@
+import Component from 'flarum/Component';
+
+/**
+ * The `Page` component
+ *
+ * @abstract
+ */
+export default class Page extends Component {
+  constructor(...args) {
+    super(...args);
+
+    app.previous = app.current;
+    app.current = this;
+
+    app.drawer.hide();
+    app.modal.close();
+
+    /**
+     * A class name to apply to the body while the route is active.
+     *
+     * @type {String}
+     */
+    this.bodyClass = '';
+  }
+
+  config(isInitialized, context) {
+    if (isInitialized) return;
+
+    if (this.bodyClass) {
+      $('#app').addClass(this.bodyClass);
+
+      context.onunload = () => $('#app').removeClass(this.bodyClass);
+    }
+  }
+}

framework/core/js/forum/src/components/UserPage.js

@@ -1,4 +1,4 @@
-import Component from 'flarum/Component';
+import Page from 'flarum/components/Page';
 import ItemList from 'flarum/utils/ItemList';
 import affixSidebar from 'flarum/utils/affixSidebar';
 import UserCard from 'flarum/components/UserCard';
@@ -15,7 +15,7 @@ import listItems from 'flarum/helpers/listItems';
  *
  * @abstract
  */
-export default class UserPage extends Component {
+export default class UserPage extends Page {
   constructor(...args) {
     super(...args);
 
@@ -27,9 +27,8 @@ export default class UserPage extends Component {
     this.user = null;
 
     app.history.push('user');
-    app.current = this;
+
-    app.drawer.hide();
+    this.bodyClass = 'App--user';
-    app.modal.close();
   }
 
   view() {
@@ -57,13 +56,6 @@ export default class UserPage extends Component {
     );
   }
 
-  config(isInitialized, context) {
-    if (isInitialized) return;
-
-    $('#app').addClass('App--user');
-    context.onunload = () => $('#app').removeClass('App--user');
-  }
-
   /**
    * Get the content to display in the user page.
    *