Technigo · mistscale · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022 · Feb 27, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,8 @@
 # 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 assignment was to create a GitHub tracker of all my Technigo-repos using GitHub API.
 
 ## 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?
+Problem description and code comments will be added soon...
 
 ## 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://lisen-github-tracker.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,34 @@
+//Font-family for the chart
+Chart.defaults.font.family = 'Source Code Pro, monospace';
+
 //DOM-selector for the canvas 👇
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+const activateChart = (projects) => {
+    const labels = [
+        'Projects done',
+        'Projects to do'
+      ]
+
+      const data = {
+        labels: labels,
+        datasets: [{
+
+          data: [projects, 19-projects],
+          label: 'Projects',
+          backgroundColor: ['rgb(244, 132, 95)', 'rgb(220, 220, 220)']
+        }]
+      }
+
+      const config = {
+        type: 'doughnut',
+        data: data,
+        options: {}
+      }
+
+      const myChart = new Chart(document.getElementById('chart'),config);
+      }
+
+
+
diff --git a/code/index.html b/code/index.html
@@ -6,15 +6,23 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <!-- <h1>GitHub Tracker</h1> -->
+  <main id="projects" class="projects">
+  <div id="userSection" class="user-container"></div>
+  <div id="repoSection" class="repo-container"></div>
+  </main>
 
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
+  <div class="chart-container">
+    <canvas id="chart"></canvas>
+  </div>
+  <script src="./secret.js"></script>
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>

diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,79 @@
+const userSection = document.getElementById ('userSection')
+const repoSection = document.getElementById ('repoSection')
+
+const username = 'mistscale'
+const API_USER_URL = `https://api.github.com/users/${username}`
+const API_REPOS_URL = `https://api.github.com/users/${username}/repos`
+
+const options = {
+    method: 'GET',
+    headers: {
+        Authorization: 'API_TOKEN'
+      }
+  }
+
+// Display profile picture and username from user api
+const getUser = () =>  {
+    fetch(API_USER_URL, options)
+    .then(res => res.json())
+    .then(data => {
+        userSection.innerHTML = `
+        <img src='${data.avatar_url}' class='profile-img'/>
+        <h1>${data.login}</h1>`
+    })
+   getRepos() 
+}
+
+const getRepos = () => {
+    fetch(API_REPOS_URL, options)
+    .then(res => res.json())
+    .then(data => {
+       const forkedRepos = data.filter((repo) => repo.fork && repo.name.startsWith('project'))
+       forkedRepos.forEach((repo) => {
+           repoSection.innerHTML += `
+           <div class='repo-name' id='${repo.name}'>
+            <h2>${repo.name}</h2>
+            <p>Repo link: <a href='${repo.html_url}'>here</a></p>
+            <p>Default branch: ${repo.default_branch}</p>
+            <p>Recent update: ${new Date(repo.pushed_at).toLocaleDateString('sv-SE')}</p>
+           </div>`
+       })
+       getPullRequests(forkedRepos)
+       activateChart(forkedRepos.length)
+    })
+
+const getPullRequests = (forkedRepos) => {
+    forkedRepos.forEach(repo => {
+        fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options)
+        .then(res => res.json())
+        .then(data => {
+
+            const filterPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
+
+            if (filterPullRequests) {
+                document.getElementById(`${repo.name}`).innerHTML += `
+                <p>Pull request: <a href='${filterPullRequests.html_url}'>here</a></p>`
+            } else {
+                document.getElementById(`${repo.name}`).innerHTML += `
+                <p>Pull request by team member</p>`
+            }
+            if (filterPullRequests) {
+                getCommits(filterPullRequests.commits_url, repo.name) 
+            } else {
+                document.getElementById(`${repo.name}`).innerHTML += `
+                <p>Commits by team member</p>`
+            }
+        })
+    })
+}
+
+const getCommits = (commitsURL, repoName) => {
+    fetch(commitsURL)
+    .then((res) => res.json())
+    .then (data => {
+      document.getElementById(repoName).innerHTML += `
+      <p>Commits: ${data.length}</p>`
+  })
+}}
+
+getUser()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,62 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
 body {
-  background: #FFECE9;
-}
+  background: #EEE;
+  font-family: 'Source Code Pro', monospace;
+}
+
+.profile-img {
+  border-radius: 50%;
+  width: 10rem;
+  margin: 1rem;
+}
+
+.user-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.repo-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2rem;
+  padding: 2rem;
+}
+
+.repo-name {
+  background-color: #FFF;
+  padding: 1rem;
+  width: 20rem;
+}
+
+.repo-name a {
+  color: #F4845F;
+}
+
+.chart-container {
+  margin: auto;
+  width: 20rem;
+  padding: 1rem;
+}
+
+@media (min-width: 668px) {
+  .repo-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 1025px) {
+  .repo-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+  } 
+}