This commit is contained in:
techgaun 2019-04-09 23:13:48 -05:00
parent df86f8e92c
commit ccea7c3df7
No known key found for this signature in database
GPG key ID: 8BB8C93B2167505A
2 changed files with 112 additions and 92 deletions

5
.prettierrc Normal file
View file

@ -0,0 +1,5 @@
{
"trailingComma": "es5",
"singleQuote": true,
"semi": true
}

View file

@ -1,122 +1,137 @@
window.addEventListener('load', () => { window.addEventListener('load', () => {
initDT() // Initialize the DatatTable and window.columnNames variables initDT(); // Initialize the DatatTable and window.columnNames variables
const repo = getRepoFromUrl(); const repo = getRepoFromUrl();
if (repo) { if (repo) {
document.getElementById('q').value = repo; document.getElementById('q').value = repo;
fetchData(); fetchData();
} }
}); });
document.getElementById('form').addEventListener('submit', (e) => { document.getElementById('form').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
fetchData(); fetchData();
}); });
function fetchData() { function fetchData() {
const repo = document.getElementById('q').value; const repo = document.getElementById('q').value;
const re = /[-_\w]+\/[-_.\w]+/; const re = /[-_\w]+\/[-_.\w]+/;
const urlRepo = getRepoFromUrl(); const urlRepo = getRepoFromUrl();
if (!urlRepo || urlRepo !== repo) { if (!urlRepo || urlRepo !== repo) {
window.history.pushState('', '', `#${repo}`); window.history.pushState('', '', `#${repo}`);
} }
if (re.test(repo)) { if (re.test(repo)) {
fetchAndShow(repo); fetchAndShow(repo);
} else { } else {
showMsg('Invalid GitHub repository! Format is <username>/<repo>', 'danger'); showMsg(
} 'Invalid GitHub repository! Format is <username>/<repo>',
'danger'
);
}
} }
function updateDT( data ) { function updateDT(data) {
// Remove any alerts, if any: // Remove any alerts, if any:
if ( $( '.alert' ) ) if ($('.alert')) $('.alert').remove();
$( '.alert' ).remove()
// Format dataset and redraw DataTable. Use second index for key name // Format dataset and redraw DataTable. Use second index for key name
const forks = [] const forks = [];
for ( let fork of data ) { for (let fork of data) {
fork.repoLink = `<a href="https://github.com/${fork.full_name}">Link</a>` fork.repoLink = `<a href="https://github.com/${fork.full_name}">Link</a>`;
fork.ownerName = fork.owner.login fork.ownerName = fork.owner.login;
forks.push( fork ) forks.push(fork);
} }
const dataSet = forks.map( fork => window.columnNamesMap.map( colNM => fork[colNM[1]] ) ) const dataSet = forks.map(fork =>
window.forkTable.clear().rows.add( dataSet ).draw() window.columnNamesMap.map(colNM => fork[colNM[1]])
);
window.forkTable
.clear()
.rows.add(dataSet)
.draw();
} }
function initDT() { function initDT() {
// Create ordered Object with column name and mapped display name // Create ordered Object with column name and mapped display name
window.columnNamesMap = [ window.columnNamesMap = [
// [ 'Repository', 'full_name' ], // [ 'Repository', 'full_name' ],
['Link', 'repoLink'], // custom key ['Link', 'repoLink'], // custom key
['Owner', 'ownerName'], // custom key ['Owner', 'ownerName'], // custom key
['Name', 'name'], ['Name', 'name'],
['Branch', 'default_branch'], ['Branch', 'default_branch'],
['Stars', 'stargazers_count'], ['Stars', 'stargazers_count'],
['Forks', 'forks'], ['Forks', 'forks'],
['Open Issues', 'open_issues_count'], ['Open Issues', 'open_issues_count'],
['Size', 'size'], ['Size', 'size'],
['Last Push', 'pushed_at'], ['Last Push', 'pushed_at'],
] ];
// Sort by stars: // Sort by stars:
const sortColName = 'Stars' const sortColName = 'Stars';
const sortColumnIdx = window.columnNamesMap.map( pair => pair[0] ).indexOf( sortColName ) const sortColumnIdx = window.columnNamesMap
.map(pair => pair[0])
.indexOf(sortColName);
// Use first index for readable column name // Use first index for readable column name
// we use moment's fromNow() if we are rendering for `pushed_at`; better solution welcome // we use moment's fromNow() if we are rendering for `pushed_at`; better solution welcome
window.forkTable = $( '#forkTable' ).DataTable( { window.forkTable = $('#forkTable').DataTable({
columns: window.columnNamesMap.map( colNM => { columns: window.columnNamesMap.map(colNM => {
return { return {
title: colNM[0], title: colNM[0],
render: colNM[1] === 'pushed_at' ? (data, type, _row) => { render:
if (type === 'display') { colNM[1] === 'pushed_at'
return moment(data).fromNow() ? (data, type, _row) => {
if (type === 'display') {
return moment(data).fromNow();
}
return data;
} }
return data : null,
} : null };
} }),
}), order: [[sortColumnIdx, 'desc']],
'order': [[sortColumnIdx, 'desc']], });
} )
} }
function fetchAndShow( repo ) { function fetchAndShow(repo) {
repo = repo.replace('https://github.com/', '');
repo = repo.replace('https://github.com/', ''); repo = repo.replace('http://github.com/', '');
repo = repo.replace('http://github.com/', ''); repo = repo.replace('.git', '');
repo = repo.replace('.git', '');
fetch( `https://api.github.com/repos/${repo}/forks?sort=stargazers&per_page=100` ) fetch(
.then( ( response ) => { `https://api.github.com/repos/${repo}/forks?sort=stargazers&per_page=100`
if ( !response.ok ) )
throw Error( response.statusText ) .then(response => {
return response.json() if (!response.ok) throw Error(response.statusText);
} ) return response.json();
.then( ( data ) => { })
console.log( data ) .then(data => {
updateDT( data ) console.log(data);
} ) updateDT(data);
.catch( ( error ) => { })
const msg = error.toString().indexOf( 'Forbidden' ) >= 0 ? 'Error: API Rate Limit Exceeded' : error .catch(error => {
showMsg( `${msg}. Additional info in console`, 'danger' ) const msg =
console.error( error ) error.toString().indexOf('Forbidden') >= 0
} ) ? 'Error: API Rate Limit Exceeded'
: error;
showMsg(`${msg}. Additional info in console`, 'danger');
console.error(error);
});
} }
function showMsg(msg, type) { function showMsg(msg, type) {
let alert_type = 'alert-info'; let alert_type = 'alert-info';
if (type === 'danger') { if (type === 'danger') {
alert_type = 'alert-danger'; alert_type = 'alert-danger';
} }
document.getElementById('footer').innerHTML = ''; document.getElementById('footer').innerHTML = '';
document.getElementById('data-body').innerHTML = ` document.getElementById('data-body').innerHTML = `
<div class="alert ${alert_type} alert-dismissible fade show" role="alert"> <div class="alert ${alert_type} alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
@ -127,7 +142,7 @@ function showMsg(msg, type) {
} }
function getRepoFromUrl() { function getRepoFromUrl() {
const urlRepo = location.hash && location.hash.slice(1); const urlRepo = location.hash && location.hash.slice(1);
return urlRepo && decodeURIComponent(urlRepo); return urlRepo && decodeURIComponent(urlRepo);
} }