src/features/shared/components/Flash/Flash.jsx

   1 import React from 'react'
   2 import styles from './Flash.scss'
   3
   4 class Flash extends React.Component {
   5   componentWillReceiveProps(nextProps) {
   6     Object.keys(nextProps.messages).forEach(key => {
   7       const item = nextProps.messages[key]
   8       if (!item.displayed) {
   9         this.props.markFlashDisplayed(key)
  10       }
  11     })
  12   }
  13
  14   render() {
  15     if (!this.props.messages || this.props.hideFlash) {
  16       return null
  17     }
  18
  19     const messages = []
  20     // Flash messages are stored in an objecty key with a random UUID. If
  21     // multiple messages are displayed, we rely on the browser maintaining
  22     // object inerstion order of keys to display messages in the order they
  23     // were created.
  24     Object.keys(this.props.messages).forEach(key => {
  25       const item = this.props.messages[key]
  26       messages.push(
  27         <div className={`${styles.alert} ${styles[item.type]} ${styles.main}`} key={key}>
  28           <div className={styles.content}>
  29             {item.title && <div><strong>{item.title}</strong></div>}
  30             {item.message}
  31           </div>
  32
  33           <button type='button' className='close' onClick={() => this.props.dismissFlash(key)}>
  34             <span>&times;</span>
  35           </button>
  36         </div>)
  37     })
  38
  39     return (
  40       <div>
  41         {messages}
  42       </div>
  43     )
  44   }
  45 }
  46
  47 import { connect } from 'react-redux'
  48
  49 const mapStateToProps = (state) => ({
  50   hideFlash: state.tutorial.isShowing && state.routing.locationBeforeTransitions.pathname.includes(state.tutorial.route)
  51 })
  52
  53 export default connect(
  54   mapStateToProps
  55 )(Flash)