Fetching the Github API
Tags: github, opensource, webdev
Published: 2021-11-19 15:36:55

This week my latest [PR](https://github.com/Seneca-CDOT/telescope/pull/2466) for [telescope](https://github.com/Seneca-CDOT/telescope) was merged. It all started with an [issue](https://github.com/Seneca-CDOT/telescope/issues/2417) to add Github stats to the new [Telescope dashboard](https://api.telescope.cdot.systems/v1/status).

The dashboard is currently showing the [material-dashboard](https://github.com/creativetimofficial/material-dashboard) template and we are going to add relevant information to it one PR at the time.

![Material Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94he3xv7yj6ydjlpzrj9.png)
 
To add relevant stats I had to go through the [Github API](https://docs.github.com/en/rest) to see what data I could get from it.

### Commit count
I first found a way to get the weekly and yearly [commit count](https://docs.github.com/en/rest/reference/repos#get-the-weekly-commit-count). This request returns and array of the number of commits per week over the last year.

Here is the request using `curl`:
```shell
curl \
  -H "Accept: application/vnd.github.v3+json" \
  https://api.github.com/repos/Seneca-CDOT/telescope/stats/participation
```
And here is with `fetch` in Javascript:
```js
fetch(`https://api.github.com/repos/Seneca-CDOT/telescope/stats/participation`, {
    headers: { Accept: 'application/vnd.github.v3+json' },
  });
  .then((res) => res.json())
  .then((data) => {
    // use received data
  })
```


### Weekly commits activity
The second data I wanted was the total lines added and lines removed for the week. I found this by fetching the [weekly commit activity](https://docs.github.com/en/rest/reference/repos#get-the-weekly-commit-count):
- https://api.github.com/repos/Seneca-CDOT/telescope/stats/code_frequency

Taking the last element of the array gives us the [UNIX timestamp](https://en.wikipedia.org/wiki/Unix_time), the lines added and the lines removed:

```console
[
  1636848000,
  876,
  -349
]
```

### Latest author

To get the author of the latest commit, I had to fetch the [list of commits](https://docs.github.com/en/rest/reference/repos#list-commits):

- https://api.github.com/repos/Seneca-CDOT/telescope/commits

The response includes a lot of information about each commit, so I only focused on the information I needed:
- name
- username
- profile picture


```console
{
  "commit": {
    "author": {
      "name": "Francesco Menghi",
    },
  },
  "author": {
    "login": "menghif",
    "avatar_url": "https://avatars.githubusercontent.com/u/53121061?v=4",
  },
}
```

### Total Contributors

Finally I wanted a way to get the total number of contributors of the repo. I fetched the [repository contributors](https://docs.github.com/en/rest/reference/repos#list-repository-contributors) with 1 result per page and then retrieved the number of pages returned in the response header. [Thanks David!](https://github.com/Seneca-CDOT/telescope/pull/2466#issuecomment-968177583)

```js
fetch(`https://api.github.com/repos/Seneca-CDOT/telescope/contributors?per_page=1`, {
  headers: { Accept: 'application/vnd.github.v3+json' },
});
.then((res) => res.headers.get('link'))
.then((data) => {
  const contributors = data.match(/.*"next".*&page=([0-9]*).*"last".*/)[1];
})
```
---

### Putting it all together

This is the end result:

![Telescope Dashboard](https://user-images.githubusercontent.com/53121061/141859036-cce90833-054c-494d-8e63-69902aeb85a7.png)

The Javascript code with all the fetch requests is available [here](https://github.com/Seneca-CDOT/telescope/blob/master/src/api/status/public/js/github-stats.js).

I am pleased with the result, but it is only the first step. I am sure that other students will find bugs to fix and will have more to contribute to it. I'm looking forward to how the dashboard will look once "finished".