Merge pull request #3867 from benjiwheeler/alerts-revise

Revise alerts code to clarify and reorganize alert type handling

Author: benjiwheeler

src/containers/alerts.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {AlertTypes} from '../lib/alerts/index.jsx';
 
 import {
-    closeAlert
+    closeAlert,
+    filterPopupAlerts
 } from '../reducers/alerts';
 
 import AlertsComponent from '../components/alerts/alerts.jsx';
@@ -16,10 +16,7 @@ const Alerts = ({
 }) => (
     <AlertsComponent
         // only display standard and extension alerts here
-        alertsList={alertsList.filter(curAlert => (
-            curAlert.alertType === AlertTypes.STANDARD ||
-            curAlert.alertType === AlertTypes.EXTENSION
-        ))}
+        alertsList={filterPopupAlerts(alertsList)}
         className={className}
         onCloseAlert={onCloseAlert}
     />

src/containers/inline-messages.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {AlertTypes} from '../lib/alerts/index.jsx';
+
+import {
+    filterInlineAlerts
+} from '../reducers/alerts';
 
 import InlineMessageComponent from '../components/alerts/inline-message.jsx';
 
@@ -13,9 +16,7 @@ const InlineMessages = ({
         return null;
     }
     // only display inline alerts here
-    const inlineAlerts = alertsList.filter(curAlert => (
-        curAlert.alertType === AlertTypes.INLINE
-    ));
+    const inlineAlerts = filterInlineAlerts(alertsList);
     if (!inlineAlerts || !inlineAlerts.length) {
         return null;
     }

src/reducers/alerts.js

@@ -2,29 +2,47 @@ import alertsData from '../lib/alerts/index.jsx';
 import {AlertTypes, AlertLevels} from '../lib/alerts/index.jsx';
 import extensionData from '../lib/libraries/extensions/index.jsx';
 
-const SHOW_STANDARD_ALERT = 'scratch-gui/alerts/SHOW_STANDARD_ALERT';
+const SHOW_ALERT = 'scratch-gui/alerts/SHOW_ALERT';
 const SHOW_EXTENSION_ALERT = 'scratch-gui/alerts/SHOW_EXTENSION_ALERT';
 const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
 const CLOSE_ALERTS_WITH_ID = 'scratch-gui/alerts/CLOSE_ALERTS_WITH_ID';
 
+/**
+ * Initial state of alerts reducer
+ *
+ * {bool} visible - whether the alerts are visible
+ * {array} alertsList - list of alerts, each with properties:
+ *  * alertType (required): one of AlertTypes
+ *  * closeButton (optional): bool indicating that we should show close button
+ *  * content (optional): react element (a <FormattedMessage />)
+ *  * extentionId (optional): id string that identifies the extension
+ *  * iconURL (optional): string
+ *  * level (required): string, one of AlertLevels
+ *  * message (optional): string
+ *  * showReconnect (optional): bool
+ */
 const initialState = {
     visible: true,
-    // list of alerts, each with properties:
-    // * alert type (required): one of AlertTypes
-    // * closeButton (optional): bool indicating that we should show close button
-    // * content (optional): react element (a <FormattedMessage />)
-    // * extentionId (optional): id string that identifies the extension
-    // * iconURL (optional): string
-    // * level (required): string, one of AlertLevels
-    // * message (optional): string
-    // * showReconnect (optional): bool
     alertsList: []
 };
 
+const filterPopupAlerts = alertsList => (
+    alertsList.filter(curAlert => (
+        curAlert.alertType === AlertTypes.STANDARD ||
+        curAlert.alertType === AlertTypes.EXTENSION
+    ))
+);
+
+const filterInlineAlerts = alertsList => (
+    alertsList.filter(curAlert => (
+        curAlert.alertType === AlertTypes.INLINE
+    ))
+);
+
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
-    case SHOW_STANDARD_ALERT: { // also will show inline alerts
+    case SHOW_ALERT: { // intended to show standard and inline alerts, but not extensions
         const alertId = action.alertId;
         if (alertId) {
             const newAlert = {
@@ -134,7 +152,7 @@ const closeAlertsWithId = function (alertId) {
  */
 const showStandardAlert = function (alertId) {
     return {
-        type: SHOW_STANDARD_ALERT,
+        type: SHOW_ALERT,
         alertId
     };
 };
@@ -177,6 +195,8 @@ export {
     reducer as default,
     initialState as alertsInitialState,
     closeAlert,
+    filterInlineAlerts,
+    filterPopupAlerts,
     showAlertWithTimeout,
     showExtensionAlert,
     showStandardAlert