diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..5881649 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 8ac52b6..1f19556 100644 --- a/index.html +++ b/index.html @@ -1,36 +1,59 @@ - Find Active Github Forks - + + Active GitHub Forks + + + + + + + +
-
-
-
-

Find Active Github Forks

+
+
+
+

+ + + + Active GitHub Forks +

-
-
-
- - - - -
-
- -
+
+
+
+
+ + + + +
+
+ +
+
-
-
diff --git a/js/main.js b/js/main.js index f379e7d..9f76e33 100644 --- a/js/main.js +++ b/js/main.js @@ -1,44 +1,85 @@ +window.addEventListener('load', () => { + const repo = getQueryParams().q; + if (repo) { + document.getElementById('q').value = repo; + fetchData(); + } +}); + document.getElementById('form').addEventListener('submit', (e) => { - e.preventDefault() - fetchData() -}) + e.preventDefault(); + fetchData(); +}); function fetchData() { - const repo = document.getElementById('repo').value - const re = /[-_\w]+\/[-_.\w]+/ + const repo = document.getElementById('q').value; + const re = /[-_\w]+\/[-_.\w]+/; + + window.history.pushState('', '', `?q=${repo}`); if (re.test(repo)) { - fetchAndShow(repo) + fetchAndShow(repo); } else { - showError('Invalid github repo given. Format is /') + 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(function(response) { - response.json() - .then(function(data) { - showData(data) - }) - }) + .then((response) => response.json()) + .then((data) => { + showData(data); + + document.getElementById('find').disabled = false; + document.getElementById('spinner').setAttribute('hidden', 'hidden'); + }); } -function showError(msg) { - document.getElementById('data-body').innerHTML = `
${msg}
` +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 = ` + + `; } function showData(data) { if (!Array.isArray(data)) { - showError('Github Repo does not exist') - return + showMsg('GitHub repository does not exist', 'danger'); + return; } + if (data.length === 0) { - document.getElementById('data-body').innerHTML = `
No forks exist
` - return + showMsg('No forks exist!'); + return; } - const thead = 'RepositoryStargazersForksLast Update' - const html = [] + + const html = []; + const thead = ` + + + Repository + Stargazers + Forks + Last Update + + + `; + for (const fork of data) { const item = ` @@ -47,41 +88,66 @@ function showData(data) { ${fork.forks_count} ${timeSince(fork.updated_at)} ago - ` - html.push(item) + `; + html.push(item); } + document.getElementById('data-body').innerHTML = ` - - ${thead} - ${html.join('')} -
- ` +
+ + ${thead} + ${html.join('')} +
+
+ `; + + 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 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"; + return interval + ' years'; } + interval = Math.floor(seconds / 2592000); if (interval > 1) { - return interval + " months"; + return interval + ' months'; } + interval = Math.floor(seconds / 86400); if (interval > 1) { - return interval + " days"; + return interval + ' days'; } + interval = Math.floor(seconds / 3600); if (interval > 1) { - return interval + " hours"; + return interval + ' hours'; } + interval = Math.floor(seconds / 60); if (interval > 1) { - return interval + " minutes"; + return interval + ' minutes'; } - return Math.floor(seconds) + " seconds"; + + return Math.floor(seconds) + ' seconds'; }