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

   1 import React from 'react'
   2 import styles from './Flash.scss'
   3
   4 const messageLabel =[
   5   'CREATED_ASSET',
   6   'CREATED_ACCOUNT',
   7   'CREATED_TRANSACTION',
   8   'CREATED_KEY',
   9   'RESET_PASSWORD_KEY',
  10   'CREATE_REGISTER_ACCOUNT',
  11   'RESTORE_SUCCESS',
  12   'UPDATED_ASSET'
  13 ]
  14
  15 class Flash extends React.Component {
  16   constructor(props) {
  17     super(props)
  18     Object.keys(props.messages).forEach(key => {
  19       const item = props.messages[key]
  20       if (!item.displayed) {
  21         this.props.markFlashDisplayed(key)
  22         setTimeout(() => {
  23           this.props.dismissFlash(key)
  24         }, 5000)
  25       }
  26     })
  27   }
  28
  29   componentWillReceiveProps(nextProps) {
  30     Object.keys(nextProps.messages).forEach(key => {
  31       const item = nextProps.messages[key]
  32       if (!item.displayed) {
  33         this.props.markFlashDisplayed(key)
  34         setTimeout(() => {
  35           this.props.dismissFlash(key)
  36         }, 5000)
  37       }
  38     })
  39   }
  40
  41
  42   render() {
  43     if (!this.props.messages || this.props.hideFlash) {
  44       return null
  45     }
  46
  47     const t = this.props.t
  48     const messages = []
  49     // Flash messages are stored in an objecty key with a random UUID. If
  50     // multiple messages are displayed, we rely on the browser maintaining
  51     // object inerstion order of keys to display messages in the order they
  52     // were created.
  53     Object.keys(this.props.messages).forEach(key => {
  54       const item = this.props.messages[key]
  55       const messageKey = (messageLabel).filter(key => key === item.message)
  56       const messageContent =  messageKey.length === 0?  item.message:  <p>{t(`message.${messageKey}`)}</p>
  57       messages.push(
  58         <div className={`${styles.alert} ${styles[item.type]} ${styles.main}`} key={key}>
  59           <div className={styles.content}>
  60             {item.title && <div><strong>{item.title}</strong></div>}
  61             {messageContent}
  62           </div>
  63
  64           <button type='button' className='close' onClick={() => this.props.dismissFlash(key)}>
  65             <span>&times;</span>
  66           </button>
  67         </div>)
  68     })
  69
  70     return (
  71       <div className={this.props.className}>
  72         {messages}
  73       </div>
  74     )
  75   }
  76 }
  77
  78 import { connect } from 'react-redux'
  79 import {withNamespaces} from 'react-i18next'
  80
  81 const mapStateToProps = (state) => ({
  82   // hideFlash: state.tutorial.isShowing && state.routing.locationBeforeTransitions.pathname.includes(state.tutorial.route)
  83   hideFlash: false,
  84 })
  85
  86 export default connect(
  87   mapStateToProps
  88 )(withNamespaces('translations') (Flash))