diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..1580b9d3 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..2fd51f55 --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files + +# Ignore Mac system files +.DS_store + +# Ignore node_modules folder +node_modules + +# Ignore all text files +*.txt + +# Ignore files related to API keys +.env + +# misc +/.pnp +.pnp.js +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# other +code/secret.js \ No newline at end of file diff --git a/README.md b/README.md index 1613a3b0..c9df4dbb 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,7 @@ # GitHub Tracker -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. - -## 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 GitHub Tracker displays my repos that are forked from Technigo with info about them fetched using the GitHub API. It also includes a chart that was created using chart.js. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://jessicas-github-tracker-project.netlify.app diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..203f993e Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/assets/GitHub-Mark-Light-64px.png b/code/assets/GitHub-Mark-Light-64px.png new file mode 100644 index 00000000..73db1f61 Binary files /dev/null and b/code/assets/GitHub-Mark-Light-64px.png differ diff --git a/code/chart.js b/code/chart.js index 92e85a30..ffa9a6d0 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,33 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (amount) => { + + const labels = [ + 'Done or ongoing projects', + 'Projects left to do', + ]; + + const data = { + labels: labels, + datasets: [{ + label: 'My First dataset', + backgroundColor: ['#4D724D', '#8DB48E'], + borderColor: ['#4D724D', '#8DB48E'], + data: [amount, 19-amount], + }] + }; + + const config = { + type: 'doughnut', + data: data, + options: {} + }; + + new Chart( + ctx, + config + ); +} + + diff --git a/code/index.html b/code/index.html index 2fb5e0ae..aa7128ec 100644 --- a/code/index.html +++ b/code/index.html @@ -4,18 +4,32 @@ + Project GitHub Tracker + + + + -

GitHub Tracker

-

Projects:

-
+
+

GitHub Tracker

