diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 4831b78f066a07730159a59b137e51b19e2e0c4a..2ec848984c77aaac28a9a85f6a3bce048089b617 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -11,7 +11,8 @@ const AlertComponent = ({ iconURL, message, onCloseAlert, - onReconnect + onReconnect, + showReconnect }) => ( <Box className={styles.alert} @@ -25,16 +26,18 @@ const AlertComponent = ({ ) : null} {message} </div> - <button - className={styles.connectionButton} - onClick={onReconnect} - > - <FormattedMessage - defaultMessage="Reconnect" - description="Button to reconnect the device" - id="gui.connection.reconnect" - /> - </button> + {showReconnect ? ( + <button + className={styles.connectionButton} + onClick={onReconnect} + > + <FormattedMessage + defaultMessage="Reconnect" + description="Button to reconnect the device" + id="gui.connection.reconnect" + /> + </button> + ) : null} <Box className={styles.alertCloseButtonContainer} > @@ -52,7 +55,8 @@ AlertComponent.propTypes = { iconURL: PropTypes.string, message: PropTypes.string, onCloseAlert: PropTypes.func.isRequired, - onReconnect: PropTypes.func.isRequired + onReconnect: PropTypes.func, + showReconnect: PropTypes.bool.isRequired }; export default AlertComponent; diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx index 31d7b22c155d57eeef8aa73964bb01b92ec04d4b..9a87f766c376a0562225e118c9ef53cea0d29f4f 100644 --- a/src/components/alerts/alerts.jsx +++ b/src/components/alerts/alerts.jsx @@ -20,6 +20,7 @@ const AlertsComponent = ({ index={index} key={index} message={a.message} + showReconnect={a.showReconnect} onCloseAlert={onCloseAlert} /> ))} diff --git a/src/containers/alert.jsx b/src/containers/alert.jsx index 3005f478f16726e92e58c44b08563d5b137a69c9..62ff58448a03c172687a9a3c5518b516b3f0b187 100644 --- a/src/containers/alert.jsx +++ b/src/containers/alert.jsx @@ -26,12 +26,14 @@ class Alert extends React.Component { const { index, // eslint-disable-line no-unused-vars iconURL, - message + message, + showReconnect } = this.props; return ( <AlertComponent iconURL={iconURL} message={message} + showReconnect={showReconnect} onCloseAlert={this.handleOnCloseAlert} onReconnect={this.handleOnReconnect} /> @@ -56,7 +58,8 @@ Alert.propTypes = { index: PropTypes.number, message: PropTypes.string, onCloseAlert: PropTypes.func.isRequired, - onOpenConnectionModal: PropTypes.func + onOpenConnectionModal: PropTypes.func, + showReconnect: PropTypes.bool.isRequired }; export default connect( diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index fc4a2653d943c3787788237826da0b8fcaf57b5e..ee5ef0931596878c9c0cf59102921848fb2f8873 100644 --- a/src/reducers/alerts.js +++ b/src/reducers/alerts.js @@ -15,12 +15,14 @@ const reducer = function (state, action) { const newList = state.alertsList.slice(); const newAlert = {message: action.data.message}; const extensionId = action.data.extensionId; + newAlert.showReconnect = false; if (extensionId) { // if it's an extension const extension = extensionData.find(ext => ext.extensionId === extensionId); if (extension && extension.name) { // TODO: is this the right place to assemble this message? newAlert.extensionId = extensionId; newAlert.message = `${newAlert.message} ${extension.name}.`; + newAlert.showReconnect = true; } if (extension && extension.smallPeripheralImage) { newAlert.iconURL = extension.smallPeripheralImage;