Technigo · jessand77 · Feb 17, 2022 · Feb 17, 2022 · Feb 19, 2022 · Feb 22, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore 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
diff --git 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
diff --git a/code/assets/GitHub-Mark-Light-64px.png b/code/assets/GitHub-Mark-Light-64px.png
diff --git 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
@@ -4,18 +4,32 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
   <title>Project GitHub Tracker</title>
+
+  <!-- Chart link -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header class="header">
+    <h1>GitHub Tracker</h1>
+    <a href="https://github.com/" target="_blank"><img class="logo" src="./assets/GitHub-Mark-Light-64px.png" alt="github-logo" /></a>
+  </header>
+
+  <main class="main">
+    <section class="user-section" id="user"></section>
+    <section class="project-section" id="projects"></section>
+     <!-- Chart 👇 -->
+    <section class="canvas-section">
+      <canvas id="chart"></canvas>
+    </section>   
+  </main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
   <script src="./chart.js"></script>
+  <script src="./secret.js"></script>
+  <script src="./script.js"></script>
+
 </body>
-</html>
+</html>
diff --git 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 = `
+      <h3>${user.name}</h3>
+      <p>Username: ${user.login}</p>
+      <a href="${user.html_url}" target="_blank"><img class="avatar" src="${user.avatar_url}" alt="profile picture" /></a>
+    `;
+		});
+};
+
+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: <span>${commits.length}</span>`;
+			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 = `<span>No pull request found</span>`;
+					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 = `
+      <h2>My Technigo projects:</h2>
+      <div class="repo-container" id="repoContainer"></div>
+      `;
+
+			// 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 += `
+        <div id=${repo.name}-div class="repo-div">
+          <div id=${repo.name}-div-content class="repo-div-content">
+            <h4><a href="${repo.html_url}" target="_blank">${repo.name}</a></h4>
+            <p>Most recent push: <span>${mostRecentPush}</span></p>
+            <p>Default branch: <span>${repo.default_branch}</span></p>
+          </div>
+        </div>
+      `;
+			});
+		});
+};
+
+fetchUserInfo();
+fetchRepos();