Technigo · vanhaj · Feb 24, 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,11 @@
 # 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.
+More learnings about APIs
 
 ## 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 was very challenging, and with too little knowledge to tackle this weeks project.
 
 ## 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://pedantic-goldwasser-9663c7.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,24 @@
 //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: ['My completed projects', 'Projects left to do'],
+      datasets: [
+        {
+          label: 'Dataset',
+          data: [amount, 19 - amount],
+          backgroundColor: ['#ddbea9', '#b7b7a4'],
+          borderColor: '#22223b',
+        },
+      ],
+    },
+  };
+  const myChart = new Chart(document.getElementById('chart'), config);
+};
+
+// const chart = new Chart(ctx, config);
diff --git a/code/index.html b/code/index.html
@@ -1,21 +1,34 @@
 <!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>
+    <main class="user-display" id="userDisplay">
+      <section class="profile">
+        <div class="user-info" id="userInfo"></div>
+      </section>
+    </main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+    <div class="header">
+      <h1>GitHub Tracker</h1>
+      <h2>Projects:</h2>
+    </div>
 
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
-</html>
+    <!-- This will be used to draw the chart 👇 -->
+    <section class="chart">
+      <canvas id="chart"></canvas>
+    </section>
+
+    <main id="projects" class="projects"></main>
+
+    <script src="./secret.js"></script>
+    <script src="./script.js"></script>
+    <script src="./chart.js"></script>
+  </body>
+</html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,96 @@
+const username = 'vanhaj',
+  API_USER = `https://api.github.com/users/${username}`,
+  API_URL = `https://api.github.com/users/${username}/repos`,
+  userDisplay = document.getElementById('userDisplay'),
+  projects = document.getElementById('projects');
+
+// token
+const options = {
+  method: 'GET',
+  headers: {
+    Authorization: `token ${API_TOKEN}`,
+  },
+};
+
+// username and profile picture
+const myProfile = () => {
+  fetch(API_USER, options)
+    .then((res) => res.json())
+    .then((data) => {
+      userDisplay.innerHTML += `
+      <div class='profile'>
+        <img class='user-img' src=${data.avatar_url} alt='image of user'/>
+        <h2 class="user-info">
+          <a href='${data.html_url}'>${data.login}</a>
+        </h2>
+      </div>
+      `;
+    });
+};
+myProfile();
+
+// repositories
+const myRepos = () => {
+  fetch(API_URL, options)
+    .then((res) => res.json())
+    .then((data) => {
+      console.log(data, 'without filter');
+
+      //filtering out only those that starts with projects
+      const filteredProject = data.filter(
+        (repo) => repo.fork && repo.name.startsWith('project')
+      );
+
+      filteredProject.forEach((repo) => {
+        projects.innerHTML += `
+        <div class='repo-card'>
+          <a href='${repo.html_url}'>
+            <p>Repo name: ${repo.name}</p>
+          </a>
+          <p>Default branch: ${repo.default_branch}</p>
+          <p>Last push: ${new Date(repo.pushed_at).toDateString()}
+          <p id =${repo.name}>Number of commits: </p>
+        </div>
+        `;
+      });
+
+      getPullRequests(filteredProject);
+      drawChart(filteredProject.length);
+    });
+};
+
+//fetches 100 pulls
+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`
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        const myPS = data.find((pull) => pull.user.login === repo.owner.login);
+
+        // if PS was made by user -> getting the commits (getCommits)
+        if (myPS) {
+          getCommits(myPS.commits_url, repo.name);
+        } else {
+          document.getElementById(
+            `${repo.name}`
+          ).innerHTML = `No pull request was done`;
+        }
+      });
+  });
+};
+
+// Getting the commits
+const getCommits = (myCommits, myRepoName) => {
+  fetch(myCommits)
+    .then((res) => res.json())
+    .then((data) => {
+      document.getElementById(`${myRepoName}`).innerHTML += data.length;
+      //`Number of commits: ${data.length}`;
+      // console.log('nu då?');
+    });
+};
+
+myRepos();
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,78 @@
+/* * {
+} */
+
 body {
-  background: #FFECE9;
-}
+  background: #edede9;
+  font-family: 'Times New Roman', Times, serif;
+}
+
+.profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.user-img {
+  border-radius: 50%;
+  width: 200px;
+}
+
+/* .user-info {
+} */
+
+a {
+  color: rgb(0, 0, 0);
+  text-decoration: none;
+  font-size: 20px;
+}
+
+a:hover {
+  color: rgb(161, 138, 114);
+}
+
+.header {
+  display: grid;
+  justify-items: center;
+}
+
+h1 {
+  margin-bottom: 0px;
+}
+
+h2 {
+  margin-top: 10px;
+}
+
+.chart {
+  height: 300px;
+  width: 300px;
+  margin: auto;
+}
+
+.repo-card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  background-color: #ffe8d6;
+  border-radius: 10px;
+  width: 300px;
+  margin: auto;
+  margin-top: 20px;
+  border-style: solid;
+}
+
+/* tablet */
+@media (min-width: 426px) and (max-width: 768px) {
+  .projects {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+/* desktop */
+@media (min-width: 769px) {
+  .projects {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}