From 8bdb1fb11a70b33e33bc4f96becb372767637f0a Mon Sep 17 00:00:00 2001 From: Amanda Tange Date: Wed, 23 Feb 2022 21:51:39 +0100 Subject: [PATCH 1/5] added styling and most of the structure for the page and attempts at retrieving the data from api --- README.md | 10 ++ code/chart.js | 27 ++++++ code/index.html | 77 +++++++++++++++- code/script.js | 239 ++++++++++++++++++++++++++++++++++++++++++++++++ code/style.css | 93 ++++++++++++++++++- 5 files changed, 440 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..9a2e48b6 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,16 @@ Replace this readme with your own information about your project. Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +#What to include + +- A list of all repos that are forked ones from Technigo +- Your username and profile picture +- Most recent update (push) for each repo +- Name of your default branch for each repo +- URL to the actual GitHub repo +- Number of commit messages for each repo +- All pull requests +- A chart of how many projects you've done so far, compared to how many you will do using [Chart.js](https://www.chartjs.org/). [Here](https://www.chartjs.org/docs/latest/getting-started/)'s documentation on how to get started, and in the left menu you can also find [example usage](https://www.chartjs.org/docs/latest/getting-started/usage.html). ## The problem diff --git a/code/chart.js b/code/chart.js index 92e85a30..c1c66a24 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,30 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 + +const labels = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + ]; + +const data = { +labels: labels, +datasets: [{ + label: 'My First dataset', + backgroundColor: ['#FF5722', '#F96D00', '#F0A500', '#CF7500', '#524A4E', '#1A1C20'], + borderColor: '#F4F4F4', + data: [10, 5, 2, 20, 30, 45], +}] +}; + +const config = { +type: 'doughnut', +data: data, +options: {} +}; + +const myChart = new Chart(ctx, config); \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..ff1da2ba 100644 --- a/code/index.html +++ b/code/index.html @@ -6,16 +6,83 @@ Project GitHub Tracker + + -

GitHub Tracker

+
+ +
amandatange bild
+
+ +
+ + +
- +
+ +
+ + - + + + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..b8da6565 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,239 @@ +//DOM selectors +const main = document.getElementById("projects"); +const usr = document.getElementById("usr"); + +//Global variables +usrName = 'amandatange'; +let forkedRepos = []; // will contain filtered list of repos that have been forked +let projectRepos = []; // will contain filtered list of repos with names that start with "project" +let projectNames = []; // will contain a list with the section IDs for each project +let pullRequests = []; +let projectCounter = 0; +let PRCounter = 0; // counts pullrequests to get the index to match the PR data to the project section id +const API_REPOS = `https://api.github.com/users/${usrName}/repos` +// const API_PR = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + + +const API_TOKEN = TOKEN || process.env.API_KEY; + +const options = { + method: 'GET', + headers: { + Authorization: `token ${API_TOKEN}` + } +} + +const fetchData = async () => { + await fetch(API_REPOS, options) + .then((res) => res.json()) + .then((data) => { + forkedRepos = data.filter(repo => repo.fork); + projectRepos = forkedRepos.filter(repo => repo.name.startsWith('project')); + console.log(projectRepos[0]) + // console.log(projectRepos[1]) + // console.log(projectRepos[2]) + // console.log(projectRepos[3]) + // console.log(projectRepos[4]) + // console.log(projectRepos[5]) + + // for the user presentation + usr.innerHTML = ` + +

@${usrName}

+ `; + + ///for the projects sections + // console.log(projectRepos.length) + // const postInfo = async (dataPR) => { + // for (let i = 0; i < projectRepos.length; i++) { + // let repo = projectRepos[i]; + // let pull = dataPR[i]; + // let p_login = pull.user.login; + // let r_login = repo.owner.login; + // console.log(p_login, r_login) + // if (p_login === r_login || p_login === "michaelchangdk" && pull.id === 856976386) { + // console.log(p_login, r_login) + // main.innerHTML += ` + //
+ //

${repo.name}

+ //

Name of your default branch for each repo

