From 42e69d0040453f1aff35925b1f1feaa864e017b6 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 27 Sep 2021 16:51:16 +0200 Subject: [PATCH 01/50] fetch repos --- code/script.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/code/script.js b/code/script.js index e69de29b..4ebd69e5 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,24 @@ +const projects = document.getElementById('projects'); + +const username = 'gustavfrid'; + +const fetchAllRepos = () => { + fetch(`https://api.github.com/users/${username}/repos`) + .then((response) => { + return response.json(); + }) + .then((res) => { + let forkedRepos = filterRepos(res); + forkedRepos.forEach((repo) => { + projects.innerHTML += /*html*/ `

${repo.name}

`; + }); + + console.log(forkedRepos); + }); +}; + +const filterRepos = (repos) => { + return repos.filter((repo) => repo.fork); +}; + +fetchAllRepos(); From e30cc5afc5fa4e88de3e808a80885d0f2ec96a12 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Tue, 28 Sep 2021 08:57:50 +0200 Subject: [PATCH 02/50] added avatar + link to github from avatar --- code/index.html | 35 ++++++++++++++++++----------------- code/script.js | 34 +++++++++++++++++++++++++++------- code/style.css | 9 +++++++-- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/code/index.html b/code/index.html index 2fb5e0ae..5216181a 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,22 @@ - - - - - Project GitHub Tracker - - - -

GitHub Tracker

-

Projects:

-
+ + + + + Project GitHub Tracker + + + +

GitHub Tracker

+
+

Projects:

