From f3431eecbd4e89b4d848264f70f10745163b094c Mon Sep 17 00:00:00 2001
From: emizzle <ericmastro@status.im>
Date: Mon, 8 Oct 2018 16:43:51 +1100
Subject: [PATCH] File editor tree improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sort files and folders by type, then by name

Hide hidden files/folders (starting with “.”) - WIP
---
 embark-ui/src/components/FileExplorer.js | 25 ++++++++++++----
 lib/modules/pipeline/index.js            | 38 ++++++++++++++++++++++--
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/embark-ui/src/components/FileExplorer.js b/embark-ui/src/components/FileExplorer.js
index 944bbd4b5..269610f89 100644
--- a/embark-ui/src/components/FileExplorer.js
+++ b/embark-ui/src/components/FileExplorer.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Treebeard, decorators} from 'react-treebeard';
+import {Form} from 'tabler-react';
 
 const Header = ({style, node}) => {
   const iconType = node.children ? 'folder' : 'file';
@@ -27,7 +28,9 @@ decorators.Header = Header;
 class FileExplorer extends React.Component {
   constructor(props){
     super(props);
-    this.state = {};
+    this.state = {
+      files: this.props.files
+    };
   }
 
   onToggle(node, toggled){
@@ -44,13 +47,23 @@ class FileExplorer extends React.Component {
     this.setState({ cursor: node });
   }
 
+  onHiddenToggle(value){
+    this.setState({files: this.props.files.filter((file) => {
+        return;
+      })
+    });
+  }
+
   render(){
     return (
-      <Treebeard
-        data={this.props.files}
-        decorators={decorators}
-        onToggle={this.onToggle.bind(this)}
-      />
+      <React.Fragment>
+        <Form.Switch type="checkbox" name="toggle" value={true} label="Show hidden files" ref={(input) => { this.showHidden = input; }} onToggle={this.onHiddenToggle.bind(this)} />
+        <Treebeard
+          data={this.props.files}
+          decorators={decorators}
+          onToggle={this.onToggle.bind(this)}
+        />
+      </React.Fragment>
     );
   }
 }
diff --git a/lib/modules/pipeline/index.js b/lib/modules/pipeline/index.js
index 91df29840..85c0a5702 100644
--- a/lib/modules/pipeline/index.js
+++ b/lib/modules/pipeline/index.js
@@ -73,14 +73,46 @@ class Pipeline {
       '/embark-api/files',
       (req, res) => {
         const rootPath = fs.dappPath();
+
+        function fileTreeSort(objects){
+          function isFolder(object) {
+            return object.children && object.children.length;
+          }
+        
+          function isNotFolder(object){
+            return !isFolder(object);
+          }
+        
+          function byName(a, b) {
+              return a.name.localeCompare(b.name);
+          }
+        
+          const folders = objects.filter(isFolder).sort(byName);
+          const files = objects.filter(isNotFolder).sort(byName);
+        
+          return folders.concat(files);
+        }
+
         const walk = (dir, filelist = []) => fs.readdirSync(dir).map(name => {
           let isRoot = rootPath === dir;
           if (fs.statSync(path.join(dir, name)).isDirectory()) {
-            return { isRoot, name, dirname: dir, children: walk(path.join(dir, name), filelist)};
+            return { 
+              isRoot,
+              name,
+              dirname: dir,
+              path: path.join(dir, name),
+              isHidden: name.indexOf('.') === 0,
+              children: fileTreeSort(walk(path.join(dir, name), filelist))};
           }
-          return {name, isRoot, path: path.join(dir, name), dirname: dir};
+          return {
+            name,
+            isRoot,
+            path: path.join(dir, name),
+            dirname: dir,
+            isHidden: name.indexOf('.') === 0
+          };
         });
-        const files = walk(fs.dappPath());
+        const files = fileTreeSort(walk(fs.dappPath()));
         res.send(files);
       }
     );