+ // Link to repo + //
+ // `; + // } + // } + // } + + + const fetchPR = async () => { + for (let i = 0; i < projectRepos.length; i++) { + let repo = projectRepos[i]; + await fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options) + .then((resPR) => resPR.json()) + .then((dataPR) => { + // console.log(dataPR) + // let p_login = pull.user.login; + // let r_login = repo.owner.login; + let filteredDataPR = dataPR.filter(pr => pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386) + // console.log(filteredDataPR) + // postInfo(dataPR) + // console.log("hej" , i) + const pull = filteredDataPR; + console.log(pull) + + // let htmlPR = "" + // if (pull.length !== 0) { + // htmlPR = pull[0].html_url // fix this in a better way maybe + // } + // console.log(pull) + // let p_login = pull[0].user.login; + // let r_login = repo.owner.login; + // console.log(p_login, r_login) + // if (p_login === r_login || p_login === "michaelchangdk" && pull.id === 856976386) { + // console.log(p_login, r_login) + main.innerHTML += ` +
+

${repo.name}

+

Default branch: ${repo.default_branch}

+

Link to repo

+

Most recent update (push) for each repo

+ + +
+ `; + if (pull.length !== 0) { + console.log(pull[0]._links.commits) + document.getElementById(`${repo.name}_${i+1}`).innerHTML += ` +

Number of commits: ${pull[0]._links.commits.length}

+

Pull request

` + } + // } + }) + } + + } + fetchPR() + + }) +} + + +// fetch(`https://api.github.com/users/${usrName}/repos`, options) //maybe make it possible to enter your own github username? +// .then((res) => res.json()) +// .then((data) => { +// forkedRepos = data.filter(repo => repo.fork); +// projectRepos = forkedRepos.filter(repo => repo.name.startsWith('project')); +// // console.log(data) +// // console.log(forkedRepos) +// console.log(projectRepos); + +// usrName = projectRepos[0].owner.login; + +// // for the user presentation +// usr.innerHTML = ` +//

+// ::${usrName} +//

+// +// ` +// // console.log(projectRepos[0]) + + +// // getPullRequests(projectRepos); +// projectRepos.forEach((repo) => { +// main.innerHTML += ` +//
+//

${repo.name}

+//

Name of your default branch for each repo

+// Link to repo +//
+// `; +// projectCounter++ +// projectNames.push(`${repo.name}`) +// }) + + +// projectRepos.forEach(repo => { +// // console.log(repo) +// fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100') +// .then(res => res.json()) +// .then(data => { +// // console.log(data); +// data.forEach(pull => { +// let p_login = pull.user.login; +// let r_login = repo.owner.login; +// if (p_login === r_login || p_login === "michaelchangdk" && pull.id === 856976386) { //the id is for the pull request that is done from michael's account +// pullRequests.push(pull); +// fetch(`${pull.commits_url}`) +// .then(response => response.json()) +// .then(json_data => { +// let numberOfCommits = json_data.length +// document.getElementById(`${repo.name}_${PRCounter}`).innerHTML += ` +//

Most recent update (push) for each repo

+//

The repo has ${numberOfCommits} commits

+// Link to pull request +// `; +// }) + +// }; +// }) +// PRCounter++; +// }); +// }); + +// console.log(pullRequests) + +// // console.log(projectNames) +// } + +// ); + +// const getPullRequests = async (repos) => { +// //Get all the PRs for each project. +// await repos.forEach(repo => { +// // console.log(repo) +// fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100') +// .then(res => res.json()) +// .then(data => { +// // console.log(data); +// data.forEach(pull => { +// let p_login = pull.user.login; +// let r_login = repo.owner.login; +// if (p_login === r_login || p_login === "michaelchangdk" && pull.id === 856976386) { //the id is for the pull request that is done from michael's account +// pullRequests.push(pull); +// fetch(`${pull.commits_url}`) +// .then(response => response.json()) +// .then(json_data => { +// let numberOfCommits = json_data.length +// document.getElementById(`${repo.name}_${PRCounter}`).innerHTML += ` +//

Most recent update (push) for each repo

+//

