From 4c080d63a6a5c54ef246e0fa02b47ebcd0fcd6a8 Mon Sep 17 00:00:00 2001
From: Saugat Acharya <mesaugat@gmail.com>
Date: Fri, 16 Jun 2017 05:05:27 +0545
Subject: [PATCH] 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
---
 favicon.ico | Bin 0 -> 370070 bytes
 index.html  |  61 +++++++++++++++--------
 js/main.js  | 136 ++++++++++++++++++++++++++++++++++++++--------------
 3 files changed, 143 insertions(+), 54 deletions(-)
 create mode 100644 favicon.ico

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..58816493781ae6184e498ba8525bc23be905837f
GIT binary patch
literal 370070
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
Hski(;CP;7g

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 8ac52b6..1f19556 100644
--- a/index.html
+++ b/index.html
@@ -1,36 +1,59 @@
 <!DOCTYPE html>
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Find Active Github Forks</title>
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <meta charset="UTF-8">
+    <title>Active GitHub Forks</title>
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+    <style>
+        body {
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+        .black {
+            color: #292b2c;
+        }
+    </style>
 </head>
 
 <body>
     <div class="container">
         <div class="row">
-            <div class="col-offset-2 col-8">
-                <div class="panel panel-default">
-                    <div class="panel-heading text-center">
-                        <h3>Find Active Github Forks</h3>
+            <div class="col-sm-12 col-lg-12">
+                <div class="card">
+                    <div class="card-header text-center">
+                        <h3>
+                            <a href="https://github.com/techgaun/active-forks" class="black">
+                                <i class="fa fa-github-alt pull-left" aria-hidden="true"></i>
+                            </a>
+                            Active GitHub Forks
+                        </h3>
                     </div>
 
-                    <div class="panel-body">
-                        <form id="form" class="form-horizontal" role="form">
-                            <div class="input-group">
-                                <input id="repo" class="form-control" type="text" placeholder="techgaun/github-dorks">
-                                <span class="input-group-btn">
-                                    <button onClick="fetchData()" type="button" class="btn btn-primary">Find</button>
-                                </span>
-                            </div>
-                        </form>
-
-                        <div id='data-body' class="">
+                    <div class="card-block">
+                        <div class="form-group">
+                          <form id="form" role="form">
+                              <div class="input-group">
+                                  <input id="q" name="q" class="form-control" type="text" placeholder="techgaun/github-dorks">
+                                  <span class="input-group-btn">
+                                      <button id="find" onClick="fetchData()" type="button" class="btn btn-primary">
+                                          <i id="spinner" class="fa fa-spinner fa-pulse fa-fw" hidden></i> Find
+                                      </button>
+                                  </span>
+                              </div>
+                          </form>
                         </div>
+
+                        <div id="data-body"></div>
                     </div>
+                    <div id="footer" class="card-footer text-muted"></div>
                 </div>
             </div>
-            <div class="col-md-offset-2 col-md-8">
-            </div>
         </div>
     </div>
     <script type="text/javascript" src="js/main.js"></script>
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 <username>/<repo>')
+        showMsg('Invalid GitHub repository! Format is &lt;username&gt;/&lt;repo&gt;', '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 = `<div class="alert alert-danger">${msg}</div>`
+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)) {
-        showError('Github Repo does not exist')
-        return
+        showMsg('GitHub repository does not exist', 'danger');
+        return;
     }
+
     if (data.length === 0) {
-        document.getElementById('data-body').innerHTML = `<div class="alert alert-info">No forks exist</div>`
-        return
+        showMsg('No forks exist!');
+        return;
     }
-    const thead = '<thead><tr><th>Repository</th><th>Stargazers</th><th>Forks</th><th>Last Update</th></tr></thead>'
-    const html = []
+
+    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>
@@ -47,41 +88,66 @@ function showData(data) {
                 <td>${fork.forks_count}</td>
                 <td>${timeSince(fork.updated_at)} ago</td>
             </tr>
-        `
-        html.push(item)
+        `;
+        html.push(item);
     }
+
     document.getElementById('data-body').innerHTML = `
-        <table class="table table-striped">
-            ${thead}
-            <tbody>${html.join('')}</tbody>
-        </table>
-    `
+        <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 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';
 }