components/Header.js

/**
 * @module Header
 */
import React, { Component } from 'react';
import Constants, { SVG_ICONS, GAME_TYPE } from '../constants';
import MyAccount from './Account/MyAccount';
import SVGComponent from './SVG/SVGComponent';
/**
 * @typedef {object} props
 * @property {string} currentPage
 * @property {boolean} isAccountOpen
 * @property {boolean} isLoading
 * @property {object} user
 * @property {string} gameType
 * @property {Function} changePage
 * @property {Function} toggleAccount
 * @property {Function} goToLogin
 */
export default class Header extends Component {
  /**
   * Redirect to Bets page
   *
   * @function
   * @returns {void}
   */
  goToBets = () => {
    this.props.setPlacebetAfterLogin({ placebetAfterLogin: false });
    this.props.changePage({ page: Constants.PAGES.BETS });
  }

  /**
   * Redirect to League Selection page
   *
   * @function
   * @returns {void}
   */
  goToLeagueSelectionPage = () => {
    this.props.setInitialiseBet({ initialBetsLoaded: false });
    this.props.changePage({ page: Constants.PAGES.LEAGUE_SELECTION });
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="container-fluid logo-bar">
        <div className="row logo-bar__wrap flex-nowrap">
          <div className="col d-flex align-items-center">
            {this.props.currentPage === Constants.PAGES.LOGIN
              && this.props.gameType !== GAME_TYPE.CLASSIC && !this.props.user
              ? (
                <div onClick={this.goToLeagueSelectionPage}>
                  <SVGComponent
                    className="icon-m mr-3 ar-l"
                    src={`${SVG_ICONS.utility}#icon__arrow-down`}
                  />
                  <span className="logo-bar__title">Back</span>
                </div>
              )
              : this.props.currentPage !== Constants.PAGES.BETS
              && this.props.currentPage !== Constants.PAGES.LEAGUE_SELECTION
              && !this.props.isAccountOpen
              && !this.props.isLoading && (
                <div onClick={this.goToBets}>
                  <SVGComponent
                    className="icon-m mr-3 ar-l"
                    src={`${SVG_ICONS.utility}#icon__arrow-down`}
                  />
                  <span className="logo-bar__title">Bets</span>
                </div>
              )}
          </div>

          <div className="logo-s-wrap" onClick={() => { window.location.href = this.props.destinations.home; }}>
            <span className="logo-s" />
          </div>
          {this.props.user && !this.props.isLoading
            ? (
              <MyAccount
                className="col"
                userAmount={this.props.user.balance.amount}
                toggleAccount={this.props.toggleAccount}
                isAccountOpen={this.props.isAccountOpen}
                currencySymbol={this.props.currencySymbol}
              />
            )
            : this.props.currentPage !== Constants.PAGES.LOGIN && !this.props.isLoading
              ? (
                <div
                  className="col d-flex align-items-center justify-content-end"
                  id="lobbyLoginBtn"
                  onClick={this.props.goToLogin}
                >
                  <span className="logo-bar__title">Login</span>
                  <SVGComponent
                    className="logo-bar__icon ml-3"
                    src="/img/icons-navbar.svg#icon-login"
                  />
                </div>
              )
              : <div className="col" />}
        </div>
      </div>
    );
  }
}