The repo has ${numberOfCommits} commits

+// Link to pull request +// `; +// }) + +// }; +// }) +// PRCounter++; +// }); +// }); + +// console.log(pullRequests) + +// // console.log(projectNames) +// } + //TODO + //1. Find only the PR that you made by comparing pull.user.login + // with repo.owner.login + //2. Now you're able to get the commits for each repo by using + // the commits_url as an argument to call another function + //3. You can also get the comments for each PR by calling + // another function with the review_comments_url as argument + + + + + // "MDQ6VXNlcjg5OTMwMzM2" + // MDQ6VXNlcjg5OTMwMzM2 + +fetchData() diff --git a/code/style.css b/code/style.css index 7c8ad447..1a04c0ae 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,94 @@ +:root { + --primary: #CF750099; + --secondary: #272727; +} + + body { - background: #FFECE9; + letter-spacing: .1rem; + font-family: monospace; + margin: 0; +} + +header { + display: flex; + align-content: center; + justify-content: center; + font-family: 'Montserrat', sans-serif; + background-color: var(--primary); + color: var(--secondary); + margin: 0; + padding: 5vw; + height: 20vh; +} + +h1 { + color: #f4f4f4; + font-size: max(1.5rem, 5vw); + margin: 0; + font-weight: 400; + text-shadow: 2px 2px #CF750040; +} + +h2 { + margin-left: 1rem; +} + +a { + text-decoration: none; + font-weight: bolder; + color: var(--secondary); +} + +.usr-name-img-container { + display: flex; + align-items: center; +} + +.avatar_url_pic { + max-width: max(10vw, 100px); + border-radius: 100%; + margin: 1rem; +} + +.project-container { + display: grid; + grid-template-columns: 1fr; + justify-items: center; + width: 100vw; + font-size: 1.5em; +} + +.project { + /* border: thin solid var(--secondary); */ + background-color: #F4F4F4; + padding: 1rem; + margin: 1rem; +} + +.chart-container { + display: grid; + grid-template-columns: 1fr; + justify-items: center; +} + +.chart { + max-width: min(80vw, 400px); + max-height: min(80vh, 400px); +} + +@media (min-width: 667px) and (max-width: 1024px) { + .project-container { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: 1025px) { + .project-container { + grid-template-columns: 1fr 1fr 1fr; + } + + h2 { + margin-left: 5vw; + } } \ No newline at end of file From f0cee7af35e6cc42979ee732bbb108ec7ef5dd8d Mon Sep 17 00:00:00 2001 From: Amanda Tange Date: Fri, 25 Feb 2022 11:54:59 +0100 Subject: [PATCH 2/5] added token and some small details in the other files --- .gitignore | 2 + code/chart.js | 40 +++----- code/index.html | 4 +- code/script.js | 256 +++++++++++------------------------------------- code/style.css | 22 +++-- 5 files changed, 92 insertions(+), 232 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..12c621a0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +code/secret.js diff --git a/code/chart.js b/code/chart.js index c1c66a24..776692f9 100644 --- a/code/chart.js +++ b/code/chart.js @@ -3,29 +3,17 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 -const labels = [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - ]; - -const data = { -labels: labels, -datasets: [{ - label: 'My First dataset', - backgroundColor: ['#FF5722', '#F96D00', '#F0A500', '#CF7500', '#524A4E', '#1A1C20'], - borderColor: '#F4F4F4', - data: [10, 5, 2, 20, 30, 45], -}] -}; - -const config = { -type: 'doughnut', -data: data, -options: {} -}; - -const myChart = new Chart(ctx, config); \ No newline at end of file +const myChart = (numberOfProjects) => { + new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Completed', 'To be done'], + datasets: [{ + label: 'My First dataset', + backgroundColor: ['#cc5500', '#3a3a3a'], + borderColor: '#F4F4F4', + data: [numberOfProjects, 19 - numberOfProjects], + }] + } + }) +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index ff1da2ba..b10447db 100644 --- a/code/index.html +++ b/code/index.html @@ -15,7 +15,7 @@
-
amandatange bild
+

@amandatange

