import React from 'react';
import ReactPaginate from 'react-paginate';
import fetch from 'node-fetch';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      page: 0,
      perPage: 0,
      total: 0,
      pageCount: 0,
      data: [],
    };
  }

  componentDidMount() {
    this.load(this.state.page);
  }

  load = async (page) => {
    var url = 'https://reqres.in/api/users?per_page=2&page='+page;

    console.log('load '+ url);

    var res = await fetch(url);
    res = await res.json();

    // set state from ajax
    this.setState({
      page: res.page,
      perPage: res.per_page,
      total: res.total,
      pageCount: res.total_pages,
      data: res.data,
    })
  }

  handlePageClick = (page) => {
    console.log('clicked page ', page.selected);
    this.load(page.selected);
  }

  render = () => (
    <div className="App">

        {this.state.data.map((d) => (
          <p key={d.id}>{d.first_name}</p>
        ))}

        <ReactPaginate
          previousLabel={'previous'}
          nextLabel={'next'}
          breakLabel={'...'}
          breakClassName={'break-me'}
          pageCount={this.state.pageCount}
          marginPagesDisplayed={2}
          pageRangeDisplayed={5}
          onPageChange={this.handlePageClick}
          containerClassName={'pagination'}
          subContainerClassName={'pages pagination'}
          activeClassName={'active'}
        />
    </div>
  );
}

export default App;