Skip to content

Commit ecba16e

Browse files
JaEngdJaEngd
committed
Fecthed and filtered data from API
1 parent ded93a5 commit ecba16e

6 files changed

Lines changed: 312 additions & 4 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
//.gitignore file
2+
code/secret.js

‎code/chart.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,38 @@
11
//DOM-selector for the canvas 👇
22
const ctx = document.getElementById('chart').getContext('2d')
3+
const technigoProjects = 21
34

45
//"Draw" the chart here 👇
6+
const drawBarChart = (repos) => {
7+
new Chart(ctx, {
8+
type: 'doughnut',
9+
data: {
10+
labels: [
11+
'Projects to do',
12+
'Finished projects'
13+
],
14+
datasets: [
15+
{
16+
data: [
17+
technigoProjects - repos.length,
18+
repos.length,
19+
],
20+
backgroundColor: [
21+
'#d5a7b6',
22+
'#5c7fe9'
23+
]
24+
}
25+
]
26+
},
27+
options: {
28+
plugins: {
29+
legend: {
30+
display: true,
31+
labels: {
32+
color: 'rgb(0, 0, 0)'
33+
}
34+
}
35+
},
36+
},
37+
})
38+
}

‎code/index.html‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,33 @@
88
<link rel="stylesheet" href="./style.css" />
99
</head>
1010
<body>
11-
<h1>GitHub Tracker</h1>
12-
<h2>Projects:</h2>
13-
<main id="projects"></main>
11+
<!-- <main id="projects"></main> -->
12+
13+
<main>
14+
<section id="profile-wrapper">
15+
<a href="#" class="button" id="button">All repos</a>
16+
</section>
17+
18+
19+
<section class="repo-wrapper" id="repo-wrapper"></section>
20+
21+
<section id="chart-wrapper">
22+
<canvas id="chart"></canvas>
23+
</section>
24+
25+
</main>
26+
27+
28+
<div id="root"></div>
29+
<section id="projects"></section>
1430

1531
<!-- This will be used to draw the chart 👇 -->
1632
<canvas id="chart"></canvas>
1733

34+
<script src="./secret.js"></script>
1835
<script src="./script.js"></script>
1936
<script src="./chart.js"></script>
37+
2038
</body>
39+
2140
</html>

‎code/script.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
//DOM
3+
const profileWrapper = document.getElementById('profile-wrapper');
4+
const repoWrapper = document.getElementById('repo-wrapper');
5+
6+
//API
7+
const USER = 'JaEngd'
8+
const PROFILE_URL = `https://api.github.com/users/${USER}`
9+
const REPO_URL = `https://api.github.com/users/${USER}/repos`
10+
11+
const API_TOKEN = TOKEN || process.env.API_KEY;
12+
13+
const options = { //Object
14+
method: 'GET', //POST, PATCH, DELETE
15+
headers: {
16+
Authorization: `token ${API_TOKEN}`
17+
}
18+
}
19+
20+
const showProfile = () => {
21+
fetch(PROFILE_URL, options)
22+
.then(res => res.json()) //Converting the response to a JSON object
23+
.then(data => {
24+
console.log(data)
25+
profileWrapper.innerHTML += `
26+
<div id="profile">
27+
<figure class="profile-image">
28+
<a href="${PROFILE_URL}">
29+
<img src="${data.avatar_url}" alt="Avatar of ${data.login}">
30+
</a>
31+
</figure>
32+
<h3>${data.login}</h3>
33+
<p>Public repositories: ${data.public_repos}.</p>
34+
</div>
35+
`
36+
})
37+
}
38+
showProfile()
39+
40+
const showRepos = () => {
41+
fetch(REPO_URL, options)
42+
.then((response) => response.json())
43+
.then((data) => {
44+
const myRepos = data.filter((repo) => repo.name.includes("project") && repo.fork)
45+
46+
myRepos.forEach(repo => {
47+
repoWrapper.innerHTML += `
48+
<div class="projects-card" id="${repo.id}">
49+
<h3><a href="${repo.html_url}"><b>${repo.name}</b></a> <strong>(${repo.default_branch})</strong></h3>
50+
<p>Most recent push: ${new Date(repo.pushed_at).toDateString()} </p>
51+
<p id="commit_${repo.name}">Number of commits:</p>
52+
<p>Main language: ${repo.language}</p>
53+
</div>
54+
`
55+
})
56+
showPullRequestsArray(myRepos)
57+
drawBarChart(myRepos)
58+
})
59+
}
60+
61+
62+
const showPullRequestsArray = (allRepos) => {
63+
allRepos.forEach((repo) => {
64+
fetch(`https://api.github.com/repos/Technigo/${repo.name}/pulls?per_page=100`, options)
65+
.then((response) => response.json())
66+
.then((data) => {
67+
const myPullRequest = data.find(
68+
(pull) => pull.user.login === repo.owner.login
69+
)
70+
if (myPullRequest) {
71+
fetchCommits(myPullRequest.commits_url, repo.name)
72+
} else {
73+
document.getElementById(`commit_${repo.name}`)
74+
.innerHTML = 'Pull request unavailable, or closed.';
75+
}
76+
})
77+
})
78+
}
79+
80+
81+
const fetchCommits = (myCommitsUrl, myRepoName) => {
82+
fetch(myCommitsUrl)
83+
.then((response) => response.json())
84+
.then((data) => {
85+
document.getElementById(`commit_${myRepoName}`).innerHTML += data.length
86+
})
87+
}
88+
89+
showRepos()
90+
91+
92+
93+
94+
95+
96+
97+
98+
99+
100+
101+
102+
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
114+

