Use alert state as internal API only

flarum · Jun 19, 2020 · 2978dcc · 2978dcc
1 parent b805718
commit 2978dcc
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 73 deletions.
diff --git a/js/src/admin/components/BasicsPage.js b/js/src/admin/components/BasicsPage.js
@@ -2,7 +2,6 @@ import Page from '../../common/components/Page';
 import FieldSet from '../../common/components/FieldSet';
 import Select from '../../common/components/Select';
 import Button from '../../common/components/Button';
-import AlertState from '../../common/states/AlertState';
 import saveSettings from '../utils/saveSettings';
 import ItemList from '../../common/utils/ItemList';
 import Switch from '../../common/components/Switch';
@@ -178,17 +177,18 @@ export default class BasicsPage extends Page {
     if (this.loading) return;
 
     this.loading = true;
-    app.alerts.dismiss(this.successAlertKey);
+    app.alerts.dismiss(this.successAlert);
 
     const settings = {};
 
     this.fields.forEach((key) => (settings[key] = this.values[key]()));
 
     saveSettings(settings)
       .then(() => {
-        this.successAlertKey = app.alerts.show(
-          new AlertState({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') })
-        );
+        this.successAlert = app.alerts.show({
+          type: 'success',
+          children: app.translator.trans('core.admin.basics.saved_message'),
+        });
       })
       .catch(() => {})
       .then(() => {

diff --git a/js/src/admin/components/MailPage.js b/js/src/admin/components/MailPage.js
@@ -5,7 +5,6 @@ import Alert from '../../common/components/Alert';
 import Select from '../../common/components/Select';
 import LoadingIndicator from '../../common/components/LoadingIndicator';
 import saveSettings from '../utils/saveSettings';
-import AlertState from '../../common/states/AlertState';
 
 export default class MailPage extends Page {
   init() {
@@ -180,9 +179,10 @@ export default class MailPage extends Page {
       })
       .then((response) => {
         this.sendingTest = false;
-        app.alerts.show(
-          (this.testEmailSuccessAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.email.send_test_mail_success') }))
-        );
+        this.testEmailSuccessAlert = app.alerts.show({
+          type: 'success',
+          children: app.translator.trans('core.admin.email.send_test_mail_success'),
+        });
       })
       .catch((error) => {
         this.sendingTest = false;
@@ -197,17 +197,18 @@ export default class MailPage extends Page {
     if (this.saving || this.sendingTest) return;
 
     this.saving = true;
-    app.alerts.dismiss(this.successAlertKey);
+    app.alerts.dismiss(this.successAlerts);
 
     const settings = {};
 
     this.fields.forEach((key) => (settings[key] = this.values[key]()));
 
     saveSettings(settings)
       .then(() => {
-        this.successAlertKey = app.alerts.show(
-          new AlertState({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') })
-        );
+        this.successAlerts = app.alerts.show({
+          type: 'success',
+          children: app.translator.trans('core.admin.basics.saved_message'),
+        });
       })
       .catch(() => {})
       .then(() => {

diff --git a/js/src/common/Application.js b/js/src/common/Application.js
@@ -1,5 +1,4 @@
 import ItemList from './utils/ItemList';
-import Alert from './components/Alert';
 import Button from './components/Button';
 import ModalManager from './components/ModalManager';
 import AlertManager from './components/AlertManager';
@@ -23,7 +22,6 @@ import Notification from './models/Notification';
 import { flattenDeep } from 'lodash-es';
 import PageState from './states/PageState';
 import AlertManagerState from './states/AlertManagerState';
-import AlertState from './states/AlertState';
 
 /**
  * The `App` class provides a container for an application, as well as various
@@ -110,13 +108,13 @@ export default class Application {
   booted = false;
 
   /**
-   * An Alert that was shown as a result of an AJAX request error. If present,
-   * it will be dismissed on the next successful request.
+   * The key for an Alert that was shown as a result of an AJAX request error.
+   * If present, it will be dismissed on the next successful request.
    *
-   * @type {null|Alert}
+   * @type {int}
    * @private
    */
-  requestError = null;
+  requestErrorAlert = null;
 
   /**
    * The page the app is currently on.
@@ -314,7 +312,7 @@ export default class Application {
       }
     };
 
-    if (this.requestError) this.alerts.dismiss(this.requestError.alert.getKey());
+    if (this.requestErrorAlert) this.alerts.dismiss(this.requestErrorAlert);
 
     // Now make the request. If it's a failure, inspect the error that was
     // returned and show an alert containing its contents.
@@ -323,8 +321,6 @@ export default class Application {
     m.request(options).then(
       (response) => deferred.resolve(response),
       (error) => {
-        this.requestError = error;
-
         let children;
 
         switch (error.status) {
@@ -358,15 +354,15 @@ export default class Application {
         // the details property is decoded to transform escaped characters such as '\n'
         const formattedError = error.response && Array.isArray(error.response.errors) && error.response.errors.map((e) => decodeURI(e.detail));
 
-        error.alert = new AlertState({
+        error.alert = {
           type: 'error',
           children,
           controls: isDebug && [
             <Button className="Button Button--link" onclick={this.showDebug.bind(this, error, formattedError)}>
               Debug
             </Button>,
           ],
-        });
+        };
 
         try {
           options.errorHandler(error);
@@ -382,7 +378,7 @@ export default class Application {
             console.groupEnd();
           }
 
-          this.alerts.show(error.alert);
+          this.requestErrorAlert = this.alerts.show(error.alert);
         }
 
         deferred.reject(error);
@@ -398,7 +394,7 @@ export default class Application {
    * @private
    */
   showDebug(error, formattedError) {
-    this.alerts.dismiss(this.requestError.alert.getKey());
+    this.alerts.dismiss(this.requestErrorAlert);
 
     this.modal.show(new RequestErrorModal({ error, formattedError }));
   }

diff --git a/js/src/common/states/AlertManagerState.js b/js/src/common/states/AlertManagerState.js
@@ -1,6 +1,9 @@
+import AlertState from '../states/AlertState';
+
 export default class AlertManagerState {
   constructor() {
     this.activeAlerts = {};
+    this.alertId = 0;
   }
 
   getActiveAlerts() {
@@ -10,11 +13,12 @@ export default class AlertManagerState {
   /**
    * Show an Alert in the alerts area.
    */
-  show(alert) {
-    this.activeAlerts[alert.getKey()] = state;
+  show(attrs, alertClass) {
+    const alert = new AlertState(attrs, alertClass);
+    this.activeAlerts[++this.alertId] = alert;
     m.redraw();
 
-    return alert.getKey();
+    return this.alertId;
   }
 
   /**

diff --git a/js/src/common/states/AlertState.js b/js/src/common/states/AlertState.js
@@ -1,33 +1,16 @@
 import Alert from '../components/Alert';
 
 export default class AlertState {
-  constructor(attrs = {}, alertClass = Alert, alertKey = AlertState.genAlertId()) {
+  constructor(attrs = {}, alertClass = Alert) {
     this.attrs = attrs;
     this.alertClass = alertClass;
-    this.alertKey = alertKey;
   }
 
   getAttrs() {
     return this.attrs;
   }
 
-  setAttrs(attrs) {
-    this.attrs = attrs;
-  }
-
   getClass() {
     return this.alertClass;
   }
-
-  setClass(alertClass) {
-    this.alertClass = alertClass;
-  }
-
-  getKey() {
-    return this.key;
-  }
-
-  static genAlertId() {
-    return Math.floor(Math.random() * 100000000); // Generate a big random integer to avoid collisions.
-  }
 }
diff --git a/js/src/forum/components/EditPostComposer.js b/js/src/forum/components/EditPostComposer.js
@@ -101,13 +101,11 @@ export default class EditPostComposer extends ComposerBody {
             app.alerts.dismiss(alert);
           },
         });
-        app.alerts.show(
-          (alert = new Alert({
-            type: 'success',
-            children: app.translator.trans('core.forum.composer_edit.edited_message'),
-            controls: [viewButton],
-          }))
-        );
+        alert = app.alerts.show({
+          type: 'success',
+          children: app.translator.trans('core.forum.composer_edit.edited_message'),
+          controls: [viewButton],
+        });
       }
 
       app.composer.hide();

diff --git a/js/src/forum/components/ReplyComposer.js b/js/src/forum/components/ReplyComposer.js
@@ -1,9 +1,7 @@
 import ComposerBody from './ComposerBody';
-import Alert from '../../common/components/Alert';
 import Button from '../../common/components/Button';
 import icon from '../../common/helpers/icon';
 import extractText from '../../common/utils/extractText';
-import AlertState from '../../common/states/AlertState';
 
 function minimizeComposerIfFullScreen(e) {
   if (app.composer.isFullScreen()) {
@@ -105,13 +103,11 @@ export default class ReplyComposer extends ComposerBody {
               app.alerts.dismiss(alertKey);
             },
           });
-          alertKey = app.alerts.show(
-            new AlertState({
-              type: 'success',
-              children: app.translator.trans('core.forum.composer_reply.posted_message'),
-              controls: [viewButton],
-            })
-          );
+          alertKey = app.alerts.show({
+            type: 'success',
+            children: app.translator.trans('core.forum.composer_reply.posted_message'),
+            controls: [viewButton],
+          });
         }
 
         app.composer.hide();

diff --git a/js/src/forum/components/Search.js b/js/src/forum/components/Search.js
@@ -12,13 +12,13 @@ import UsersSearchSource from './UsersSearchSource';
  * The `Search` component displays a menu of as-you-type results from a variety
  * of sources.
  *
- * The search box will be 'activated' if the app's seach state's
+ * The search box will be 'activated' if the app's search state's
  * getInitialSearch() value is a truthy value. If this is the case, an 'x'
  * button will be shown next to the search field, and clicking it will clear the search.
  *
  * PROPS:
  *
- * - state: AlertState instance.
+ * - state: SearchState instance.
  */
 export default class Search extends Component {
   init() {

diff --git a/js/src/forum/utils/UserControls.js b/js/src/forum/utils/UserControls.js
@@ -1,10 +1,8 @@
-import Alert from '../../common/components/Alert';
 import Button from '../../common/components/Button';
 import Separator from '../../common/components/Separator';
 import EditUserModal from '../components/EditUserModal';
 import UserPage from '../components/UserPage';
 import ItemList from '../../common/utils/ItemList';
-import AlertState from '../../common/states/AlertState';
 
 /**
  * The `UserControls` utility constructs a list of buttons for a user which
@@ -135,12 +133,10 @@ export default {
       error: 'core.forum.user_controls.delete_error_message',
     }[type];
 
-    app.alerts.show(
-      new AlertState({
-        type,
-        children: app.translator.trans(message, { username, email }),
-      })
-    );
+    app.alerts.show({
+      type,
+      children: app.translator.trans(message, { username, email }),
+    });
   },
 
   /**