Show pull request list with Github API from a specific repository

Question

I'm remaking my previous question. I'm working on a project that shows a repository list from github api.

It's working fine, I get all the repo info from the api but I need that when I click in one button from a particular repository, it shows the pull request info from https://api.github.com/repos/:USER:/:REPONAME:/pulls in the modal i have made.

But i have no idea how to do it. Can someone help me?

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

class App extends Component {
  constructor() {
    super();
    this.state = {
      githubData: [],
      isActive: false
    };
  }
  componentDidMount() {
    axios
      .get(
        "https://api.github.com/search/repositories?q=language:Java&sort=stars&page=1"
      )
      .then((res) => {
        console.log("res", res);
        this.setState({ githubData: res.data.items });
      });

    Modal.setAppElement("body");
  }

  toggleModal = () => {
    this.setState({
      isActive: !this.state.isActive
    });
  };

  render() {
    const { githubData } = this.state;
    return (
      <div className="container">
        <Navbar />
        <div className="row">
          {githubData.map((name, index) => (
            <div className="col-md-12" key={name.id}>
              <img src={name.owner.avatar_url} alt="Imagem do projeto" />
              <h1>
                Projeto:&nbsp;
                {name.name}
              </h1>
              <h1>
                Autor:&nbsp;
                {name.owner.login}
              </h1>
              <h1>
                Descrição:&nbsp;
                {name.description}
              </h1>
              <h1>
                Link:&nbsp;
                <a href={name.homepage}>{name.homepage}</a>
              </h1>
              <h1>
                Stars:&nbsp;
                {name.stargazers_count}
              </h1>
              <button onClick={this.toggleModal}>
                Open pull request for this repository
              </button>
              <Modal
                isOpen={this.state.isActive}
                onRequestClose={this.toggleModal}
              >
                <p onClick={this.toggleModal}>
                  PULL REQUEST LIST FROM THIS REPOSITORY
                </p>
              </Modal>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

The modal is working, i just need to get the pull request info from the api but no idea how to get from a specific repository.

Answer 1

After sometime i made it work.

I just created a new component, using axios to call the github api and passing as props the user and repo.

Heres the code:

import React from "react";
import axios from "axios";

const PullRequest = (props) => {
  axios
    .get(
      "https://api.github.com/repos/" + props.user + "/" + props.repo + "/pulls"
    )
    .then((repo) => {
      console.log("repo", repo);
    });
  return (
    <div>
      <p>Nome do repositório: {props.repo}</p>
      <p>Nome do usuário: {props.user}</p>
    </div>
  );
};

export default PullRequest;

Cheers :)