diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx index 5ac3f0a7afafc7d84282f47e3c870adb1ad95cbf..a417aae31bf7158ee43f3de29679e921c2cacabd 100644 --- a/src/containers/alerts.jsx +++ b/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} /> diff --git a/src/containers/inline-messages.jsx b/src/containers/inline-messages.jsx index a55bc899724343b985125c54bc77c50a212243eb..c47943e09403889700fa05e3fdd701780aa9c549 100644 --- a/src/containers/inline-messages.jsx +++ b/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; } diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index e38b591a4555e6151005f2148f2a8718adc1c7af..b5c82daf0f7d93249379a377062543919c2951d7 100644 --- a/src/reducers/alerts.js +++ b/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