-// ` -// // console.log(projectRepos[0]) - -// // getPullRequests(projectRepos); -// projectRepos.forEach((repo) => { -// main.innerHTML += ` -//
-//

${repo.name}

-//

Name of your default branch for each repo

-// Link to repo -//
-// `; -// projectCounter++ -// projectNames.push(`${repo.name}`) -// }) - - -// projectRepos.forEach(repo => { -// // console.log(repo) -// fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100') -// .then(res => res.json()) -// .then(data => { -// // console.log(data); -// data.forEach(pull => { -// let p_login = pull.user.login; -// let r_login = repo.owner.login; -// if (p_login === r_login || p_login === "michaelchangdk" && pull.id === 856976386) { //the id is for the pull request that is done from michael's account -// pullRequests.push(pull); -// fetch(`${pull.commits_url}`) -// .then(response => response.json()) -// .then(json_data => { -// let numberOfCommits = json_data.length -// document.getElementById(`${repo.name}_${PRCounter}`).innerHTML += ` -//

Most recent update (push) for each repo

-//

The repo has ${numberOfCommits} commits

-// Link to pull request -// `; -// }) + const postInfo = async (dataPR) => { + for (let i = 0; i < projectRepos.length; i++) { + let repo = projectRepos[i]; + let pull = dataPR[i].filter(pr => pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386) + + // const pull = filteredDataPR; + // console.log("projectrepo[i]", projectRepos[i]) + // const API_COMMITS = pull[0]._links.commits.href; + const API_COMMITS = projectRepos[i].commits_url.replace("{/sha}", ""); + + fetch(API_COMMITS, options) + .then((commits_res) => commits_res.json()) + .then((commits_data) => { + // document.getElementById(`${repo.name}_${i+1}`).innerHTML += ` + + + main.innerHTML += ` +
+

${repo.name}

+

Link to repo here

+

Default branch: ${repo.default_branch}

+

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

+

Number of commits: ${commits_data.length}

+
+ `; -// }; -// }) -// PRCounter++; -// }); -// }); - -// console.log(pullRequests) - -// // console.log(projectNames) -// } - -// ); + //If the repo doesn't have a PR it won't add this data + if (pull.length !== 0) { + // const API_COMMITS = pull[0]._links.commits.href; + // fetch(API_COMMITS, options) + // .then((commits_res) => commits_res.json()) + // .then((commits_data) => { + document.getElementById(`${repo.name}_${i+1}`).innerHTML += ` + +

Pull request here

` + // }) + } + } + ) -// const getPullRequests = async (repos) => { -// //Get all the PRs for each project. -// await repos.forEach(repo => { -// // console.log(repo) -// fetch('https://api.github.com/repos/technigo/' + repo.name + '/pulls?per_page=100') -// .then(res => res.json()) -// .then(data => { -// // console.log(data); -// data.forEach(pull => { -// let p_login = pull.user.login; -// let r_login = repo.owner.login; -// if (p_login === r_login || p_login === "michaelchangdk" && pull.id === 856976386) { //the id is for the pull request that is done from michael's account -// pullRequests.push(pull); -// fetch(`${pull.commits_url}`) -// .then(response => response.json()) -// .then(json_data => { -// let numberOfCommits = json_data.length -// document.getElementById(`${repo.name}_${PRCounter}`).innerHTML += ` -//

Most recent update (push) for each repo

-//

The repo has ${numberOfCommits} commits

