active-forks/js/main.js
Saugat Acharya 4c080d63a6 UI and other changes (#1)
* Use bootstrap-v4

* Add favicon

* Change showError to showMsg

* Make it bookmarkable

* Few changes

* Show spinner while loading

* Hide spinner by default
2017-06-15 18:20:27 -05:00

153 lines
4.1 KiB
JavaScript

window.addEventListener('load', () => {
const repo = getQueryParams().q;
if (repo) {
document.getElementById('q').value = repo;
fetchData();
}
});
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
fetchData();
});
function fetchData() {
const repo = document.getElementById('q').value;
const re = /[-_\w]+\/[-_.\w]+/;
window.history.pushState('', '', `?q=${repo}`);
if (re.test(repo)) {
fetchAndShow(repo);
} else {
showMsg('Invalid GitHub repository! Format is <username>/<repo>', 'danger');
}
}
function fetchAndShow(repo) {
document.getElementById('find').disabled = true;
document.getElementById('spinner').removeAttribute('hidden');
fetch(`https://api.github.com/repos/${repo}/forks?sort=stargazers`)
.then((response) => response.json())
.then((data) => {
showData(data);
document.getElementById('find').disabled = false;
document.getElementById('spinner').setAttribute('hidden', 'hidden');
});
}
function showMsg(msg, type) {
let alert_type = 'alert-info';
if (type === 'danger') {
alert_type = 'alert-danger';
}
document.getElementById('footer').innerHTML = '';
document.getElementById('data-body').innerHTML = `
<div class="alert ${alert_type} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
${msg}
</div>
`;
}
function showData(data) {
if (!Array.isArray(data)) {
showMsg('GitHub repository does not exist', 'danger');
return;
}
if (data.length === 0) {
showMsg('No forks exist!');
return;
}
const html = [];
const thead = `
<thead>
<tr class="table-active">
<th><i class="fa fa-github" aria-hidden="true"></i> Repository</th>
<th><i class="fa fa-star" aria-hidden="true"></i> Stargazers</th>
<th><i class="fa fa-code-fork" aria-hidden="true"></i> Forks</th>
<th><i class="fa fa-clock-o" aria-hidden="true"></i> Last Update</th>
</tr>
</thead>
`;
for (const fork of data) {
const item = `
<tr>
<td><a href="${fork.html_url}">${fork.full_name}</a></td>
<td>${fork.stargazers_count}</td>
<td>${fork.forks_count}</td>
<td>${timeSince(fork.updated_at)} ago</td>
</tr>
`;
html.push(item);
}
document.getElementById('data-body').innerHTML = `
<div class="table-responsive rounded">
<table class="table table-striped table-bordered table-hover">
${thead}
<tbody>${html.join('')}</tbody>
</table>
</div>
`;
document.getElementById('footer').innerHTML = `${data.length} ${data.length == 1 ? 'result' : 'results'}`;
}
function getQueryParams() {
let query = location.search;
if (!query) {
return { };
}
return (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) => {
let [ key, value ] = param.split('=');
params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
return params;
}, { });
}
function timeSince(date_str) {
const date = new Date(date_str);
const seconds = Math.floor((new Date() - date) / 1000);
let interval = Math.floor(seconds / 31536000);
if (interval > 1) {
return interval + ' years';
}
interval = Math.floor(seconds / 2592000);
if (interval > 1) {
return interval + ' months';
}
interval = Math.floor(seconds / 86400);
if (interval > 1) {
return interval + ' days';
}
interval = Math.floor(seconds / 3600);
if (interval > 1) {
return interval + ' hours';
}
interval = Math.floor(seconds / 60);
if (interval > 1) {
return interval + ' minutes';
}
return Math.floor(seconds) + ' seconds';
}