import React, { Component } from 'react';
import './App.scss';
import axios from 'axios';

class App extends Component {

  // Initital state
  state = {
    cities: null
  }

  componentWillMount() {
    const instance = axios.create({
      baseURL: 'https://wft-geo-db.p.mashape.com/v1/geo/cities',
      headers: {'X-Mashape-Key': 'oBb7VvPpYqmshoYOxXbw1E18sQW3p1dAHQyjsnoGwVOTLKs3gd'}
    })

    instance.get()
      .then((response) => {
        // We set the state with the cities received from the API
        this.setState({
          cities: response.data
        })
      })
  }

  render() {
    const { cities } = this.state

    return (
      <div className="app">
        {
          cities ?
            <div className="challenge1">
              <input className="challenge1__searchBar"></input>
            </div>
          :
            <p>Fetching...</p>
        }
      </div>
    );
  }
}

export default App;