-// Link to pull request -// `; -// }) -// }; -// }) -// PRCounter++; -// }); -// }); - -// console.log(pullRequests) - -// // console.log(projectNames) -// } - //TODO - //1. Find only the PR that you made by comparing pull.user.login - // with repo.owner.login - //2. Now you're able to get the commits for each repo by using - // the commits_url as an argument to call another function - //3. You can also get the comments for each PR by calling - // another function with the review_comments_url as argument - - - - - // "MDQ6VXNlcjg5OTMwMzM2" - // MDQ6VXNlcjg5OTMwMzM2 + } + } + }) +} fetchData() diff --git a/code/style.css b/code/style.css index 1a04c0ae..3b6fee95 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,5 @@ :root { - --primary: #CF750099; + --primary: #cc5500; --secondary: #272727; } @@ -23,21 +23,30 @@ header { } h1 { - color: #f4f4f4; + font-size: max(1.5rem, 5vw); margin: 0; font-weight: 400; - text-shadow: 2px 2px #CF750040; + text-shadow: 3px 3px 5px #27272666; +} + +a { + text-decoration: none; + color: #f4f4f4; } h2 { margin-left: 1rem; } -a { - text-decoration: none; +span { + color: var(--primary); +} + +.project a { + /* text-decoration: none; */ font-weight: bolder; - color: var(--secondary); + /* color: var(--secondary); */ } .usr-name-img-container { @@ -49,6 +58,7 @@ a { max-width: max(10vw, 100px); border-radius: 100%; margin: 1rem; + box-shadow: 3px 3px 5px #CF750066; } .project-container { From 1931b8807873606436ea32252539f7b78a17a17e Mon Sep 17 00:00:00 2001 From: Amanda Tange Date: Fri, 25 Feb 2022 15:49:55 +0100 Subject: [PATCH 3/5] separated nested functions and how the fetches happen with the added bonus that the page loads much quicker --- code/script.js | 103 ++++++++++++++++++++----------------------------- code/style.css | 5 +-- 2 files changed, 42 insertions(+), 66 deletions(-) diff --git a/code/script.js b/code/script.js index b2e4a963..10cf38c6 100644 --- a/code/script.js +++ b/code/script.js @@ -8,7 +8,6 @@ let forkedRepos = []; // will contain filtered list of repos that have been fork let projectRepos = []; // will contain filtered list of repos with names that start with "project" const API_REPOS = `https://api.github.com/users/${usrName}/repos` -const API_TOKEN = TOKEN || process.env.API_KEY; const options = { method: 'GET', @@ -17,14 +16,12 @@ const options = { } } -const fetchData = async () => { - await fetch(API_REPOS, options) +const fetchData = () => { + fetch(API_REPOS, options) .then((res) => res.json()) .then((data) => { forkedRepos = data.filter(repo => repo.fork); projectRepos = forkedRepos.filter(repo => repo.name.startsWith('project')); - // console.log(projectRepos) - myChart(projectRepos.length) // for the user presentation usr.innerHTML = ` @@ -32,68 +29,50 @@ const fetchData = async () => {

@${usrName}