+
- - + + - - - - \ No newline at end of file + + + + diff --git a/code/script.js b/code/script.js index 4ebd69e5..d5c82887 100644 --- a/code/script.js +++ b/code/script.js @@ -1,6 +1,8 @@ const projects = document.getElementById('projects'); +const userData = document.getElementById('userData'); const username = 'gustavfrid'; +const parentOwner = 'Technigo'; const fetchAllRepos = () => { fetch(`https://api.github.com/users/${username}/repos`) @@ -8,16 +10,34 @@ const fetchAllRepos = () => { return response.json(); }) .then((res) => { - let forkedRepos = filterRepos(res); - forkedRepos.forEach((repo) => { - projects.innerHTML += /*html*/ `

${repo.name}

`; + // filter out repos that are forked + let filteredRepos = filterForkedRepos(res); + // fetch all detailed info for each forked repo, to be able to get and filter the owner + filteredRepos.forEach((repo) => { + fetch(`https://api.github.com/repos/${username}/${repo.name}`) + .then((response) => { + return response.json(); + }) + .then((res) => { + // only pick repos with owner = Technigo + if (res.parent.owner.login === parentOwner) { + projects.innerHTML += /*html*/ `

${repo.name} from ${res.parent.owner.login}

`; + } + }) + .catch((err) => alert(err)); }); - - console.log(forkedRepos); - }); + userData.innerHTML = /*html*/ ` +

${username}

+ + avatar + + `; + console.log(filteredRepos); + }) + .catch((err) => alert(err)); }; -const filterRepos = (repos) => { +const filterForkedRepos = (repos) => { return repos.filter((repo) => repo.fork); }; diff --git a/code/style.css b/code/style.css index 7c8ad447..4e99d658 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,8 @@ body { - background: #FFECE9; -} \ No newline at end of file + background: grey; +} + +.avatar { + height: 50px; + border-radius: 50%; +} From 155507f20c8218658b71d8404306e4973fb909ff Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Tue, 28 Sep 2021 09:41:49 +0200 Subject: [PATCH 03/50] added default branch + updated --- code/script.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index d5c82887..91afcadb 100644 --- a/code/script.js +++ b/code/script.js @@ -21,7 +21,10 @@ const fetchAllRepos = () => { .then((res) => { // only pick repos with owner = Technigo if (res.parent.owner.login === parentOwner) { - projects.innerHTML += /*html*/ `

${repo.name} from ${res.parent.owner.login}

`; + projects.innerHTML += /*html*/ ` +

${repo.name} from ${res.parent.owner.login} default branch: ${repo.default_branch} updated: ${repo.pushed_at}

+ `; + console.log(res); } }) .catch((err) => alert(err)); From 7d533cfb7eac19d0142f5ff00a9d58175954ad18 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Wed, 29 Sep 2021 08:15:53 +0200 Subject: [PATCH 04/50] change to promise.all --- code/script.js | 114 +++++++++++++++++++++++++++++++++++-------------- 1 file changed, 81 insertions(+), 33 deletions(-) diff --git a/code/script.js b/code/script.js index 91afcadb..abcdf7a7 100644 --- a/code/script.js +++ b/code/script.js @@ -3,45 +3,93 @@ const userData = document.getElementById('userData'); const username = 'gustavfrid'; const parentOwner = 'Technigo'; +const data = []; -const fetchAllRepos = () => { +// const fetchAllRepos = () => { +// fetch(`https://api.github.com/users/${username}/repos`) +// .then((response) => { +// return response.json(); +// }) +// .then((allRepos) => { +// console.log(allRepos); +// // filter out repos that are forked +// let filteredRepos = filterForkedRepos(allRepos); +// // fetch all detailed info for each forked repo, to be able to get and filter the owner +// filteredRepos.forEach((repo) => { +// fetch(`https://api.github.com/repos/${username}/${repo.name}`) +// .then((response) => { +// return response.json(); +// }) +// .then((someRepos) => { +// // only pick repos with owner = Technigo +// if (someRepos.parent.owner.login === parentOwner) { +// fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`) +// .then((response) => { +// return response.json(); +// }) +// .then((res) => { +// projects.innerHTML += /*html*/ ` +//

${repo.name} from ${someRepos.parent.owner.login} default branch: ${repo.default_branch} updated: ${repo.pushed_at} commits: ${res.length}

+// `; +// // console.log('commits:', res); +// }); +// console.log(someRepos); +// } +// }) +// .catch((err) => console.log(err)); +// }); +// userData.innerHTML = /*html*/ ` +//

${username}

+// +// avatar +// +// `; +// console.log(filteredRepos); +// }) +// .catch((err) => console.log(err)); +// }; + +const fetchAllReposFromUser = () => { fetch(`https://api.github.com/users/${username}/repos`) - .then((response) => { - return response.json(); + .then((res) => res.json()) + .then((allRepos) => allRepos.filter((repo) => repo.fork)) + .then((filteredRepos) => { + console.log(filteredRepos); + return filteredRepos; }) - .then((res) => { - // filter out repos that are forked - let filteredRepos = filterForkedRepos(res); - // fetch all detailed info for each forked repo, to be able to get and filter the owner - filteredRepos.forEach((repo) => { + .then((repos) => { + repos.forEach((repo) => { + //slice(0, 2). + // fetch all data for each repo fetch(`https://api.github.com/repos/${username}/${repo.name}`) - .then((response) => { - return response.json(); - }) - .then((res) => { - // only pick repos with owner = Technigo - if (res.parent.owner.login === parentOwner) { - projects.innerHTML += /*html*/ ` -

${repo.name} from ${res.parent.owner.login} default branch: ${repo.default_branch} updated: ${repo.pushed_at}

- `; - console.log(res); + .then((res) => res.json()) + .then((fullRepo) => { + // only continue with repos that have parentOwner as parent + if (fullRepo.parent.owner.login === parentOwner) { + // fetch all needed endpoints at same time + + // console.log('data length: ', data.length); + const fetchArr = ['repo', 'commits', 'pulls']; + Promise.all([fetch(`https://api.github.com/repos/${username}/${repo.name}/${fetchArr[1]}`), fetch(`https://api.github.com/repos/${parentOwner}/${repo.name}/${fetchArr[2]}`)]) + .then((responses) => { + return Promise.all(responses.map((res) => res.json())); + }) + .then((resData) => { + resData.unshift(fullRepo); + // console.log('resData: ', resData); + const newResData = {}; + resData.forEach((item, i) => { + newResData[fetchArr[i]] = { ...item }; + }); + data.push(newResData); + }); } - }) - .catch((err) => alert(err)); + }); }); - userData.innerHTML = /*html*/ ` -

${username}

- - avatar - - `; - console.log(filteredRepos); }) - .catch((err) => alert(err)); -}; - -const filterForkedRepos = (repos) => { - return repos.filter((repo) => repo.fork); + .then(() => console.log(data)) + .catch((err) => console.log(err)); }; -fetchAllRepos(); +// fetchAllRepos(); +fetchAllReposFromUser(); From 10affa1f84ea09985e72973018d92018fa623d58 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Wed, 29 Sep 2021 12:08:22 +0200 Subject: [PATCH 05/50] refactor code --- code/script.js | 100 +++++++++++++++++++++++++++---------------------- 1 file changed, 55 insertions(+), 45 deletions(-) diff --git a/code/script.js b/code/script.js index abcdf7a7..fde5702b 100644 --- a/code/script.js +++ b/code/script.js @@ -3,8 +3,63 @@ const userData = document.getElementById('userData'); const username = 'gustavfrid'; const parentOwner = 'Technigo'; +const apiEndPoints = ['repo', 'commits', 'pulls']; const data = []; +const fetchAllReposFromUser = () => { + fetch(`https://api.github.com/users/${username}/repos`) + .then((res) => res.json()) + .then((allRepos) => { + let filteredRepos = allRepos.filter((repo) => repo.fork); + console.log('filtered repos: ', filteredRepos); + return filteredRepos.slice(0, 2); + }) + .then((repos) => { + return repos.forEach((repo) => { + // fetch all data for each repo + fetch(`https://api.github.com/repos/${username}/${repo.name}`) + .then((res) => res.json()) + .then((fullRepo) => { + // only continue with repos that have parentOwner as parent + if (fullRepo.parent.owner.login === parentOwner) { + // fetch all needed endpoints at same time + Promise.all([ + fetch(`https://api.github.com/repos/${username}/${repo.name}/${apiEndPoints[1]}`), + fetch(`https://api.github.com/repos/${parentOwner}/${repo.name}/${apiEndPoints[2]}?per_page=100`), + ]) + .then((responses) => { + return Promise.all(responses.map((res) => res.json())); + }) + .then((resData) => { + resData.unshift(fullRepo); + // console.log('resData: ', resData); + const newResData = {}; + resData.forEach((item, i) => { + newResData[apiEndPoints[i]] = item; + }); + data.push(newResData); + }); + } + }); + }); + // .then((data) => console.log(data)); + }) + // .then(() => generateList) + .catch((err) => console.log(err)); +}; + +const generateList = () => { + data.forEach((data) => { + console.log('generateList:'); + projects.innerHTML += /*html*/ ` +

${data.repo.name} from ${data.repo.parent.owner.login} default branch: ${data.repo.default_branch} updated: ${data.repo.pushed_at} commits: ${data.commits.length}

+ `; + }); +}; + +// fetchAllRepos(); +fetchAllReposFromUser(); + // const fetchAllRepos = () => { // fetch(`https://api.github.com/users/${username}/repos`) // .then((response) => { @@ -48,48 +103,3 @@ const data = []; // }) // .catch((err) => console.log(err)); // }; - -const fetchAllReposFromUser = () => { - fetch(`https://api.github.com/users/${username}/repos`) - .then((res) => res.json()) - .then((allRepos) => allRepos.filter((repo) => repo.fork)) - .then((filteredRepos) => { - console.log(filteredRepos); - return filteredRepos; - }) - .then((repos) => { - repos.forEach((repo) => { - //slice(0, 2). - // fetch all data for each repo - fetch(`https://api.github.com/repos/${username}/${repo.name}`) - .then((res) => res.json()) - .then((fullRepo) => { - // only continue with repos that have parentOwner as parent - if (fullRepo.parent.owner.login === parentOwner) { - // fetch all needed endpoints at same time - - // console.log('data length: ', data.length); - const fetchArr = ['repo', 'commits', 'pulls']; - Promise.all([fetch(`https://api.github.com/repos/${username}/${repo.name}/${fetchArr[1]}`), fetch(`https://api.github.com/repos/${parentOwner}/${repo.name}/${fetchArr[2]}`)]) - .then((responses) => { - return Promise.all(responses.map((res) => res.json())); - }) - .then((resData) => { - resData.unshift(fullRepo); - // console.log('resData: ', resData); - const newResData = {}; - resData.forEach((item, i) => { - newResData[fetchArr[i]] = { ...item }; - }); - data.push(newResData); - }); - } - }); - }); - }) - .then(() => console.log(data)) - .catch((err) => console.log(err)); -}; - -// fetchAllRepos(); -fetchAllReposFromUser(); From 80b41080fafc22d95a1142b1a4cb0ae751c458af Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Wed, 29 Sep 2021 22:02:43 +0200 Subject: [PATCH 06/50] refactor, fetch commits from repo the fetch pull based on commiters (authors) --- code/script.js | 172 ++++++++++++++++++++++++------------------------- 1 file changed, 84 insertions(+), 88 deletions(-) diff --git a/code/script.js b/code/script.js index fde5702b..746b090b 100644 --- a/code/script.js +++ b/code/script.js @@ -1,105 +1,101 @@ const projects = document.getElementById('projects'); const userData = document.getElementById('userData'); -const username = 'gustavfrid'; -const parentOwner = 'Technigo'; -const apiEndPoints = ['repo', 'commits', 'pulls']; -const data = []; +const USER = 'gustavfrid'; +const PARENT_OWNER = 'Technigo'; +const REPOS_URL = `https://api.github.com/users/${USER}/repos`; +const USER_URL = `https://api.github.com/users/${USER}`; const fetchAllReposFromUser = () => { - fetch(`https://api.github.com/users/${username}/repos`) + // fetch all repos from user + fetch(REPOS_URL) .then((res) => res.json()) .then((allRepos) => { + // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.fork); - console.log('filtered repos: ', filteredRepos); - return filteredRepos.slice(0, 2); - }) - .then((repos) => { - return repos.forEach((repo) => { - // fetch all data for each repo - fetch(`https://api.github.com/repos/${username}/${repo.name}`) - .then((res) => res.json()) - .then((fullRepo) => { - // only continue with repos that have parentOwner as parent - if (fullRepo.parent.owner.login === parentOwner) { - // fetch all needed endpoints at same time - Promise.all([ - fetch(`https://api.github.com/repos/${username}/${repo.name}/${apiEndPoints[1]}`), - fetch(`https://api.github.com/repos/${parentOwner}/${repo.name}/${apiEndPoints[2]}?per_page=100`), - ]) - .then((responses) => { - return Promise.all(responses.map((res) => res.json())); - }) - .then((resData) => { - resData.unshift(fullRepo); - // console.log('resData: ', resData); - const newResData = {}; - resData.forEach((item, i) => { - newResData[apiEndPoints[i]] = item; - }); - data.push(newResData); - }); - } - }); + // console.log('filtered repos: ', filteredRepos); + filteredRepos.slice(0, 2).forEach((repo) => { + // fetch all data for each repo use .slice(0, 2) to limit + fetchFullRepo(repo); }); - // .then((data) => console.log(data)); }) - // .then(() => generateList) - .catch((err) => console.log(err)); + .catch((err) => console.log('fetchAllReposFromUser error: ', err)); }; -const generateList = () => { - data.forEach((data) => { - console.log('generateList:'); - projects.innerHTML += /*html*/ ` -

${data.repo.name} from ${data.repo.parent.owner.login} default branch: ${data.repo.default_branch} updated: ${data.repo.pushed_at} commits: ${data.commits.length}

- `; - }); +const fetchFullRepo = (repo) => { + // fetch all data from each repo + fetch(`https://api.github.com/repos/${USER}/${repo.name}`) + .then((res) => res.json()) + .then((fullRepo) => { + // only continue with repos that have PARENT_OWNER as parent + if (fullRepo.parent.owner.login === PARENT_OWNER) { + // put data in html + // console.log('fullRepo', fullRepo); + projects.innerHTML += /*html*/ ` +

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

+

updated: ${fullRepo.pushed_at}

+

Commits

+ `; + // fetchPullRequestsArray(fullRepo); + // fetchCollaborators(fullRepo); + const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; + fetchCommits(COMMITS_URL, fullRepo); + } + }) + .catch((err) => console.log('fetchFullRepo error:', err)); }; -// fetchAllRepos(); -fetchAllReposFromUser(); +const fetchPullRequestsArray = (repo, authors) => { + // fetch all pull requests from repo + const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100`; + fetch(PULL_URL) + .then((res) => res.json()) + .then((data) => { + console.log('fetchPullRequestsArray data: ', data); + // only pick pull requests connected to user + const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // pull.user.login === repo.owner.login); + console.log('myPullReq', myPullReq); + if (myPullReq) { + console.log('my pullreq', myPullReq); //fetchCommits(myPullReq.commits_url, repo.name); + } else { + document.getElementById(`commit-${repo.name}`).innerHTML = 'No pull request yet done :('; + } + }) + .catch((err) => console.log('fetchPullRequestsArray error:', err)); +}; -// const fetchAllRepos = () => { -// fetch(`https://api.github.com/users/${username}/repos`) -// .then((response) => { -// return response.json(); -// }) -// .then((allRepos) => { -// console.log(allRepos); -// // filter out repos that are forked -// let filteredRepos = filterForkedRepos(allRepos); -// // fetch all detailed info for each forked repo, to be able to get and filter the owner -// filteredRepos.forEach((repo) => { -// fetch(`https://api.github.com/repos/${username}/${repo.name}`) -// .then((response) => { -// return response.json(); -// }) -// .then((someRepos) => { -// // only pick repos with owner = Technigo -// if (someRepos.parent.owner.login === parentOwner) { -// fetch(`https://api.github.com/repos/${username}/${repo.name}/commits`) -// .then((response) => { -// return response.json(); -// }) -// .then((res) => { -// projects.innerHTML += /*html*/ ` -//

${repo.name} from ${someRepos.parent.owner.login} default branch: ${repo.default_branch} updated: ${repo.pushed_at} commits: ${res.length}

-// `; -// // console.log('commits:', res); -// }); -// console.log(someRepos); -// } -// }) -// .catch((err) => console.log(err)); -// }); -// userData.innerHTML = /*html*/ ` -//

${username}

-// -// avatar -// -// `; -// console.log(filteredRepos); +const fetchCommits = (myCommitsUrl, repo) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + // console.log('fetchCommits data: ', data); + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; + const authors = data.map((commit) => commit.author.login); + fetchPullRequestsArray(repo, authors); + }) + .catch((err) => console.log('fetchCommits error: ', err)); +}; + +const fetchUser = () => { + fetch(USER_URL) + .then((res) => res.json()) + .then((data) => { + // console.log(data); + userData.innerHTML += `

${data.login}

`; + }) + .catch((err) => console.log('fetchCommits error: ', err)); +}; + +// const fetchCollaborators = (repo) => { +// const COLLABORATOR_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits`; +// fetch(COLLABORATOR_URL) +// .then((res) => res.json()) +// .then((data) => { +// console.log(data); +// // userData.innerHTML += `

${data.login}

`; // }) -// .catch((err) => console.log(err)); +// .catch((err) => console.log('fetchCommits error: ', err)); // }; + +fetchAllReposFromUser(); +fetchUser(); From 0c59818078eb299228b5af50365855a40d37f671 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Wed, 29 Sep 2021 22:03:54 +0200 Subject: [PATCH 07/50] re structure code --- code/script.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/code/script.js b/code/script.js index 746b090b..7177e1e6 100644 --- a/code/script.js +++ b/code/script.js @@ -45,6 +45,18 @@ const fetchFullRepo = (repo) => { .catch((err) => console.log('fetchFullRepo error:', err)); }; +const fetchCommits = (myCommitsUrl, repo) => { + fetch(myCommitsUrl) + .then((res) => res.json()) + .then((data) => { + // console.log('fetchCommits data: ', data); + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; + const authors = data.map((commit) => commit.author.login); + fetchPullRequestsArray(repo, authors); + }) + .catch((err) => console.log('fetchCommits error: ', err)); +}; + const fetchPullRequestsArray = (repo, authors) => { // fetch all pull requests from repo const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100`; @@ -64,18 +76,6 @@ const fetchPullRequestsArray = (repo, authors) => { .catch((err) => console.log('fetchPullRequestsArray error:', err)); }; -const fetchCommits = (myCommitsUrl, repo) => { - fetch(myCommitsUrl) - .then((res) => res.json()) - .then((data) => { - // console.log('fetchCommits data: ', data); - document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; - const authors = data.map((commit) => commit.author.login); - fetchPullRequestsArray(repo, authors); - }) - .catch((err) => console.log('fetchCommits error: ', err)); -}; - const fetchUser = () => { fetch(USER_URL) .then((res) => res.json()) From cc491b8099513b4cb4dcc70c7499bc87edf0094a Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Thu, 30 Sep 2021 08:08:26 +0200 Subject: [PATCH 08/50] added pull reqest to list --- code/script.js | 31 ++++++++++++------------------- 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/code/script.js b/code/script.js index 7177e1e6..33ffb67a 100644 --- a/code/script.js +++ b/code/script.js @@ -14,7 +14,7 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.fork); // console.log('filtered repos: ', filteredRepos); - filteredRepos.slice(0, 2).forEach((repo) => { + filteredRepos.forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit fetchFullRepo(repo); }); @@ -30,11 +30,12 @@ const fetchFullRepo = (repo) => { // only continue with repos that have PARENT_OWNER as parent if (fullRepo.parent.owner.login === PARENT_OWNER) { // put data in html - // console.log('fullRepo', fullRepo); + console.log('fullRepo', fullRepo.name); projects.innerHTML += /*html*/ `

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

updated: ${fullRepo.pushed_at}

Commits

+

Pull request

`; // fetchPullRequestsArray(fullRepo); // fetchCollaborators(fullRepo); @@ -49,12 +50,15 @@ const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl) .then((res) => res.json()) .then((data) => { - // console.log('fetchCommits data: ', data); + console.log('fetchCommits data: ', repo.name, data); document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; - const authors = data.map((commit) => commit.author.login); + const authors = data.map((commit) => { + return commit.author ? commit.author.login : ''; + }); + console.log('fetchCommits authors', authors); fetchPullRequestsArray(repo, authors); }) - .catch((err) => console.log('fetchCommits error: ', err)); + .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; const fetchPullRequestsArray = (repo, authors) => { @@ -66,11 +70,11 @@ const fetchPullRequestsArray = (repo, authors) => { console.log('fetchPullRequestsArray data: ', data); // only pick pull requests connected to user const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // pull.user.login === repo.owner.login); - console.log('myPullReq', myPullReq); + console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { - console.log('my pullreq', myPullReq); //fetchCommits(myPullReq.commits_url, repo.name); + document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request`; } else { - document.getElementById(`commit-${repo.name}`).innerHTML = 'No pull request yet done :('; + document.getElementById(`pull-${repo.name}`).innerHTML = 'No pull request yet done :('; } }) .catch((err) => console.log('fetchPullRequestsArray error:', err)); @@ -86,16 +90,5 @@ const fetchUser = () => { .catch((err) => console.log('fetchCommits error: ', err)); }; -// const fetchCollaborators = (repo) => { -// const COLLABORATOR_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits`; -// fetch(COLLABORATOR_URL) -// .then((res) => res.json()) -// .then((data) => { -// console.log(data); -// // userData.innerHTML += `

${data.login}

`; -// }) -// .catch((err) => console.log('fetchCommits error: ', err)); -// }; - fetchAllReposFromUser(); fetchUser(); From f5016bcc05131da9bbe2e9d45093e05483dbc80c Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Thu, 30 Sep 2021 14:42:58 +0200 Subject: [PATCH 09/50] added fetch collaborators --- README.md | 6 ++++++ code/chart.js | 23 ++++++++++++++++++++- code/index.html | 4 +++- code/script.js | 53 +++++++++++++++++++++++++++++++++++-------------- 4 files changed, 69 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 1613a3b0..42d9e347 100644 --- a/README.md +++ b/README.md @@ -11,3 +11,9 @@ 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. + +## TODO + +- Format updated time so it says how many sec/min/hour/day/month/years, ago it was updated +- add chart +- style diff --git a/code/chart.js b/code/chart.js index 92e85a30..11d60620 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,25 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 +const drawPieChart = (pullReqData) => { + const { total, done } = pullReqData; + const data = { + labels: ['Done', 'Soon'], + datasets: [ + { + label: 'Technigo project progress', + data: [done, total - done], + backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'], + hoverOffset: 4, + }, + ], + }; + + const config = { + type: 'pie', + data: data, + }; + + new Chart(ctx, config); +}; diff --git a/code/index.html b/code/index.html index 5216181a..b2292327 100644 --- a/code/index.html +++ b/code/index.html @@ -16,7 +16,9 @@

Projects:

- + + + diff --git a/code/script.js b/code/script.js index 33ffb67a..3626ab86 100644 --- a/code/script.js +++ b/code/script.js @@ -6,15 +6,24 @@ const PARENT_OWNER = 'Technigo'; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; const USER_URL = `https://api.github.com/users/${USER}`; +const options = { + method: 'GET', + headers: { Authorization: `token ${GITHUB_TOKEN}` }, +}; +const pullReqData = { + total: 19, + done: 0, +}; + const fetchAllReposFromUser = () => { // fetch all repos from user - fetch(REPOS_URL) + fetch(REPOS_URL, options) .then((res) => res.json()) .then((allRepos) => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.fork); - // console.log('filtered repos: ', filteredRepos); - filteredRepos.forEach((repo) => { + console.log('filtered repos: ', filteredRepos); + filteredRepos.slice(0, 2).forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit fetchFullRepo(repo); }); @@ -24,38 +33,39 @@ const fetchAllReposFromUser = () => { const fetchFullRepo = (repo) => { // fetch all data from each repo - fetch(`https://api.github.com/repos/${USER}/${repo.name}`) + fetch(`https://api.github.com/repos/${USER}/${repo.name}`, options) .then((res) => res.json()) .then((fullRepo) => { // only continue with repos that have PARENT_OWNER as parent if (fullRepo.parent.owner.login === PARENT_OWNER) { // put data in html - console.log('fullRepo', fullRepo.name); + // console.log('fullRepo', fullRepo.name); projects.innerHTML += /*html*/ ` -

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

-

updated: ${fullRepo.pushed_at}

+

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${ + fullRepo.default_branch + }

+

updated: ${new Date(fullRepo.pushed_at).toDateString()}

Commits

Pull request

`; - // fetchPullRequestsArray(fullRepo); - // fetchCollaborators(fullRepo); const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); + fetchCollaborators(fullRepo); } }) .catch((err) => console.log('fetchFullRepo error:', err)); }; const fetchCommits = (myCommitsUrl, repo) => { - fetch(myCommitsUrl) + fetch(myCommitsUrl, options) .then((res) => res.json()) .then((data) => { - console.log('fetchCommits data: ', repo.name, data); + // console.log('fetchCommits data: ', repo.name, data); document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; const authors = data.map((commit) => { return commit.author ? commit.author.login : ''; }); - console.log('fetchCommits authors', authors); + // console.log('fetchCommits authors', authors); fetchPullRequestsArray(repo, authors); }) .catch((err) => console.log('fetchCommits error: ', repo.name, err)); @@ -64,15 +74,17 @@ const fetchCommits = (myCommitsUrl, repo) => { const fetchPullRequestsArray = (repo, authors) => { // fetch all pull requests from repo const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100`; - fetch(PULL_URL) + fetch(PULL_URL, options) .then((res) => res.json()) .then((data) => { console.log('fetchPullRequestsArray data: ', data); // only pick pull requests connected to user const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // pull.user.login === repo.owner.login); - console.log('myPullReq', repo.name, myPullReq); + // console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request`; + pullReqData.pullRequests++; + drawPieChart(pullReqData); } else { document.getElementById(`pull-${repo.name}`).innerHTML = 'No pull request yet done :('; } @@ -81,7 +93,7 @@ const fetchPullRequestsArray = (repo, authors) => { }; const fetchUser = () => { - fetch(USER_URL) + fetch(USER_URL, options) .then((res) => res.json()) .then((data) => { // console.log(data); @@ -90,5 +102,16 @@ const fetchUser = () => { .catch((err) => console.log('fetchCommits error: ', err)); }; +const fetchCollaborators = (repo) => { + const COLLABORATOR_URL = `https://api.github.com/repos/${USER}/${repo.name}/collaborators`; + fetch(COLLABORATOR_URL, options) + .then((res) => res.json()) + .then((data) => { + console.log('fetchCollaborators', data); + // userData.innerHTML += `

${data.login}

`; + }) + .catch((err) => console.log('fetchCollaborators error: ', err)); +}; + fetchAllReposFromUser(); fetchUser(); From 70878286c94c616562d942b6918d7e033de43949 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Thu, 30 Sep 2021 14:52:49 +0200 Subject: [PATCH 10/50] fetch pull requests based on collaborators --- code/script.js | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/code/script.js b/code/script.js index 3626ab86..bfa0c597 100644 --- a/code/script.js +++ b/code/script.js @@ -62,15 +62,28 @@ const fetchCommits = (myCommitsUrl, repo) => { .then((data) => { // console.log('fetchCommits data: ', repo.name, data); document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; - const authors = data.map((commit) => { - return commit.author ? commit.author.login : ''; - }); + // const authors = data.map((commit) => { + // return commit.author ? commit.author.login : ''; + // }); // console.log('fetchCommits authors', authors); - fetchPullRequestsArray(repo, authors); + // fetchPullRequestsArray(repo, authors); }) .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; +const fetchCollaborators = (repo) => { + const COLLABORATOR_URL = `https://api.github.com/repos/${USER}/${repo.name}/collaborators`; + fetch(COLLABORATOR_URL, options) + .then((res) => res.json()) + .then((data) => { + console.log('fetchCollaborators', data); + const authors = data.map((author) => author.login); + // userData.innerHTML += `

${data.login}

`; + fetchPullRequestsArray(repo, authors); + }) + .catch((err) => console.log('fetchCollaborators error: ', err)); +}; + const fetchPullRequestsArray = (repo, authors) => { // fetch all pull requests from repo const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100`; @@ -102,16 +115,5 @@ const fetchUser = () => { .catch((err) => console.log('fetchCommits error: ', err)); }; -const fetchCollaborators = (repo) => { - const COLLABORATOR_URL = `https://api.github.com/repos/${USER}/${repo.name}/collaborators`; - fetch(COLLABORATOR_URL, options) - .then((res) => res.json()) - .then((data) => { - console.log('fetchCollaborators', data); - // userData.innerHTML += `

${data.login}

`; - }) - .catch((err) => console.log('fetchCollaborators error: ', err)); -}; - fetchAllReposFromUser(); fetchUser(); From 63f4bda1970478e60ec3f3bd69677d22b7863e3e Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Thu, 30 Sep 2021 15:10:29 +0200 Subject: [PATCH 11/50] added collaborator avatar --- code/script.js | 18 +++++++++++------- code/style.css | 5 +++++ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/code/script.js b/code/script.js index bfa0c597..8d8421aa 100644 --- a/code/script.js +++ b/code/script.js @@ -47,6 +47,7 @@ const fetchFullRepo = (repo) => {

updated: ${new Date(fullRepo.pushed_at).toDateString()}

Commits

Pull request

+

Collaborators

`; const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); @@ -60,13 +61,7 @@ const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl, options) .then((res) => res.json()) .then((data) => { - // console.log('fetchCommits data: ', repo.name, data); document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; - // const authors = data.map((commit) => { - // return commit.author ? commit.author.login : ''; - // }); - // console.log('fetchCommits authors', authors); - // fetchPullRequestsArray(repo, authors); }) .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; @@ -78,7 +73,16 @@ const fetchCollaborators = (repo) => { .then((data) => { console.log('fetchCollaborators', data); const authors = data.map((author) => author.login); - // userData.innerHTML += `

${data.login}

`; + console.log('collaborators : ', authors); + data.forEach((author) => { + if (data.length > 1) { + document.getElementById( + `collaborators-${repo.name}` + ).innerHTML += ``; + } else { + document.getElementById(`collaborators-${repo.name}`).innerHTML = 'No collaborators, so lonely...'; + } + }); fetchPullRequestsArray(repo, authors); }) .catch((err) => console.log('fetchCollaborators error: ', err)); diff --git a/code/style.css b/code/style.css index 4e99d658..ce218c95 100644 --- a/code/style.css +++ b/code/style.css @@ -6,3 +6,8 @@ body { height: 50px; border-radius: 50%; } + +.avatar-collaborator { + height: 20px; + border-radius: 50%; +} From dc11da62c5298d4f8cd5996180227eb641ccf93e Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Thu, 30 Sep 2021 20:38:33 +0200 Subject: [PATCH 12/50] draw and update chart check --- code/chart.js | 42 ++++++++++++++++++++++++------------------ code/script.js | 5 +++-- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/code/chart.js b/code/chart.js index 11d60620..0e88d5ea 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,24 +2,30 @@ const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 -const drawPieChart = (pullReqData) => { - const { total, done } = pullReqData; - const data = { - labels: ['Done', 'Soon'], - datasets: [ - { - label: 'Technigo project progress', - data: [done, total - done], - backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'], - hoverOffset: 4, - }, - ], - }; - const config = { - type: 'pie', - data: data, - }; +const data = { + labels: ['Soon', 'Done'], + datasets: [ + { + label: 'Technigo project progress', + data: [19, 0], + backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'], + hoverOffset: 4, + }, + ], +}; + +const config = { + type: 'pie', + data: data, +}; + +let pieChart = new Chart(ctx, config); - new Chart(ctx, config); +const updatePieChart = (chart, newData) => { + chart.data.datasets.forEach((dataset) => { + dataset.data.pop(); + dataset.data.push(newData); + }); + chart.update(); }; diff --git a/code/script.js b/code/script.js index 8d8421aa..93fee643 100644 --- a/code/script.js +++ b/code/script.js @@ -100,8 +100,8 @@ const fetchPullRequestsArray = (repo, authors) => { // console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request`; - pullReqData.pullRequests++; - drawPieChart(pullReqData); + pullReqData.done++; + updatePieChart(pieChart, pullReqData.done); } else { document.getElementById(`pull-${repo.name}`).innerHTML = 'No pull request yet done :('; } @@ -121,3 +121,4 @@ const fetchUser = () => { fetchAllReposFromUser(); fetchUser(); +// drawPieChart(19,0); From c7171a351b1852a3be48b98190d4d15b105e163b Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Fri, 1 Oct 2021 00:25:23 +0200 Subject: [PATCH 13/50] chang classes added html comments in js --- code/script.js | 14 +++++++------- code/style.css | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 93fee643..fe33da5e 100644 --- a/code/script.js +++ b/code/script.js @@ -21,7 +21,7 @@ const fetchAllReposFromUser = () => { .then((res) => res.json()) .then((allRepos) => { // filter forked repos - let filteredRepos = allRepos.filter((repo) => repo.fork); + let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); console.log('filtered repos: ', filteredRepos); filteredRepos.slice(0, 2).forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit @@ -45,7 +45,7 @@ const fetchFullRepo = (repo) => { fullRepo.default_branch }

updated: ${new Date(fullRepo.pushed_at).toDateString()}

-

Commits

+

Commits

Pull request

Collaborators

`; @@ -78,9 +78,9 @@ const fetchCollaborators = (repo) => { if (data.length > 1) { document.getElementById( `collaborators-${repo.name}` - ).innerHTML += ``; + ).innerHTML = /*html*/ `Group project: `; } else { - document.getElementById(`collaborators-${repo.name}`).innerHTML = 'No collaborators, so lonely...'; + document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; } }); fetchPullRequestsArray(repo, authors); @@ -99,11 +99,11 @@ const fetchPullRequestsArray = (repo, authors) => { const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // pull.user.login === repo.owner.login); // console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { - document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request`; + document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ `Pull request`; pullReqData.done++; updatePieChart(pieChart, pullReqData.done); } else { - document.getElementById(`pull-${repo.name}`).innerHTML = 'No pull request yet done :('; + document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request yet done :('; } }) .catch((err) => console.log('fetchPullRequestsArray error:', err)); @@ -114,7 +114,7 @@ const fetchUser = () => { .then((res) => res.json()) .then((data) => { // console.log(data); - userData.innerHTML += `

${data.login}

`; + userData.innerHTML += /*html*/ `

${data.login}

`; }) .catch((err) => console.log('fetchCommits error: ', err)); }; diff --git a/code/style.css b/code/style.css index ce218c95..194838c8 100644 --- a/code/style.css +++ b/code/style.css @@ -2,7 +2,7 @@ body { background: grey; } -.avatar { +.avatar-user { height: 50px; border-radius: 50%; } From 8c875cd4b91c85d301188522d108f78b6741c254 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Fri, 1 Oct 2021 00:39:25 +0200 Subject: [PATCH 14/50] remove junk --- code/script.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/code/script.js b/code/script.js index fe33da5e..7a8e5207 100644 --- a/code/script.js +++ b/code/script.js @@ -23,7 +23,7 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); console.log('filtered repos: ', filteredRepos); - filteredRepos.slice(0, 2).forEach((repo) => { + filteredRepos.forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit fetchFullRepo(repo); }); @@ -41,13 +41,11 @@ const fetchFullRepo = (repo) => { // put data in html // console.log('fullRepo', fullRepo.name); projects.innerHTML += /*html*/ ` -

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${ - fullRepo.default_branch - }

-

updated: ${new Date(fullRepo.pushed_at).toDateString()}

-

Commits

+

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

+

Updated: ${new Date(fullRepo.pushed_at).toDateString()}

+

Commits:

Pull request

-

Collaborators

+

Collaborators:

`; const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); @@ -76,9 +74,7 @@ const fetchCollaborators = (repo) => { console.log('collaborators : ', authors); data.forEach((author) => { if (data.length > 1) { - document.getElementById( - `collaborators-${repo.name}` - ).innerHTML = /*html*/ `Group project: `; + document.getElementById(`collaborators-${repo.name}`).innerHTML += /*html*/ ``; } else { document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; } @@ -96,14 +92,14 @@ const fetchPullRequestsArray = (repo, authors) => { .then((data) => { console.log('fetchPullRequestsArray data: ', data); // only pick pull requests connected to user - const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // pull.user.login === repo.owner.login); + const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ `Pull request`; pullReqData.done++; updatePieChart(pieChart, pullReqData.done); } else { - document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request yet done :('; + document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request done :('; } }) .catch((err) => console.log('fetchPullRequestsArray error:', err)); From 84a5d7ba951444014c6d954a349d154f6ab177de Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Fri, 1 Oct 2021 00:59:11 +0200 Subject: [PATCH 15/50] chabge wtyling --- code/index.html | 4 ++-- code/script.js | 14 ++++++++------ code/style.css | 23 +++++++++++++++++++++++ 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/code/index.html b/code/index.html index b2292327..1f796383 100644 --- a/code/index.html +++ b/code/index.html @@ -11,10 +11,10 @@

GitHub Tracker

Projects:

-
+
- + diff --git a/code/script.js b/code/script.js index 7a8e5207..640e5a8b 100644 --- a/code/script.js +++ b/code/script.js @@ -23,7 +23,7 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); console.log('filtered repos: ', filteredRepos); - filteredRepos.forEach((repo) => { + filteredRepos.slice(0, 3).forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit fetchFullRepo(repo); }); @@ -41,11 +41,13 @@ const fetchFullRepo = (repo) => { // put data in html // console.log('fullRepo', fullRepo.name); projects.innerHTML += /*html*/ ` -

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

-

Updated: ${new Date(fullRepo.pushed_at).toDateString()}

-

Commits:

-

Pull request

-

Collaborators:

+

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

+
+

Updated: ${new Date(fullRepo.pushed_at).toDateString()}

+

Commits:

+

Pull request

+
+

Collaborators:

`; const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); diff --git a/code/style.css b/code/style.css index 194838c8..6accedd1 100644 --- a/code/style.css +++ b/code/style.css @@ -11,3 +11,26 @@ body { height: 20px; border-radius: 50%; } + +.projects { + display: flex; + flex-direction: column; +} + +.chart { + width: 50px; +} + +.repo { + font-size: medium; +} +.repo-info { + display: flex; +} + +.update, +.commit, +.pull, +.collaboration { + margin: 2px 2px; +} From 51ab31d0c7d848cf6a3daef874f0738093c83f26 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Fri, 1 Oct 2021 01:25:16 +0200 Subject: [PATCH 16/50] change style --- code/index.html | 3 +++ code/script.js | 7 ++++--- code/style.css | 5 ++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/code/index.html b/code/index.html index 1f796383..2df42fe7 100644 --- a/code/index.html +++ b/code/index.html @@ -5,6 +5,9 @@ Project GitHub Tracker + + + diff --git a/code/script.js b/code/script.js index 640e5a8b..dfcfa539 100644 --- a/code/script.js +++ b/code/script.js @@ -41,11 +41,12 @@ const fetchFullRepo = (repo) => { // put data in html // console.log('fullRepo', fullRepo.name); projects.innerHTML += /*html*/ ` -

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

+

${fullRepo.name}

-

Updated: ${new Date(fullRepo.pushed_at).toDateString()}

-

Commits:

+

From ${fullRepo.parent.owner.login}, default branch: ${fullRepo.default_branch}

Pull request

+

Commits:

+

Updated: ${new Date(fullRepo.pushed_at).toDateString()}

Collaborators:

`; diff --git a/code/style.css b/code/style.css index 6accedd1..573a0eb8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,5 +1,5 @@ body { - background: grey; + font-family: 'Montserrat', sans-serif; } .avatar-user { @@ -10,6 +10,7 @@ body { .avatar-collaborator { height: 20px; border-radius: 50%; + padding: 0 2px; } .projects { @@ -26,8 +27,10 @@ body { } .repo-info { display: flex; + flex-wrap: wrap; } +.info, .update, .commit, .pull, From 4ac2be16869be6b5f0730f135552715e9d3fa0a8 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Fri, 1 Oct 2021 21:03:47 +0200 Subject: [PATCH 17/50] change chart labels --- code/chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/chart.js b/code/chart.js index 0e88d5ea..4e6d47cc 100644 --- a/code/chart.js +++ b/code/chart.js @@ -4,7 +4,7 @@ const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 const data = { - labels: ['Soon', 'Done'], + // labels: ['Soon', 'Done'], datasets: [ { label: 'Technigo project progress', From 26669911ffa0bf66789f79e88af66f5ae7b47afd Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:31:38 +0200 Subject: [PATCH 18/50] testing .env --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index dfcfa539..6d75dca5 100644 --- a/code/script.js +++ b/code/script.js @@ -8,7 +8,7 @@ const USER_URL = `https://api.github.com/users/${USER}`; const options = { method: 'GET', - headers: { Authorization: `token ${GITHUB_TOKEN}` }, + headers: { Authorization: `token ${process.env.GITHUB_TOKEN}` }, }; const pullReqData = { total: 19, From 2f7ae7394042e04ee55924bc8b9c14870dcf55c6 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:39:04 +0200 Subject: [PATCH 19/50] created fuction generateProjectCard --- code/script.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index 6d75dca5..309a74b6 100644 --- a/code/script.js +++ b/code/script.js @@ -40,16 +40,7 @@ const fetchFullRepo = (repo) => { if (fullRepo.parent.owner.login === PARENT_OWNER) { // put data in html // console.log('fullRepo', fullRepo.name); - projects.innerHTML += /*html*/ ` -

${fullRepo.name}

-
-

From ${fullRepo.parent.owner.login}, default branch: ${fullRepo.default_branch}

-

Pull request

-

Commits:

-

Updated: ${new Date(fullRepo.pushed_at).toDateString()}

-
-

Collaborators:

- `; + generateProjectCard(fullRepo); const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); fetchCollaborators(fullRepo); @@ -58,6 +49,19 @@ const fetchFullRepo = (repo) => { .catch((err) => console.log('fetchFullRepo error:', err)); }; +const generateProjectCard = (repo) => { + projects.innerHTML += /*html*/ ` +

${repo.name}

+
+

From ${repo.parent.owner.login}, default branch: ${repo.default_branch}

+

Pull request

+

Commits:

+

Updated: ${new Date(repo.pushed_at).toDateString()}

+
+

Collaborators:

+ `; +}; + const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl, options) .then((res) => res.json()) From a0066bad6c1ed5ae401807dab3f120053833b31f Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:55:27 +0200 Subject: [PATCH 20/50] added generate Projectcard --- code/script.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 33ffb67a..00dbdb1a 100644 --- a/code/script.js +++ b/code/script.js @@ -31,14 +31,8 @@ const fetchFullRepo = (repo) => { if (fullRepo.parent.owner.login === PARENT_OWNER) { // put data in html console.log('fullRepo', fullRepo.name); - projects.innerHTML += /*html*/ ` -

${fullRepo.name} from ${fullRepo.parent.owner.login} default branch: ${fullRepo.default_branch}

-

updated: ${fullRepo.pushed_at}

-

Commits

-

Pull request

- `; - // fetchPullRequestsArray(fullRepo); - // fetchCollaborators(fullRepo); + generateProjectCard(fullRepo); + const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); } @@ -46,6 +40,19 @@ const fetchFullRepo = (repo) => { .catch((err) => console.log('fetchFullRepo error:', err)); }; +const generateProjectCard = (repo) => { + projects.innerHTML += /*html*/ ` +

${repo.name}

+
+

From ${repo.parent.owner.login}, default branch: ${repo.default_branch}

+

Pull request

+

Commits:

+

Updated: ${new Date(repo.pushed_at).toDateString()}

+
+

Collaborators:

+ `; +}; + const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl) .then((res) => res.json()) From 2a12a474a386663ee1dbf5ecc6d9fa2917b8e515 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:56:10 +0200 Subject: [PATCH 21/50] change styling according to test-auth branch --- code/style.css | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/code/style.css b/code/style.css index 4e99d658..573a0eb8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,8 +1,39 @@ body { - background: grey; + font-family: 'Montserrat', sans-serif; } -.avatar { +.avatar-user { height: 50px; border-radius: 50%; } + +.avatar-collaborator { + height: 20px; + border-radius: 50%; + padding: 0 2px; +} + +.projects { + display: flex; + flex-direction: column; +} + +.chart { + width: 50px; +} + +.repo { + font-size: medium; +} +.repo-info { + display: flex; + flex-wrap: wrap; +} + +.info, +.update, +.commit, +.pull, +.collaboration { + margin: 2px 2px; +} From 6d2869bff25a561890ce8587aa6555cf3abc4823 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:56:53 +0200 Subject: [PATCH 22/50] changed chart according to test-auth --- code/chart.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/code/chart.js b/code/chart.js index 92e85a30..4e6d47cc 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,4 +1,31 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d') +const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 + +const data = { + // labels: ['Soon', 'Done'], + datasets: [ + { + label: 'Technigo project progress', + data: [19, 0], + backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'], + hoverOffset: 4, + }, + ], +}; + +const config = { + type: 'pie', + data: data, +}; + +let pieChart = new Chart(ctx, config); + +const updatePieChart = (chart, newData) => { + chart.data.datasets.forEach((dataset) => { + dataset.data.pop(); + dataset.data.push(newData); + }); + chart.update(); +}; From 449bc49f3684a984739c655facc4debd6f3235d0 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:57:53 +0200 Subject: [PATCH 23/50] changed index.html according to test-auth --- code/index.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/code/index.html b/code/index.html index 5216181a..2df42fe7 100644 --- a/code/index.html +++ b/code/index.html @@ -5,18 +5,23 @@ Project GitHub Tracker + + +

GitHub Tracker

Projects:

-
+
- + - + + + From 450c6a7a5c830ac4c77db466604b8d78ae966503 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 11:59:19 +0200 Subject: [PATCH 24/50] limit no of repos to limit api calls --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 00dbdb1a..db9e94e4 100644 --- a/code/script.js +++ b/code/script.js @@ -14,7 +14,7 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.fork); // console.log('filtered repos: ', filteredRepos); - filteredRepos.forEach((repo) => { + filteredRepos.slice(0, 3).forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit fetchFullRepo(repo); }); From a1bc2695621696d3eb22e502ba9736ec398f28cd Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 12:01:12 +0200 Subject: [PATCH 25/50] style user avatar --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index db9e94e4..b2f69215 100644 --- a/code/script.js +++ b/code/script.js @@ -92,7 +92,7 @@ const fetchUser = () => { .then((res) => res.json()) .then((data) => { // console.log(data); - userData.innerHTML += `

${data.login}

`; + userData.innerHTML += /*html*/ `

${data.login}

`; }) .catch((err) => console.log('fetchCommits error: ', err)); }; From e8426d1afbf7c5eea25e0ad2ce4c9b953cf6b274 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 12:33:06 +0200 Subject: [PATCH 26/50] filter collaborators --- code/script.js | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/code/script.js b/code/script.js index 40216fe2..56b2b15a 100644 --- a/code/script.js +++ b/code/script.js @@ -39,7 +39,6 @@ const fetchFullRepo = (repo) => { generateProjectCard(fullRepo); const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); - fetchCollaborators(fullRepo); } }) .catch((err) => console.log('fetchFullRepo error:', err)); @@ -62,29 +61,31 @@ const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl) .then((res) => res.json()) .then((data) => { - document.getElementById(`commit-${repo.name}`).innerHTML += ` ${data.length}`; + const commitsSinceFork = data.filter((commit) => commit.commit.author.date > repo.created_at); + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commitsSinceFork.length}`; + getCollaborators(commitsSinceFork); }) .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; -const fetchCollaborators = (repo) => { - const COLLABORATOR_URL = `https://api.github.com/repos/${USER}/${repo.name}/collaborators`; - fetch(COLLABORATOR_URL, options) - .then((res) => res.json()) - .then((data) => { - console.log('fetchCollaborators', data); - const authors = data.map((author) => author.login); - console.log('collaborators : ', authors); - data.forEach((author) => { - if (data.length > 1) { - document.getElementById(`collaborators-${repo.name}`).innerHTML += /*html*/ ``; - } else { - document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; - } - }); - fetchPullRequestsArray(repo, authors); - }) - .catch((err) => console.log('fetchCollaborators error: ', err)); +const getCollaborators = (commits) => { + console.log('commits', commits); + // const commitsSinceFork = commits.map((commit) => console.log('author', commit.author.login, 'date', commit.commit.author.date > repoForkDate)); + + // console.log('commitsSinceFork ', commitsSinceFork); + const authors = commits.map((commit) => commit.commit.author); + console.log('collaborators : ', authors); + const filteredAuthors = authors.filter((v, i, a) => a.indexOf(v) === i); + console.log('filteredAuthors : ', filteredAuthors); + + // data.forEach((author) => { + // if (data.length > 1) { + // document.getElementById(`collaborators-${repo.name}`).innerHTML += /*html*/ ``; + // } else { + // document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; + // } + // }); + // fetchPullRequestsArray(repo, authors); }; const fetchPullRequestsArray = (repo, authors) => { From b55a95d9f9f7b5f2a03441a1f895177f0626e1bb Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 20:44:31 +0200 Subject: [PATCH 27/50] styling + fix commiter collaborator --- code/index.html | 2 +- code/script.js | 48 ++++++++++++++++++++++++++---------------------- code/style.css | 47 +++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 70 insertions(+), 27 deletions(-) diff --git a/code/index.html b/code/index.html index 2df42fe7..c7d66f9e 100644 --- a/code/index.html +++ b/code/index.html @@ -12,7 +12,7 @@

GitHub Tracker

-
+

Projects:

diff --git a/code/script.js b/code/script.js index 56b2b15a..0581d316 100644 --- a/code/script.js +++ b/code/script.js @@ -18,8 +18,9 @@ const fetchAllReposFromUser = () => { .then((allRepos) => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); + filteredRepos.sort((a, b) => b.pushed_at - a.pushed_at); console.log('filtered repos: ', filteredRepos); - filteredRepos.slice(0, 3).forEach((repo) => { + filteredRepos.slice(0, 2).forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit fetchFullRepo(repo); }); @@ -46,14 +47,14 @@ const fetchFullRepo = (repo) => { const generateProjectCard = (repo) => { projects.innerHTML += /*html*/ ` -

${repo.name}

+

${repo.name}

From ${repo.parent.owner.login}, default branch: ${repo.default_branch}

Pull request

Commits:

Updated: ${new Date(repo.pushed_at).toDateString()}

+

Collaborators:

-

Collaborators:

`; }; @@ -61,31 +62,34 @@ const fetchCommits = (myCommitsUrl, repo) => { fetch(myCommitsUrl) .then((res) => res.json()) .then((data) => { + // console.log(data); const commitsSinceFork = data.filter((commit) => commit.commit.author.date > repo.created_at); + // console.log(commitsSinceFork); document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commitsSinceFork.length}`; - getCollaborators(commitsSinceFork); + getCollaborators(commitsSinceFork, repo); }) .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; -const getCollaborators = (commits) => { - console.log('commits', commits); - // const commitsSinceFork = commits.map((commit) => console.log('author', commit.author.login, 'date', commit.commit.author.date > repoForkDate)); +const getCollaborators = (commits, repo) => { + let authors = {}; + commits.forEach((commit) => { + if (!Object.keys(authors).includes(commit.author.login)) { + authors[commit.author.login] = { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url }; + } + }); - // console.log('commitsSinceFork ', commitsSinceFork); - const authors = commits.map((commit) => commit.commit.author); - console.log('collaborators : ', authors); - const filteredAuthors = authors.filter((v, i, a) => a.indexOf(v) === i); - console.log('filteredAuthors : ', filteredAuthors); + for (const author in authors) { + if (Object.keys(authors).length > 1) { + document.getElementById( + `collaborators-${repo.name}` + ).innerHTML += /*html*/ ``; + } else { + document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; + } + } - // data.forEach((author) => { - // if (data.length > 1) { - // document.getElementById(`collaborators-${repo.name}`).innerHTML += /*html*/ ``; - // } else { - // document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; - // } - // }); - // fetchPullRequestsArray(repo, authors); + fetchPullRequestsArray(repo, Object.keys(authors)); }; const fetchPullRequestsArray = (repo, authors) => { @@ -94,7 +98,7 @@ const fetchPullRequestsArray = (repo, authors) => { fetch(PULL_URL) .then((res) => res.json()) .then((data) => { - console.log('fetchPullRequestsArray data: ', data); + // console.log('fetchPullRequestsArray data: ', data); // only pick pull requests connected to user const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // console.log('myPullReq', repo.name, myPullReq); @@ -114,7 +118,7 @@ const fetchUser = () => { .then((res) => res.json()) .then((data) => { // console.log(data); - userData.innerHTML += /*html*/ `

${data.login}

`; + userData.innerHTML += /*html*/ `

${data.login}

`; }) .catch((err) => console.log('fetchCommits error: ', err)); }; diff --git a/code/style.css b/code/style.css index 573a0eb8..d2f24e98 100644 --- a/code/style.css +++ b/code/style.css @@ -1,7 +1,18 @@ body { font-family: 'Montserrat', sans-serif; + background-color: rgb(27, 27, 27); + color: white; } +.user-data { + display: flex; + gap: 4px; + align-items: center; +} +.user-name { + font-size: 30px; + margin: 0; +} .avatar-user { height: 50px; border-radius: 50%; @@ -16,18 +27,26 @@ body { .projects { display: flex; flex-direction: column; + gap: 10px; } .chart { width: 50px; } -.repo { - font-size: medium; -} .repo-info { display: flex; flex-wrap: wrap; + flex-direction: column; + border: 1px solid rgb(133, 133, 133); + border-radius: 3px; + padding: 10px; + margin: 0; +} + +.repo { + font-size: 20px; + margin: 5px 0; } .info, @@ -35,5 +54,25 @@ body { .commit, .pull, .collaboration { - margin: 2px 2px; + margin: 2px 0; +} + +/* unvisited link */ +a:link { + color: red; +} + +/* visited link */ +a:visited { + color: green; +} + +/* mouse over link */ +a:hover { + color: hotpink; +} + +/* selected link */ +a:active { + color: blue; } From a0009b4b222e66b453a9426c5d7b976f47551fbe Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 21:17:29 +0200 Subject: [PATCH 28/50] added filter --- code/chart.js | 27 +++++++++++++++++++++++---- code/script.js | 27 ++++++++++++++++++++++----- 2 files changed, 45 insertions(+), 9 deletions(-) diff --git a/code/chart.js b/code/chart.js index 4e6d47cc..ce080982 100644 --- a/code/chart.js +++ b/code/chart.js @@ -3,7 +3,7 @@ const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 -const data = { +const pieData = { // labels: ['Soon', 'Done'], datasets: [ { @@ -15,12 +15,12 @@ const data = { ], }; -const config = { +const pieConfig = { type: 'pie', - data: data, + data: pieData, }; -let pieChart = new Chart(ctx, config); +const pieChart = new Chart(ctx, pieConfig); const updatePieChart = (chart, newData) => { chart.data.datasets.forEach((dataset) => { @@ -29,3 +29,22 @@ const updatePieChart = (chart, newData) => { }); chart.update(); }; + +// const lineData = { +// // labels: ['Soon', 'Done'], +// datasets: [ +// { +// label: 'Technigo project progress', +// data: [19, 0], +// backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'], +// hoverOffset: 4, +// }, +// ], +// }; + +// const lineConfig = { +// type: 'line', +// data: lineData, +// }; + +// let lineChart = (ctx) => new Chart(ctx, lineConfig); diff --git a/code/script.js b/code/script.js index 0581d316..9f4f51bc 100644 --- a/code/script.js +++ b/code/script.js @@ -18,10 +18,20 @@ const fetchAllReposFromUser = () => { .then((allRepos) => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); - filteredRepos.sort((a, b) => b.pushed_at - a.pushed_at); + filteredRepos.sort((a, b) => { + if (a.pushed_at > b.pushed_at) { + console.log('sort a.pushed_at > b.pushed_at', a.pushed_at, b.pushed_at); + return -1; + } else if (a.pushed_at < b.pushed_at) { + return 1; + } else { + return 0; + } + }); console.log('filtered repos: ', filteredRepos); - filteredRepos.slice(0, 2).forEach((repo) => { + filteredRepos.slice(0, 4).forEach((repo) => { // fetch all data for each repo use .slice(0, 2) to limit + // createProjectCard(repo); fetchFullRepo(repo); }); }) @@ -30,14 +40,14 @@ const fetchAllReposFromUser = () => { const fetchFullRepo = (repo) => { // fetch all data from each repo - fetch(`https://api.github.com/repos/${USER}/${repo.name}`) + fetch(`${repo.url}`) .then((res) => res.json()) .then((fullRepo) => { // only continue with repos that have PARENT_OWNER as parent if (fullRepo.parent.owner.login === PARENT_OWNER) { // put data in html // console.log('fullRepo', fullRepo.name); - generateProjectCard(fullRepo); + populateProjectCard(fullRepo); const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, fullRepo); } @@ -45,7 +55,14 @@ const fetchFullRepo = (repo) => { .catch((err) => console.log('fetchFullRepo error:', err)); }; -const generateProjectCard = (repo) => { +const createProjectCard = (repo) => { + projects.innerHTML += /*html*/ ` +
+
+ `; +}; + +const populateProjectCard = (repo) => { projects.innerHTML += /*html*/ `

${repo.name}

From ec449ebc084cd5f13a78deba2b241cfe2fe765cd Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 21:48:02 +0200 Subject: [PATCH 29/50] added promise.all code cleanup --- code/script.js | 41 ++++++++++++++++------------------------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/code/script.js b/code/script.js index 9f4f51bc..78a487ea 100644 --- a/code/script.js +++ b/code/script.js @@ -29,40 +29,31 @@ const fetchAllReposFromUser = () => { } }); console.log('filtered repos: ', filteredRepos); - filteredRepos.slice(0, 4).forEach((repo) => { - // fetch all data for each repo use .slice(0, 2) to limit - // createProjectCard(repo); - fetchFullRepo(repo); - }); + fetchFullRepo(filteredRepos.slice(0, 2)); }) .catch((err) => console.log('fetchAllReposFromUser error: ', err)); }; -const fetchFullRepo = (repo) => { +const fetchFullRepo = (repos) => { // fetch all data from each repo - fetch(`${repo.url}`) - .then((res) => res.json()) - .then((fullRepo) => { - // only continue with repos that have PARENT_OWNER as parent - if (fullRepo.parent.owner.login === PARENT_OWNER) { - // put data in html - // console.log('fullRepo', fullRepo.name); - populateProjectCard(fullRepo); - const COMMITS_URL = `https://api.github.com/repos/${USER}/${fullRepo.name}/commits?per_page=100`; - fetchCommits(COMMITS_URL, fullRepo); - } + Promise.all(repos.map((repo) => fetch(repo.url))) + .then((res) => Promise.all(res.map((res) => res.json()))) + .then((repos) => { + console.log(repos); + repos.forEach((repo) => { + if (repo.parent.owner.login === PARENT_OWNER) { + // put data in html + // console.log('fullRepo', fullRepo.name); + generateProjectCard(repo); + const COMMITS_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits?per_page=100`; + fetchCommits(COMMITS_URL, repo); + } + }); }) .catch((err) => console.log('fetchFullRepo error:', err)); }; -const createProjectCard = (repo) => { - projects.innerHTML += /*html*/ ` -
-
- `; -}; - -const populateProjectCard = (repo) => { +const generateProjectCard = (repo) => { projects.innerHTML += /*html*/ `

${repo.name}

From 1ac281f6300a5b01799bf4aa558a1264b8f41709 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 23:28:03 +0200 Subject: [PATCH 30/50] added filter size + filter buttons --- code/index.html | 5 +++++ code/script.js | 59 ++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 58 insertions(+), 6 deletions(-) diff --git a/code/index.html b/code/index.html index c7d66f9e..3a590a11 100644 --- a/code/index.html +++ b/code/index.html @@ -14,6 +14,11 @@

GitHub Tracker

Projects:

+
+ + + +
diff --git a/code/script.js b/code/script.js index 78a487ea..0995b250 100644 --- a/code/script.js +++ b/code/script.js @@ -1,11 +1,17 @@ const projects = document.getElementById('projects'); const userData = document.getElementById('userData'); +const filterSizeBtn = document.getElementById('filterSizeBtn'); +const filterUpdateBtn = document.getElementById('filterUpdateBtn'); +const filterCreatedBtn = document.getElementById('filterCreatedBtn'); const USER = 'gustavfrid'; const PARENT_OWNER = 'Technigo'; const REPOS_URL = `https://api.github.com/users/${USER}/repos`; const USER_URL = `https://api.github.com/users/${USER}`; +let reposArr = []; +let reposData = {}; + const pullReqData = { total: 19, done: 0, @@ -42,6 +48,8 @@ const fetchFullRepo = (repos) => { console.log(repos); repos.forEach((repo) => { if (repo.parent.owner.login === PARENT_OWNER) { + reposArr.push(repo); + reposData[repo.name] = { pullRequest: '', author: '', commits: '' }; // put data in html // console.log('fullRepo', fullRepo.name); generateProjectCard(repo); @@ -73,20 +81,31 @@ const fetchCommits = (myCommitsUrl, repo) => { // console.log(data); const commitsSinceFork = data.filter((commit) => commit.commit.author.date > repo.created_at); // console.log(commitsSinceFork); - document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commitsSinceFork.length}`; + reposData[repo.name].commits = commitsSinceFork.length; + populateCommits(repo, commitsSinceFork); getCollaborators(commitsSinceFork, repo); }) .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; +const populateCommits = (repo, commits) => { + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}`; +}; + const getCollaborators = (commits, repo) => { let authors = {}; commits.forEach((commit) => { if (!Object.keys(authors).includes(commit.author.login)) { authors[commit.author.login] = { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url }; + reposData[repo.name].author = { [commit.author.login]: { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url } }; } }); + console.log('authirs', authors); + populateCollaborators(authors, repo); + fetchPullRequestsArray(repo, Object.keys(authors)); +}; +const populateCollaborators = (authors, repo) => { for (const author in authors) { if (Object.keys(authors).length > 1) { document.getElementById( @@ -96,8 +115,6 @@ const getCollaborators = (commits, repo) => { document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; } } - - fetchPullRequestsArray(repo, Object.keys(authors)); }; const fetchPullRequestsArray = (repo, authors) => { @@ -111,16 +128,23 @@ const fetchPullRequestsArray = (repo, authors) => { const myPullReq = data.find((pull) => authors.includes(pull.user.login)); // console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { - document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ `Pull request`; pullReqData.done++; + reposData[repo.name].pullRequest = myPullReq; updatePieChart(pieChart, pullReqData.done); - } else { - document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request done :('; } + populatePullRequest(myPullReq, repo); }) .catch((err) => console.log('fetchPullRequestsArray error:', err)); }; +const populatePullRequest = (myPullReq, repo) => { + if (myPullReq) { + document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ `Pull request`; + } else { + document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request done :('; + } +}; + const fetchUser = () => { fetch(USER_URL) .then((res) => res.json()) @@ -131,6 +155,29 @@ const fetchUser = () => { .catch((err) => console.log('fetchCommits error: ', err)); }; +const sortSize = () => { + projects.innerHTML = ''; + reposArr.sort((a, b) => { + if (a.size > b.size) { + return -1; + } else if (a.size < b.size) { + return 1; + } else { + return 0; + } + }); + reposArr.forEach((repo) => { + generateProjectCard(repo); + populateCommits(repo, reposData[repo.name].commits); + populateCollaborators(reposData[repo.name].authors, repo); + populatePullRequest(reposData[repo.name].pullRequest, repo); + }); +}; + +filterSizeBtn.addEventListener('click', () => sortSize()); +filterUpdateBtn.addEventListener('click', () => sortSize()); +filterCreatedBtn.addEventListener('click', () => sortSize()); + fetchAllReposFromUser(); fetchUser(); // drawPieChart(19,0); From 0c4e9b10a74b05370d85ac38a85d19e5994f9c84 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sat, 2 Oct 2021 23:58:40 +0200 Subject: [PATCH 31/50] added sort for size and update --- code/script.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/code/script.js b/code/script.js index 0995b250..0537ffe2 100644 --- a/code/script.js +++ b/code/script.js @@ -26,7 +26,6 @@ const fetchAllReposFromUser = () => { let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); filteredRepos.sort((a, b) => { if (a.pushed_at > b.pushed_at) { - console.log('sort a.pushed_at > b.pushed_at', a.pushed_at, b.pushed_at); return -1; } else if (a.pushed_at < b.pushed_at) { return 1; @@ -49,7 +48,7 @@ const fetchFullRepo = (repos) => { repos.forEach((repo) => { if (repo.parent.owner.login === PARENT_OWNER) { reposArr.push(repo); - reposData[repo.name] = { pullRequest: '', author: '', commits: '' }; + reposData[repo.name] = { pullRequest: '', authors: '', commits: '' }; // put data in html // console.log('fullRepo', fullRepo.name); generateProjectCard(repo); @@ -81,7 +80,7 @@ const fetchCommits = (myCommitsUrl, repo) => { // console.log(data); const commitsSinceFork = data.filter((commit) => commit.commit.author.date > repo.created_at); // console.log(commitsSinceFork); - reposData[repo.name].commits = commitsSinceFork.length; + reposData[repo.name].commits = commitsSinceFork; populateCommits(repo, commitsSinceFork); getCollaborators(commitsSinceFork, repo); }) @@ -97,9 +96,10 @@ const getCollaborators = (commits, repo) => { commits.forEach((commit) => { if (!Object.keys(authors).includes(commit.author.login)) { authors[commit.author.login] = { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url }; - reposData[repo.name].author = { [commit.author.login]: { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url } }; + // reposData[repo.name].authors = { [commit.author.login]: { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url } }; } }); + reposData[repo.name].authors = authors; console.log('authirs', authors); populateCollaborators(authors, repo); fetchPullRequestsArray(repo, Object.keys(authors)); @@ -155,17 +155,21 @@ const fetchUser = () => { .catch((err) => console.log('fetchCommits error: ', err)); }; -const sortSize = () => { +const sort = (param) => { projects.innerHTML = ''; reposArr.sort((a, b) => { - if (a.size > b.size) { + if (a[param] > b[param]) { return -1; - } else if (a.size < b.size) { + } else if (a[param] < b[param]) { return 1; } else { return 0; } }); + regenerateProjectCards(); +}; + +const regenerateProjectCards = () => { reposArr.forEach((repo) => { generateProjectCard(repo); populateCommits(repo, reposData[repo.name].commits); @@ -174,9 +178,9 @@ const sortSize = () => { }); }; -filterSizeBtn.addEventListener('click', () => sortSize()); -filterUpdateBtn.addEventListener('click', () => sortSize()); -filterCreatedBtn.addEventListener('click', () => sortSize()); +filterSizeBtn.addEventListener('click', () => sort('size')); +filterUpdateBtn.addEventListener('click', () => sort('updated_at')); +filterCreatedBtn.addEventListener('click', () => sortSize('created_at')); fetchAllReposFromUser(); fetchUser(); From 365785043e116a209341f0af0d6da8286f4a9294 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 00:09:35 +0200 Subject: [PATCH 32/50] restructure sort func --- code/script.js | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/code/script.js b/code/script.js index 0537ffe2..f53e709d 100644 --- a/code/script.js +++ b/code/script.js @@ -24,15 +24,7 @@ const fetchAllReposFromUser = () => { .then((allRepos) => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); - filteredRepos.sort((a, b) => { - if (a.pushed_at > b.pushed_at) { - return -1; - } else if (a.pushed_at < b.pushed_at) { - return 1; - } else { - return 0; - } - }); + sort(filteredRepos, 'pushed_at', true); console.log('filtered repos: ', filteredRepos); fetchFullRepo(filteredRepos.slice(0, 2)); }) @@ -155,9 +147,8 @@ const fetchUser = () => { .catch((err) => console.log('fetchCommits error: ', err)); }; -const sort = (param) => { - projects.innerHTML = ''; - reposArr.sort((a, b) => { +const sort = (array, param, init) => { + array.sort((a, b) => { if (a[param] > b[param]) { return -1; } else if (a[param] < b[param]) { @@ -166,10 +157,15 @@ const sort = (param) => { return 0; } }); - regenerateProjectCards(); + if (init) { + return array; + } else { + regenerateProjectCards(); + } }; const regenerateProjectCards = () => { + projects.innerHTML = ''; reposArr.forEach((repo) => { generateProjectCard(repo); populateCommits(repo, reposData[repo.name].commits); @@ -178,9 +174,9 @@ const regenerateProjectCards = () => { }); }; -filterSizeBtn.addEventListener('click', () => sort('size')); -filterUpdateBtn.addEventListener('click', () => sort('updated_at')); -filterCreatedBtn.addEventListener('click', () => sortSize('created_at')); +filterSizeBtn.addEventListener('click', () => sort(reposArr, 'size', false)); +filterUpdateBtn.addEventListener('click', () => sort(reposArr, 'updated_at', false)); +filterCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', false)); fetchAllReposFromUser(); fetchUser(); From abb6db326051f7b6d5129c20dfa49e776a68a5ae Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 00:15:15 +0200 Subject: [PATCH 33/50] clean up code --- code/script.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/code/script.js b/code/script.js index f53e709d..cbe9ed0b 100644 --- a/code/script.js +++ b/code/script.js @@ -157,11 +157,7 @@ const sort = (array, param, init) => { return 0; } }); - if (init) { - return array; - } else { - regenerateProjectCards(); - } + if (!init) regenerateProjectCards(); }; const regenerateProjectCards = () => { From e382e3cbe183e7b47029eecc13f7b651abcb3815 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 00:49:15 +0200 Subject: [PATCH 34/50] code comments --- code/script.js | 38 ++++++++++++++++++-------------------- code/style.css | 5 +++++ 2 files changed, 23 insertions(+), 20 deletions(-) diff --git a/code/script.js b/code/script.js index cbe9ed0b..ab2f65f3 100644 --- a/code/script.js +++ b/code/script.js @@ -25,10 +25,9 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); sort(filteredRepos, 'pushed_at', true); - console.log('filtered repos: ', filteredRepos); - fetchFullRepo(filteredRepos.slice(0, 2)); + fetchFullRepo(filteredRepos); }) - .catch((err) => console.log('fetchAllReposFromUser error: ', err)); + .catch((err) => alert('fetchAllReposFromUser error: ', err)); }; const fetchFullRepo = (repos) => { @@ -36,47 +35,51 @@ const fetchFullRepo = (repos) => { Promise.all(repos.map((repo) => fetch(repo.url))) .then((res) => Promise.all(res.map((res) => res.json()))) .then((repos) => { - console.log(repos); repos.forEach((repo) => { if (repo.parent.owner.login === PARENT_OWNER) { + // push data to store for use when sorting projects reposArr.push(repo); reposData[repo.name] = { pullRequest: '', authors: '', commits: '' }; - // put data in html - // console.log('fullRepo', fullRepo.name); + generateProjectCard(repo); const COMMITS_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits?per_page=100`; fetchCommits(COMMITS_URL, repo); } }); }) - .catch((err) => console.log('fetchFullRepo error:', err)); + .catch((err) => alert('fetchFullRepo error:', err)); }; const generateProjectCard = (repo) => { + // generating project cards projects.innerHTML += /*html*/ `

${repo.name}

From ${repo.parent.owner.login}, default branch: ${repo.default_branch}

Pull request

-

Commits:

+
+

Commits:

+

Size: ${repo.size}

+

Updated: ${new Date(repo.pushed_at).toDateString()}

-

Collaborators:

+

Commit authors:

`; }; const fetchCommits = (myCommitsUrl, repo) => { + // fetch all commits from repo fetch(myCommitsUrl) .then((res) => res.json()) .then((data) => { - // console.log(data); + // filter only commits done after repo was forked const commitsSinceFork = data.filter((commit) => commit.commit.author.date > repo.created_at); - // console.log(commitsSinceFork); + // storing necessary data for later sorting reposData[repo.name].commits = commitsSinceFork; populateCommits(repo, commitsSinceFork); getCollaborators(commitsSinceFork, repo); }) - .catch((err) => console.log('fetchCommits error: ', repo.name, err)); + .catch((err) => alert('fetchCommits error: ', repo.name, err)); }; const populateCommits = (repo, commits) => { @@ -84,15 +87,14 @@ const populateCommits = (repo, commits) => { }; const getCollaborators = (commits, repo) => { + // filter out each commit author and stor for later sort let authors = {}; commits.forEach((commit) => { if (!Object.keys(authors).includes(commit.author.login)) { authors[commit.author.login] = { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url }; - // reposData[repo.name].authors = { [commit.author.login]: { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url } }; } }); reposData[repo.name].authors = authors; - console.log('authirs', authors); populateCollaborators(authors, repo); fetchPullRequestsArray(repo, Object.keys(authors)); }; @@ -115,10 +117,8 @@ const fetchPullRequestsArray = (repo, authors) => { fetch(PULL_URL) .then((res) => res.json()) .then((data) => { - // console.log('fetchPullRequestsArray data: ', data); // only pick pull requests connected to user const myPullReq = data.find((pull) => authors.includes(pull.user.login)); - // console.log('myPullReq', repo.name, myPullReq); if (myPullReq) { pullReqData.done++; reposData[repo.name].pullRequest = myPullReq; @@ -126,7 +126,7 @@ const fetchPullRequestsArray = (repo, authors) => { } populatePullRequest(myPullReq, repo); }) - .catch((err) => console.log('fetchPullRequestsArray error:', err)); + .catch((err) => alert('fetchPullRequestsArray error:', err)); }; const populatePullRequest = (myPullReq, repo) => { @@ -141,10 +141,9 @@ const fetchUser = () => { fetch(USER_URL) .then((res) => res.json()) .then((data) => { - // console.log(data); userData.innerHTML += /*html*/ `

${data.login}

`; }) - .catch((err) => console.log('fetchCommits error: ', err)); + .catch((err) => alert('fetchCommits error: ', err)); }; const sort = (array, param, init) => { @@ -176,4 +175,3 @@ filterCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', fa fetchAllReposFromUser(); fetchUser(); -// drawPieChart(19,0); diff --git a/code/style.css b/code/style.css index d2f24e98..eae857b8 100644 --- a/code/style.css +++ b/code/style.css @@ -43,6 +43,10 @@ body { padding: 10px; margin: 0; } +.numbers { + display: flex; + gap: 4px; +} .repo { font-size: 20px; @@ -52,6 +56,7 @@ body { .info, .update, .commit, +.size, .pull, .collaboration { margin: 2px 0; From c475180f7b2f427a070e7a1fbc973eeff03adc8d Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 01:26:11 +0200 Subject: [PATCH 35/50] added sort by commits --- code/index.html | 2 ++ code/script.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/code/index.html b/code/index.html index 3a590a11..60683c59 100644 --- a/code/index.html +++ b/code/index.html @@ -15,9 +15,11 @@

GitHub Tracker

Projects:

+

Filter by:

+
diff --git a/code/script.js b/code/script.js index ab2f65f3..cbb89040 100644 --- a/code/script.js +++ b/code/script.js @@ -3,6 +3,7 @@ const userData = document.getElementById('userData'); const filterSizeBtn = document.getElementById('filterSizeBtn'); const filterUpdateBtn = document.getElementById('filterUpdateBtn'); const filterCreatedBtn = document.getElementById('filterCreatedBtn'); +const filterCommitsBtn = document.getElementById('filterCommitsBtn'); const USER = 'gustavfrid'; const PARENT_OWNER = 'Technigo'; @@ -159,6 +160,19 @@ const sort = (array, param, init) => { if (!init) regenerateProjectCards(); }; +const sortByCommit = (array, param) => { + array.sort((a, b) => { + if (reposData[a[param]].commits > reposData[b[param]].commits) { + return -1; + } else if (reposData[a[param]].commits < reposData[b[param]].commits) { + return 1; + } else { + return 0; + } + }); + regenerateProjectCards(); +}; + const regenerateProjectCards = () => { projects.innerHTML = ''; reposArr.forEach((repo) => { @@ -172,6 +186,7 @@ const regenerateProjectCards = () => { filterSizeBtn.addEventListener('click', () => sort(reposArr, 'size', false)); filterUpdateBtn.addEventListener('click', () => sort(reposArr, 'updated_at', false)); filterCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', false)); +filterCommitsBtn.addEventListener('click', () => sort(reposArr, 'name')); fetchAllReposFromUser(); fetchUser(); From 0a94a1dc9502fe50aef34dd298a2b652568f19ea Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 08:04:48 +0200 Subject: [PATCH 36/50] change styling --- code/index.html | 6 +++--- code/script.js | 2 +- code/style.css | 27 +++++++++++++++++++++++++-- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/code/index.html b/code/index.html index 60683c59..c0b92b06 100644 --- a/code/index.html +++ b/code/index.html @@ -10,10 +10,10 @@ - -

GitHub Tracker

+ +

GitHub Tracker

-

Projects:

+

Projects:

Filter by:

diff --git a/code/script.js b/code/script.js index cbb89040..993cb529 100644 --- a/code/script.js +++ b/code/script.js @@ -186,7 +186,7 @@ const regenerateProjectCards = () => { filterSizeBtn.addEventListener('click', () => sort(reposArr, 'size', false)); filterUpdateBtn.addEventListener('click', () => sort(reposArr, 'updated_at', false)); filterCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', false)); -filterCommitsBtn.addEventListener('click', () => sort(reposArr, 'name')); +filterCommitsBtn.addEventListener('click', () => sortByCommit(reposArr, 'name')); fetchAllReposFromUser(); fetchUser(); diff --git a/code/style.css b/code/style.css index eae857b8..22d7636d 100644 --- a/code/style.css +++ b/code/style.css @@ -1,11 +1,18 @@ -body { +.body { font-family: 'Montserrat', sans-serif; background-color: rgb(27, 27, 27); color: white; + max-width: 400px; + margin: auto; +} + +.header { + text-align: center; } .user-data { display: flex; + flex-direction: column; gap: 4px; align-items: center; } @@ -14,16 +21,32 @@ body { margin: 0; } .avatar-user { - height: 50px; + width: 100%; border-radius: 50%; } +.project-header { + text-align: center; +} + .avatar-collaborator { height: 20px; border-radius: 50%; padding: 0 2px; } +.filters { + display: flex; + gap: 5px; + align-items: center; +} + +.filters button { + height: 30px; + border-radius: 5px; + margin: 5px 0; +} + .projects { display: flex; flex-direction: column; From 6ba2d54ed49c0526d7f8ddd9627d3c9b2861f617 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 09:22:58 +0200 Subject: [PATCH 37/50] change styling --- code/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/style.css b/code/style.css index 22d7636d..c10bc2db 100644 --- a/code/style.css +++ b/code/style.css @@ -43,8 +43,11 @@ .filters button { height: 30px; - border-radius: 5px; + border: 1px solid grey; + border-radius: 10px; margin: 5px 0; + background-color: grey; + color: white; } .projects { From 1a979962af5851a9ac3eba4801d553ee955354bc Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 19:19:05 +0200 Subject: [PATCH 38/50] change styling + added filter btn --- code/chart.js | 7 ++++--- code/index.html | 14 ++++++++++---- code/script.js | 23 ++++++++++++++--------- code/style.css | 40 ++++++++++++++++++++++++++++------------ 4 files changed, 56 insertions(+), 28 deletions(-) diff --git a/code/chart.js b/code/chart.js index ce080982..a428f8fb 100644 --- a/code/chart.js +++ b/code/chart.js @@ -4,19 +4,20 @@ const ctx = document.getElementById('chart').getContext('2d'); //"Draw" the chart here 👇 const pieData = { - // labels: ['Soon', 'Done'], + labels: ['Projects to go', 'Projects done'], datasets: [ { label: 'Technigo project progress', data: [19, 0], - backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 205, 86)'], + backgroundColor: ['RGB(22, 27, 33)', 'RGB(37, 166, 65)'], + borderColor: '#21262c', hoverOffset: 4, }, ], }; const pieConfig = { - type: 'pie', + type: 'doughnut', data: pieData, }; diff --git a/code/index.html b/code/index.html index c0b92b06..af88fafc 100644 --- a/code/index.html +++ b/code/index.html @@ -14,12 +14,18 @@

GitHub Tracker

Projects:

+
+

Sort by:

+ + + + + +

Filter by:

- - - - + +
diff --git a/code/script.js b/code/script.js index 993cb529..b64ab20a 100644 --- a/code/script.js +++ b/code/script.js @@ -1,9 +1,12 @@ const projects = document.getElementById('projects'); const userData = document.getElementById('userData'); -const filterSizeBtn = document.getElementById('filterSizeBtn'); -const filterUpdateBtn = document.getElementById('filterUpdateBtn'); -const filterCreatedBtn = document.getElementById('filterCreatedBtn'); -const filterCommitsBtn = document.getElementById('filterCommitsBtn'); +const sortSizeBtn = document.getElementById('sortSizeBtn'); +const sortUpdateBtn = document.getElementById('sortUpdateBtn'); +const sortCreatedBtn = document.getElementById('sortCreatedBtn'); +const sortCommitsBtn = document.getElementById('sortCommitsBtn'); +const sortNameBtn = document.getElementById('sortNameBtn'); +const filterLangJsBtn = document.getElementById('filterLangJsBtn'); +const filterLangHtmlBtn = document.getElementById('filterLangHtmlBtn'); const USER = 'gustavfrid'; const PARENT_OWNER = 'Technigo'; @@ -26,7 +29,7 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); sort(filteredRepos, 'pushed_at', true); - fetchFullRepo(filteredRepos); + fetchFullRepo(filteredRepos.slice(0, 2)); }) .catch((err) => alert('fetchAllReposFromUser error: ', err)); }; @@ -157,6 +160,7 @@ const sort = (array, param, init) => { return 0; } }); + if (param === 'name') array.reverse(); if (!init) regenerateProjectCards(); }; @@ -183,10 +187,11 @@ const regenerateProjectCards = () => { }); }; -filterSizeBtn.addEventListener('click', () => sort(reposArr, 'size', false)); -filterUpdateBtn.addEventListener('click', () => sort(reposArr, 'updated_at', false)); -filterCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', false)); -filterCommitsBtn.addEventListener('click', () => sortByCommit(reposArr, 'name')); +sortSizeBtn.addEventListener('click', () => sort(reposArr, 'size', false)); +sortUpdateBtn.addEventListener('click', () => sort(reposArr, 'updated_at', false)); +sortCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', false)); +sortCommitsBtn.addEventListener('click', () => sortByCommit(reposArr, 'name')); +sortNameBtn.addEventListener('click', () => sort(reposArr, 'name', false)); fetchAllReposFromUser(); fetchUser(); diff --git a/code/style.css b/code/style.css index c10bc2db..ade891d3 100644 --- a/code/style.css +++ b/code/style.css @@ -1,6 +1,6 @@ .body { font-family: 'Montserrat', sans-serif; - background-color: rgb(27, 27, 27); + background-color: #0d1017; color: white; max-width: 400px; margin: auto; @@ -23,6 +23,10 @@ .avatar-user { width: 100%; border-radius: 50%; + box-sizing: border-box; +} +.avatar-user:hover { + border: 3px solid #21262c; } .project-header { @@ -30,23 +34,30 @@ } .avatar-collaborator { - height: 20px; + box-sizing: border-box; + height: 30px; border-radius: 50%; padding: 0 2px; } +.avatar-collaborator:hover { + border: 1px solid #21262c; +} + +.sorting, .filters { display: flex; gap: 5px; align-items: center; } +.sorting button, .filters button { height: 30px; - border: 1px solid grey; + border: 1px solid #21262c; border-radius: 10px; margin: 5px 0; - background-color: grey; + background-color: #21262c; color: white; } @@ -57,15 +68,15 @@ } .chart { - width: 50px; + margin: 40px; } .repo-info { display: flex; flex-wrap: wrap; flex-direction: column; - border: 1px solid rgb(133, 133, 133); - border-radius: 3px; + border: 2px solid #30353b; + border-radius: 5px; padding: 10px; margin: 0; } @@ -86,24 +97,29 @@ .pull, .collaboration { margin: 2px 0; + display: flex; + align-items: center; } /* unvisited link */ a:link { - color: red; + color: #579def; + text-decoration: none; } /* visited link */ a:visited { - color: green; + color: #579def; + text-decoration: none; } /* mouse over link */ a:hover { - color: hotpink; + color: #579def; + text-decoration: underline; } /* selected link */ -a:active { +/* a:active { color: blue; -} +} */ From a5a771b7b18d4724d298becb4512ab93daf99729 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 22:05:19 +0200 Subject: [PATCH 39/50] change style add filter by languages --- code/index.html | 13 +++++++------ code/script.js | 47 ++++++++++++++++++++++++++++++++--------------- code/style.css | 33 ++++++++++++++++++++++++++++----- 3 files changed, 67 insertions(+), 26 deletions(-) diff --git a/code/index.html b/code/index.html index af88fafc..e69e2bab 100644 --- a/code/index.html +++ b/code/index.html @@ -14,18 +14,19 @@

GitHub Tracker

Projects:

-
-

Sort by:

+
+

Sort by:

-
-

Filter by:

- - +
+

Filter by:

+ + +
diff --git a/code/script.js b/code/script.js index b64ab20a..610b649e 100644 --- a/code/script.js +++ b/code/script.js @@ -5,6 +5,7 @@ const sortUpdateBtn = document.getElementById('sortUpdateBtn'); const sortCreatedBtn = document.getElementById('sortCreatedBtn'); const sortCommitsBtn = document.getElementById('sortCommitsBtn'); const sortNameBtn = document.getElementById('sortNameBtn'); +const filterAllBtn = document.getElementById('filterAllBtn'); const filterLangJsBtn = document.getElementById('filterLangJsBtn'); const filterLangHtmlBtn = document.getElementById('filterLangHtmlBtn'); @@ -28,8 +29,9 @@ const fetchAllReposFromUser = () => { .then((allRepos) => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); - sort(filteredRepos, 'pushed_at', true); - fetchFullRepo(filteredRepos.slice(0, 2)); + sortRepos(filteredRepos, 'pushed_at', true); + console.log(filteredRepos); + fetchFullRepo(filteredRepos.slice(0, 2)); // }) .catch((err) => alert('fetchAllReposFromUser error: ', err)); }; @@ -58,7 +60,10 @@ const generateProjectCard = (repo) => { // generating project cards projects.innerHTML += /*html*/ `
-

${repo.name}

+
+

${repo.name}

+

${repo.language}

+

From ${repo.parent.owner.login}, default branch: ${repo.default_branch}

Pull request

@@ -87,7 +92,7 @@ const fetchCommits = (myCommitsUrl, repo) => { }; const populateCommits = (repo, commits) => { - document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}`; + document.getElementById(`commit-${repo.name}, `).innerHTML += ` ${commits.length}`; }; const getCollaborators = (commits, repo) => { @@ -150,7 +155,7 @@ const fetchUser = () => { .catch((err) => alert('fetchCommits error: ', err)); }; -const sort = (array, param, init) => { +const sortRepos = (array, param, init) => { array.sort((a, b) => { if (a[param] > b[param]) { return -1; @@ -161,10 +166,10 @@ const sort = (array, param, init) => { } }); if (param === 'name') array.reverse(); - if (!init) regenerateProjectCards(); + if (!init) regenerateProjectCards(reposArr); }; -const sortByCommit = (array, param) => { +const sortReposByCommit = (array, param) => { array.sort((a, b) => { if (reposData[a[param]].commits > reposData[b[param]].commits) { return -1; @@ -174,12 +179,21 @@ const sortByCommit = (array, param) => { return 0; } }); - regenerateProjectCards(); + regenerateProjectCards(reposArr); +}; + +const filterRepos = (array, lang) => { + if (lang !== 'All') { + const filteredReposArr = array.filter((repo) => repo.language === lang); + regenerateProjectCards(filteredReposArr); + } else { + regenerateProjectCards(array); + } }; -const regenerateProjectCards = () => { +const regenerateProjectCards = (repos) => { projects.innerHTML = ''; - reposArr.forEach((repo) => { + repos.forEach((repo) => { generateProjectCard(repo); populateCommits(repo, reposData[repo.name].commits); populateCollaborators(reposData[repo.name].authors, repo); @@ -187,11 +201,14 @@ const regenerateProjectCards = () => { }); }; -sortSizeBtn.addEventListener('click', () => sort(reposArr, 'size', false)); -sortUpdateBtn.addEventListener('click', () => sort(reposArr, 'updated_at', false)); -sortCreatedBtn.addEventListener('click', () => sort(reposArr, 'created_at', false)); -sortCommitsBtn.addEventListener('click', () => sortByCommit(reposArr, 'name')); -sortNameBtn.addEventListener('click', () => sort(reposArr, 'name', false)); +sortSizeBtn.addEventListener('click', () => sortRepos(reposArr, 'size', false)); +sortUpdateBtn.addEventListener('click', () => sortRepos(reposArr, 'updated_at', false)); +sortCreatedBtn.addEventListener('click', () => sortRepos(reposArr, 'created_at', false)); +sortCommitsBtn.addEventListener('click', () => sortReposByCommit(reposArr, 'name')); +sortNameBtn.addEventListener('click', () => sortRepos(reposArr, 'name', false)); +filterLangJsBtn.addEventListener('click', () => filterRepos(reposArr, 'JavaScript')); +filterLangHtmlBtn.addEventListener('click', () => filterRepos(reposArr, 'HTML')); +filterAllBtn.addEventListener('click', () => filterRepos(reposArr, 'All')); fetchAllReposFromUser(); fetchUser(); diff --git a/code/style.css b/code/style.css index ade891d3..07f921e6 100644 --- a/code/style.css +++ b/code/style.css @@ -44,19 +44,22 @@ border: 1px solid #21262c; } -.sorting, -.filters { +.filters-sorting-heading { + margin: 0; +} + +.filters-sorting { display: flex; gap: 5px; align-items: center; + margin: 5px 0; } -.sorting button, -.filters button { +.filters-sorting button { height: 30px; border: 1px solid #21262c; border-radius: 10px; - margin: 5px 0; + margin: 0; background-color: #21262c; color: white; } @@ -80,6 +83,11 @@ padding: 10px; margin: 0; } +.repo-heading { + display: flex; + justify-content: space-between; + align-items: center; +} .numbers { display: flex; gap: 4px; @@ -90,6 +98,21 @@ margin: 5px 0; } +.lang { + border-radius: 10px; + color: black; + padding: 0 4px; +} +.JavaScript { + background-color: #f1e15a; + border: 1px solid #f1e15a; +} +.HTML, +.CSS { + background-color: #e44c27; + border: 1px solid #e44c27; +} + .info, .update, .commit, From acf263d0183174ea7cbac750c8aea669dcd17f12 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 22:07:42 +0200 Subject: [PATCH 40/50] remove consollog --- code/script.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index 610b649e..f1f2bae3 100644 --- a/code/script.js +++ b/code/script.js @@ -30,8 +30,7 @@ const fetchAllReposFromUser = () => { // filter forked repos let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); sortRepos(filteredRepos, 'pushed_at', true); - console.log(filteredRepos); - fetchFullRepo(filteredRepos.slice(0, 2)); // + fetchFullRepo(filteredRepos); }) .catch((err) => alert('fetchAllReposFromUser error: ', err)); }; From 8b41bda896cd3a640f4a591c7fb7f6260e028eb4 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 22:14:21 +0200 Subject: [PATCH 41/50] fix bug in populateCommits --- code/script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/script.js b/code/script.js index f1f2bae3..553e186b 100644 --- a/code/script.js +++ b/code/script.js @@ -87,11 +87,11 @@ const fetchCommits = (myCommitsUrl, repo) => { populateCommits(repo, commitsSinceFork); getCollaborators(commitsSinceFork, repo); }) - .catch((err) => alert('fetchCommits error: ', repo.name, err)); + .catch((err) => console.log('fetchCommits error: ', repo.name, err)); }; const populateCommits = (repo, commits) => { - document.getElementById(`commit-${repo.name}, `).innerHTML += ` ${commits.length}`; + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}, `; }; const getCollaborators = (commits, repo) => { From 560f147050fb9c709d6d7850021dc4408cdc9534 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 22:15:34 +0200 Subject: [PATCH 42/50] remove console log --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 553e186b..55dafd84 100644 --- a/code/script.js +++ b/code/script.js @@ -87,7 +87,7 @@ const fetchCommits = (myCommitsUrl, repo) => { populateCommits(repo, commitsSinceFork); getCollaborators(commitsSinceFork, repo); }) - .catch((err) => console.log('fetchCommits error: ', repo.name, err)); + .catch((err) => alert('fetchCommits error: ', repo.name, err)); }; const populateCommits = (repo, commits) => { From ee23f2b0d42d5dff4beb3be0944504229cf9fd08 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Sun, 3 Oct 2021 22:39:30 +0200 Subject: [PATCH 43/50] change Readme --- README.md | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 42d9e347..8cada0e7 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,11 @@ # 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. +Week 7 of bootcamp, this is a github tracker tracking projects from the Technigo bootcamp using github api. The site is built mainly using JavaScript, its a heading with the github user avatars and a project list with all repos linked to the Technigo bootcamp. The project card shows some info regarding the status of the project. At the bottom there is a pie chart showing the progress in the bootcamp. The project/repo list os possible to sort and filter. ## 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? +The challenge this week was to get the asynchronous nature of fetch to work with multiple fetches within a fetch, for this I used Promise.All. It was also a challenge to get the filters and sort working. ## 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. - -## TODO - -- Format updated time so it says how many sec/min/hour/day/month/years, ago it was updated -- add chart -- style +https://gustav-week7-github-tracker.netlify.app/ From a0a054d204af5a48bec2702d82ea3c7580279a4d Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 4 Oct 2021 09:14:38 +0200 Subject: [PATCH 44/50] styling for desktop + tablet --- code/style.css | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/code/style.css b/code/style.css index 07f921e6..3a3c2cca 100644 --- a/code/style.css +++ b/code/style.css @@ -1,4 +1,7 @@ .body { + display: flex; + flex-direction: column; + align-items: center; font-family: 'Montserrat', sans-serif; background-color: #0d1017; color: white; @@ -67,6 +70,7 @@ .projects { display: flex; flex-direction: column; + justify-content: center; gap: 10px; } @@ -146,3 +150,34 @@ a:hover { /* a:active { color: blue; } */ + +@media (min-width: 768px) { + .body { + max-width: 990px; + } + .projects { + flex-direction: row; + flex-wrap: wrap; + } + .repo-info { + width: 45%; + } +} + +@media (min-width: 992px) { + .body { + max-width: 1100px; + } + .repo-info { + width: 30%; + } +} + +@media (min-width: 1200px) { + .body { + max-width: 1500px; + } + .repo-info { + width: 22%; + } +} From 6d1d426ce7982b36d839f8adfa131e767f5f640f Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 4 Oct 2021 09:20:32 +0200 Subject: [PATCH 45/50] added porfolio to filter repos --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 55dafd84..48bfbe86 100644 --- a/code/script.js +++ b/code/script.js @@ -28,7 +28,7 @@ const fetchAllReposFromUser = () => { .then((res) => res.json()) .then((allRepos) => { // filter forked repos - let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork); + let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork repo.name.includes('portfolio') && repo.fork); sortRepos(filteredRepos, 'pushed_at', true); fetchFullRepo(filteredRepos); }) From c4c46fb85464d1986ebcb1c52b6bfbd6b21c9146 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 4 Oct 2021 09:21:30 +0200 Subject: [PATCH 46/50] change styling --- code/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/code/style.css b/code/style.css index 3a3c2cca..3d21c82d 100644 --- a/code/style.css +++ b/code/style.css @@ -26,7 +26,6 @@ .avatar-user { width: 100%; border-radius: 50%; - box-sizing: border-box; } .avatar-user:hover { border: 3px solid #21262c; From 156bb86e005994b3b21ed866534e098fbf552b78 Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 4 Oct 2021 09:26:23 +0200 Subject: [PATCH 47/50] remove token from index --- code/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/code/index.html b/code/index.html index e69e2bab..53dec3b5 100644 --- a/code/index.html +++ b/code/index.html @@ -34,7 +34,6 @@

Projects:

- From 7bcd9ce4c5947101766b472a5bb65b55d3ebacda Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 4 Oct 2021 09:28:29 +0200 Subject: [PATCH 48/50] fix bug in filter --- code/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 48bfbe86..25593cb9 100644 --- a/code/script.js +++ b/code/script.js @@ -28,7 +28,7 @@ const fetchAllReposFromUser = () => { .then((res) => res.json()) .then((allRepos) => { // filter forked repos - let filteredRepos = allRepos.filter((repo) => repo.name.includes('project-') && repo.fork repo.name.includes('portfolio') && repo.fork); + let filteredRepos = allRepos.filter((repo) => (repo.name.includes('project-') && repo.fork) || (repo.name.includes('portfolio') && repo.fork)); sortRepos(filteredRepos, 'pushed_at', true); fetchFullRepo(filteredRepos); }) From 67b6080ecb471f1ec732892abcc4c89a51e83e1f Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Tue, 12 Oct 2021 14:29:58 +0200 Subject: [PATCH 49/50] change indentation --- code/chart.js | 44 +++--- code/index.html | 73 +++++----- code/script.js | 360 +++++++++++++++++++++++++----------------------- code/style.css | 184 ++++++++++++------------- 4 files changed, 337 insertions(+), 324 deletions(-) diff --git a/code/chart.js b/code/chart.js index a428f8fb..f78e7ec3 100644 --- a/code/chart.js +++ b/code/chart.js @@ -1,35 +1,35 @@ //DOM-selector for the canvas 👇 -const ctx = document.getElementById('chart').getContext('2d'); +const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 const pieData = { - labels: ['Projects to go', 'Projects done'], - datasets: [ - { - label: 'Technigo project progress', - data: [19, 0], - backgroundColor: ['RGB(22, 27, 33)', 'RGB(37, 166, 65)'], - borderColor: '#21262c', - hoverOffset: 4, - }, - ], -}; + labels: ['Projects to go', 'Projects done'], + datasets: [ + { + label: 'Technigo project progress', + data: [19, 0], + backgroundColor: ['RGB(22, 27, 33)', 'RGB(37, 166, 65)'], + borderColor: '#21262c', + hoverOffset: 4, + }, + ], +} const pieConfig = { - type: 'doughnut', - data: pieData, -}; + type: 'doughnut', + data: pieData, +} -const pieChart = new Chart(ctx, pieConfig); +const pieChart = new Chart(ctx, pieConfig) const updatePieChart = (chart, newData) => { - chart.data.datasets.forEach((dataset) => { - dataset.data.pop(); - dataset.data.push(newData); - }); - chart.update(); -}; + chart.data.datasets.forEach(dataset => { + dataset.data.pop() + dataset.data.push(newData) + }) + chart.update() +} // const lineData = { // // labels: ['Soon', 'Done'], diff --git a/code/index.html b/code/index.html index 53dec3b5..94ce4b69 100644 --- a/code/index.html +++ b/code/index.html @@ -1,40 +1,43 @@ - - - - - Project GitHub Tracker - - - - - - -

GitHub Tracker

-
-

Projects:

-
-

Sort by:

- - - - - -
-
-

Filter by:

- - - -
-
+ + + + + Project GitHub Tracker + + + + + + +

GitHub Tracker

+
+

Projects:

+
+

Sort by:

+ + + + + +
+
+

Filter by:

+ + + +
+
- - + + - - - - + + + + diff --git a/code/script.js b/code/script.js index 25593cb9..78592860 100644 --- a/code/script.js +++ b/code/script.js @@ -1,63 +1,67 @@ -const projects = document.getElementById('projects'); -const userData = document.getElementById('userData'); -const sortSizeBtn = document.getElementById('sortSizeBtn'); -const sortUpdateBtn = document.getElementById('sortUpdateBtn'); -const sortCreatedBtn = document.getElementById('sortCreatedBtn'); -const sortCommitsBtn = document.getElementById('sortCommitsBtn'); -const sortNameBtn = document.getElementById('sortNameBtn'); -const filterAllBtn = document.getElementById('filterAllBtn'); -const filterLangJsBtn = document.getElementById('filterLangJsBtn'); -const filterLangHtmlBtn = document.getElementById('filterLangHtmlBtn'); - -const USER = 'gustavfrid'; -const PARENT_OWNER = 'Technigo'; -const REPOS_URL = `https://api.github.com/users/${USER}/repos`; -const USER_URL = `https://api.github.com/users/${USER}`; - -let reposArr = []; -let reposData = {}; +const projects = document.getElementById('projects') +const userData = document.getElementById('userData') +const sortSizeBtn = document.getElementById('sortSizeBtn') +const sortUpdateBtn = document.getElementById('sortUpdateBtn') +const sortCreatedBtn = document.getElementById('sortCreatedBtn') +const sortCommitsBtn = document.getElementById('sortCommitsBtn') +const sortNameBtn = document.getElementById('sortNameBtn') +const filterAllBtn = document.getElementById('filterAllBtn') +const filterLangJsBtn = document.getElementById('filterLangJsBtn') +const filterLangHtmlBtn = document.getElementById('filterLangHtmlBtn') + +const USER = 'gustavfrid' +const PARENT_OWNER = 'Technigo' +const REPOS_URL = `https://api.github.com/users/${USER}/repos` +const USER_URL = `https://api.github.com/users/${USER}` + +let reposArr = [] +let reposData = {} const pullReqData = { - total: 19, - done: 0, -}; + total: 19, + done: 0, +} const fetchAllReposFromUser = () => { - // fetch all repos from user - fetch(REPOS_URL) - .then((res) => res.json()) - .then((allRepos) => { - // filter forked repos - let filteredRepos = allRepos.filter((repo) => (repo.name.includes('project-') && repo.fork) || (repo.name.includes('portfolio') && repo.fork)); - sortRepos(filteredRepos, 'pushed_at', true); - fetchFullRepo(filteredRepos); - }) - .catch((err) => alert('fetchAllReposFromUser error: ', err)); -}; - -const fetchFullRepo = (repos) => { - // fetch all data from each repo - Promise.all(repos.map((repo) => fetch(repo.url))) - .then((res) => Promise.all(res.map((res) => res.json()))) - .then((repos) => { - repos.forEach((repo) => { - if (repo.parent.owner.login === PARENT_OWNER) { - // push data to store for use when sorting projects - reposArr.push(repo); - reposData[repo.name] = { pullRequest: '', authors: '', commits: '' }; - - generateProjectCard(repo); - const COMMITS_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits?per_page=100`; - fetchCommits(COMMITS_URL, repo); - } - }); - }) - .catch((err) => alert('fetchFullRepo error:', err)); -}; - -const generateProjectCard = (repo) => { - // generating project cards - projects.innerHTML += /*html*/ ` + // fetch all repos from user + fetch(REPOS_URL) + .then(res => res.json()) + .then(allRepos => { + // filter forked repos + let filteredRepos = allRepos.filter( + repo => + (repo.name.includes('project-') && repo.fork) || + (repo.name.includes('portfolio') && repo.fork) + ) + sortRepos(filteredRepos, 'pushed_at', true) + fetchFullRepo(filteredRepos) + }) + .catch(err => alert('fetchAllReposFromUser error: ', err)) +} + +const fetchFullRepo = repos => { + // fetch all data from each repo + Promise.all(repos.map(repo => fetch(repo.url))) + .then(res => Promise.all(res.map(res => res.json()))) + .then(repos => { + repos.forEach(repo => { + if (repo.parent.owner.login === PARENT_OWNER) { + // push data to store for use when sorting projects + reposArr.push(repo) + reposData[repo.name] = { pullRequest: '', authors: '', commits: '' } + + generateProjectCard(repo) + const COMMITS_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits?per_page=100` + fetchCommits(COMMITS_URL, repo) + } + }) + }) + .catch(err => alert('fetchFullRepo error:', err)) +} + +const generateProjectCard = repo => { + // generating project cards + projects.innerHTML += /*html*/ `

${repo.name}

@@ -72,142 +76,148 @@ const generateProjectCard = (repo) => {

Updated: ${new Date(repo.pushed_at).toDateString()}

Commit authors:

- `; -}; + ` +} const fetchCommits = (myCommitsUrl, repo) => { - // fetch all commits from repo - fetch(myCommitsUrl) - .then((res) => res.json()) - .then((data) => { - // filter only commits done after repo was forked - const commitsSinceFork = data.filter((commit) => commit.commit.author.date > repo.created_at); - // storing necessary data for later sorting - reposData[repo.name].commits = commitsSinceFork; - populateCommits(repo, commitsSinceFork); - getCollaborators(commitsSinceFork, repo); - }) - .catch((err) => alert('fetchCommits error: ', repo.name, err)); -}; + // fetch all commits from repo + fetch(myCommitsUrl) + .then(res => res.json()) + .then(data => { + // filter only commits done after repo was forked + const commitsSinceFork = data.filter(commit => commit.commit.author.date > repo.created_at) + // storing necessary data for later sorting + reposData[repo.name].commits = commitsSinceFork + populateCommits(repo, commitsSinceFork) + getCollaborators(commitsSinceFork, repo) + }) + .catch(err => alert('fetchCommits error: ', repo.name, err)) +} const populateCommits = (repo, commits) => { - document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}, `; -}; + document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}, ` +} const getCollaborators = (commits, repo) => { - // filter out each commit author and stor for later sort - let authors = {}; - commits.forEach((commit) => { - if (!Object.keys(authors).includes(commit.author.login)) { - authors[commit.author.login] = { avatar_url: commit.author.avatar_url, html_url: commit.author.html_url }; - } - }); - reposData[repo.name].authors = authors; - populateCollaborators(authors, repo); - fetchPullRequestsArray(repo, Object.keys(authors)); -}; + // filter out each commit author and stor for later sort + let authors = {} + commits.forEach(commit => { + if (!Object.keys(authors).includes(commit.author.login)) { + authors[commit.author.login] = { + avatar_url: commit.author.avatar_url, + html_url: commit.author.html_url, + } + } + }) + reposData[repo.name].authors = authors + populateCollaborators(authors, repo) + fetchPullRequestsArray(repo, Object.keys(authors)) +} const populateCollaborators = (authors, repo) => { - for (const author in authors) { - if (Object.keys(authors).length > 1) { - document.getElementById( - `collaborators-${repo.name}` - ).innerHTML += /*html*/ ``; - } else { - document.getElementById(`collaborators-${repo.name}`).innerHTML = /*html*/ 'Individual project'; - } - } -}; + for (const author in authors) { + if (Object.keys(authors).length > 1) { + document.getElementById( + `collaborators-${repo.name}` + ).innerHTML += /*html*/ `` + } else { + document.getElementById(`collaborators-${repo.name}`).innerHTML = + /*html*/ 'Individual project' + } + } +} const fetchPullRequestsArray = (repo, authors) => { - // fetch all pull requests from repo - const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100`; - fetch(PULL_URL) - .then((res) => res.json()) - .then((data) => { - // only pick pull requests connected to user - const myPullReq = data.find((pull) => authors.includes(pull.user.login)); - if (myPullReq) { - pullReqData.done++; - reposData[repo.name].pullRequest = myPullReq; - updatePieChart(pieChart, pullReqData.done); - } - populatePullRequest(myPullReq, repo); - }) - .catch((err) => alert('fetchPullRequestsArray error:', err)); -}; + // fetch all pull requests from repo + const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100` + fetch(PULL_URL) + .then(res => res.json()) + .then(data => { + // only pick pull requests connected to user + const myPullReq = data.find(pull => authors.includes(pull.user.login)) + if (myPullReq) { + pullReqData.done++ + reposData[repo.name].pullRequest = myPullReq + updatePieChart(pieChart, pullReqData.done) + } + populatePullRequest(myPullReq, repo) + }) + .catch(err => alert('fetchPullRequestsArray error:', err)) +} const populatePullRequest = (myPullReq, repo) => { - if (myPullReq) { - document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ `Pull request`; - } else { - document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request done :('; - } -}; + if (myPullReq) { + document.getElementById( + `pull-${repo.name}` + ).innerHTML = /*html*/ `Pull request` + } else { + document.getElementById(`pull-${repo.name}`).innerHTML = /*html*/ 'No pull request done :(' + } +} const fetchUser = () => { - fetch(USER_URL) - .then((res) => res.json()) - .then((data) => { - userData.innerHTML += /*html*/ `

${data.login}

`; - }) - .catch((err) => alert('fetchCommits error: ', err)); -}; + fetch(USER_URL) + .then(res => res.json()) + .then(data => { + userData.innerHTML += /*html*/ `

${data.login}

` + }) + .catch(err => alert('fetchCommits error: ', err)) +} const sortRepos = (array, param, init) => { - array.sort((a, b) => { - if (a[param] > b[param]) { - return -1; - } else if (a[param] < b[param]) { - return 1; - } else { - return 0; - } - }); - if (param === 'name') array.reverse(); - if (!init) regenerateProjectCards(reposArr); -}; + array.sort((a, b) => { + if (a[param] > b[param]) { + return -1 + } else if (a[param] < b[param]) { + return 1 + } else { + return 0 + } + }) + if (param === 'name') array.reverse() + if (!init) regenerateProjectCards(reposArr) +} const sortReposByCommit = (array, param) => { - array.sort((a, b) => { - if (reposData[a[param]].commits > reposData[b[param]].commits) { - return -1; - } else if (reposData[a[param]].commits < reposData[b[param]].commits) { - return 1; - } else { - return 0; - } - }); - regenerateProjectCards(reposArr); -}; + array.sort((a, b) => { + if (reposData[a[param]].commits > reposData[b[param]].commits) { + return -1 + } else if (reposData[a[param]].commits < reposData[b[param]].commits) { + return 1 + } else { + return 0 + } + }) + regenerateProjectCards(reposArr) +} const filterRepos = (array, lang) => { - if (lang !== 'All') { - const filteredReposArr = array.filter((repo) => repo.language === lang); - regenerateProjectCards(filteredReposArr); - } else { - regenerateProjectCards(array); - } -}; - -const regenerateProjectCards = (repos) => { - projects.innerHTML = ''; - repos.forEach((repo) => { - generateProjectCard(repo); - populateCommits(repo, reposData[repo.name].commits); - populateCollaborators(reposData[repo.name].authors, repo); - populatePullRequest(reposData[repo.name].pullRequest, repo); - }); -}; - -sortSizeBtn.addEventListener('click', () => sortRepos(reposArr, 'size', false)); -sortUpdateBtn.addEventListener('click', () => sortRepos(reposArr, 'updated_at', false)); -sortCreatedBtn.addEventListener('click', () => sortRepos(reposArr, 'created_at', false)); -sortCommitsBtn.addEventListener('click', () => sortReposByCommit(reposArr, 'name')); -sortNameBtn.addEventListener('click', () => sortRepos(reposArr, 'name', false)); -filterLangJsBtn.addEventListener('click', () => filterRepos(reposArr, 'JavaScript')); -filterLangHtmlBtn.addEventListener('click', () => filterRepos(reposArr, 'HTML')); -filterAllBtn.addEventListener('click', () => filterRepos(reposArr, 'All')); - -fetchAllReposFromUser(); -fetchUser(); + if (lang !== 'All') { + const filteredReposArr = array.filter(repo => repo.language === lang) + regenerateProjectCards(filteredReposArr) + } else { + regenerateProjectCards(array) + } +} + +const regenerateProjectCards = repos => { + projects.innerHTML = '' + repos.forEach(repo => { + generateProjectCard(repo) + populateCommits(repo, reposData[repo.name].commits) + populateCollaborators(reposData[repo.name].authors, repo) + populatePullRequest(reposData[repo.name].pullRequest, repo) + }) +} + +sortSizeBtn.addEventListener('click', () => sortRepos(reposArr, 'size', false)) +sortUpdateBtn.addEventListener('click', () => sortRepos(reposArr, 'updated_at', false)) +sortCreatedBtn.addEventListener('click', () => sortRepos(reposArr, 'created_at', false)) +sortCommitsBtn.addEventListener('click', () => sortReposByCommit(reposArr, 'name')) +sortNameBtn.addEventListener('click', () => sortRepos(reposArr, 'name', false)) +filterLangJsBtn.addEventListener('click', () => filterRepos(reposArr, 'JavaScript')) +filterLangHtmlBtn.addEventListener('click', () => filterRepos(reposArr, 'HTML')) +filterAllBtn.addEventListener('click', () => filterRepos(reposArr, 'All')) + +fetchAllReposFromUser() +fetchUser() diff --git a/code/style.css b/code/style.css index 3d21c82d..a8171b55 100644 --- a/code/style.css +++ b/code/style.css @@ -1,119 +1,119 @@ .body { - display: flex; - flex-direction: column; - align-items: center; - font-family: 'Montserrat', sans-serif; - background-color: #0d1017; - color: white; - max-width: 400px; - margin: auto; + display: flex; + flex-direction: column; + align-items: center; + font-family: 'Montserrat', sans-serif; + background-color: #0d1017; + color: white; + max-width: 400px; + margin: auto; } .header { - text-align: center; + text-align: center; } .user-data { - display: flex; - flex-direction: column; - gap: 4px; - align-items: center; + display: flex; + flex-direction: column; + gap: 4px; + align-items: center; } .user-name { - font-size: 30px; - margin: 0; + font-size: 30px; + margin: 0; } .avatar-user { - width: 100%; - border-radius: 50%; + width: 100%; + border-radius: 50%; } .avatar-user:hover { - border: 3px solid #21262c; + border: 3px solid #21262c; } .project-header { - text-align: center; + text-align: center; } .avatar-collaborator { - box-sizing: border-box; - height: 30px; - border-radius: 50%; - padding: 0 2px; + box-sizing: border-box; + height: 30px; + border-radius: 50%; + padding: 0 2px; } .avatar-collaborator:hover { - border: 1px solid #21262c; + border: 1px solid #21262c; } .filters-sorting-heading { - margin: 0; + margin: 0; } .filters-sorting { - display: flex; - gap: 5px; - align-items: center; - margin: 5px 0; + display: flex; + gap: 5px; + align-items: center; + margin: 5px 0; } .filters-sorting button { - height: 30px; - border: 1px solid #21262c; - border-radius: 10px; - margin: 0; - background-color: #21262c; - color: white; + height: 30px; + border: 1px solid #21262c; + border-radius: 10px; + margin: 0; + background-color: #21262c; + color: white; } .projects { - display: flex; - flex-direction: column; - justify-content: center; - gap: 10px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; } .chart { - margin: 40px; + margin: 40px; } .repo-info { - display: flex; - flex-wrap: wrap; - flex-direction: column; - border: 2px solid #30353b; - border-radius: 5px; - padding: 10px; - margin: 0; + display: flex; + flex-wrap: wrap; + flex-direction: column; + border: 2px solid #30353b; + border-radius: 5px; + padding: 10px; + margin: 0; } .repo-heading { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } .numbers { - display: flex; - gap: 4px; + display: flex; + gap: 4px; } .repo { - font-size: 20px; - margin: 5px 0; + font-size: 20px; + margin: 5px 0; } .lang { - border-radius: 10px; - color: black; - padding: 0 4px; + border-radius: 10px; + color: black; + padding: 0 4px; } .JavaScript { - background-color: #f1e15a; - border: 1px solid #f1e15a; + background-color: #f1e15a; + border: 1px solid #f1e15a; } .HTML, .CSS { - background-color: #e44c27; - border: 1px solid #e44c27; + background-color: #e44c27; + border: 1px solid #e44c27; } .info, @@ -122,27 +122,27 @@ .size, .pull, .collaboration { - margin: 2px 0; - display: flex; - align-items: center; + margin: 2px 0; + display: flex; + align-items: center; } /* unvisited link */ a:link { - color: #579def; - text-decoration: none; + color: #579def; + text-decoration: none; } /* visited link */ a:visited { - color: #579def; - text-decoration: none; + color: #579def; + text-decoration: none; } /* mouse over link */ a:hover { - color: #579def; - text-decoration: underline; + color: #579def; + text-decoration: underline; } /* selected link */ @@ -151,32 +151,32 @@ a:hover { } */ @media (min-width: 768px) { - .body { - max-width: 990px; - } - .projects { - flex-direction: row; - flex-wrap: wrap; - } - .repo-info { - width: 45%; - } + .body { + max-width: 990px; + } + .projects { + flex-direction: row; + flex-wrap: wrap; + } + .repo-info { + width: 45%; + } } @media (min-width: 992px) { - .body { - max-width: 1100px; - } - .repo-info { - width: 30%; - } + .body { + max-width: 1100px; + } + .repo-info { + width: 30%; + } } @media (min-width: 1200px) { - .body { - max-width: 1500px; - } - .repo-info { - width: 22%; - } + .body { + max-width: 1500px; + } + .repo-info { + width: 22%; + } } From 1bacd9845539c78b5f6870a0045ddb407e147bae Mon Sep 17 00:00:00 2001 From: Gustav Frid Date: Mon, 1 Nov 2021 08:09:07 +0100 Subject: [PATCH 50/50] remove portfolio --- code/script.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/script.js b/code/script.js index 78592860..6f0dc829 100644 --- a/code/script.js +++ b/code/script.js @@ -29,9 +29,8 @@ const fetchAllReposFromUser = () => { .then(allRepos => { // filter forked repos let filteredRepos = allRepos.filter( - repo => - (repo.name.includes('project-') && repo.fork) || - (repo.name.includes('portfolio') && repo.fork) + repo => repo.name.includes('project-') && repo.fork + // || (repo.name.includes('portfolio') && repo.fork) ) sortRepos(filteredRepos, 'pushed_at', true) fetchFullRepo(filteredRepos)