Feature: Use the GitHub API for the Open Source Contributions

[mittal-parth]

Currently, the open source contributions have to be manually typed into the /src/constants/index.js file.

It would be better if we could fetch them automatically using the GitHub API. This should include all the PRs and issues opened by the person in all repos except the ones owned by him or that are part of his organisation(s).

It will need some discussion before proceeding, so feel free to discuss it here!

[Shivam164]

Hey I would like to work on this.

[Shivam164]

Please assign this to me.

[mittal-parth]

Hi @Shivam164! Thanks for your interest. Can you provide a workflow of how you would be proceeding with this? Thanks!

[Shivam164]

@mittal-parth first of all I willl have to see how github api works and then I will fetch data related to your open source contribution. Then I will have to make the data dynamic.

[mittal-parth]

Hmm ok, go ahead!

[mittal-parth]

@Shivam164 any updates?

[mittal-parth]

/prbot how

[mateusabelli]

Hello @mittal-parth, I'm studying some ways to implement this feature, and so far I came with some thoughts that I'd like to discuss here.

To fetch my own pull requests for example, we could make the following request

GET https://api.github.com/search/issues?q=is:pr+author:mateusabelli

Here is an example response received back, you may need to create an access token because search queries could be a bit more expensive on GH servers so they can have more limited request rates.

Click to expand

```json { "total_count": 43, "incomplete_results": false, "items": [ { "url": "https://api.github.com/repos/mittal-parth/personal-portfolio/issues/43", "repository_url": "https://api.github.com/repos/mittal-parth/personal-portfolio", "labels_url": "https://api.github.com/repos/mittal-parth/personal-portfolio/issues/43/labels{/name}", "comments_url": "https://api.github.com/repos/mittal-parth/personal-portfolio/issues/43/comments", "events_url": "https://api.github.com/repos/mittal-parth/personal-portfolio/issues/43/events", "html_url": "https://github.com/mittal-parth/personal-portfolio/pull/43", "id": 1599432588, "node_id": "PR_kwDOIAzWCM5KviXy", "number": 43, "title": "Add footer credit notes", "user": { "login": "mateusabelli", "id": 43862225, "node_id": "MDQ6VXNlcjQzODYyMjI1", "avatar_url": "https://avatars.githubusercontent.com/u/43862225?v=4", "gravatar_id": "", "url": "https://api.github.com/users/mateusabelli", "html_url": "https://github.com/mateusabelli", "followers_url": "https://api.github.com/users/mateusabelli/followers", "following_url": "https://api.github.com/users/mateusabelli/following{/other_user}", "gists_url": "https://api.github.com/users/mateusabelli/gists{/gist_id}", "starred_url": "https://api.github.com/users/mateusabelli/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/mateusabelli/subscriptions", "organizations_url": "https://api.github.com/users/mateusabelli/orgs", "repos_url": "https://api.github.com/users/mateusabelli/repos", "events_url": "https://api.github.com/users/mateusabelli/events{/privacy}", "received_events_url": "https://api.github.com/users/mateusabelli/received_events", "type": "User", "site_admin": false }, "labels": [ ], "state": "closed", "locked": false, "assignee": null, "assignees": [ ], "milestone": null, "comments": 2, "created_at": "2023-02-25T00:13:13Z", "updated_at": "2023-02-25T12:11:31Z", "closed_at": "2023-02-25T07:20:46Z", "author_association": "CONTRIBUTOR", "active_lock_reason": null, "draft": false, "pull_request": { "url": "https://api.github.com/repos/mittal-parth/personal-portfolio/pulls/43", "html_url": "https://github.com/mittal-parth/personal-portfolio/pull/43", "diff_url": "https://github.com/mittal-parth/personal-portfolio/pull/43.diff", "patch_url": "https://github.com/mittal-parth/personal-portfolio/pull/43.patch", "merged_at": "2023-02-25T07:20:46Z" }, "body": "This PR is a continuation of https://github.com/mittal-parth/personal-portfolio/pull/37 made by @isurumaldeniya\r\n\r\nCloses #35\r\n\r\nI've used the same code but applied the feedback provided on their work with some changes. Please let me know what you think.\r\n\r\n| Mobile | Desktop |\r\n|------- |------------------------------------|\r\n|  |  |\r\n\r\n", "reactions": { "url": "https://api.github.com/repos/mittal-parth/personal-portfolio/issues/43/reactions", "total_count": 1, "+1": 0, "-1": 0, "laugh": 0, "hooray": 0, "confused": 0, "heart": 1, "rocket": 0, "eyes": 0 }, "timeline_url": "https://api.github.com/repos/mittal-parth/personal-portfolio/issues/43/timeline", "performed_via_github_app": null, "state_reason": null, "score": 1.0 } ] } ```

From this data we can have some code that extracts what we need for the frontend. However some data might require a multi-pass stage, like the lines added and removed, for that we can access the diff_url. Here is an example response from it.

Click to expand

``` diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 129147b..7be2f29 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -57,6 +57,11 @@ const Footer = () => ( />

[mittal-parth]

Hey @mateusabelli, thanks so much for the efforts!

As you mentioned, the GitHub API rate limits at 5,000 requests per hour if we use an access token. For unauthenticated search requests, its limited at 60 requests per hour.

I think 5,000 requests per hour would be sufficient, considering the traffic received on my website 😛 I do not think we require caching as we can just fetch the data once on page load by wrapping it inside the useEffect hook.

Each user who decides to deploy this for their own website will have to enter their token. Since 5,000 requests are per-user requests, it should suffice.

[mateusabelli]

Hey @mittal-parth I agree with you, depending on the traffic the authenticated rate limits would be enough. I'm sorry I tend to overthink when it comes to data fetching, thank you for the feedback.

I think this is a nice feature and I'd like to work on it, could you assign it to me?

[mittal-parth]

That's ok, always open for discussions! 😄 Assigned!

[mittal-parth]

@mateusabelli would be un-assigning this for someone else to work on. Thanks for all your efforts! :)

[A-4-Atom]

@mittal-parth I can try implementing this. I just have some doubts. In your portfolio I noticed that you are showing PRs from two diff repos(zulip, publicLab). Do you want something like that where we show few latest PRs from that repo made from your acc?

[mittal-parth]

hi @A-4-Atom!

Good question.

Yes, I think that can be done. You can set a parameter in the constants file that lets the user define the limit they want from each repo.

Also, keep in mind that this should include all the PRs and issues opened by the person in all repos except the ones owned by him or that are part of his organisation(s).

And maybe, issues can be skipped. I leave it to you. You can either make that also as a parameter.

Thanks!

[A-4-Atom]

@mittal-parth I'll start working on it, it might take me some time, as i also have exams goin on.