`; - - const fetchPR = async () => { - let listWithPR = [] - for (let i = 0; i < projectRepos.length; i++) { - let repo = projectRepos[i]; - await fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options) - .then((resPR) => resPR.json()) - .then((dataPR) => { - listWithPR.push(dataPR) - if (listWithPR.length === projectRepos.length) { - postInfo(listWithPR) - } - } - ) - } - } + //Send completed projects length to build chart + myChart(projectRepos.length) + + //Call function to fetch pull requests fetchPR() + }) +} - const postInfo = async (dataPR) => { - for (let i = 0; i < projectRepos.length; i++) { - let repo = projectRepos[i]; - let pull = dataPR[i].filter(pr => pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386) - - // const pull = filteredDataPR; - // console.log("projectrepo[i]", projectRepos[i]) - // const API_COMMITS = pull[0]._links.commits.href; - const API_COMMITS = projectRepos[i].commits_url.replace("{/sha}", ""); +const fetchPR = () => { + for (let i = 0; i < projectRepos.length; i++) { + const repo = projectRepos[i]; + const API_PR = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` + const API_COMMITS = repo.commits_url.replace("{/sha}", ""); - fetch(API_COMMITS, options) - .then((commits_res) => commits_res.json()) - .then((commits_data) => { - // document.getElementById(`${repo.name}_${i+1}`).innerHTML += ` - + fetch(API_PR, options) + .then((resPR) => resPR.json()) + .then((dataPR) => { + const pull = dataPR.filter(pr => pr.url.includes(repo.name) + && (pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386)) + + fetch(API_COMMITS, options) + .then((commits_res) => commits_res.json()) + .then((commits_data) => { + postInfo(pull, repo, commits_data.length) + }) + }) + } +} - main.innerHTML += ` -
-

${repo.name}

-

Link to repo here

-

Default branch: ${repo.default_branch}

-

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

-

Number of commits: ${commits_data.length}

-
- `; - - //If the repo doesn't have a PR it won't add this data - if (pull.length !== 0) { - // const API_COMMITS = pull[0]._links.commits.href; - // fetch(API_COMMITS, options) - // .then((commits_res) => commits_res.json()) - // .then((commits_data) => { - document.getElementById(`${repo.name}_${i+1}`).innerHTML += ` - -

Pull request here

` - // }) - } - } - ) +const postInfo = (pull, repo, commitsLength) => { + main.innerHTML += ` +
+

${repo.name}

+

Link to repo: here

+

Default branch: ${repo.default_branch}

+

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

+

Number of commits: ${commitsLength}

+
`; - - } - } - }) + //If the repo doesn't have a PR it won't add this data + if (pull.length !== 0) { + document.getElementById(`${repo.name}`).innerHTML += ` +

Pull request: here

` + } } fetchData() diff --git a/code/style.css b/code/style.css index 3b6fee95..2d5bec52 100644 --- a/code/style.css +++ b/code/style.css @@ -44,9 +44,7 @@ span { } .project a { - /* text-decoration: none; */ font-weight: bolder; - /* color: var(--secondary); */ } .usr-name-img-container { @@ -70,7 +68,6 @@ span { } .project { - /* border: thin solid var(--secondary); */ background-color: #F4F4F4; padding: 1rem; margin: 1rem; @@ -101,4 +98,4 @@ span { h2 { margin-left: 5vw; } -} \ No newline at end of file +} From f3ae23d31136e4ba0290be0882d1bd31c0cee1eb Mon Sep 17 00:00:00 2001 From: Amanda Tange Date: Sat, 26 Feb 2022 20:41:46 +0100 Subject: [PATCH 4/5] added more comments and cleaned up the code a little bit --- .gitignore | 4 ++-- README.md | 12 +++++----- code/chart.js | 2 +- code/index.html | 59 +++++-------------------------------------------- code/script.js | 43 +++++++++++++++++++++++------------ 5 files changed, 42 insertions(+), 78 deletions(-) diff --git a/.gitignore b/.gitignore index 12c621a0..ad08d525 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,2 @@ - -code/secret.js + +code/secret.js diff --git a/README.md b/README.md index 9a2e48b6..25bfc5d3 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. -#What to include +Assignment is to build a site that shows info about our github account and the projects we've created to far. +The following points is what is required to be shown. - A list of all repos that are forked ones from Technigo - Your username and profile picture @@ -12,12 +10,12 @@ Start by briefly describing the assignment in a sentence or two. Keep it short a - URL to the actual GitHub repo - Number of commit messages for each repo - All pull requests -- A chart of how many projects you've done so far, compared to how many you will do using [Chart.js](https://www.chartjs.org/). [Here](https://www.chartjs.org/docs/latest/getting-started/)'s documentation on how to get started, and in the left menu you can also find [example usage](https://www.chartjs.org/docs/latest/getting-started/usage.html). +- A chart of how many projects you've done so far, compared to how many you will have done. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I used fetch to get the user data, which required 3 fetches - user data, pull requests, and commits. The styling was kept simple since the focus was to be able to display all the different data that was required. The biggest problem was data retrieval and getting it to actually show up on the site. The second biggest problem I had was that I had set up the fetches to all finish before moving on to displaying the data so the site took a very long time to load. That has been slightly remedied by splitting up the code into separate fetches but it still takes a fairly long time for the site to load. ## 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://github-tracker-at.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 776692f9..96acf6eb 100644 --- a/code/chart.js +++ b/code/chart.js @@ -5,7 +5,7 @@ const ctx = document.getElementById('chart').getContext('2d') const myChart = (numberOfProjects) => { new Chart(ctx, { - type: 'doughnut', + type: 'pie', data: { labels: ['Completed', 'To be done'], datasets: [{ diff --git a/code/index.html b/code/index.html index b10447db..7d613e31 100644 --- a/code/index.html +++ b/code/index.html @@ -14,64 +14,15 @@
- +

@amandatange

- +
- - +
- + +
diff --git a/code/script.js b/code/script.js index 10cf38c6..2ee1069e 100644 --- a/code/script.js +++ b/code/script.js @@ -1,11 +1,11 @@ //DOM selectors -const main = document.getElementById("projects"); -const usr = document.getElementById("usr"); +const main = document.getElementById("projects"); // main portion of the site, contains all projects +const usr = document.getElementById("usr"); // section in header that holds username and profile pic //Global variables -usrName = 'amandatange'; +const usrName = 'amandatange'; let forkedRepos = []; // will contain filtered list of repos that have been forked -let projectRepos = []; // will contain filtered list of repos with names that start with "project" +let projectRepos = []; // will contain filtered list of forked repos with names that start with "project" const API_REPOS = `https://api.github.com/users/${usrName}/repos` @@ -23,10 +23,13 @@ const fetchData = () => { forkedRepos = data.filter(repo => repo.fork); projectRepos = forkedRepos.filter(repo => repo.name.startsWith('project')); + const profilePic = data[0].owner.avatar_url; + const LinkToProfile = data[0].owner.html_url; + // for the user presentation usr.innerHTML = ` - -

@${usrName}

+ +

@${usrName}

`; //Send completed projects length to build chart @@ -41,37 +44,49 @@ const fetchPR = () => { for (let i = 0; i < projectRepos.length; i++) { const repo = projectRepos[i]; const API_PR = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100` - const API_COMMITS = repo.commits_url.replace("{/sha}", ""); + + // since not all projects have a PR I don't have access to the commits from the PR API for all of them + // so I chose to use the commits api from the first fetch + // but I think this way the number of commits includes those made by the technigo team before I forked the project? + const API_COMMITS = repo.commits_url.replace("{/sha}", ""); fetch(API_PR, options) .then((resPR) => resPR.json()) .then((dataPR) => { + //filter for every PR to match my profile (or in the case of the weather app, to michael's profile and id for the PR) const pull = dataPR.filter(pr => pr.url.includes(repo.name) && (pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386)) fetch(API_COMMITS, options) .then((commits_res) => commits_res.json()) .then((commits_data) => { + // sending the PR, repo and number of commits to the function that posts the data on the site postInfo(pull, repo, commits_data.length) }) }) } } -const postInfo = (pull, repo, commitsLength) => { + +const postInfo = (pull, repo, numberOfCommits) => { + + const update = new Date(repo.pushed_at).toLocaleDateString('en-GB'); + + // the tags have classes that aren't used right now + // but I would like to try using them to style the layout with a more a advanced grid layout main.innerHTML += `

${repo.name}

-

Link to repo: here

-

Default branch: ${repo.default_branch}

-

Most recent update: ${new Date(repo.pushed_at).toLocaleDateString('en-GB')}

-

Number of commits: ${commitsLength}

+

Link to repo: here

+

Default branch: ${repo.default_branch}

+

Most recent update: ${update}

+

Number of commits: ${numberOfCommits}

`; - //If the repo doesn't have a PR it won't add this data if (pull.length !== 0) { + const PRLink = pull[0].html_url; document.getElementById(`${repo.name}`).innerHTML += ` -

Pull request: here

` +

Pull request: here

` } } From 7e15c09f2e7423537223b47a3c348a77a2bf62e0 Mon Sep 17 00:00:00 2001 From: Amanda Tange Date: Sat, 26 Feb 2022 20:52:06 +0100 Subject: [PATCH 5/5] added hover effect on project section --- code/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code/style.css b/code/style.css index 2d5bec52..2299f94e 100644 --- a/code/style.css +++ b/code/style.css @@ -73,6 +73,11 @@ span { margin: 1rem; } +.project:hover { + transition: background-color 500ms ease; + background-color: #f0d9c7; +} + .chart-container { display: grid; grid-template-columns: 1fr;