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

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [],
      loading: false
    };
    //bind
    this.handleSubmit = this.handleSubmit(this);
  }

  getUsers() {
    this.setState({
      loading: true
    })
    axios('https://api.randomuser.me/?nat=US&results=5').then(response =>
      this.setState({
        users: {...this.state.users, ...response.data.results},
        loading: false
      })
    );
  }

  handleSubmit(e){
    e.prefentDefault();
    this.getUsers();
    console.log('more users loaded');
  }

  componentWillMount() {
    this.getUsers()
  }


  render() {
    return (
      <div className="App">
        {!this.state.loading ? (
          this.state.users.map(user => (
            <div>
              <h2>{user.name.first}</h2>
              <p>{user.email}</p>
              <hr />
              <form onSubmit={this.handleSubmit}>
                <input type="submit" value="load users" />
              </form>
            </div>
          ))
        )
          : (
          <loading message="hey hey6 hey" />
          )}
      </div>
    );
  }
}

export default App;