Technigo · amandatange · Feb 23, 2022 · Feb 25, 2022 · Feb 25, 2022 · Feb 26, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+code/secret.js
diff --git a/README.md b/README.md
@@ -1,13 +1,21 @@
 # GitHub Tracker
 
-Replace this readme with your own information about your project.
+Assignment is to build a site that shows info about our github account and the projects we've created to far.
+The following points is what is required to be shown.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+- A list of all repos that are forked ones from Technigo
+- Your username and profile picture
+- Most recent update (push) for each repo
+- Name of your default branch for each repo
+- URL to the actual GitHub repo
+- Number of commit messages for each repo
+- All pull requests
+- A chart of how many projects you've done so far, compared to how many you will have done.
 
 ## 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?
+I used fetch to get the user data, which required 3 fetches - user data, pull requests, and commits. The styling was kept simple since the focus was to be able to display all the different data that was required. The biggest problem was data retrieval and getting it to actually show up on the site. The second biggest problem I had was that I had set up the fetches to all finish before moving on to displaying the data so the site took a very long time to load. That has been slightly remedied by splitting up the code into separate fetches but it still takes a fairly long time for the site to load.   
 
 ## 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://github-tracker-at.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,18 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const myChart = (numberOfProjects) => {
+  new Chart(ctx, {
+    type: 'pie',
+    data: {
+      labels: ['Completed', 'To be done'],
+      datasets: [{
+        label: 'My First dataset',
+        backgroundColor: ['#cc5500', '#3a3a3a'],
+        borderColor: '#F4F4F4',
+        data: [numberOfProjects, 19 - numberOfProjects],
+      }]
+    }
+  })
+}
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,34 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project GitHub Tracker</title>
   <link rel="stylesheet" href="./style.css" />
+  <!-- Link to font family Montserrat -->
+  <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
-  <h2>Projects:</h2>
-  <main id="projects"></main>
+  <header>
+    <!-- the link to user's github to display from the start since it takes so long to load -->
+    <section id='usr' class='usr-name-img-container'><h1><a href='https://github.com/amandatange'>@amandatange</a></h1></section>
+  </header>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <main id="projects" class='project-container'>
+
+  </main>
+
+<!-- Chart showing how many projects have been done out of the total 19 -->
+  <section class="chart-container">
+    <canvas id="chart" class='chart'></canvas>
+  </section>
+
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
-  <script src="./script.js"></script>
   <script src="./chart.js"></script>
