fetched github Api, filtered projects from technigo and added a doughnut

MT-dotse · MT-dotse · commit 7f2b0cb7c6b6 · 2021-09-28T09:58:35.000+03:00
diff --git a/TODO b/TODO
@@ -0,0 +1,30 @@
+1) fetch the repos and console log them 
+2) get them in the browser 
+3) filter out the technigo repos
+4) test chart library
+//Remember to pass along your filtered repos as an argument when
+//you are calling this function
+
+const getPullRequests = (repos) => {
+  //Get all the PRs for each project.
+  repos.forEach((repo) => {
+    fetch('https://api.github.com/users/MT-dotse/repos' + repo.name + PULLS)
+      .then((res) => res.json())
+      .then((data) => {
+        //TODO
+        let keep;
+        if (pull.user.login === repo.owner.login) {
+          keep = pull.user.login;
+          commitsURL(keep);
+        }
+        console.log('Hello from script js');
+
+        //1. Find only the PR that you made by comparing pull.user.login
+        // with either USER or repo.owner.login
+        //2. Now you're able to get the commits for each repo by using
+        // the commits_url as an argument to call another function
+        //3. You can also get the comments for each PR by calling
+        // another function with the review_comments_url as argument
+      });
+  });
+};
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,22 @@
 //DOM-selector for the canvas 👇
-const ctx = document.getElementById('chart').getContext('2d')
+const ctx = document.getElementById('chart').getContext('2d');
 
 //"Draw" the chart here 👇
+
+const drawChart = (amount) => {
+  const config = {
+    type: 'doughnut',
+    data: {
+      labels: ['Finished Projects', 'Projects left'],
+      datasets: [
+        {
+          label: 'My First Dataset',
+          data: [amount, 20 - amount], // 5 finished projects and 15 projects remaining
+          backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)'],
+          hoverOffset: 4,
+        },
+      ],
+    },
+  };
+  const myProjects = new Chart(ctx, config); //Taking two arguments: 1) where to put 'ctx' and 2) what to put 'config'
+};
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <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>
-  <link rel="stylesheet" href="./style.css" />
-</head>
-<body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <head>
+    <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>
+    <link rel="stylesheet" href="./style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  </head>
+  <body>
+    <h1>GitHub Tracker</h1>
+    <h2>Projects:</h2>
+    <main id="projects"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <!-- This will be used to draw the chart 👇 -->
+    <canvas id="chart"></canvas>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <script src="./script.js"></script>
+    <!-- Links to the js file -->
+    <script src="./chart.js"></script>
+    <!-- Links to the chart -->
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,30 @@
+// The DOM selectors
+const projectContainer = document.getElementById('projects');
+
+// URLs stored in variables
+const USER = 'MT-dotse'; //my github name stored in the variable USER
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+
+//Wapping the fetch REPOS_URL in a function
+const getRepos = () => {
+  fetch(REPOS_URL)
+    .then((response) => response.json()) //a placeholder waiting for the information
+    .then((data) => {
+      console.log(data);
+      //data.forEach((repo) => console.log(repo.name));
+
+      //Filtering out the projects that are both forked and starting with the name "project - "
+      const forkedRepos = data.filter(
+        (repo) => repo.fork && repo.name.startsWith('project-')
+      );
+
+      // printing out the filtered projects stored in forkedRepos
+      // Adding += to show all the projects and not only just one
+      forkedRepos.forEach(
+        (repo) => (projectContainer.innerHTML += `<h3> ${repo.name} </h3>`)
+      );
+
+      drawChart(forkedRepos.length);
+    });
+};
+getRepos();
