HedvigM Project GitHub Tracker

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.
+The task was to fetch repos from GitHub and use the information on the website. 
 
 ## The problem
+I had a methodological approach to the problem and solved one task at the time. I thing the fetching and the javaScript part of the task went really well, but i have struggled a bit with the CSS part. I did'nt have the same methodological approach to the CSS, i guess i miss calculated how difficult it was. So i had to redo some things in the very end. 
 
-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'm still not so pleased with the CSS turnout. If i had more time i would make the username and profile picture appear nicer, in line. 
 
 ## 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://elegant-curran-a4a3c9.netlify.app

code/app.js

@@ -0,0 +1,108 @@
+const USER = ''; // !!! Place your user over here !!!
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`;
+
+const projectsContainer = document.getElementById('projects');
+
+const fetchRepositories = () => {
+	fetch(REPOS_URL)
+		.then((res) => res.json())
+		.then((data) => {
+			const technigoRepositories = data.filter(
+				(repo) => repo.name.includes('project-') && repo.fork
+			);
+
+			technigoRepositories.forEach((repo) => {
+				projectsContainer.innerHTML += `
+          <div>
+            <a href="${repo.html_url}">${repo.name} with default branch ${
+					repo.default_branch
+				}</a>
+            <p>Recent push: ${new Date(repo.pushed_at).toDateString()}</p>
+            <p id="commit-${repo.name}">Commits amount: </p>
+          </div>
+        `;
+
+				// // Approach number 1
+				// fetchPullRequestsSingle(repo);
+			});
+
+			// Approach number 2
+			fetchPullRequestsArray(technigoRepositories);
+
+			// Draw chart with technigoRepos data
+			drawBarChart(technigoRepos);
+		});
+};
+
+// // Approach number 1
+// const fetchPullRequestsSingle = (singleRepository) => {
+// 	fetch(singleRepository);
+// };
+
+// Approach number 2
+const fetchPullRequestsArray = (allRepositories) => {
+	allRepositories.forEach((repo) => {
+		const PULL_URL = `https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`;
+
+		fetch(PULL_URL)
+			.then((res) => res.json())
+			.then((data) => {
+				const myPullRequest = data.find(
+					(pull) => pull.user.login === repo.owner.login
+				);
+
+				// Detect if we have pull request or not.
+				// If yes - call fetchCommits function
+				// If no - inform user that no pull request was yet done
+				if (myPullRequest) {
+					fetchCommits(myPullRequest.commits_url, repo.name);
+				} else {
+					document.getElementById(`commit-${repo.name}`).innerHTML =
+						'No pull request yet done :(';
+				}
+			});
+	});
+};
+
+const fetchCommits = (myCommitsUrl, myRepoName) => {
+	fetch(myCommitsUrl)
+		.then((res) => res.json())
+		.then((data) => {
+			document.getElementById(`commit-${myRepoName}`).innerHTML += data.length;
+		});
+};
+
+fetchRepositories();
+
+
+
+/* TODO:
+1. få ut infon om commits på sidan
+2. få ut commitsen i den rätta rutan
+
+
+3. titta på hur Max hanterade "dates" från lektionen 
+*/
+
+
+// Trying to push up into the innerHTML projects
+  /*  console.log('FETCHED COMMITS', fetchedCommits)
+      document.getElementById(`commit-${repo.name}`).innerHTML =
+      `Number of commits in this project: ${fetchedCommits.length}`; */ 
+    /*   projects.innerHTML += `
+      <p>Number of commits in this project: ${fetchedCommits.length}</p>
+      `
+
+
+
+	  document.getElementById(`commits-${pullRequest.commits_url}`).innerHTML = `There are ${fetchedCommits.length} commits`)};
+
+
+<p id="commits-${pullRequest.commits_url}">ooops, there are no commits in this projet</p>
+
+ document.getElementById(`commits-${pullRequest.commits_url}`).innerHTML += `Number of commits: ${fetchedCommits.commits_url}`;
+
+_____________
+ <p id="commits-${.name}">No Commit Yet</p>
+
+  document.getElementById(`commits-${fetchedCommits.name}`).innerHTML += `Antalet Commits: ${fetchedCommits.length}`;

code/chart.js

@@ -2,3 +2,28 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+
+
+const drawChart = (amount) => {
+    const config = {
+        type: 'doughnut',
+        data: {
+            labels: [
+              'Finished projects',
+              'Projects to go',
+            ],
+            datasets: [{
+              label: 'My First Dataset',
+              data: [amount, 19-amount],
+              backgroundColor: [
+                'rgb(161, 168, 143)',
+                'rgb(119, 133, 161)',
+              ],
+              hoverOffset: 4
+            }]
+        }
+      };
+
+    const chart = new Chart(ctx, config)
+}

code/index.html

@@ -6,15 +6,32 @@
   <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>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com"> 
+
 
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
+  <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=Stardos+Stencil&display=swap" rel="stylesheet">
 
+</head>
+
+<body>
+<header>
+  <h1 class="break">GitHub<br/> Tracker</h1>
+  <h1 class="not-break">GitHub Tracker</h1>
+</header>
+<div class="content">
+    <section id="profile-container" class="profile-container">
+    </section>
+    <section id="project-container" class="project-container">
+      <h2>Forked Technigo Projects:</h2>
+      <main id="projects" class="projects"></main>
+    </section>
+
+  <canvas id="chart" class="canvas"></canvas>
+</div>
+  <footer><h1>Hedvig Mejstedt 🦁</h1></footer>  
   <script src="./script.js"></script>
   <script src="./chart.js"></script>
 </body>

code/script.js

@@ -0,0 +1,83 @@
+const projects = document.getElementById("projects")
+const profile = document.getElementById("profile")
+const profileContainer = document.getElementById("profile-container")
+const projectContainer = document.getElementById("project-container")
+const userName = 'HedvigM'
+
+
+//^^^^^^^^^^^^^^^^^^^^^^ REPOS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^//
+
+const repos = `https://api.github.com/users/${userName}/repos`
+fetch(repos)
+  .then(response => response.json())
+  .then(data => {
+    console.log(data)
+      //Fetching only the forked repos and the ones starts with "project" from my GitHub account. 
+      const forkedRepos = data.filter(repo => repo.fork && repo.name.startsWith('project'))
+
+
+    //Username and userpic
+    profileContainer.innerHTML+= `
+      <img class="img" src="${data[0].owner.avatar_url}" alt="profile picture"> 
+      <a href="${data[0].owner.html_url}"><h2>${data[0].owner.login}</h2></a>
+    ` 
+
+    // Repos and fetched pulls from the functions down under.
+    forkedRepos.forEach((repo) => projects.innerHTML += `
+      <div class="repos" id="repos">
+
+
+        <a href="${repo.html_url}"><h3>${repo.name.substring(8).replace("-"," ")}</h3></a>
+
+
+        <p>The default branch is: ${repo.default_branch}</p>
+        <p>The latest push: ${new Date(repo.pushed_at).toLocaleDateString()}</p>
+        <p id="pull-${repo.name}">No pull request is yet made 🤷 </p>
+        <p id="commits-${repo.name}">There are no commits yet...</p>
+      </div>
+    `)
+
+
+    drawChart(forkedRepos.length)
+    getPullRequests(forkedRepos)
+  })
+
+
+//^^^^^^^^^^^^^^^^^ fetching pull requests ^^^^^^^^^^^^^^^^^^^^^^^^^^//
+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(fetchedPulls => {
+      const hedvigsPulls = fetchedPulls.filter(fetchedPull => fetchedPull.user.login === repo.owner.login) 
+      //This fetch is fetching all the pulls at the technigo user, so we have to sort everyone exept my user out "of the bag". Only my pulls for each project will show after this "hedvigsPulls" function. 
+
+      document.getElementById(`pull-${repo.name}`).innerHTML = `Pull request was made ${new Date (hedvigsPulls[0].created_at).toLocaleDateString()}`;
+      //allt som skrivs inom parentesen efter get ElementById är en del av   ID:t.
+
+      getCommitsForPullRequests(hedvigsPulls, repo)
+
+    })
+  })
+}
+
+//^^^^^^^^^^^^^^^ Fetching commits from the pull requests ^^^^^^^^^^^^^^^^^//
+
+const getCommitsForPullRequests = (pullRequests, repo) => {
+  pullRequests.forEach(pullRequest => {
+
+    fetch(pullRequest.commits_url)
+    .then(res => res.json())
+    .then(fetchedCommits => {
+    //This function takes the sorted pull request (hedvigsPulls) and sorts out my commit_url from that.   
+
+
+
+
+      document.getElementById(`commits-${repo.name}`).innerHTML = `Number of commits: ${fetchedCommits.length}`;
+      //Funktionen skall gå ner en nivå till och bara visa commits_URL
+
+    })
+  })
+}