diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..0647067d Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1613a3b0..471cf32e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,19 @@ -# GitHub Tracker +# Week 7- Technigo Bootcamp -Replace this readme with your own information about your project. +# Project GitHub Tracker -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +This week, we want you to create a place to keep track of the GitHub repos that you're using here at Technigo. You will continue practicing your JavaScript and API skills with the help of GitHub's own documentation. ## 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? +This week the first step was to read the documentation of Github API to understand what every endpoint was about. Then I started fetching basic information and adding new functions, endpoints, and iterations in JavaScript. + +I used the `async/await` instead of `.then( )` approach to practice more about it. An interesting experience this week was digging more into promises, and how to await several promises using `Promise.all`. + +I also used an independent library for vanilla Javascript as a collapsible toggle to show details for commits and comments for every Pull Request. (See `https://www.cssscript.com/content-toggle-collapsible/`). + +Also was very interesting using the open-source `Chart.js` to create the chart about how many projects we finished and how many projects left at the Technigo course. (See `https://www.chartjs.org/docs/latest/`) ## 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. +Here is the Netlify link: https://project-github-tracker.netlify.app/ diff --git a/code/chart.js b/code/chart.js index 92e85a30..63e54c02 100644 --- a/code/chart.js +++ b/code/chart.js @@ -2,3 +2,45 @@ const ctx = document.getElementById('chart').getContext('2d') //"Draw" the chart here 👇 +const drawChart = (numberOfFinishedProjects) => { + config = { + type: 'pie', + data: { + labels: ['Finished Projects', 'Projects Left'], + datasets: [{ + label: 'Technigo Projects', + data: [numberOfFinishedProjects, 20 - numberOfFinishedProjects], + backgroundColor: [ + 'rgba(223, 198, 124, 1)', + 'rgba(63, 111, 166, 1)', + ], + borderColor: [ + 'rgba(223, 198, 104, 1)', + 'rgba(63, 111, 144, 1)', + ], + borderWidth: 1 + }] + }, + options: { + plugins: { + title: { + display: true, + text: "Comparison Technigo Course Finished projects vs Projects left", + position: 'top', + padding: { + top: 10, + bottom: 20 + } + } + } + + } + + } + const myChart = new Chart(ctx, config); +} + + + + + diff --git a/code/collapsible.js b/code/collapsible.js new file mode 100644 index 00000000..a47da6f7 --- /dev/null +++ b/code/collapsible.js @@ -0,0 +1,283 @@ +/** + * Collapsible - A plug and play plugin for expanding and + * collapsing elements (i.e. accordion) on a website. + * + * @author Murtada al Mousawy (https://murtada.nl) + */ +(function() { + 'use strict'; + + /** + * Creates an instance of Collapsible. + * + * @constructor + * @param {Object} options + * @param {(HTMLElement|NodeList)} options.node The HTML elements that will be manipulated. + * @param {HTMLElement} [options.eventNode] The HTML element on which the eventListener will be attached. + * @param {Boolean} [options.isCollapsed] Assign the state of the node element. + * @param {Boolean} [options.observe] Assign a MutationObserver to observe child DOM changes. + * @param {Function} [options.expandCallback] Assign a callback for the [{@link Collapsible.prototype.expand} event. + * @param {Function} [options.collapseCallback] Assign a callback for the {@link Collapsible.prototype.collapse} event. + * @param {Function} [options.observeCallback] Assign a callback for the {@link Collapsible.prototype.initObserver} event. + */ + var Collapsible = function(options) { + // Initialize HTML nodes + if (NodeList.prototype.isPrototypeOf(options.node)) { + options.node.forEach(function(nodeItem) { + var singleNodeOptions = options; + singleNodeOptions.node = nodeItem; + new Collapsible(singleNodeOptions); + }); + return; + } else if (options.node instanceof HTMLElement) { + this.node = options.node; + this.eventNode = (options.eventNode ? this.node.querySelector(options.eventNode) : this.node); + this.isCollapsed = (typeof this.node.dataset.collapsibleCollapsed !== 'undefined' + ? true + : null); + + if (!this.isCollapsed) { + this.isCollapsed = ((options.isCollapsed + && typeof options.isCollapsed === 'boolean') + ? options.isCollapsed + : false); + } + + this.observe = (typeof options.observe === 'boolean' ? options.observe : false); + this.expandCallback = (typeof options.expandCallback === 'function' ? options.expandCallback : null); + this.collapseCallback = (typeof options.collapseCallback === 'function' ? options.collapseCallback : null); + this.observeCallback = (typeof options.observeCallback === 'function' ? options.observeCallback : null); + this.mutationCallback = (typeof options.mutationCallback === 'function' ? options.mutationCallback : null); + + this.init(); + } else { + console.error(options.node, 'is not a NodeList or an instance of HTMLElement'); + } + }; + + /** + * Initialize the collapsing and expanding events. + */ + Collapsible.prototype.init = function() { + this.updateHeights(); + + if (this.isCollapsed) { + this.node.style.height = this.collapsedHeight + 'px'; + this.node.classList.add('is-collapsed'); + } else { + this.node.classList.add('is-expanded'); + } + + this.eventNode.addEventListener('click', function() { + this.toggleCollapse(); + }.bind(this)); + + window.addEventListener('resize', this.updateHeights.bind(this, null)); + + // Observe children of the node + if (this.observe) { + this.initObserver(); + } + + // Attach the prototype instance to the node + this.node.collapsible = this; + }; + + /** + * Update the collapsed and expanded heights on page resize. + * + * @param {int} [heightDifference] Height value to add or subtract from the parent. + */ + Collapsible.prototype.updateHeights = function(heightDifference) { + heightDifference = heightDifference || 0; + + // Calculate the collapsed height + this.collapsedHeight = Collapsible.parseNumber( + window.getComputedStyle(this.eventNode)['height'] + ); + + // Calculate the expanded height + this.node.style.height = 'auto'; + + this.expandedHeight = Collapsible.parseNumber( + window.getComputedStyle(this.node)['height'] + ); + + // Add or subtract the childNode's height difference + this.expandedHeight += heightDifference; + this.expandedHeight = Math.max(this.expandedHeight, this.collapsedHeight); + + // Reset height to what it was before + if (this.isCollapsed) { + this.node.style.height = this.collapsedHeight + 'px'; + } + + this.updateParentNode(this.expandedHeight - this.collapsedHeight); + }; + + /** + * Toggle the node state and calls the appropriate function. + */ + Collapsible.prototype.toggleCollapse = function() { + if (this.isCollapsed) { + this.expand(); + } else { + this.collapse(); + } + }; + + /** + * Expand the node. + */ + Collapsible.prototype.expand = function() { + this.updateHeights(); + + void this.node.offsetWidth; + + this.node.style.height = 'auto'; + this.node.style.height = this.expandedHeight + 'px'; + this.node.classList.remove('is-collapsed'); + this.node.classList.add('is-expanded'); + + this.isCollapsed = false; + + // Create a custom event + var expandEvent = new CustomEvent('toggle', { + bubbles: true, + detail: { + action: 'expand', + origin: this.eventNode + } + }); + + this.node.dispatchEvent(expandEvent); + + // Run callback if it exists + if (this.expandCallback) { + this.expandCallback.bind(this, expandEvent)(); + } + + this.updateParentNode(this.expandedHeight - this.collapsedHeight); + }; + + /** + * Collapse the node. + */ + Collapsible.prototype.collapse = function() { + this.node.style.height = window.getComputedStyle(this.node)['height']; + + void this.node.offsetWidth; + + this.node.style.height = this.collapsedHeight + 'px'; + this.node.classList.remove('is-expanded'); + this.node.classList.add('is-collapsed'); + + this.isCollapsed = true; + + // Create a custom event + var collapseEvent = new CustomEvent('toggle', { + bubbles: true, + detail: { + action: 'collapse', + origin: this.eventNode + } + }); + + this.node.dispatchEvent(collapseEvent); + + // Run callback if it exists + if (this.collapseCallback) { + this.collapseCallback.bind(this, collapseEvent)(); + } + + this.updateParentNode(-(this.expandedHeight - this.collapsedHeight)); + }; + + /** + * Update parent heights if collapsible. + * + * @see {@link Collapsible.prototype.updateHeights} + */ + Collapsible.prototype.updateParentNode = function(heightDifference) { + if (this.node.parentNode && this.node.parentNode.collapsible) { + this.node.parentNode.collapsible.updateHeights(heightDifference); + } + }; + + /** + * Observe the direct children list of the node. + * Will adjust the expanded height automatically if necessary. + */ + Collapsible.prototype.initObserver = function() { + this.mutationObserver = new window.MutationObserver(function(mutationsList) { + var mutatedNode, + mutationAction; + + if (mutationsList[0]['addedNodes'].length > 0) { + mutationAction = 'add'; + mutatedNode = mutationsList[0]['addedNodes'][0]; + } else { + mutationAction = 'remove'; + mutatedNode = mutationsList[0]['removedNodes'][0]; + } + + if (!this.isCollapsed) { + var mutatedNodeStyle = window.getComputedStyle(mutatedNode); + + var mutatedNodeHeight = + Collapsible.parseNumber( + mutatedNodeStyle['height']) + + Collapsible.parseNumber( + mutatedNodeStyle['margin-top']) + + Collapsible.parseNumber( + mutatedNodeStyle['margin-bottom']); + + this.node.style.height = 'auto'; + + var currentHeight = Collapsible.parseNumber( + window.getComputedStyle(this.node)['height'] + ); + + if (mutationAction == 'add') { + this.node.style.height = (currentHeight - mutatedNodeHeight) + 'px'; + void this.node.offsetWidth; + this.node.style.height = currentHeight + 'px'; + } else { + this.node.style.height = this.expandedHeight + 'px'; + void this.node.offsetWidth; + this.node.style.height = currentHeight + 'px'; + } + } + + this.expandedHeight = currentHeight; + + // Create a custom event + var mutationEvent = new CustomEvent('mutate', { + bubbles: true, + detail: { + action: mutationAction, + node: mutatedNode + } + }); + + this.node.dispatchEvent(mutationEvent); + + // Run callback if it exists + if (this.mutationCallback) { + this.mutationCallback.bind(this, mutationEvent)(); + } + }.bind(this)); + + this.mutationObserver.observe(this.node, { + childList: true + }); + }; + + // Helper functions + Collapsible.parseNumber = function(numberString) { + return Number.parseInt(numberString.slice(0, -2)); + }; + + // Expose the prototype function to the global scope + window.Collapsible = Collapsible; +})(); diff --git a/code/images/github-icon.svg b/code/images/github-icon.svg new file mode 100644 index 00000000..a3fcb98d --- /dev/null +++ b/code/images/github-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/code/index.html b/code/index.html index 2fb5e0ae..1cf26ec3 100644 --- a/code/index.html +++ b/code/index.html @@ -1,21 +1,59 @@ + Project GitHub Tracker + + + + + + -

