Week 7 - GitHub Tracker by Jenny #52
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| # GitHub Tracker | ||
| This weeks assignment is to create a tracker for technigo repositories fetched from GitHub API. | ||
|
|
||
| ## The problem | ||
| This week I have googled so much and stack overflow has really helped me alot with my problems. Lectures helped as well where I learnt about the github token and how to set commits to 0. | ||
|
|
||
| If I had more time I would change the tooltip to instead have the name of the languages written out at the top of the projects to the right and I would add a search bar for projects. | ||
|
|
||
| ## View it live | ||
|
|
||
| Netlify: https://week7-githubtracker-jenquach.netlify.app ( |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| // //GLOBAL VARIABLES | ||
| // const options = { | ||
| // method: 'GET', | ||
| // headers: { | ||
| // Authorization: `token ****`, | ||
| // }, | ||
| // }; | ||
|
|
||
|
|
||
| const USER = 'jenquach' | ||
| const USER_URL = `https://api.github.com/users/${USER}` | ||
| const REPOS_URL = `https://api.github.com/users/${USER}/repos` | ||
|
|
||
| const headerContainer = document.getElementById('topnav') | ||
| const profileContainer = document.getElementById('user-info') | ||
| const projectsContainer = document.getElementById('projects') | ||
| const pullRequests = document.getElementById('pullrequests') | ||
|
|
||
| // function to fetch the user data from GitHub API | ||
| const userProfile = () => { | ||
| fetch(USER_URL) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| profileContainer.innerHTML = ` | ||
| <div class="picture"> | ||
| <img class="user-picture" src="${data.avatar_url}" | ||
| </div> | ||
| <div class="user-information"> | ||
| <h2>${data.name}</h2> | ||
| <a href="https://github.com/jenquach"><i class="fab fa-github"></i> ${data.login}</a> | ||
| <p><i class="fas fa-map-marker-alt"></i> ${data.location}</p> | ||
| </div> | ||
| ` | ||
| }) | ||
| } | ||
| // function to fetch the technigo repositories | ||
| const getRepositories = () => { | ||
| fetch(REPOS_URL) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| // filtering the technigo repositories | ||
| const technigoRepositories = data.filter( | ||
| repo => repo.fork && repo.name.includes('project-') | ||
| ) | ||
| technigoRepositories.forEach(repo => { | ||
| projectsContainer.innerHTML += ` | ||
| <div class="project"> | ||
| <div class="repo-info"> | ||
| <a href="${repo.html_url}">${repo.name}</a> | ||
| <p class="push">Recent push ${new Date(repo.pushed_at).toLocaleString("sv-SE", {dateStyle: 'short'})}</p> | ||
| <div id="language-${repo.name}" class="progress"></div> | ||
| </div> | ||
| <div class="repo-details"> | ||
| <p id="branch">${repo.default_branch}</p> | ||
| <p class="commit" id="commit-${repo.name}"><i class="fas fa-code-branch"></i> </p> | ||
|
There was a problem hiding this comment. Nice with icon from fontawesome again |
||
| </div> | ||
| </div> | ||
| ` | ||
| getLanguages(repo) | ||
| }) | ||
| // Draw chart with technigoRepositories data | ||
| drawChart(technigoRepositories.length) | ||
| getPullRequests(technigoRepositories) | ||
| }) | ||
| } | ||
|
|
||
| // function to fetch all pull requests | ||
| const getPullRequests = (allRepositories) => { | ||
| allRepositories.forEach(repo => { | ||
| const myRepoName = repo.name | ||
| const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` | ||
| fetch(PULL_URL) | ||
| .then(res => res.json()) | ||
| .then(data => { //data is the array of all pull requests | ||
| // Detect if we have pull request or not. | ||
| const myPullRequest = data.find( | ||
| pull => pull.user.login === repo.owner.login | ||
| ) | ||
| // If yes - call fetchCommits function | ||
| if (myPullRequest) { | ||
| getCommits(myPullRequest.commits_url, repo.name); | ||
| // If no - commits 0 is shown. | ||
| } else { | ||
| document.getElementById(`commit-${repo.name}`).innerHTML = | ||
| '<i class="fas fa-code-branch"></i> 0'; | ||
| } | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| // function to fetch number of commits | ||
| const getCommits = (myCommitsUrl, myRepoName) => { | ||
| fetch(myCommitsUrl, ) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| document.getElementById(`commit-${myRepoName}`).innerHTML += data.length | ||
| }) | ||
| } | ||
|
|
||
| // function to fetch all the languages used in the repository | ||
|
There was a problem hiding this comment. This you solved really nice. The only thing I might have wished was that it could be printed out under each coloured bar what language is what color. Now you need to hover to see. |
||
| const getLanguages = (repo) => { | ||
| const languages_URL = `https://api.github.com/repos/${USER}/${repo.name}/languages` | ||
| fetch(languages_URL, ) | ||
| .then(res => res.json()) | ||
| .then(data => { | ||
| const html = data.HTML || 0; | ||
| const css = data.CSS || 0; | ||
| const js = data.JavaScript || 0; | ||
| const sum = html + css + js; | ||
| // calculates the percentage used of each language | ||
| const htmlPercentage = ((html / sum) * 100).toFixed(1); | ||
| const cssPercentage = ((css / sum) * 100).toFixed(1); | ||
| const jsPercentage = ((js / sum) * 100).toFixed(1); | ||
|
|
||
| document.getElementById(`language-${repo.name}`).innerHTML = ` | ||
| <div class="language-html" title="html" style="width:${htmlPercentage}%;"></div> | ||
| <div class="language-css" title="css" style="width:${cssPercentage}%;"></div> | ||
| <div class="language-js" title="javascript" style="width:${jsPercentage}%;"></div> | ||
| ` | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| userProfile() | ||
| getRepositories() | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice using fontawesome icon in the header