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/common/Application.js

@@ -21,6 +21,7 @@ import Post from './models/Post';
 import Group from './models/Group';
 import Notification from './models/Notification';
 import { flattenDeep } from 'lodash-es';
+import PageState from './states/PageState';
 
 /**
  * The `App` class provides a container for an application, as well as various
@@ -115,6 +116,28 @@ export default class Application {
    */
   requestError = null;
 
+  /**
+   * The page the app is currently on.
+   *
+   * This object holds information about the type of page we are currently
+   * visiting, and sometimes additional arbitrary page state that may be
+   * relevant to lower-level components.
+   *
+   * @type {PageState}
+   */
+  current = new PageState(null);
+
+  /**
+   * The page the app was on before the current page.
+   *
+   * Once the application navigates to another page, the object previously
+   * assigned to this.current will be moved to this.previous, while this.current
+   * is re-initialized.
+   *
+   * @type {PageState}
+   */
+  previous = new PageState(null);
+
   data;
 
   title = '';

js/src/common/compat.js

@@ -30,6 +30,7 @@ import Forum from './models/Forum';
 import Component from './Component';
 import Translator from './Translator';
 import AlertManager from './components/AlertManager';
+import Page from './components/Page';
 import Switch from './components/Switch';
 import Badge from './components/Badge';
 import LoadingIndicator from './components/LoadingIndicator';
@@ -94,6 +95,7 @@ export default {
   Component: Component,
   Translator: Translator,
   'components/AlertManager': AlertManager,
+  'components/Page': Page,
   'components/Switch': Switch,
   'components/Badge': Badge,
   'components/LoadingIndicator': LoadingIndicator,

js/src/common/components/ModalManager.js

@@ -43,8 +43,6 @@ export default class ModalManager extends Component {
     this.showing = true;
     this.component = component;
 
-    if (app.current) app.current.retain = true;
-
     m.redraw(true);
 
     const dismissible = !!this.component.isDismissible();

js/src/common/components/Page.js

@@ -0,0 +1,34 @@
+import Component from '../Component';
+import PageState from '../states/PageState';
+
+/**
+ * The `Page` component
+ *
+ * @abstract
+ */
+export default class Page extends Component {
+  init() {
+    app.previous = app.current;
+    app.current = new PageState(this.constructor);
+
+    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/common/states/PageState.js

@@ -0,0 +1,33 @@
+import subclassOf from '../../common/utils/subclassOf';
+
+export default class PageState {
+  constructor(type, data = {}) {
+    this.type = type;
+    this.data = data;
+  }
+
+  /**
+   * Determine whether the page matches the given class and data.
+   *
+   * @param {object} type The page class to check against. Subclasses are
+   *                      accepted as well.
+   * @param {object} data
+   * @return {boolean}
+   */
+  matches(type, data = {}) {
+    // Fail early when the page is of a different type
+    if (!subclassOf(this.type, type)) return false;
+
+    // Now that the type is known to be correct, we loop through the provided
+    // data to see whether it matches the data in our state.
+    return Object.keys(data).every((key) => this.data[key] === data[key]);
+  }
+
+  get(key) {
+    return this.data[key];
+  }
+
+  set(key, value) {
+    this.data[key] = value;
+  }
+}

js/src/common/utils/subclassOf.js

@@ -0,0 +1,6 @@
+/**
+ * Check if class A is the same as or a subclass of class B.
+ */
+export default function subclassOf(A, B) {
+  return A && (A === B || A.prototype instanceof B);
+}