import React, {Component} from 'react'

// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
// https://swapi.co/
//https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

class App extends Component {
  constructor () {
      super ();
      this.state = {
          loading: false,
          character: {}
      }
  }
 
 componentDidMount () {
     this.setState({loading: true})
     fetch("https://swapi.co/api/people/22")
        .then(response => response.json())
        .then(data => {
            this.setState({
                character: data,
                loading: false
            })
        }) 
 } 
 
  render() {
    console.log(this.state);
      const text = this.state.loading ? 'loading...' : this.state.character.name;
    return (
      <div>
         <p>{text}</p>
      </div>
    );
  }
}

export default App;