GitHub Tracker

-

Projects:

-
- - +
+
+ +

GitHub Tracker

+ +
+

+  Stockholm, Sweden +
+
+
+ + +
+
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/code/script.js b/code/script.js index e69de29b..e856912c 100644 --- a/code/script.js +++ b/code/script.js @@ -0,0 +1,182 @@ + +const username = "PriscilaAlfaro"; +const projectsInfo = document.getElementById('projects-info'); +const userName = document.getElementById('user-name'); +const profileImage = document.getElementById('profile-image'); + +const reposFetch = async () => { + const url = `https://api.github.com/users/${username}/repos` + try { + const response = await fetch(url) + if (response.ok) { + const repositories = await response.json(); + const forkedRepositories = repositories.filter(repo => repo.fork && repo.name.includes("project-")); + drawChart(forkedRepositories.length); + + forkedRepositories.map(async repo => { + const allPullRequest = await pullRequestFetch(repo.name); + repo.allPullRequest = allPullRequest; + builRepoHtml(repo); + + new Collapsible({ + node: document.querySelectorAll('.collapsible'), + eventNode: '.collapsible_title', + isCollapsed: true + }); + }) + + } else { + throw new Error('Request failed!') + } + } catch (error) { + main - section + console.log(`Error: ${error}`); + } +} + + +const builRepoHtml = (repo) => { + projectsInfo.innerHTML += + `
+
+

  ${repo.name.toUpperCase()}

+

Default branch: ${repo.default_branch}

+

Main language: ${repo.language ? repo.language : "No information"}

+

Most recent push: ${new Date(repo.pushed_at).toDateString()}

+
+ +
+

Pull requests

+

Total pullrequest: ${repo.allPullRequest.total_count}

+ ${repo.allPullRequest.total_count === 0 ? + `

This repository don't any have Pull Request

` : + repo.allPullRequest.items.map(pullRequest => + `

Pull Request #${pullRequest.number}

+ ${pullRequest.commits.length === 0 ? + `

This repository don't have commits for this PR

` : + + + `

Total commits: ${pullRequest.commits.length}

+
+
+

Click here for commits details

+
+
+
    + ${pullRequest.commits.map(individualCommit => + `
  1. +
    Commit #: ${individualCommit.sha}
    +
    Message: ${individualCommit.commit.message}
    +
    Autor: ${individualCommit.commit.author.name}
    +
    2. `).join('') + } +
+
+
`} + + ${pullRequest.comments.length === 0 ? + `

This repository don't have comments for this PR

` : + `

Total comments: ${pullRequest.comments.length}

+
+
+

Click here for comments details

+
+
+
    + ${pullRequest.comments.map(individualComment => + `
  1. +
    Created at: ${new Date(individualComment.created_at).toDateString()}
    +
    Message: ${individualComment.body}
    +
    Autor: ${individualComment.user.login}
    +
    2. `).join('') + } +
+
+
`} + `)} +
+
` + +} + + + +const userNameFetch = async () => { + const url = `https://api.github.com/users/${username}`; + try { + const response = await fetch(url) + if (response.ok) { + const data = await response.json(); + userName.innerHTML = `${data.login}`; + profileImage.src = `${data.avatar_url}`; + } else { + throw new Error('Request failed!') + } + } catch (error) { + console.log(`Error: ${error}`); + } +} + + +const pullRequestFetch = async (repoName) => { + //see: https://docs.github.com/en/github/searching-for-information-on-github/searching-on-github/searching-issues-and-pull-requests + const url = `https://api.github.com/search/issues?q=is:pr+repo:technigo/${repoName}+author:${username}`; + + try { + const response = await fetch(url) + if (response.ok) { + const pullRequests = await response.json(); + await Promise.all(pullRequests.items.map(async pullRequest => { + pullRequest.comments = await fetchCommentsFromPullRequest(repoName, pullRequest.number); + pullRequest.commits = await fetchCommitsFromPullRequest(repoName, pullRequest.number); + return pullRequest; + })); + return pullRequests; + } else { + throw new Error('Request failed!') + } + } catch (error) { + console.log(`Error: ${error}`); + } +} + +const fetchCommentsFromPullRequest = async (repoName, pullRequestNumber) => { + const url = `https://api.github.com/repos/Technigo/${repoName}/pulls/${pullRequestNumber}/comments` + try { + if (pullRequestNumber) { + const response = await fetch(url) + if (response.ok) { + const pullRequestComments = await response.json(); + return pullRequestComments; + } else { + throw new Error('Request failed!') + } + } else { + return [{ body: 'No comments', user: { login: "No commenter" } }] + } + } catch (error) { + console.log(`Error: ${error}`); + } +} + + +const fetchCommitsFromPullRequest = async (repoName, pullRequestNumber) => { + const url = `https://api.github.com/repos/Technigo/${repoName}/pulls/${pullRequestNumber}/commits` + try { + const response = await fetch(url) + if (response.ok) { + const commits = await response.json() + return commits; + } else { + throw new Error('Request failed!') + } + + } catch (error) { + console.log(`Error: ${error}`); + } +} + + + +reposFetch(); +userNameFetch(); diff --git a/code/style.css b/code/style.css index 7c8ad447..7ffc8167 100644 --- a/code/style.css +++ b/code/style.css @@ -1,3 +1,173 @@ body { - background: #FFECE9; + background-color: rgb(182 185 194); + font-family: 'Signika Negative', sans-serif; + margin: 0px +} + +.main-section{ + padding: 15px; +} + +.general-info{ + background-color: rgb(56 69 114); + color: white; + width: auto; + text-align: -webkit-center; + padding: 20px 0px; +} + + +.project-title{ + background-color: rgb(38 117 120); + width: 100%; + border-radius: 3%; + margin: 0px; + padding: 20px; +} + +.pr-info{ + padding: 10px 20px; + font-size: 1rem; + font-size: 100%; +} + +.general-title{ + font-weight: 600; +} + +.profile-image{ + max-width: 100px; + max-height: 100px; + border-radius: 50%; + border: 2px solid white; + justify-content: center; +} + +.profile-info-wraper{ + display: grid; +} + +.general-info h1, h4, h5{ + margin: 0px; + padding: 3px; +} + +.projects-info { + display: flex; +} + +.card{ + background-color:rgb(210 208 227); + border: 1px solid black; + display: flex; + flex-wrap: wrap; + width: 80% auto; + height: auto; + box-sizing: border-box; + margin: 10px; + box-shadow: 0px 0px 5px 1px rgb(39, 38, 38); + margin: 20px 0px; + border-radius: 3%; + font-size: 60%; + text-align: center; + justify-content: center; + border: 3px solid #6b6b78; +} + +.collapsible{ + overflow: hidden; + text-align: -webkit-center; +} + +.collapsible_title { + color: black; + font-style: italic; + height: auto; + display: grid; + width: 160px; + cursor: pointer; + font-size: 90%; + +} + +.collapsible_content{ + background-color:rgb(197, 206, 236); + text-align: -webkit-auto; + max-width: 80%; +} + +.chart{ + display: flex; + width: 75%; + padding: 30px; + border: 1px solid black; + margin: 40px auto; + background-color: #d2d9df; + border: 3px solid #6b6b78; +} + + +.footer{ + background-color: rgb(56 69 114); + margin-top: 3rem; + padding: 1rem 0rem; + display: grid; + justify-content: center; + font-size: small; + font-style: italic; + text-align: center; + color: white +} +.github-icon{ + justify-self: center; +} + +@media screen and (min-width: 768px){ +.general-title { + min-width: 309px; +} + +.general-info{ + flex-direction: row; +} + +.chart{ + width: 40%; +} + +.projects-info{ + flex-direction: column; +} + +.project-title{ + max-width: 35%; + min-width: 35%; + border-radius: 0; +} + +.main-section{ + margin: 20px 120px; +} + +.card{ + margin: 30px; + flex-wrap: nowrap; + border-radius: 0; + text-align: justify; + justify-content: right; +} + +.collapsible{ + text-align: left; +} + +.collapsible_title { + width: 200px; +} +} + +@media screen and (min-width: 991px){ +.main-section{ + margin: 20px 180px; +} } \ No newline at end of file