diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..c80900c9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..61736952 100644 --- a/README.md +++ b/README.md @@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://fay-github-tracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..607ecd57 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,28 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const drawChart = (dataPoints) => { + + const data = { + labels: ["Finished Projects", "Unfinished Projects"], + datasets: [{ + label: '# of Projects', + data: dataPoints, + backgroundColor: [ + 'rgb(54, 162, 235)', + 'rgb(255, 205, 86)' + ], + borderWidth: 1, + hoverOffset: 4 + }] + }; + + + const config = { + type: 'doughnut', + data: data, + }; + + const myChart = new Chart(ctx, config) +} diff --git a/code/index.html b/code/index.html index 2fb5e0ae..dbc97c18 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,25 @@ Project GitHub Tracker + + + -

GitHub Tracker

+
+
+ +
+

Projects:

+
- - + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..06f80243 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,161 @@ +const username = 'faypi' +const API_URL = `https://api.github.com/users/${username}/repos` +const API_USER_PROFILE = `https://api.github.com/users/${username}` +const projects = document.getElementById("projects"); +const profile = document.getElementById("profile"); +const totalProjectsDuringBootcamp = 19; +// const API_TOKEN = TOKEN || process.env.API_KEY; +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` // you need to paste your token over here. + } +} + +fetch(API_USER_PROFILE, options) + .then(res => res.json()) + .then(data => { + const name = data.name + const profilePic = data.avatar_url + // const memberSince = data.created_at + const followers = data.followers + const following = data.following + profile.innerHTML += ` +

${username}'s GitHub Tracker

+
+ + ${name} + ${username} + following ${following} + followed by ${followers} +
+ ` + } + ) + + +fetch(API_URL, options) // options object is passed as 2nd argument to fetch() function. + .then(res => res.json()) + .then(data => { + const myRepos = data.filter((forkedRepos) => forkedRepos.fork == true && forkedRepos.name.startsWith("project-")) + const numberOfProjects = myRepos.length + drawChart([numberOfProjects, totalProjectsDuringBootcamp - numberOfProjects]) + getPullRequests(myRepos) + }); + +//Remember to pass along your filtered repos as an argument when +//you are calling this function + +const getPullRequests = (repos) => { + //Get all the PRs for each project. + repos.forEach(repo => { + fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls' + '?per_page=100', options) + .then(res => res.json()) + .then(data => { + + const repoBranchName = repo.default_branch + const repoName = repo.name + const repoUrl = repo.html_url + + projects.innerHTML += ` +
+
+

+ + ${repoName}:${repoBranchName} + +

+
+
+ ` + + + const myPullRequests = data.filter((myPR) => myPR.user.login == repo.owner.login); + handlePullRequest(repoName, myPullRequests) + }) + }) + +} + +const handlePullRequest = (repoElementId, myPullRequests) => { + + //Get all the PRs for each project. + myPullRequests + .forEach((pullRequest) => { + const prTitle = pullRequest.title + const prUrl = pullRequest.html_url + const repo = document.getElementById(repoElementId); + repo.innerHTML += ` +
+ PR: ${prTitle} +
+ ` + }) + myPullRequests + .map(pullRequest => pullRequest.commits_url) + .forEach(commitUrl => { + fetch(commitUrl + "?per_page=100", options) + .then(res => res.json()) + .then(data => { + const mostRecentCommit = data[data.length - 1] + const commitMessage = mostRecentCommit.commit.message + const commitAuthor = mostRecentCommit.author.login + const commitUrl = mostRecentCommit.html_url + const commitDateString = mostRecentCommit.commit.author.date + const commitDate = Date.parse(commitDateString) + const commitTimeSince = timeSince(commitDate) + const repo = document.getElementById(repoElementId); + repo.innerHTML += ` +
+

${data.length} commits

+

latest: ${commitMessage} by ${commitAuthor} ${commitTimeSince}

+
+ ` + + + myPullRequests + .map(pullRequest => pullRequest.review_comments_url) + .forEach(reviewCommentUrl => { + fetch(reviewCommentUrl + "?per_page=100", options) + .then(res => res.json()) + .then(data => { + const repo = document.getElementById(repoElementId); + repo.innerHTML += ` +
+ received ${data.length} comments +
+ ` + }) + }) + }) + }) + +} + +function timeSince(date) { + + var seconds = Math.floor((new Date() - date) / 1000); + + var interval = seconds / 31536000; + + if (interval > 1) { + return Math.floor(interval) + " years ago"; + } + interval = seconds / 2592000; + if (interval > 1) { + return Math.floor(interval) + " months ago"; + } + interval = seconds / 86400; + if (interval > 1) { + return Math.floor(interval) + " days ago"; + } + interval = seconds / 3600; + if (interval > 1) { + return Math.floor(interval) + " hours ago"; + } + interval = seconds / 60; + if (interval > 1) { + return Math.floor(interval) + " minutes ago"; + } + return Math.floor(seconds) + " seconds ago"; +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index 7c8ad447..c51c7746 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,59 @@ body { - background: #FFECE9; + margin: 0 auto; + font-family: 'Titillium Web', sans-serif; +} + +#projects { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.repo-card { + max-width: 250px; + margin-bottom: 30px; + border: 1px solid #776c6c42; +} + +.repo { + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.repo a { + color: inherit; +} + +#chart { + margin: 20px 0; +} + +.profile-card { + display: flex; + flex-direction: column; + max-width: 250px; + margin: 0 auto; +} + +.profile-details { + display: flex; + flex-direction: column; + text-align: center; +} + +.profile-details img { + width: 100%; + border-radius: 30%; +} + +h1, h2 { +text-align: center; +} + +@media (min-width: 530px) { + #projects { + justify-content: space-between; + } } \ No newline at end of file