Technigo · Kras053 · Feb 24, 2022 · Feb 24, 2022 · Feb 25, 2022 · Feb 26, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+// .gitignore file
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,26 @@
 # 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.
+This week we created a GitHub tracker which uses GitHubs APIs to keep track of our finished projects and a chart to display how many are left.
 
 ## The problem
+We worked with fetching APIs and retrieving specific info from them:
+- A list of all repos that are forked from Technigo
+- username and profile picture
+- Most recent update (push) for each repo
+- Name of default branch for each repo
+- URL to the actual GitHub repo
+- Number of commits for each repo
+- It should be responsive (mobile first)
+- A chart of how many projects that are done so far, compared to how many you will do using Chart.js
 
-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 was accomplished by fetching and filtering the APIs with filter, startsWith, forEach, and find-methods and then using template literals ${} to displaying this on out webpage. 
 
-## View it live
+The issue of 60 fetches/hour being the limit was solved by using a token from GitHub in a secret js-file and gitignore-file.
 
-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.
+It was challenging to target the specific info in the APIs and find the right filtering method and parameters to use. 
+If I had more time I would like to find a way to put the third API at the top calling it with a const name instead which did not work. 
+I would also like to fetch pullrequest and commit stats from the projects that were in teams instead of default messages.
+And connect the chart to the pullrequests length instead of the forked projects length. 
+
+## View it live
+https://github-tracker-lo.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -1,4 +1,34 @@
-//DOM-selector for the canvas 👇
+//DOM-selector for the canvas
 const ctx = document.getElementById('chart').getContext('2d')
 
