React

by Nick Hulea

HTML

<div id="app"></div>

CSS

* {
  box-sizing: border-box;
}

body {
  background: #20262E;
  font-family: Helvetica;
}

#app {
  background: #fff;
  padding: 20px;
  transition: all 0.2s;
  width: 100vw;
  height: 100vh;
  
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

input {
  margin-right: 5px;
}

React

class Crypto extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      coins: [],
      seconds: 0
    };
  }

  async componentDidMount() {
    // this.interval = setInterval(() => this.tick(), 1000);
    this.tick()
  }

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

  async componentWillUpdate() {
    // console.log(`willUpdate`)
  }

  async componentDidUpdate() {
    // console.log(`didUpdate`)
  }

  valuesToArray(obj) {
    return Object.keys(obj).map(function (key) { return obj[key]; });
  }

  async tick() {
    /*
    const response = await fetch(`https://api.coinmarketcap.com/v1/ticker/?limit=10`);
    const json = await response.json();
    console.log(json)

    const key = `87e33cb94d2293af5de39d127a94cd9a41410b3e8c942da84adbf7e51b9aac3b`
    const call = await fetch(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=ETH,DASH,BTC,XRP,NEO,LTC,DOGE&tsyms=USD&api_key=${key}`)
    const cc = await call.json()

    const f = await fetch(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD`)
    const get = await f.json()
    console.log(get)

    let keys = Object.keys(cc);
    let values = Object.values(cc);
    let coinArr = []
    */

    const url = `https://api.bitfinex.com/v2`
    const arg = `${url}/tickers?symbols=tBTCUSD,tLTCUSD`
    const bitfinexCall = await fetch(`${arg}`)
    const bitfinexJSON = await bitfinexCall.json()
    
     fetch(`${arg}`, { mode: 'no-cors'})
      .then(data => {
        console.table(data);
        return data;
      })
      .catch(e => {
        console.log(e);
        return e;
      });

    /*
    for (let index = 0; index < keys.length; index++) {
      coinArr[keys[index]] = values[index]
    }
    */

    // console.log(bitfinexJSON)

    let coinArr = bitfinexJSON !== undefined || bitfinexJSON !== undefined ? bitfinexJSON : []

    this.setState(prevState => ({
      coins: coinArr
    }));

   ...