Technigo · faypi · Feb 23, 2022 · Feb 26, 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
@@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t
 
 ## 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://fay-github-tracker.netlify.app/
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,28 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const drawChart = (dataPoints) => {
+
+    const data = {
+        labels: ["Finished Projects", "Unfinished Projects"],
+        datasets: [{
+          label: '# of Projects',
+          data: dataPoints,
+          backgroundColor: [
+            'rgb(54, 162, 235)',
+            'rgb(255, 205, 86)'
+          ],
+          borderWidth: 1,
+          hoverOffset: 4
+        }]
+    };
+
+
+    const config = {
+        type: 'doughnut',
+        data: data,
+      };
+
+    const myChart = new Chart(ctx, config)
+}
diff --git a/code/index.html b/code/index.html
@@ -6,16 +6,25 @@
   <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=Titillium+Web:wght@200;300;400;600;700;900&display=swap"
+    rel="stylesheet">
 </head>
 <body>
-  <h1>GitHub Tracker</h1>
+  <div class="profile-card">
+    <div id="profile"></div>
+    <canvas id="chart"></canvas>  
+  </div>
+
   <h2>Projects:</h2>
+  <!-- This will be used to draw the chart 👇 -->
   <main id="projects"></main>
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
 
+  <script src="./secret.js"></script>
   <script src="./script.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
   <script src="./chart.js"></script>
 </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,161 @@
+const username = 'faypi'
+const API_URL = `https://api.github.com/users/${username}/repos`
+const API_USER_PROFILE = `https://api.github.com/users/${username}`
+const projects = document.getElementById("projects");
+const profile = document.getElementById("profile");
+const totalProjectsDuringBootcamp = 19;
+// const API_TOKEN = TOKEN || process.env.API_KEY;
+const options = {
+    method: 'GET',
+    headers: {
+        Authorization: `token ${API_TOKEN}` // you need to paste your token over here.
+    }
+}
+
+fetch(API_USER_PROFILE, options)
+    .then(res => res.json())
+    .then(data => {
+        const name = data.name
+        const profilePic = data.avatar_url
+        // const memberSince = data.created_at
+        const followers = data.followers
+        const following = data.following
+        profile.innerHTML += ` 
+            <h1>${username}'s GitHub Tracker</h1>
+            <div class="profile-details">
+                <img src=${profilePic} />
+                <span id="fullname">${name}</span>
+                <span id="username">${username}</span>
+                <span id="following">following ${following}</span>
+                <span id="followers">followed by ${followers}</span>
+            </div>
+        `
+    }
+    )
+
+
+fetch(API_URL, options) // options object is passed as 2nd argument to fetch() function.
+    .then(res => res.json())
+    .then(data => {
+        const myRepos = data.filter((forkedRepos) => forkedRepos.fork == true && forkedRepos.name.startsWith("project-"))
+        const numberOfProjects = myRepos.length
+        drawChart([numberOfProjects, totalProjectsDuringBootcamp - numberOfProjects])
+        getPullRequests(myRepos)
+    });
+
+//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/repos/technigo/' + repo.name + '/pulls' + '?per_page=100', options)
+            .then(res => res.json())
+            .then(data => {
+
+                const repoBranchName = repo.default_branch
+                const repoName = repo.name
+                const repoUrl = repo.html_url
+
+                projects.innerHTML += `
+                <div class="repo-card">
+                    <div class="repo" id=${repoName}>
+                    <h2>
+                        <a href=${repoUrl}> 
+                            ${repoName}:${repoBranchName}
+                        </a>
+                    </h2>
+                    </div>
+                </div>
+                `
+
+
+                const myPullRequests = data.filter((myPR) => myPR.user.login == repo.owner.login);
+                handlePullRequest(repoName, myPullRequests)
+            })
+    })
+
+}
+
+const handlePullRequest = (repoElementId, myPullRequests) => {
+
+    //Get all the PRs for each project.
+    myPullRequests
+        .forEach((pullRequest) => {
+            const prTitle = pullRequest.title
+            const prUrl = pullRequest.html_url
+            const repo = document.getElementById(repoElementId);
+            repo.innerHTML += `
+            <div class="pull-request">
+                <span>PR: <a href=${prUrl}> ${prTitle}</a></span>
+            </div>
+          `
+        })
+    myPullRequests
+        .map(pullRequest => pullRequest.commits_url)
+        .forEach(commitUrl => {
+            fetch(commitUrl + "?per_page=100", options)
+                .then(res => res.json())
+                .then(data => {
+                    const mostRecentCommit = data[data.length - 1]
+                    const commitMessage = mostRecentCommit.commit.message
+                    const commitAuthor = mostRecentCommit.author.login
+                    const commitUrl = mostRecentCommit.html_url
+                    const commitDateString = mostRecentCommit.commit.author.date
+                    const commitDate = Date.parse(commitDateString)
+                    const commitTimeSince = timeSince(commitDate)
+                    const repo = document.getElementById(repoElementId);
+                    repo.innerHTML += `
+                    <div>
+                        <p>${data.length} commits</p>
+                        <p>latest: <a href=${commitUrl}>${commitMessage}</a> by ${commitAuthor} ${commitTimeSince}</p>
+                    </div>
+                    `
+
+
+                    myPullRequests
+                        .map(pullRequest => pullRequest.review_comments_url)
+                        .forEach(reviewCommentUrl => {
+                            fetch(reviewCommentUrl + "?per_page=100", options)
+                                .then(res => res.json())
+                                .then(data => {
+                                    const repo = document.getElementById(repoElementId);
+                                    repo.innerHTML += `
+                                        <div class="comments">
+                                            <span>received ${data.length} comments</span>
+                                        </div>
+                                    `
+                                })
+                        })
+                })
+        })
+
+}
+
+function timeSince(date) {
+
+    var seconds = Math.floor((new Date() - date) / 1000);
+
+    var interval = seconds / 31536000;
+
+    if (interval > 1) {
+        return Math.floor(interval) + " years ago";
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+        return Math.floor(interval) + " months ago";
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+        return Math.floor(interval) + " days ago";
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+        return Math.floor(interval) + " hours ago";
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+        return Math.floor(interval) + " minutes ago";
+    }
+    return Math.floor(seconds) + " seconds ago";
+}
diff --git a/code/style.css b/code/style.css
@@ -1,3 +1,59 @@
 body {
-  background: #FFECE9;
+  margin: 0 auto;
+  font-family: 'Titillium Web', sans-serif;
+}
+
+#projects {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.repo-card {
+  max-width: 250px;
+  margin-bottom: 30px;
+  border: 1px solid #776c6c42;
+}
+
+.repo {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.repo a {
+  color: inherit;
+}
+
+#chart {
+  margin: 20px 0;
+}
+
+.profile-card {
+  display: flex;
+  flex-direction: column;
+  max-width: 250px;
+  margin: 0 auto;
+}
+
+.profile-details {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.profile-details img {
+  width: 100%;
+  border-radius: 30%;
+}
+
+h1, h2 {
+text-align: center;
+}
+
+@media (min-width: 530px) {
+  #projects {
+    justify-content: space-between;
+  }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ Describe how you approached to problem, and what tools and techniques you used t

		## 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://fay-github-tracker.netlify.app/