import React from 'react';
import logo from './logo.svg';
import './App.css';

const axios = require('axios');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { status: 'LOADING' };
  }

  componentDidMount() {
    const symbol = this.props.symbol;
    const url = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=demo`;

    axios.get(url).
      then(res => this.setState({
        error: null,
        status: 'DONE',
        price: res.data['Global Quote']['05. price']
      })).
      catch(err => this.setState({
        error: err.message,
        status: 'ERROR',
        price: 'N/A'
      }));
  }

  render() {
    if (this.state.status === 'ERROR') {
      return (<h1>Error: {this.state.error}</h1>);
    } else if (this.state.status === 'DONE') {
      return (<h1>Price: {this.state.price}</h1>);
    } else {
      return (<h1>Loading...</h1>);
    }
  }
}

export default App;