Clean up app.current, app.previous in JS (#2156)

- Encapsulate app.current, app.previous in PageState objects
- Reorganize Page classes to use one central base class in common

Co-authored-by: Franz Liedke <franz@develophp.org>

js/src/forum/ForumApplication.js

@@ -160,7 +160,7 @@ export default class ForumApplication extends Application {
    * @return {Boolean}
    */
   viewingDiscussion(discussion) {
-    return this.current instanceof DiscussionPage && this.current.discussion === discussion;
+    return this.current.matches(DiscussionPage, { discussion });
   }
 
   /**

js/src/forum/compat.js

@@ -23,7 +23,6 @@ import PostEdited from './components/PostEdited';
 import PostStream from './components/PostStream';
 import ChangePasswordModal from './components/ChangePasswordModal';
 import IndexPage from './components/IndexPage';
-import Page from './components/Page';
 import DiscussionRenamedNotification from './components/DiscussionRenamedNotification';
 import DiscussionsSearchSource from './components/DiscussionsSearchSource';
 import HeaderSecondary from './components/HeaderSecondary';
@@ -92,7 +91,6 @@ export default Object.assign(compat, {
   'components/PostStream': PostStream,
   'components/ChangePasswordModal': ChangePasswordModal,
   'components/IndexPage': IndexPage,
-  'components/Page': Page,
   'components/DiscussionRenamedNotification': DiscussionRenamedNotification,
   'components/DiscussionsSearchSource': DiscussionsSearchSource,
   'components/HeaderSecondary': HeaderSecondary,

js/src/forum/components/DiscussionPage.js

@@ -1,4 +1,4 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import ItemList from '../../common/utils/ItemList';
 import DiscussionHero from './DiscussionHero';
 import PostStream from './PostStream';
@@ -42,7 +42,7 @@ export default class DiscussionPage extends Page {
       app.pane.enable();
       app.pane.hide();
 
-      if (app.previous instanceof DiscussionPage) {
+      if (app.previous.matches(DiscussionPage)) {
         m.redraw.strategy('diff');
       }
     }
@@ -200,6 +200,9 @@ export default class DiscussionPage extends Page {
     this.stream = new PostStream({ discussion, includedPosts });
     this.stream.on('positionChanged', this.positionChanged.bind(this));
     this.stream.goToNumber(m.route.param('near') || (includedPosts[0] && includedPosts[0].number()), true);
+
+    app.current.set('discussion', discussion);
+    app.current.set('stream', this.stream);
   }
 
   /**

js/src/forum/components/IndexPage.js

@@ -1,5 +1,5 @@
 import { extend } from '../../common/extend';
-import Page from './Page';
+import Page from '../../common/components/Page';
 import ItemList from '../../common/utils/ItemList';
 import listItems from '../../common/helpers/listItems';
 import DiscussionList from './DiscussionList';
@@ -25,15 +25,15 @@ export default class IndexPage extends Page {
     // 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.previous instanceof DiscussionPage) {
-      this.lastDiscussion = app.previous.discussion;
+    if (app.previous.matches(DiscussionPage)) {
+      this.lastDiscussion = app.previous.get('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.previous instanceof IndexPage) {
+    if (app.previous.matches(IndexPage)) {
       app.discussions.clear();
     }
 

js/src/forum/components/NotificationsPage.js

@@ -1,4 +1,4 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import NotificationList from './NotificationList';
 
 /**

js/src/forum/components/Page.js

@@ -1,33 +0,0 @@
-import Component from '../../common/Component';
-
-/**
- * The `Page` component
- *
- * @abstract
- */
-export default class Page extends Component {
-  init() {
-    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);
-    }
-  }
-}

js/src/forum/components/Post.js

@@ -116,6 +116,7 @@ export default class Post extends Component {
     let classes = (existing || '').split(' ').concat(['Post']);
 
     const user = this.props.post.user();
+    const discussion = this.props.post.discussion();
 
     if (this.loading) {
       classes.push('Post--loading');
@@ -125,7 +126,7 @@ export default class Post extends Component {
       classes.push('Post--by-actor');
     }
 
-    if (user && app.current.discussion && app.current.discussion.attribute('startUserId') == user.id()) {
+    if (user && user === discussion.user()) {
       classes.push('Post--by-start-user');
     }
 

js/src/forum/components/RenameDiscussionModal.js

@@ -57,7 +57,7 @@ export default class RenameDiscussionModal extends Modal {
         .save({ title })
         .then(() => {
           if (app.viewingDiscussion(this.discussion)) {
-            app.current.stream.update();
+            app.current.get('stream').update();
           }
           m.redraw();
           this.hide();

js/src/forum/components/ReplyComposer.js

@@ -89,7 +89,8 @@ export default class ReplyComposer extends ComposerBody {
         // If we're currently viewing the discussion which this reply was made
         // in, then we can update the post stream and scroll to the post.
         if (app.viewingDiscussion(discussion)) {
-          app.current.stream.update().then(() => app.current.stream.goToNumber(post.number()));
+          const stream = app.current.get('stream');
+          stream.update().then(() => stream.goToNumber(post.number()));
         } else {
           // Otherwise, we'll create an alert message to inform the user that
           // their reply has been posted, containing a button which will

js/src/forum/components/UserPage.js

@@ -1,4 +1,4 @@
-import Page from './Page';
+import Page from '../../common/components/Page';
 import ItemList from '../../common/utils/ItemList';
 import affixSidebar from '../utils/affixSidebar';
 import UserCard from './UserCard';
@@ -71,6 +71,8 @@ export default class UserPage extends Page {
   show(user) {
     this.user = user;
 
+    app.current.set('user', user);
+
     app.setTitle(user.displayName());
 
     m.redraw();

js/src/forum/states/GlobalSearchState.js

@@ -77,7 +77,7 @@ export default class GlobalSearchState extends SearchState {
    * @return {String}
    */
   getInitialSearch() {
-    return app.current.constructor.providesInitialSearch && this.params().q;
+    return app.current.type.providesInitialSearch && this.params().q;
   }
 
   /**

js/src/forum/utils/DiscussionControls.js

@@ -178,7 +178,7 @@ export default {
         app.composer.show();
 
         if (goToLast && app.viewingDiscussion(this) && !app.composer.isFullScreen()) {
-          app.current.stream.goToNumber('reply');
+          app.current.get('stream').goToNumber('reply');
         }
 
         deferred.resolve(component);

js/src/forum/utils/UserControls.js

@@ -112,7 +112,7 @@ export default {
       .delete()
       .then(() => {
         this.showDeletionAlert(user, 'success');
-        if (app.current instanceof UserPage && app.current.user === user) {
+        if (app.current.matches(UserPage, { user })) {
           app.history.back();
         } else {
           window.location.reload();