From 1e74422e5f2bceb1192338e38d5d5e64ed41f32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Oliva?= <olivarra1@gmail.com>
Date: Tue, 27 Mar 2018 10:09:20 +0200
Subject: [PATCH] Sort by name (like github does)

---
 app/app.js | 36 +++++++++++++++++++++++++-----------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/app.js b/app/app.js
index 69c489c..1f5a4a9 100644
--- a/app/app.js
+++ b/app/app.js
@@ -88,27 +88,41 @@ function injectHTML() {
 function buildHtmlTree(tree) {
     var content = '<ul>';
 
+    let unorderedList = [];
     for(var key in tree) {
-        if(key === 'files') continue;
-        content += `<li class="gct-folder gct-folder-open">
-            <span class="gct-folder-name">${iconFolder()} ${key}</span>
-            <div class="gct-sub-folders">${buildHtmlTree(tree[key])}</div>
-        </li>`;
+        if(key === 'files') {
+            unorderedList = unorderedList.concat(tree.files.map(item => ({
+                type: 'file',
+                name: item.name,
+                file: item
+            })));
+        }else {
+            unorderedList.push({
+                type: 'directory',
+                name: key
+            });
+        }
     }
+    const orderedList = unorderedList.sort((a,b) => a.name.localeCompare(b.name));
 
-    if(tree.files) {
-        tree.files.map(item => {
+    orderedList.forEach(item => {
+        if(item.type === 'file') {
             content += `
                 <li class="gct-file">
-                    <a class="gct-file-name" href="${item.link}">${iconFile()}  ${item.name}</a>
+                    <a class="gct-file-name" href="${item.file.link}">${iconFile()}  ${item.file.name}</a>
                     <span class="gct-file-changes">
-                        <span class="gct-file-added">+${item.added}</span>
-                        <span class="gct-file-removed">-${item.removed}</span>
+                        <span class="gct-file-added">+${item.file.added}</span>
+                        <span class="gct-file-removed">-${item.file.removed}</span>
                     </span>
                 </li>
             `;
-        });
+        }else {
+            content += `<li class="gct-folder gct-folder-open">
+                <span class="gct-folder-name">${iconFolder()} ${item.name}</span>
+                <div class="gct-sub-folders">${buildHtmlTree(tree[item.name])}</div>
+            </li>`;
     }
+    });
 
     return content;
 }