1
\$\begingroup\$

I've got a simple single page web app that's build with React. It fetches data from two different APIs, when they have been successfully retrieved, and the promise is resolved, it does some simple calculations to work out the GBP/Bitcoin exchange rate.

It's been a while since I've build anything with React, and it would be great if you would be willing to give it a run through to see if I'm doing anything silly or outdated.

I'd also like to be able to flip the exchange comparisons. By default it compares how many bitcoin you could buy for one GBP, but I would like to be able to toggle a button to then show how many GBP could be bought with one bitcoin. I can't think of a clean way to do it?

app.js

import React, { Component } from 'react';
import Conversion from './Conversion';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="g">
        <div className="g-col g-span10 g-span6--mid g-col--centered">
          <Conversion />
        </div>
      </div>
    );
  }
}

export default App;

conversion.js

import React, { Component } from 'react';
import axios from 'axios';
var NumberFormat = require('react-number-format');

class Conversion extends Component {
  constructor(props) {
    super(props);

    this.state = {
        isReversed: false
    };

    this.requestData = this.requestData.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    this.requestData();
  }

  requestData() {
    axios.all([this.getX(), this.getY()])
      .then(axios.spread( (xVal, yVal) => { 
        const x = xVal;
        const y = yVal.data.bpi.USD.rate_float;
        const xOfy = this.xOfy(x, y);
        const yOfX = this.yOfX(y, x);
        const timeStamp = yVal.data.time.updateduk;
        this.setState({timeStamp, x, y, xOfy, yOfX});
      }));
  }

  getX() {
    /* Currency/USD */
    return axios.get('https://openexchangerates.org/api/latest.json?app_id=#APP_KEU#');
    return 0.7
  }

  getY() {
    /* Bitcoin/USD*/
    return axios.get('https://api.coindesk.com/v1/bpi/currentprice/XBT.json');
  }

  /* 1 unit of X: #Y can be bought */
    xOfy(unit, value) {
        return 1 / (unit * value);
    }

    /* 1 unit of Y: #X can be bought */
    yOfX(unit, value) {
      return unit * value;
    }

    handleClick () {
        this.setState(prevState => ({
      isReversed: !prevState.isReversed
    }));
    }

  render() {
    /* Format Values */
    let xOfy = <NumberFormat value={this.state.xOfy} displayType={'text'} decimalPrecision={5} thousandSeparator={true}  />
    let yOfX = <NumberFormat value={this.state.yOfX} displayType={'text'} decimalPrecision={2} thousandSeparator={true}  />

    return (    
        <div>
          <div className="xe">
          <div className="xe-inner">
                        <p className="xe-inner-tstamp text-centre">{this.state.timeStamp} <a href="" onClick={this.requestData}>refresh</a></p>
            <h4 className="text-centre xe-inner-header">GBP/XBT:Cur</h4>
            <p className="text-centre xe-inner-info">1 GBP is worth:</p>
            <h1 className="text-centre xe-inner-val">{xOfy} BTC</h1>
            <p className="text-centre xe-inner-single">@ £{yOfX} per BTC</p>

            <button onClick={this.handleClick}>
                    {this.state.isReversed ? true : false}
                    Reverse
                  </button>
          </div>
        </div>
        </div>
    );
  }
};

export default Conversion;
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.