gistfile1.txt

import React, { Component, PropTypes } from 'react'
import { DetailContainer } from './detail-container'
import { connect } from 'react-redux'
import { fetchWallet } from '../actions/wallet'
import { merge } from 'lodash' // for deep-nested assigns/merges

class WalletSummary extends Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    wallet: PropTypes.array
  }

  constructor (props) {
    super(props)

    this.state = {
      ui: {
        wallet: {
          hideDetails: true,
          detailArrowOffset: {
            top: 0,
            left: 0
          }
        }
      },
      selectedCurrency: {}
    }
  }

  componentDidMount () {
    this.props.dispatch(fetchWallet())
  }

  calculateArrowOffset (selectedCurrency) {
    let arrow = document.querySelector('.m-detail-container__arrow')
    let offset = {}
    if (arrow) {
      offset = {
        top: selectedCurrency.getBoundingClientRect().top + arrow.offsetHeight + (selectedCurrency.offsetParent.offsetHeight * 2),
        left: selectedCurrency.getBoundingClientRect().left + (arrow.offsetWidth * 2) + (selectedCurrency.offsetWidth * 1.1)
      }
    }
    return offset
  }

  setDetailArrowOffset (i) {
    let selectedCurrency = this.refs['currency' + i]
    let offset = this.calculateArrowOffset(selectedCurrency)
    const ui = merge(this.state.ui, {
      wallet: {
        detailArrowOffset: offset
      }
    })
    this.setState({ ui })
  }

  handleCloseViaEscKey = (evt) => {
    const ESC = 27
    let keyCode = evt.keyCode || evt.which
    if (keyCode === ESC && !this.state.ui.wallet.hideDetails) {
      this.setState({ selectedCurrency: {} })
      this.handleDetailVisibilityToggle(true) // isHidden? true
      this.unregisterKeyUpEvent()
    }
  }

  closeAndResetContainer = () => {
    this.setState({ selectedCurrency: {} })
    this.handleDetailVisibilityToggle(true) // isHidden? true
  }

  onDetailContainerBlur = () => {
    this.closeAndResetContainer()
    this.unregisterBlurEvent()
  }

  unregisterBlurEvent = () => {
    this.refs['detailContainer'].refs['overlay'].removeEventListener('click')
  }

  registerKeyUpEvent = () => {
    document.addEventListener('keyup', this.handleCloseViaEscKey, false, true)
  }

  unregisterKeyUpEvent = () => {
    document.removeEventListener('keyup')
  }

  handleSettingCurrency = (currency, i) => {
    if (currency) {
      if (this.state.selectedCurrency === currency) {
        this.closeAndResetContainer()
      } else {
        this.setState({ selectedCurrency: currency })
        this.handleDetailVisibilityToggle(false) // isHidden? false
        this.setDetailArrowOffset(i)
      }
      this.registerKeyUpEvent()
    }
  }

  handleDetailVisibilityToggle = (isHidden = true) => {
    const ui = merge(this.state.ui, {
      wallet: {
        hideDetails: isHidden
      }
    })

    this.setState({ ui })
  }

  renderIcon (currency) {
    return (
      <img className='m-currency__icon' role='presentation' src={currency.iconUrl} alt={currency.currency} />
    )
  }

  renderCurrency (currency, i) {
    return (
      <li
        key={i}
        className='m-currency user-wallet__item'
        ref={'currency' + i}
      >
        <a
          href='#'
          onClick={this.handleSettingCurrency.bind(this, currency, i)}
          title={`${currency.balance} ${currency.currency}`}
        >
          {this.renderIcon(currency)}
          {currency.balance}
        </a>
      </li>
    )
  }

  renderCurrencies () {
    return this.props.wallet.map((currency, i) => {
      return this.renderCurrency(currency, i)
    })
  }

  renderWallet () {
    if (this.props.wallet && this.props.wallet.length) {
      return (
        <ul className='m-wallet-summary'>
          <li>
            <a
              href='/rewards'
              className='wallet-nav__link'
              data-test-id='walletHeaderLink'
              title='Get more wallet details'
            >
              Wallet
            </a>
          </li>
          {this.renderCurrencies()}
        </ul>
      )
    }
  }

  renderDetailContainerTitle () {
    return (
      <h5>
        <span>{this.state.selectedCurrency.displayName}</span>
        <small>{`Current ${this.state.selectedCurrency.displayName} total: ${this.state.selectedCurrency.balance}`}</small>
      </h5>
    )
  }

  renderDetail (visible) {
    if (
      this.props.wallet &&
      this.props.wallet.length > 0 &&
      this.state.selectedCurrency
    ) {
      return (
        <DetailContainer
          ref='detailContainer'
          title={this.renderDetailContainerTitle()}
          isHidden={this.state.ui.wallet.hideDetails}
          arrowOffset={this.state.ui.wallet.detailArrowOffset}
          onBlur={this.onDetailContainerBlur}
          onClose={this.closeAndResetContainer}
          ariaTitleId={this.state.selectedCurrency.currency}
        >
          <p>{this.state.selectedCurrency.description}</p>
        </DetailContainer>
      )
    }
  }

  render () {
    return (
      <nav
        data-test-id='walletWrapper'
        className='m-wallet-wrapper'
        ref='walletSummary'
      >
        { this.renderWallet() }
        { this.renderDetail() }
      </nav>
    )
  }
}

function mapStateToProps (store) {
  return {
    wallet: store.wallet.data
  }
}

export default connect(mapStateToProps)(WalletSummary)