+ +
+ +
+
+
+ +
+ +
+
- - - - + + + - \ No newline at end of file + diff --git a/code/script.js b/code/script.js index e69de29b..75794be6 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,172 @@ +const userSection = document.getElementById('user'); +const projectSection = document.getElementById('projects'); + +const username = 'jessand77'; +const API_USER_INFO = `https://api.github.com/users/${username}`; +const API_REPOS = `${API_USER_INFO}/repos`; + +const options = { + method: 'GET', + headers: { + Authorization: 'token ' + API_TOKEN, + }, +}; + +const fetchUserInfo = () => { + fetch(API_USER_INFO) + .then((res) => res.json()) + .then((user) => { + userSection.innerHTML = ` +

${user.name}

+

Username: ${user.login}

+ profile picture + `; + }); +}; + +const getCommits = (pullRequestCommitsUrl, reponame) => { + fetch(pullRequestCommitsUrl) + .then((res) => res.json()) + .then((commits) => { + let repoDiv = document.getElementById(`${reponame}-div`); + let repoDivContent = document.getElementById(`${reponame}-div-content`); + + let commitParagraph = document.createElement('p'); + commitParagraph.innerHTML = `Number of commits: ${commits.length}`; + repoDivContent.appendChild(commitParagraph); + + // Create a new div to put the commit messages and the hide commits button in + let commitDiv = document.createElement('div'); + commitDiv.className = 'commit-div'; + commitDiv.style.display = 'none'; + repoDiv.appendChild(commitDiv); + + let commitMessageList = document.createElement('ol'); + commitMessageList.className = 'message-list'; + commitDiv.appendChild(commitMessageList); + + commits.forEach((commit) => { + let commitMessage = document.createElement('li'); + commitMessage.innerHTML = commit.commit.message; + commitMessageList.appendChild(commitMessage); + }); + + // Buttons to show or hide commit comments + let showCommitsButton = document.createElement('button'); + showCommitsButton.className = 'commits-button'; + showCommitsButton.innerHTML = 'Show commits'; + repoDivContent.appendChild(showCommitsButton); + + let hideCommitsButton = document.createElement('button'); + hideCommitsButton.className = 'commits-button'; + hideCommitsButton.innerHTML = 'Hide commits'; + commitDiv.appendChild(hideCommitsButton); + + const showCommitMessageList = () => { + repoDivContent.style.display = 'none'; + commitDiv.style.display = 'block'; + }; + + const hideCommitMessageList = () => { + commitDiv.style.display = 'none'; + repoDivContent.style.display = 'flex'; + }; + + showCommitsButton.addEventListener('click', showCommitMessageList); + hideCommitsButton.addEventListener('click', hideCommitMessageList); + }); +}; + +const getPullRequests = (repos) => { + repos.forEach((repo) => { + fetch( + `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100` + ) + .then((res) => res.json()) + .then((pullRequests) => { + // How can I get the pull requests for the repos that I am not the owner of without hardcoding like this? + const firstTitleToSearchFor = + 'Week 4 project - Sofie Pellegrini & Jessica Sandler'; + const secondTitleToSearchFor = + 'Week 6 project : Jessica - Maurii - Nadia - Rijad - Terese'; + const thirdTitleToSearchFor = + 'Week 9: Jessica Sandler, Laura Sjölander and Nadia Lefebvre'; + const fourthTitleToSearchFor = + 'Project Elephant Quiz made by Sofie Pellegrini, Lisa Bergström, Jessica Sandler, Terese Claesson and Emma Berg'; + const fifthTitleToSearchFor = 'project-auth Lisa & Jessica'; + + const myPullRequests = pullRequests.filter( + (pullRequest) => + pullRequest.user.login === username || + pullRequest.title === firstTitleToSearchFor || + pullRequest.title === secondTitleToSearchFor || + pullRequest.title === thirdTitleToSearchFor || + pullRequest.title === fourthTitleToSearchFor || + pullRequest.title === fifthTitleToSearchFor + ); + + //If the length is 0 no pull request has been made + if (myPullRequests.length === 0) { + let repoDivContent = document.getElementById( + `${repo.name}-div-content` + ); + let commitParagraph = document.createElement('p'); + + commitParagraph.innerHTML = `No pull request found`; + commitParagraph.className = 'no-pullrequest'; + + repoDivContent.appendChild(commitParagraph); + } + + //Fetches the commits for all the projects where a pull request has been made + myPullRequests.forEach((myPullRequest) => { + getCommits(myPullRequest.commits_url, repo.name); + }); + }); + }); +}; + +// This function filters out repos that are forked and start with "project" +const getTechnigoRepos = (repos) => { + return repos.filter( + (repo) => repo.fork === true && repo.name.startsWith('project') + ); +}; + +const fetchRepos = () => { + fetch(API_REPOS) + .then((res) => res.json()) + .then((repos) => { + const technigoRepos = getTechnigoRepos(repos); + + getPullRequests(technigoRepos); + + projectSection.innerHTML = ` +

My Technigo projects:

+
+ `; + + // Get the number of forked Technigo projects and draw the chart + const numberOfTechnigoRepos = technigoRepos.length; + drawChart(numberOfTechnigoRepos); + + technigoRepos.forEach((repo) => { + const mostRecentPush = new Date(repo.pushed_at).toLocaleDateString( + 'en-GB' + ); + + repoContainer.innerHTML += ` +
+
+

${repo.name}

+

Most recent push: ${mostRecentPush}

+

Default branch: ${repo.default_branch}

+
+
+ `; + }); + }); +}; + +fetchUserInfo(); +fetchRepos(); diff --git a/code/style.css b/code/style.css index 7c8ad447..8af54bb8 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,166 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); + +:root { + --primary: #F5F5F5; + --secondary: #a6c2a7; /* Only used in the chart */ + --third: #4D724D; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + background-color: var(--primary); + font-size: 16px; + font-family: 'Nunito', sans-serif; +} + body { - background: #FFECE9; + width: 100%; + margin: 0 auto; + min-width: 290px; + color: var(--third); +} + +h1 { + text-align: center; +} + +h2 { + font-size: 2rem; + margin-bottom: 2rem; +} + +h4 { + font-size: 1.5rem; +} + +ol { + font-size: small; +} + +a { + color: rgb(34, 31, 31); +} + +span { + color:rgb(34, 31, 31); +} + +.header { + display: flex; + justify-content: center; + align-items: center; + color: var(--primary); + background-color: var(--third); +} + +.logo { + height: 3rem; + width: auto; + margin: 2rem; +} + +.main { + display: flex; + flex-direction: column; + justify-content: space-around; + align-content: center; + gap: 3rem; + padding: 20px; +} + +.user-section { + padding: 1rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.4rem; +} + +.avatar { + height: 200px; + width: 200px; + border-radius: 50%; + filter: grayscale(100%); +} + +.project-section { + display: flex; + flex-direction: column; + align-items: center; +} + +.repo-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 2rem; +} + +.repo-div { + flex: 25%; + min-height: 13rem; + border: 1px solid var(--third); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + padding: 1.5rem; + margin: 0.5rem; + transition: 0.2s; /*The delay of the scale change below*/ +} + +.repo-div:hover { + transform: scale(1.05); + background-color: var(--secondary); +} + +.repo-div-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: 0.4rem; +} + +.no-pullrequest { + font-style: italic; + font-size: small; +} + +.commit-div { + margin-left: 2.5rem; +} + +.commits-button { + width: fit-content; + margin: 1rem auto; + padding: 0.6rem; + font-weight: 600; + color: var(--primary); + background-color: var(--third); + border: var(--third); + position: relative; + left: -1.3rem; +} + +.commits-button:hover { + text-decoration: underline; +} + +.canvas-section { + width: 50%; + margin: 0 auto; +} + +@media only screen and (max-width: 992px) { + .repo-container { + flex-direction: column; + flex-wrap: nowrap; + } + + .repo-div { + flex: 100%; + } } \ No newline at end of file