Technigo · Dopest0727 · Feb 27, 2022 · rijad90 · Feb 28, 2022 · rijad90
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,13 +1,13 @@
 # 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 weeks assignment was to create a Tracker for Github. 
 
 ## 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 struggled a lot this week, I took several approaches until i finnaly got it to work I can honesty say It was like walking in the dark.
+I just wished I had more time to read about the topic and truly understand it.
+
 
 ## 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.
+sjupunktertracker.netlify.app
diff --git a/code/chart.js b/code/chart.js
@@ -2,3 +2,32 @@
 const ctx = document.getElementById('chart').getContext('2d')
 
 //"Draw" the chart here 👇
+
+const pieData = {
+  labels: ['Projects to go', 'Projects done'],
+  datasets: [
+    {
+      label: 'Technigo project progress',
+      data: [19, 6],
+      backgroundColor: ['RGB(27, 27, 33)', 'RGB(230, 211, 65)'],
+      borderColor: '#21262c',
+      hoverOffset: 2,
+    },
+  ],
+}
+
+const pieConfig = {
+  type: 'bar',
+  data: pieData,
+}
+
+const pieChart = new Chart(ctx, pieConfig)
+
+const updatePieChart = (chart, newData) => {
+  chart.data.datasets.forEach(dataset => {
+    dataset.data.pop()
+    dataset.data.push(newData)
+  })
+  chart.update()
+}
+
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>
-
-  <!-- This will be used to draw the chart 👇 -->
-  <canvas id="chart"></canvas>
-
-  <script src="./script.js"></script>
-  <script src="./chart.js"></script>
-</body>
+   <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>GitHub Tracker</title>
+      <link rel="stylesheet" href="./style.css" />
+   </head>
+   <body class="body">
+      <section class="user-data" id="userData">
+         <h1 class="header">GitHub Tracker</h1>
+      </section>
+      <h2 class="project-header">Projects</h2>
+      <section class="filters-sorting">
+         <p class="filters-sorting-heading">Filter by</p>
+         <button class="sort-btn" id="filterLangJsBtn">JavaScript</button>
+         <button class="sort-btn" id="filterLangHtmlBtn">HTML</button>
+         <button class="sort-btn" id="filterAllBtn">All</button>
+      </section>
+      <section class="filters-sorting">
+        <p class="filters-sorting-heading">Sort by:</p>
+        <button class="sort-btn" id="sortSizeBtn">size</button>
+        <button class="sort-btn" id="sortCreatedBtn">created</button>
+        <button class="sort-btn" id="sortNameBtn">name</button>
+      </section>
+      <main class="projects" id="projects"></main>
+      <!-- This will be used to draw the chart 👇 -->
+      <canvas class="chart" id="chart"></canvas>
+      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+      <script src="./chart.js"></script>
+      <script src="./script.js"></script>
+   </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -0,0 +1,208 @@
+// GITHUB API
+const USER = 'Dopest0727'
+const PARENT_OWNER = 'Technigo'
+const REPOS_URL = `https://api.github.com/users/${USER}/repos`
+const USER_URL = `https://api.github.com/users/${USER}`
+
+// GLO VAR
+const projects = document.getElementById('projects')
+const userData = document.getElementById('userData')
+
+// FILTER BY 
+const filterAllBtn = document.getElementById('filterAllBtn')
+const filterLangJsBtn = document.getElementById('filterLangJsBtn')
+const filterLangHtmlBtn = document.getElementById('filterLangHtmlBtn')
+
+const sortSizeBtn = document.getElementById('sortSizeBtn')
+const sortCreatedBtn = document.getElementById('sortCreatedBtn')
+const sortNameBtn = document.getElementById('sortNameBtn')
+
+let reposArr = []
+let reposData = {}
+
+const pullReqData = {
+  total: 19,
+  done: 4,
+}
+
+const fetchAllReposFromUser = () => {
+  // FETCH MY REPOS
+  fetch(REPOS_URL)
+    .then(res => res.json())
+    .then(allRepos => {
+      // FILTER FORKED REPOS
+      let filteredRepos = allRepos.filter(
+        repo => repo.name.includes('project-') && repo.fork
+      )
+      sortRepos(filteredRepos, 'pushed_at', true)
+      fetchFullRepo(filteredRepos)
+    })
+    .catch(err => alert('fetchAllReposFromUser error: ', err))
+}
+
+const fetchFullRepo = repos => {
+  // FETCH DATA FROM REPOS
+  Promise.all(repos.map(repo => fetch(repo.url)))
+    .then(res => Promise.all(res.map(res => res.json())))
+    .then(repos => {
+      repos.forEach(repo => {
+        if (repo.parent.owner.login === PARENT_OWNER) {
+          reposArr.push(repo)
+          reposData[repo.name] = { pullRequest: '', authors: '', commits: '' }
+
+          generateProjectCard(repo)
+          const COMMITS_URL = `https://api.github.com/repos/${USER}/${repo.name}/commits?per_page=100`
+          fetchCommits(COMMITS_URL, repo)
+        }
+      })
+    })
+    .catch(err => alert('fetchFullRepo error:', err))
+}
+
+const generateProjectCard = repo => {
+  // GITHUB PROJJECT CARD GENERATOR
+  projects.innerHTML += /*html*/ `
+	<div class="repo-info">
+		<div class="repo-heading">
+			<p class="repo"><a href=${repo.html_url} target="_blank">${repo.name}</a></p>
+			<p class="lang ${repo.language}">${repo.language}</p>
+		</div>
+		<p class="info">From ${repo.parent.owner.login}, default branch: ${repo.default_branch}</p>
+		<p class="pull" id="pull-${repo.name}">Pull request</p>
+		<div class="numbers">
+			<p class="commit" id="commit-${repo.name}">Commits: </p>
+			<p class="size">Size: ${repo.size}</p>
+		</div>
+		<p class="update">Updated: ${new Date(repo.pushed_at).toDateString()}</p>
+		<p class="collaboration" id="collaborators-${repo.name}">Commit authors:</p>
+	</div>
+	`
+}
+
+const fetchCommits = (myCommitsUrl, repo) => {
+  // FETCH COMMITS
+  fetch(myCommitsUrl)
+    .then(res => res.json())
+    .then(data => {
+      // FILTER COMMITS AFTER REPO WAS FORKES
+      const commitsSinceFork = data.filter(commit => commit.commit.author.date > repo.created_at)
+      // storing necessary data for later sorting
+      reposData[repo.name].commits = commitsSinceFork
+      populateCommits(repo, commitsSinceFork)
+      getCollaborators(commitsSinceFork, repo)
+    })
+    .catch(err => alert('fetchCommits error: ', repo.name, err))
+}
+
+const populateCommits = (repo, commits) => {
+  document.getElementById(`commit-${repo.name}`).innerHTML += ` ${commits.length}, `
+}
+
+const getCollaborators = (commits, repo) => {
+  // filter out each commit author and stor for later sort
+  let authors = {}
+  commits.forEach(commit => {
+    if (!Object.keys(authors).includes(commit.author.login)) {
+      authors[commit.author.login] = {
+        avatar_url: commit.author.avatar_url,
+        html_url: commit.author.html_url,
+      }
+    }
+  })
+  reposData[repo.name].authors = authors
+  populateCollaborators(authors, repo)
+  fetchPullRequestsArray(repo, Object.keys(authors))
+}
+
+const populateCollaborators = (authors, repo) => {
+  for (const author in authors) {
+    if (Object.keys(authors).length > 1) {
+      document.getElementById(
+        `collaborators-${repo.name}`
+      ).innerHTML +=  `<a href="${authors[author].html_url}" target="_blank"><img class="avatar-collaborator" src="${authors[author].avatar_url}"></a>`
+    } else {
+      document.getElementById(`collaborators-${repo.name}`).innerHTML =
+        'Individual project'
+    }
+  }
+}
+
+const fetchPullRequestsArray = (repo, authors) => {
+  // FETCH PULL REQUEST FROM REPO
+  const PULL_URL = `https://api.github.com/repos/${PARENT_OWNER}/${repo.name}/pulls?per_page=100`
+  fetch(PULL_URL)
+    .then(res => res.json())
+    .then(data => {
+      // only pick pull requests connected to user
+      const myPullReq = data.find(pull => authors.includes(pull.user.login))
+      if (myPullReq) {
+        pullReqData.done++
+        reposData[repo.name].pullRequest = myPullReq
+        updatePieChart(pieChart, pullReqData.done)
+      }
+      populatePullRequest(myPullReq, repo)
+    })
+    .catch(err => alert('fetchPullRequestsArray error:', err))
+}
+
+const populatePullRequest = (myPullReq, repo) => {
+  if (myPullReq) {
+    document.getElementById(
+      `pull-${repo.name}`
+    ).innerHTML = `<a href=${myPullReq.html_url} target="_blank">Pull request</a>`
+  } else {
+    document.getElementById(`pull-${repo.name}`).innerHTML =  'No pull request'
+  }
+}
+
+const fetchUser = () => {
+  fetch(USER_URL)
+    .then(res => res.json())
+    .then(data => {
+      userData.innerHTML += `<a href="${data.html_url}" target="_blank"><img class="avatar-user" src="${data.avatar_url}"></a><p class="user-name">${data.login}</p>`
+    })
+    .catch(err => alert('fetchCommits error: ', err))
+}
+
+const sortRepos = (array, param, init) => {
+  array.sort((a, b) => {
+    if (a[param] > b[param]) {
+      return -1
+    } else if (a[param] < b[param]) {
+      return 1
+    } else {
+      return 0
+    }
+  })
+  if (param === 'name') array.reverse()
+  if (!init) regenerateProjectCards(reposArr)
+}
+
+const filterRepos = (array, lang) => {
+  if (lang !== 'All') {
+    const filteredReposArr = array.filter(repo => repo.language === lang)
+    regenerateProjectCards(filteredReposArr)
+  } else {
+    regenerateProjectCards(array)
+  }
+}
+
+const regenerateProjectCards = repos => {
+  projects.innerHTML = ''
+  repos.forEach(repo => {
+    generateProjectCard(repo)
+    populateCommits(repo, reposData[repo.name].commits)
+    populateCollaborators(reposData[repo.name].authors, repo)
+    populatePullRequest(reposData[repo.name].pullRequest, repo)
+  })
+}
+
+sortSizeBtn.addEventListener('click', () => sortRepos(reposArr, 'size', false))
+sortNameBtn.addEventListener('click', () => sortRepos(reposArr, 'name', false))
+sortCreatedBtn.addEventListener('click', () => sortRepos(reposArr, 'created_at', false))
+filterLangJsBtn.addEventListener('click', () => filterRepos(reposArr, 'JavaScript'))
+filterLangHtmlBtn.addEventListener('click', () => filterRepos(reposArr, 'HTML'))
+filterAllBtn.addEventListener('click', () => filterRepos(reposArr, 'All'))
+
+fetchAllReposFromUser()
+fetchUser()