painel-usuario.jsx

// import React from 'react';
// import ReactDOM from 'react-dom';

class PainelUsuarioView extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = $.extend({}, props.view, this.setupLayout(props));
    this.handleScroll = this.handleScroll.bind(this);
  }

  setupLayout(props) {
    return {
      isLayoutTop: props.view.posicaoPainelUsuario == 'top',
      isLayoutBottom: props.view.posicaoPainelUsuario == 'bottom',
      isLayoutFooter: props.view.posicaoPainelUsuario == 'footer',
    }
  }

  handleScroll() {
    const windowHeight = 'innerHeight' in window ? window.innerHeight : document.documentElement.offsetHeight;
    const body = document.body;
    const html = document.documentElement;
    const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,  html.scrollHeight, html.offsetHeight);
    const windowBottom = windowHeight + window.pageYOffset;
    const elemHeight = $('#header-user-info').outerHeight(true);
    const elementBottom = $('#header-user-info').position().top + elemHeight;

    if (~~(windowBottom - docHeight) + elemHeight > 60 && elementBottom <= docHeight) {
      this.setState({bottomReached: true});
    } 
    if (~~(windowBottom - docHeight) + elemHeight < 0) {
      this.setState({bottomReached: false});
    }
  }

  componentWillMount() {
    $.post(window.baseUrl + 'User/BaseUser/ObterDadosDoUsuarioMilhasEConquistas')
      .done((res) => this.setState((oldState) => $.extend({}, oldState, res)));
  }

  componentDidMount() {
    this.interval = setInterval(this.handleScroll, 50);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    let {config, UsuarioConta, Nome, posicaoPainelUsuario, NivelMilhasUsuario} = this.state;
    let nivelUsuario = NivelMilhasUsuario ? NivelMilhasUsuario.Ordem : '1';
    let wrapperClass = `info-usuario user-panel user-panel--${posicaoPainelUsuario} nivel-${nivelUsuario}`;
    
    if (posicaoPainelUsuario == 'footer') {
      wrapperClass +=  this.state.bottomReached ? ' at-bottom' : ' not-at-bottom';
    }

    return (
      <div id="header-user-info" className={wrapperClass}>
        {Nome &&
          <div className="container">
            <div id="dados-cabecalho-usuario"
              className="user-panel__wrapper menu-perfil dropdown tour-home-user-info">
              <PainelUsuarioInfo data={this.state} />

              {UsuarioConta.Saldos && <PainelUsuarioItemSaldoNovo saldos={UsuarioConta.Saldos}/>}

              <PainelUsuarioConquistas data={this.state} />
            </div>
          </div>
        }
      </div>
    );
  }
};

const PainelUsuarioInfo = ({data}) => {
  let {Nome, UrlImagemTicks, NivelMilhasUsuario, UsuarioConta, nivelUsuario} = data;

  // nivelUsuario = data.nivelUsuario || 'Craque';

  return (
    <div className="user-panel__user-info usuario-informacao dropdown">
      <figure className="figura-avatar dropdown-toggle" data-toggle="dropdown">
        <img src={UrlImagemTicks} alt={Nome} />
      </figure>

      <div className="status-user dropdown-toggle" data-toggle="dropdown">
        <div>
          <span className="user-name">{Nome}</span>
          <i className="icon icon-caret-down"></i>
        </div>

        {nivelUsuario && <div className="user-nivel__descricao">{nivelUsuario}</div>}

        {NivelMilhasUsuario && <PainelUsuarioInfoNivel nivelMilhasUsuario={NivelMilhasUsuario} />}
      </div>

      {data.urls && <AcoesDropdown data={data} />}
    </div>
  );
};

const PainelUsuarioInfoMilhas = ({nivelMilhasUsuario, usuarioConta}) => {
  return (
    <div className="user-info-milhas">
      {nivelMilhasUsuario != null &&
        <span className="nivel user-level">
          <i className={`nivel-${nivelMilhasUsuario.Ordem} user-level-icon`} />
        </span>
      }
      {usuarioConta.Saldos.map((saldo, idx) =>
        <span className="user-coin-group" key={idx}>
          <i className={`icon-${saldo.IdentificadorDaMoeda} user-coin-icon`} />
          <span className={`user-coin user-coin-${saldo.IdentificadorDaMoeda}`}
            id={`milhas-usuario-${saldo.IdentificadorDaMoeda}`} >
            {saldo.Valor}
          </span>
        </span>
      )}
    </div>
  );
};

const PainelUsuarioInfoNivel = ({nivelMilhasUsuario}) => {
  let barStyle = {
    width: nivelMilhasUsuario.Porcentagem + '%'
  };

  return (
    <div className="user-experience-group"
      data-title={nivelMilhasUsuario.Porcentagem + '%'}
      title={nivelMilhasUsuario.Porcentagem + '%'}>
      <i className={`icon-user-experience-group icon nivel-${nivelMilhasUsuario.Ordem}`}></i>
      <div className="bar">
        <span id="percent" style={barStyle}></span>
      </div>
    </div>
  );
};

