Technigo · Neaa99 · Feb 22, 2022 · Feb 22, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# 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/token.js
diff --git a/README.md b/README.md
@@ -1,13 +1,11 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+Week 7 @ Technigo Bootcamp
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This week I made a Github tracker, were you can scroll through my Technigo repositories. It also includes a chart of compleated and remaining projects in the Bootcamp.
 
-## 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?
+Made with JS, using API and authorization keys.
 
 ## 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://project-github-tracker-linnea-frisk.netlify.app/
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 = (repos) => {
+
+
+const labels = [
+    'Compleated Projects',
+    'Remaining Projects',
+  ];
+
+  const data = {
+    labels: labels,
+    datasets: [{
+      label: 'My First dataset',
+      backgroundColor: ['#B6766D', '#F8E8DE'],
+      borderColor: '#f7e9e7',
+      data: [repos, 18-repos],
+    }]
+  };
+
+  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
@@ -4,18 +4,41 @@
   <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>
+
+<!-- OG tags -->
+<meta property="og:title" content="Linnea Frisks GitHub Tracker" />
+<meta property="og:description" content="A gitHub Tracker, tracing all my project during my education at Technigo"/>
+<meta property="og:image" content="https://i.postimg.cc/Yqct88T6/Sk-rmklipp-55.png"/>
+<meta property="og:url" content="https://project-github-tracker-linnea-frisk.netlify.app/"/>
+
+
+  <!-- CHART LINK -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
+
+  <!-- GOOGLE FONTS -->
+  <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=Open+Sans:wght@300&family=Poppins:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">
+
+  <title>Project GitHub Tracker Neaa99</title>
   <link rel="stylesheet" href="./style.css" />
 </head>
+
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <main class="header" id="header"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <div class="myDiv"></div>
+  <section class="container" id="container"></section>
 
-  <script src="./script.js"></script>
+  <!-- Chart 👇 -->
+
+  <div id="canvas" class="chart-container">
+    <canvas id="chart"></canvas>
+  </div>
+
+  <script src="./token.js"></script>
   <script src="./chart.js"></script>
+  <script src="./script.js"></script>
 </body>
-</html>
+</html>
+
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,100 @@
+// DOM SELECTORS
+const USER = 'Neaa99'
+const technigoRepos = document.getElementById('technigoRepos')
+const container = document.getElementById('container')
+const header = document.getElementById('header')
+
+const API_TOKEN = TOKEN || process.env.API_KEY;
+
+// API
+const API_USER = `https://api.github.com/users/${USER}`
+const API_REPOS = `https://api.github.com/users/${USER}/repos`
+
+// Authorization
+const options = {
+    method: 'GET',
+    headers: {
+          Authorization: `token ${API_TOKEN}`
+      }
+  }
+
+
+fetch(API_USER, options)
+    .then ((res) => {
+        return res.json()
+    })
+    .then ((data) => {
+        console.log(data)
+        header.innerHTML = `
+        <a class="img-link" target="_blank" href="https://www.linkedin.com/in/linnea-frisk-59a170206/"><img src="${data.avatar_url}" width="100px" alt="User image"></a>
+            <div class="header-text">
+            <p>${data.name}</p>
+                <h1><span>${data.login}</span></h1>
+                <h1>GitHub Tracker</h1>
+                <p>${data.bio}</p>
+            </div>`
+    })
+
+    fetch(API_REPOS, options)
+        .then ((res) => {
+            return res.json()
+        })
+        .then((data) => {
+            console.log(data)
+            const technigoRepositories = data.filter(repo => 
+                repo.name.includes('project-') && repo.fork === true)
+
+            technigoRepositories.forEach((repo) => {
+             container.innerHTML += `
+                <div class="technigo-repos" id="technigoRepos">
+                    <a class="netlify-link" target="_blank" href="https://fascinated-jury-3fb.notion.site/Netlify-5e83f8322f8d4b92a96b4f0e8c2ccf96"><h2 id="repoName">${repo.name}</h2></a>
+                    <h3 id="description">${repo.description}</h3>
+                    <div class="info">
+                        <p><span>• Last push:</span>  ${new Date(repo.pushed_at).toDateString()}</p>
+                        <p><span>• Branch:</span> ${repo.default_branch}</p>
+                        <p><span>• Main language:</span> ${repo.language}</p>
+                        <p id="commit-${repo.name}"><span>• Number of commits:</span> </p>
+                    </div>
+                    <p> <a class="repo-link" target="_blank" href="${repo.html_url}">Link to Repo</a></p>
+                </div>
+                `
+            })
+            drawChart(technigoRepositories.length) // Calling the chart
+            getPullRequests(technigoRepositories) // Calling the pull req and commits function
+        })
+
+
+const getPullRequests = (repos) => {
+    //Get all the PRs for each project.
+    repos.forEach(repo => {
+      fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options)
+      .then(res => res.json())
+      .then(data => {
+        const commits = document.getElementById(`commit-${repo.name}`)
+
+              const pulls = data.find((pull) => pull.user.login === repo.owner.login);
+
+              fetchCommits(pulls.commits_url, repo.name)
+              console.log(pulls.commits_url)
+
+          })
+    })
+  }
+
+  const fetchCommits = (myCommitsUrl, myRepoName) => {
+    fetch(myCommitsUrl, options)
+        .then((res) => {
+            return res.json()
+        })
+        .then((data) => {
+            document.getElementById(`commit-${myRepoName}`).innerHTML += data.length
+
+        })
+  }
+
+  // Center canvas/chart
+  window.onload = window.onresize = function() {
+    const canvas = document.getElementById('canvas');
+    canvas.width = window.innerWidth * 0.8;
+    canvas.height = window.innerHeight * 0.8;
+}