import React from "react";
import "./app.css";

class StarWars extends React.Component {
  state = {
    people: [],
    nextPage: "https://swapi.co/api/people"
  };

  componentDidMount() {
    this.loadMore();
  }

  loadMore = () => {
    fetch(this.state.nextPage)
      .then(r => r.json())
      .then(json =>
        this.setState(prevState => ({
          people: [...prevState.people, ...json.results],
          nextPage: json.next
        }))
      )
      .catch(err => console.log(err));
  };

  render() {
    const { people } = this.state;

    return (
      <div>
        <h1>StarWars</h1>

        {people.map(human => (
          <div className={human.gender} key={human.name}>{human.name} {human.gender}</div>
        ))}

        <button onClick={this.loadMore}>load more</button>
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <StarWars />
    </div>
  );
}