Fix message on empty credentials.

[perso/Immae/Projets/Cryptomonnaies/Cryptoportfolio/Front.git] / cmd / web / js / poloniex.jsx

import Api from './api.js';
import React from 'react';
import {PFBalance, Assets} from './balance.js';

class PoloniexController extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'flag': 'loading', 'periodStart': null, 'variationP': null, 'balance': null, 'balances': null};
  }

  testCredentials = () => {
    Api.Call('MARKET_TEST_CREDENTIALS', {'name': 'poloniex'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        if (err.code === 'invalid_market_credentials') {
          this.setState({'flag': 'invalidCredentials', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null});
        } else if (err.code === 'ip_restricted_api_key') {
          this.setState({'flag': 'ipRestricted', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null});
        } else if (err.code === 'market_credentials_not_configured') {
          this.setState({'flag': 'emptyCredentials'});
        }
        return;
      }

      this.loadPortfolio();
    }.bind(this));
  }

  loadPortfolio = () => {
    Api.Call('MARKET_GET_PORTFOLIO', {'name': 'poloniex'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        if (err.code === 'not_found') {
          this.setState({'flag': 'noReport', 'variationP': null, 'balance': null, 'balances': null, 'periodStart': null});
        }
        return;
      }

      this.setState({'flag': 'ok', 'variationP': data.performance.variationP, 'balance': data.value, 'balances': data.balances, 'periodStart': data.periodStart});
    }.bind(this));
  }

  componentDidMount = () => {
    this.testCredentials();
  }

  render = () => {
    var displayText = null;
    switch (this.state.flag) {
      case 'loading':
        displayText = 'Loading data from poloniex...';
        break;
      case 'noReport':
        displayText = 'Your account is setup ! Reporting will start next Monday !';
        break;
      case 'invalidCredentials':
      case 'ipRestricted':
      case 'emptyCredentials':
        displayText = <div>Please provide poloniex credentials in <a href="/account"><u>Account</u></a> page.</div>;
        break;
      default:
        displayText = null;
    }
    return (
      <div>
        <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
                          variationP={this.state.variationP}
                          periodStart={this.state.periodStart}
                          balance={this.state.balance}
                          balances={this.state.balances}
                          displayText={displayText}/>
      </div>
    );
  }
}

class Panel extends React.Component {
  render = () => {
    if (this.props.component === null) {
      return <div></div>;
    }

    return (
      <div className="row">
        <div className="box col-12">
          <div className="row">
            <div className="col-4">{this.props.title}</div>
          </div>
          <hr/>
          {this.props.component}
        </div>
      </div>);
  }
}

class PoloniexBalance extends React.Component {

  render = () => {
    var balancePanel = null;
    var assetsPanel  = null;
    var messagePanel = null;

    if (this.props.variationP !== null) {
      balancePanel =
        <div className="row">
          <div className="col-12 offset-md-1 col-md-10 align-self-center h-100 balances">
            <PFBalance variationP={this.props.variationP} balance={this.props.balance} periodStart={this.props.periodStart}/>
          </div>
        </div>;

      assetsPanel =
        <Assets balances={this.props.balances} />;

    } else {
      messagePanel =
        <div className="row">
          <div className="col-12 text-center">
           <span>{this.props.displayText}</span>
          </div>
        </div>;
    }

    return (
      <React.Fragment>
        <Panel title="Balance" component={balancePanel}/>
        <Panel title="Assets"  component={assetsPanel}/>
        <Panel title="Balance" component={messagePanel}/>
      </React.Fragment>
    );
  }
}

export default PoloniexController;