import React, { Component } from "react";
import axios from "axios";
import Navbar from "./components/Navbar";
import Modal from "react-modal";
import InfiniteScroll from "react-infinite-scroll-component";

class App extends Component {
  constructor() {
    super();
    this.state = {
      githubData: [],
      count: 10,
    };
  }
  componentDidMount() {
    const { count } = this.state;

    axios
      .get(
        "https://api.github.com/search/repositories?q=language:Java&sort=stars&page=1&per_page=" +
          count
      )
      .then((res) => {
        console.log("res", res);
        this.setState({ githubData: res.data.items });
      });

  }

  fetchRepos = () => {
    const { count } = this.state;
    this.setState({ count: this.state.count + count });
    axios
      .get(
        "https://api.github.com/search/repositories?q=language:Java&sort=stars&page=1&per_page=" +
          count
      )
      .then((res) => {
        console.log("res", res);
        this.setState({
          githubData: this.state.githubData.concat(res.data.items)
        });
      });
  };

  render() {
    const { githubData } = this.state;
    return (
      <div className="container">
        <Navbar />
        <div className="row">
          <InfiniteScroll
            next={this.fetchRepos}
            hasMore={true}
            loader={<h4>Loading...</h4>}
          >
            {githubData.map((name, index) => (
              <div className="col-md-12" key={name.id}>
                <h1>
                  Projeto:&nbsp;
                  {name.name}
                </h1>
              </div>
            ))}
          </InfiniteScroll>
        </div>
      </div>
    );
  }
}

export default App;