-//"Draw" the chart here 👇
+// the function that draws the chart of finished/remaining projects. 
+//It gets the value from line 60 in script.js where doughnuCounter and technigoRepos.length 
+// is passing the filtered repos length to the chart here
+
+const doughnutCounter = (projects) => {
+    const labels = [
+        'Finished projects',
+        'Remaining projects',
+      ];
+
+      const data = {
+        labels: labels,
+        datasets: [{
+        //here is the calculation for remaining projects
+          data: [projects, 19-projects],
+          label: 'My finished projects',
+          backgroundColor: ['rgb(217, 96, 152)', 'rgb(50, 82, 136)'],
+          borderColor: 'rgb(38, 0, 27)',
+        }]
+      };
+
+      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,28 @@
   <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=Nixie+One&family=Roboto:wght@300&display=swap" rel="stylesheet">
+
+  <!-- link to chart.js -->
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <main class="projects" id="projects">
+  <div class ="user-container"></div>
+  <div class="repo-container"></div>
 
   <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <div class="chart-container">
+  <canvas class="chart" id="chart"></canvas>
+  </div>
+  </main> 
 
+<!--this secret.js is the GitHub token so we can fetch more than 60 times/h-->
+  <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,117 @@
+const username = 'Kras053'
+const USER_URL =`https://api.github.com/users/${username}`
+const REPOS_URL =`https://api.github.com/users/${username}/repos`
+const repoContainer = document.querySelector('.repo-container')
+const userContainer = document.querySelector('.user-container')
+
+//The secret token from GitHub, we type the options const in the fetch to use it and not get 404 error
+const options = {
+    method: 'GET',
+    headers: {
+          Authorization: `token ${GITHUBTOKEN}`
+      }
+  }
+
+// my user info from GitHub wrapped in a clickable link to my GitHub page
+const userProfile = () => {
+	fetch(USER_URL, options)
+	.then((res) => res.json())
+	.then((data) => {
+	userContainer.innerHTML += `
+	<a href="${data.html_url}">
+    <img class="profile-image" src="${data.avatar_url}"/>
+    <span class="profile-name">Github tracker for ${data.login}</span>
+    </a>
+	`;
+  });
+};
+
+userProfile();
+
+//my repos in GitHub filtered on those that are forks from Technigo and our weekly projects
+const myRepos = () => {
+
+    fetch(REPOS_URL, options)
+    .then((response) => response.json())
+    .then((data) => {
+    // console.log(data)
+
+    const forkedRepos = data.filter(repo => repo.fork)
+    const technigoRepos = data.filter(repo => repo.name.startsWith('project'))
+    // console.log(forkedRepos)    
+    // console.log(technigoRepos)
+
+    // this function gets info from the filtered repos arrays and displays them on my page
+    // using repo.name as dynamic ID to also insert commits
+
+    technigoRepos.forEach((repo) => {
+        repoContainer.innerHTML += `
+            <div class="repo-cards" id="${repo.name}">
+                <h3><a href="${repo.html_url}"><b>${repo.name}</b></a> 
+                 (${repo.default_branch})</h3>
+                <p>Most recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+            </div> 
+            `
+        })
+
+    //need to invoke this next function here already, passing along the filtered repos 
+    //as an argument when calling the pull request function
+    getPullRequests(technigoRepos)
+
+    //Passing the filtered repos length to the chart in the file chart.js
+    doughnutCounter(technigoRepos.length)
+
+})
+}
+myRepos()
+
+const getPullRequests = (technigoRepos) => {
+    //this fetches all my pull requests for each filtered project. 
+    //because of the repo.name it did not work to use a const for it instead and placing it at the top. 
+
+    technigoRepos.forEach(repo => {
+    fetch(`https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`, options)
+    .then(res => res.json())
+    .then(data => {
+        //   console.log(data)
+
+    //this finds the pull requests, PRs, I made by comparing the user.login from the pull API
+    // with the owner.login in the filtered repo API
+
+    const myPullRequests = data.find((pull) => pull.user.login === repo.owner.login)
+    // console.log(myPullRequests)
+    //console.log(myPullRequests.html_url)
+
+
+    // here the PR link is printed or if no link a default message since in console it would say undefined. 
+    if (myPullRequests) {
+        document.getElementById(`${repo.name}`).innerHTML += 
+        `<a href="${myPullRequests.html_url}"> Pull request</a>`
+    } else {
+        document.getElementById(`${repo.name}`).innerHTML += 
+        `<p> Pull request made by teammate</p>`
+    }
+
+    //here is a first step to get the commits for each PR, and we add the dynamic id to pass on
+    // or default message that teammate did the commits
+    if (myPullRequests) {
+        getCommits(myPullRequests.commits_url, repo.name) 
+
+    } else {
+        document.getElementById(`${repo.name}`).innerHTML += 
+        `<p> Commits made by teammate</p>`
+    }  
+    })   
+
+// To get the commits from a PR we get the URL from the commits_url property in the PR json object 
+// and then do a fetch with that url.
+const getCommits = (URL, repoName) => {
+    fetch (URL, options)
+    .then((res) => res.json())
+    .then(data => {
+        document.getElementById(`${repo.name}`).innerHTML += `<p>Number of commits: ${data.length}</p>`
+        // console.log(data.length)
+    })
+    }
+    })
+    }
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,85 @@
+* {
+  margin: 0; 
+  padding: 0;  
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: content-box;
+  -webkit-font-smoothing: antialiased; 
+  text-rendering: optimizeLegibility;
+}
+
 body {
-  background: #FFECE9;
+  background: rgb(250, 238, 231);
+  font-family: 'roboto', sans-serif;
+}
+
+.user-container img {
+  width: 250px;
+  display: grid;
+  grid-template-columns: 1, 1fr;
+  justify-items: center;
+  place-items: center;
+  margin: 15px;
+  border-style: inset;
+  border-width: 4px;
+  border-color:rgb(50, 82, 136);
+}
+
+.user-container a {
+  margin: 10px;
+  color:black;
+  text-decoration: none;
+  display: grid;
+  grid-template-columns: 1, 1fr;
+  justify-items: center;
+  place-items: center;
+  margin-bottom: 35px;
+}
+
+.repo-container {
+  display: grid;
+  grid-template-columns: 1, 1fr;
+  justify-items: center;
+  place-items: center;
+  grid-gap: 40px;
+  margin-bottom: 55px;
+}
+
+.repo-container a {
+text-decoration: none;  
+color:rgb(36, 161, 156);
+}
+
+.chart {
+max-width: 350px; 
+max-height: 350px; 
+}
+
+.chart-container {
+display: grid;
+place-items: center;
+margin-top: 25px;
+}
+
+@media (min-width: 668px) {
+.repo-container {  
+grid-template-columns: repeat(2, 1fr);
+justify-items: center;
+place-items: center;
+}
+}
+
+@media (min-width: 1024px) {
+.repo-container {
+ grid-template-columns: repeat(3, 1fr); 
+}  
+
+.user-container img:hover {
+  border-color:rgb(217, 96, 152);  
+} 
+
+.repo-container a:hover {
+  background-color: black;
+  color: rgb(217, 96, 152);
+    }  
 }