containers/MyAccMenu/index.js

/* eslint-disable react/no-array-index-key */
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { getRoundRequest } from '../../reducers';
import { getInitialBetsLoaded } from '../../store/bets';
import { getSelectedMenuItem } from '../../store/common';

const mapToProps = (state) => ({
  selectedMenuItem: getSelectedMenuItem(state),
  initialBetsLoaded: getInitialBetsLoaded(state),
});

const actionsToProps = (dispatch) => ({
  getRound: (payload) => dispatch(getRoundRequest(payload)),
});
/**
 * @class
 * @property {object} props
 * @property {string} props.selectedMenuItem In case of my account section is open selectedMenuItem
 * indicate which section is selected
 * @property {boolean} props.initialBetsLoaded Indicate is round API is fatched once
 * @property {Function} props.getRound Call get round API in case when user automaticaly
 *  go on "My Account" section in header from lobby page
 */
class MyAccMenu extends Component {
  /**
   * Add post message listener for height of iframe
   *
   * @returns {void}
   */
  componentDidMount() {
    window.addEventListener('message', this.postMessageListener);
  }

  /**
   * Remove post message listener for height of iframe
   *
   * @returns {void}
   */
  componentWillUnmount() {
    window.removeEventListener('message', this.postMessageListener);
  }

  /**
   * Set heighte to iframe
   *
   * @function
   * @param {object} postMessage
   * @returns {void}
   */
  postMessageListener = (postMessage) => {
    if (typeof postMessage.data !== 'object' && JSON.parse(postMessage.data).data !== undefined) {
      const height = JSON.parse(postMessage.data).data.height;
      document.getElementById('externalIframe').style.height = `${height}px`;
    }
  }

  /**
   * Render
   *
   * @returns {void}
   */
  render() {
    return (
      this.props.selectedMenuItem
        ? (
          <iframe
            title="MyAccMenu"
            id="externalIframe"
            width="100%"
            frameBorder={0}
            src={this.props.selectedMenuItem}
            style={{ backgroundColor: 'white' }}
          />
        )
        : <div className="loading-wrap sm"><div className="loading-item" /></div>
    );
  }
}

export default connect(
  mapToProps,
  actionsToProps,
)(MyAccMenu);