const AcoesDropdown = ({data}) => {
  const {urls, portalResource, PossuiAcessoAPortifolio, ValidarAd} = data;
  return (
    <ul className="dropdown-menu pull-right">
      <li className="painel">
        <a href={urls.minhasAvaliacoes}>
          {portalResource.minhasAvaliacoes}
        </a>
      </li>

      {PossuiAcessoAPortifolio &&
        <li className="perfil">
          <a href={urls.meuPerfil}>
            {portalResource.meuPerfil}
          </a>
        </li>
      }

      {!ValidarAd && <li className="divider"></li>}
      {!ValidarAd &&
        <li className="sair">
          <a className="logoff" href={data.urls.sair} >
            {portalResource.sair}
          </a>
        </li>
      }
    </ul>
  );
};

const PainelUsuarioItemSaldo = ({saldo}) => {
  let iconClass = `user-panel__saldo__icon icon-big-${saldo.IdentificadorDaMoeda}`;
  return (
    <div className="user-panel__saldo user-saldo">
      <div className={iconClass}></div>
      <div className="info-moeda user-panel__saldo__info">
        <p>{ saldo.NomeDaMoeda }</p>
        <p className="user-panel__saldo__info-milhas">{saldo.Valor}</p>
      </div>
    </div>
  );
};

const PainelUsuarioItemSaldoNovo = ({saldos}) => {
  // saldos = [
  //   {
  //     IdDaMoeda: 1,
  //     IdentificadorDaMoeda: "negocio",
  //     Valor: 2000,
  //     ValorInteiro: 2000,
  //     NomeDaMoeda: "Negócio"
  //   }, {
  //     IdDaMoeda: 2,
  //     IdentificadorDaMoeda: "comportamental",
  //     Valor: 1150,
  //     ValorInteiro: 1150,
  //     NomeDaMoeda: "Comportamental"
  //   }, {
  //     IdDaMoeda: 2,
  //     IdentificadorDaMoeda: "tecnico",
  //     Valor: 1150,
  //     ValorInteiro: 1150,
  //     NomeDaMoeda: "Técnico"
  //   }
  // ];

  // saldos = saldos.map((saldo) => {
  //   let valorNivel = 5000;
  //   saldo.Porcentagem = saldo.Porcentagem || (saldo.ValorInteiro/valorNivel*100);
  //   return saldo;
  // });

  return (
    <div className="user-panel__saldos">
      {saldos.map((saldo, idx) =>
        <div key={idx} className="user-panel__saldo">
          <i className={`user-panel__saldo__icon icon-big-milha icon-big-${saldo.IdentificadorDaMoeda}`} />
          <div className="user-panel__saldo__text">
            {saldo.Porcentagem && <div className="user-panel__saldo__bar">
              <div className={`bar bar-${saldo.IdentificadorDaMoeda}`} style={{width: `${saldo.Porcentagem}%`}}></div>
            </div>
            }
            <div className="user-panel__saldo__nome">{saldo.NomeDaMoeda}</div>
            <div className="user-panel__saldo__valor">{saldo.Valor}</div>
          </div>
        </div>
      )}
    </div>
  );
};

const PainelUsuarioConquistas = ({data}) => {
  let {PainelConquista, urls, portalResource} = data;

  PainelConquista = PainelConquista.concat([{},{},{}])
  PainelConquista.length = 3;

  return (
    <div className="user-panel__conquistas user-conquistas">
      <span className="user-panel__conquistas--text"
        dangerouslySetInnerHTML={{__html: portalResource.minhasConquistas}}>
      </span>
      {PainelConquista.map((conquista, idx) =>
        <PainelUsuarioItemConquista conquista={conquista} key={idx} simboloDefault={urls.simboloDefault} />
      )}
    </div>
  );
};

const PainelUsuarioItemConquista = ({conquista, simboloDefault}) => {
  let possuiSimbolo = conquista != null && conquista != "undefined" && conquista.Simbolo;
  let simboloClass = possuiSimbolo ? 'simbolo-trilha simbolo-mini' : 'badge-conquista empty';
  let simboloStyle = {backgroundImage: `url("${possuiSimbolo ? conquista.Simbolo : simboloDefault}")`};
  return (
    <a className="inline-child" href="#" title={conquista.Titulo}>
      <span className={simboloClass} style={simboloStyle}
        data-title={conquista.Titulo} data-id={conquista.Id} />
    </a>
  );
};

ReactDOM.render(
  <PainelUsuarioView view={window.painelUsuario}/>,
  document.getElementById(window.painelUsuario.posicaoPainelUsuario === 'footer' ?
    'footer-user-info-wrapper' : 'header-user-info-wrapper')
);