‎code/server.rb‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
require 'sinatra'
2+
require 'rest-client'
3+
require 'json'
4+
5+
CLIENT_ID = ENV['GH_BASIC_CLIENT_ID']
6+
CLIENT_SECRET = ENV['GH_BASIC_SECRET_ID']
7+
8+
get '/' do
9+
erb :index, :locals => {:client_id => CLIENT_ID}
10+
end
11+

‎code/style.css‎

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,131 @@
11
body {
22
background: #FFECE9;
3-
}
3+
font-family: 'Nunito', sans-serif;
4+
margin: 0 auto;
5+
}
6+
7+
8+
html {
9+
scroll-behavior: smooth;
10+
}
11+
12+
h1 {
13+
font-size: 1.4rem;
14+
}
15+
16+
h2 {
17+
font-size: 1.2rem;
18+
text-align: center;
19+
}
20+
21+
h3 {
22+
text-align: center;
23+
background-color: rgba(130, 60, 60, 0.2);
24+
border-radius: 0.4rem;
25+
margin-top: 0;
26+
padding: 1rem 0rem;
27+
}
28+
29+
#profile-wrapper {
30+
display: block;
31+
text-align: center;
32+
justify-content: center;
33+
display: flex;
34+
position: absolute;
35+
left: 50%;
36+
top: 50%;
37+
width: 100%;
38+
max-width: 300px;
39+
transform: translate(-50%, -50%);
40+
margin: auto;
41+
width: 63%;
42+
}
43+
44+
#profile {
45+
display: inline-block;
46+
justify-content: center;
47+
}
48+
49+
/*/ --- BUTTON --- /*/
50+
.button{
51+
background: #00aa2b;
52+
color: #fff;
53+
padding: 10px 40px;
54+
box-shadow: 6px 6px 39px -4px rgba(0,0,0,0.75);
55+
border-radius: 3px;
56+
cursor: pointer;
57+
transition: 0.4s;
58+
position: absolute;
59+
margin-top: 100px;
60+
}
61+
/*/ --- BUTTON --- /*/
62+
63+
.profile-image {
64+
display: inline-block;
65+
width: 160px;
66+
height: 160px;
67+
border-radius: 50%;
68+
border: 2px solid whitesmoke;
69+
overflow: hidden;
70+
margin-bottom: 0;
71+
}
72+
73+
.profile-image > a > img {
74+
width: 100%;
75+
}
76+
77+
#repo-wrapper {
78+
display: flex;
79+
flex-flow: row wrap;
80+
justify-content: center;
81+
left: 50%;
82+
top: 40%;
83+
width: 100%;
84+
transform: translate(-50%, -50%);
85+
position: absolute;
86+
gap: 1rem;
87+
margin-bottom: 1rem;
88+
89+
}
90+
91+
.projects-card {
92+
width: 320px;
93+
background-color: #f2f2f2;
94+
box-shadow: rgba(0, 0, 0, 0.6) 0 0.065rem 0.25rem;
95+
border-radius: 0.4rem;
96+
padding: 1rem;
97+
}
98+
99+
#chart-wrapper {
100+
width: 90vw;
101+
max-width: 512px;
102+
margin: 0 auto;
103+
position: absolute;
104+
}
105+
106+
header {
107+
position: sticky;
108+
top: 0;
109+
}
110+
111+
footer {
112+
margin-top: 1rem;
113+
}
114+
115+
header, footer {
116+
background-color: #f2f2f2;
117+
text-align: center;
118+
padding: 1rem 0rem;
119+
width: 100%;
120+
}
121+
122+
footer, a {
123+
color: rgb(130, 60, 60)
124+
}
125+
126+
footer > p > a {
127+
text-decoration: none;
128+
}
129+
130+
131+

0 commit comments

Comments
 (0)