Use <img> for currency display.

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

import Api from './api.js';
import React from 'react';

class PoloniexController extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'apiKey': '', 'apiSecret': '', 'apiRequested': false, 'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null};
  }

  handleCredentialsChange = (key, secret) => {
    this.setState({'apiKey': key, 'apiSecret': secret});
  }

  handleCredentialsSubmit = () => {
    if (!this.state.apiKey || !this.state.apiSecret) {
      return;
    }
    Api.Call('UPDATE_MARKET', {'key': this.state.apiKey, 'secret': this.state.apiSecret, 'name': 'poloniex'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        return;
      }

      this.setState({'flag': 'loading', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
      this.loadBalance();
    }.bind(this));
  }

  loadBalance = () => {
    Api.Call('MARKET_BALANCE', {'name': 'poloniex', 'currency': 'BTC'}, function(err, status, data) {
      if (err) {
        console.error(err, data);
        if (err.code === 'invalid_market_credentials') {
          this.setState({'flag': 'invalidCredentials', 'valueCurrency': null, 'balanceValue': null, 'balance': null});
        }
        return;
      }

      this.setState({'flag': 'ok', 'valueCurrency': data.valueCurrency, 'balanceValue': data.value, 'balance': data.balance});
    }.bind(this));
  }

  componentDidMount = () => {
    Api.Call('MARKET', {'name': 'poloniex'}, function(err, status, data) {
      this.setState({'apiRequested': true});
      if (err) {
        console.error(err, data);
        return;
      }

      var flag = this.state.flag;
      if (!data.key || !data.secret) {
        flag = 'emptyCredentials';
      } else {
        this.loadBalance();
      }

      this.setState({'apiKey': data.key, 'apiSecret': data.secret, 'flag': flag});
    }.bind(this));
  }

  render = () => {
    var displayText = null;
    switch (this.state.flag) {
      case 'loading':
        displayText = 'Loading data from poloniex...';
        break;
      case 'invalidCredentials':
        displayText = 'Invalid poloniex credentials';
        break;
      case 'emptyCredentials':
        displayText = 'Please provide poloniex credentials';
        break;
      default:
        displayText = null;
    }
    if (this.state.apiRequested === false) {
      return <div></div>;
    }
    return (
      <div>
        <PoloniexBalance  balanceCurrency={this.state.valueCurrency}
                          balanceValue={this.state.balanceValue}
                          balance={this.state.balance}
                          displayText={displayText}/>
        <PoloniexCredentialsForm onLoadCredentials={this.onLoadCredentials}
                                 onCredentialsSubmit={this.handleCredentialsSubmit}
                                 onCredentialsChange={this.handleCredentialsChange}
                                 apiSecret={this.state.apiSecret}
                                 apiKey={this.state.apiKey}/>
      </div>
    );
  }
}

class CurrencyLogo extends React.Component {
  render = () => {
    return <img className="currency-logo"
                src={'/public/icons/black/' + this.props.currency.toLowerCase() + '.svg' }
                title={this.props.currency}
                alt={this.props.currency} />;
  }
}

class PoloniexBalance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'hideMsg': true, 'msg': '', 'msgOk': false};
  }

  render = () => {
    var dashboard = null;

    if (this.props.balanceValue !== null) {

      var balance = Object.keys(this.props.balance).map(function(currency) {
        return <div key={currency}>
                 <CurrencyLogo currency={currency} /> {this.props.balance[currency]}
               </div>;
      }.bind(this));

      dashboard =
        <div className="row">
          <div className="col-4 align-self-center h-100 balances">
              {balance}
          </div>
          <div className="offset-1 col-7 h-100 align-self-center">
            <div className="text-center">
              Balance ({this.props.balanceCurrency}): <span>{this.props.balanceValue}</span><CurrencyLogo currency={this.props.balanceCurrency} />
            </div>
          </div>
        </div>;
} else {
      dashboard =
        <div className="row">
          <div className="col-12 text-center">
           <span>{this.props.displayText}</span>
          </div>
        </div>;
}

    return (
      <div className="row">
        <div className="box offset-2 col-8 portfolio">
          <div className="row">
            <div className="col-4">Portfolio</div>
          </div>
          <hr/>
          {dashboard}
        </div>
      </div>
    );
  }
}

class PoloniexCredentialsForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {'hideMsg': true, 'msg': '', 'editMode': false, 'msgOk': false};
  }

  handleSubmit = (e) => {
    this.props.onCredentialsSubmit();
    this.setState({'editMode': false});
    e.preventDefault();
  }

  handleApiKeyChange = (event) => {
    this.props.onCredentialsChange(event.target.value, this.props.apiSecret);
  }

  handleApiSecretChange = (event) => {
    this.props.onCredentialsChange(this.props.apiKey, event.target.value);
  }

  onEditClick = () => {
    this.setState({'editMode': true});
  }

  render = () => {
    var submitType      = this.state.editMode === true ? 'submit' : 'hidden';
    var buttonDisplay   = this.state.editMode === true ? 'none' : 'inline';
    var secretDisplayed = this.state.editMode === true ? this.props.apiSecret : 'XXXXXXX';
    var keyDisplayed    = this.state.editMode === true ? this.props.apiKey : 'XXXXXXX';

    return (
        <div className="row api-credentials-form">
          <div className="offset-2 col-8 box">
            <span className="text-center">Poloniex credentials</span>
            <hr/>
            <form role="form" onSubmit={this.handleSubmit}>
              <label className="w-100">Key:
                <input className="form-control" type="text" placeholder="key" value={keyDisplayed} onChange={this.handleApiKeyChange} disabled={!this.state.editMode}/>
              </label>
              <label className="w-100">Secret:
                <input className="form-control" type="text" placeholder="secret" value={secretDisplayed} onChange={this.handleApiSecretChange} disabled={!this.state.editMode}/>
              </label>
              <input className="form-control submit" type={submitType} value="Save" />
              <button className="form-control submit" style={{display: buttonDisplay}} onSubmit={null} onClick={this.onEditClick} type="button">Show/Edit</button>
            </form>
          </div>
        </div>
       );
  }
}

export default PoloniexController;