+  <script src='./secret.js'></script>
+  <script src="./script.js"></script>
+
+
+
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,93 @@
+//DOM selectors
+const main = document.getElementById("projects"); // main portion of the site, contains all projects
+const usr = document.getElementById("usr"); // section in header that holds username and profile pic
+
+//Global variables
+const usrName = 'amandatange';
+let forkedRepos = []; // will contain filtered list of repos that have been forked
+let projectRepos = []; // will contain filtered list of forked repos with names that start with "project"
+
+const API_REPOS = `https://api.github.com/users/${usrName}/repos`
+
+const options = {
+    method: 'GET',
+    headers: {
+        Authorization: `token ${API_TOKEN}`
+    }
+}
+
+const fetchData = () => {
+    fetch(API_REPOS, options)
+    .then((res) => res.json())
+    .then((data) => { 
+        forkedRepos = data.filter(repo => repo.fork);
+        projectRepos = forkedRepos.filter(repo => repo.name.startsWith('project'));
+
+        const profilePic = data[0].owner.avatar_url;
+        const LinkToProfile = data[0].owner.html_url;
+
+        // for the user presentation
+        usr.innerHTML = `
+            <img class='avatar_url_pic' src='${profilePic}'/>
+            <h1><a href='${LinkToProfile}'>@${usrName}</a></h1>
+        `;
+
+        //Send completed projects length to build chart
+        myChart(projectRepos.length)
+
+        //Call function to fetch pull requests
+        fetchPR()
+    })
+}
+
+const fetchPR = () => {
+    for (let i = 0; i < projectRepos.length; i++) {
+        const repo = projectRepos[i];
+        const API_PR = `https://api.github.com/repos/technigo/${repo.name}/pulls?per_page=100`
+
+        //  since not all projects have a PR I don't have access to the commits from the PR API for all of them 
+        //  so I chose to use the commits api from the first fetch
+        //  but I think this way the number of commits includes those made by the technigo team before I forked the project?
+        const API_COMMITS = repo.commits_url.replace("{/sha}", ""); 
+
+        fetch(API_PR, options)
+            .then((resPR) => resPR.json())
+            .then((dataPR) => {
+                //filter for every PR to match my profile (or in the case of the weather app, to michael's profile and id for the PR)
+                const pull = dataPR.filter(pr => pr.url.includes(repo.name) 
+                && (pr.user.login === repo.owner.login || pr.user.login === "michaelchangdk" && pr.id === 856976386))
+
+                fetch(API_COMMITS, options)
+                    .then((commits_res) => commits_res.json())
+                    .then((commits_data) => {
+                        //  sending the PR, repo and number of commits to the function that posts the data on the site
+                        postInfo(pull, repo, commits_data.length)
+                    })
+            })
+    }
+}
+
+
+const postInfo = (pull, repo, numberOfCommits) => {
+
+    const update = new Date(repo.pushed_at).toLocaleDateString('en-GB');
+
+    //  the tags have classes that aren't used right now 
+    //  but I would like to try using them to style the layout with a more a advanced grid layout
+    main.innerHTML += `
+        <section id='${repo.name}' class='project'>
+            <h3 class='repo-name'>${repo.name}</h3>
+            <p id='repoURL' class='repo-url'>Link to repo: <a href='${repo.html_url}'><span>here</span></a></p>
+            <p id='defaultBranch' class='default-branch'>Default branch: <span>${repo.default_branch}</span></p>
+            <p id='recentPush' class='recent-push'>Most recent update: <span>${update}</span></p>
+            <p id='numberCommits' class='number-commits'>Number of commits: <span>${numberOfCommits}</span></p>
+        </section>`;
+    //If the repo doesn't have a PR it won't add this data
+    if (pull.length !== 0) {
+        const PRLink = pull[0].html_url;
+        document.getElementById(`${repo.name}`).innerHTML += `
+        <p>Pull request: <a href='${PRLink}'><span>here</span></a></p>`
+    }
+}
+
+fetchData()
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,106 @@
+:root {
+  --primary: #cc5500;
+  --secondary: #272727;
+}
+
+
 body {
-  background: #FFECE9;
-}
+  letter-spacing: .1rem;
+  font-family: monospace;
+  margin: 0;
+}
+
+header {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  font-family: 'Montserrat', sans-serif;
+  background-color: var(--primary);
+  color: var(--secondary);
+  margin: 0;
+  padding: 5vw;
+  height: 20vh;
+}
+
+h1 {
+
+  font-size: max(1.5rem, 5vw);
+  margin: 0;
+  font-weight: 400;
+  text-shadow: 3px 3px 5px #27272666;
+}
+
+a {
+  text-decoration: none;
+  color: #f4f4f4;
+}
+
+h2 {
+  margin-left: 1rem;
+}
+
+span {
+  color: var(--primary);
+}
+
+.project a {
+  font-weight: bolder;
+}
+
+.usr-name-img-container {
+  display: flex;
+  align-items: center;
+}
+
+.avatar_url_pic {
+  max-width: max(10vw, 100px);
+  border-radius: 100%;
+  margin: 1rem;
+  box-shadow: 3px 3px 5px #CF750066;
+}
+
+.project-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  width: 100vw;
+  font-size: 1.5em;
+}
+
+.project {
+  background-color: #F4F4F4;
+  padding: 1rem;
+  margin: 1rem;
+}
+
+.project:hover {
+  transition: background-color 500ms ease;
+  background-color: #f0d9c7;
+} 
+
+.chart-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+}
+
+.chart {
+  max-width: min(80vw, 400px);
+  max-height: min(80vh, 400px);
+}
+
+@media (min-width: 667px) and (max-width: 1024px) {
+  .project-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (min-width: 1025px) {
+  .project-container {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  h2 {
+    margin-left: 5vw;
+  }
+}