From c16032dbc07c92e5ad5989769f3cf7b299cb81ea Mon Sep 17 00:00:00 2001
From: Kyle King <KyleKing@users.noreply.github.com>
Date: Sun, 16 Sep 2018 18:02:55 -0400
Subject: [PATCH] Sort forks by Stars, Forks, Size, Last Push, etc. (#4)

* Add: license, eslint, and beautify files

* Add: DataTables

* Add: sort by number of stars

* Add: link to repository

* Refac: update README

* Add: update package.json description

* Refac: removed extra spaces in columnNamesMap

* Rm: eslint, license, and changes to README

* Refac: undo changes to index.html formatting

* Refac: undo changes to order of main.js

* Fix: watchers stat is incorrect

* Add: error handling on Fetch
---
 index.html |  3 +++
 js/main.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 1f19556..94f86e9 100644
--- a/index.html
+++ b/index.html
@@ -4,12 +4,14 @@
     <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://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
     <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>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
     <style>
         body {
             padding-top: 2rem;
@@ -50,6 +52,7 @@
                         </div>
 
                         <div id="data-body"></div>
+                        <table id="forkTable" class="display" width="100%"></table>
                     </div>
                     <div id="footer" class="card-footer text-muted"></div>
                 </div>
diff --git a/js/main.js b/js/main.js
index 54be017..f24a72e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,4 +1,6 @@
 window.addEventListener('load', () => {
+    initDT()  // Initialize the DatatTable and window.columnNames variables
+
     const repo = getQueryParams().q;
     if (repo) {
         document.getElementById('q').value = repo;
@@ -24,18 +26,66 @@ function fetchData() {
     }
 }
 
-function fetchAndShow(repo) {
-    document.getElementById('find').disabled = true;
-    document.getElementById('spinner').removeAttribute('hidden');
+function updateDT( data ) {
+    // Remove any alerts, if any:
+    if ( $( '.alert' ) )
+        $( '.alert' ).remove()
 
-    fetch(`https://api.github.com/repos/${repo}/forks?sort=stargazers`)
-        .then((response) => response.json())
-        .then((data) => {
-          showData(data);
+    // Format dataset and redraw DataTable. Use second index for key name
+    const forks = []
+    for ( let fork of data ) {
+      fork.repoLink = `<a href="https://github.com/${fork.full_name}">Link</a>`
+      fork.ownerName = fork.owner.login
+      forks.push( fork )
+    }
+    const dataSet = forks.map( fork => window.columnNamesMap.map( colNM => fork[colNM[1]] ) )
+    window.forkTable.clear().rows.add( dataSet ).draw()
+}
 
-          document.getElementById('find').disabled = false;
-          document.getElementById('spinner').setAttribute('hidden', 'hidden');
-        });
+function initDT() {
+    // Create ordered Object with column name and mapped display name
+    window.columnNamesMap = [
+        // [ 'Repository', 'full_name' ],
+        ['Link', 'repoLink'],  // custom key
+        ['Owner', 'ownerName'],  // custom key
+        ['Name', 'name'],
+        ['Branch', 'default_branch'],
+        ['Stars', 'stargazers_count'],
+        ['Forks', 'forks'],
+        ['Size', 'size'],
+        ['Last Push', 'pushed_at'],
+    ]
+
+    // Sort by stars:
+    const sortColName = 'Stars'
+    const sortColumnIdx = window.columnNamesMap.map( pair => pair[0] ).indexOf( sortColName )
+
+    // Use first index for readable column name
+    window.forkTable = $( '#forkTable' ).DataTable( {
+        columns: window.columnNamesMap.map( colNM => {
+            return {'title': colNM[0]}
+        } ),
+        'order': [[sortColumnIdx, 'desc']],
+    } )
+}
+
+function fetchAndShow( repo ) {
+
+  fetch( `https://api.github.com/repos/${repo}/forks?sort=stargazers` )
+    .then( ( response ) => {
+      if ( !response.ok )
+        throw Error( response.statusText )
+      return response.json()
+    } )
+    .then( ( data ) => {
+        console.log( data )
+        updateDT( data )
+    } )
+    .catch( ( error ) => {
+        const msg = 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) {