From 20bf336a1bb91014521f8278bcc4612ceb397fb5 Mon Sep 17 00:00:00 2001
From: Mickael KERJEAN <mickael.kerjean@gmail.com>
Date: Thu, 7 Mar 2019 19:54:17 +1100
Subject: [PATCH] perf (filebrowse): optimise frontend client on hot path

---
 client/pages/filespage.js            | 16 ++++++++--------
 client/pages/filespage/filesystem.js | 20 +++++++++-----------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/client/pages/filespage.js b/client/pages/filespage.js
index b80c3bb9..b606d3cf 100644
--- a/client/pages/filespage.js
+++ b/client/pages/filespage.js
@@ -114,14 +114,14 @@ export class FilesPage extends React.Component {
         this._cleanupListeners();
         const observer = Files.ls(path).subscribe((res) => {
             if(res.status === 'ok'){
-                let files = res.results;
-                files = files.map((file) => {
-                    let path = this.state.path+file.name;
-                    file.link = file.type === "file" ? "/view"+path : "/files"+path+"/";
-                    return file;
-                });
-                if(this.state.show_hidden === false){
-                    files = files.filter((file) => file.name[0] === "." ? false : true);
+                let files = new Array(res.results.length);
+                for(let i=0,l=res.results.length; i<l; i++){
+                    let path = this.state.path+res.results[i].name;
+                    if(this.state.show_hidden === false && path[0] === "."){
+                        continue;
+                    }
+                    files[i] = res.results[i];
+                    files[i].link = res.results[i].type === "file" ? "/view"+path : "/files"+path+"/";
                 }
                 this.setState({
                     metadata: res.metadata,
diff --git a/client/pages/filespage/filesystem.js b/client/pages/filespage/filesystem.js
index 11a9fe6e..1dfa2b79 100644
--- a/client/pages/filespage/filesystem.js
+++ b/client/pages/filespage/filesystem.js
@@ -15,18 +15,12 @@ import { FileZone } from './filezone';
     connectDropFile: connect.dropTarget(),
     fileIsOver: monitor.isOver()
 }))
-export class FileSystem extends React.Component {
-    constructor(props){
-        super(props);
-    }
-
+export class FileSystem extends React.PureComponent {
     render() {
-        const metadata = this.props.metadata || {};
-        // TODO: https://reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method
         return this.props.connectDropFile(
             <div className="component_filesystem">
               <Container>
-                <NewThing path={this.props.path} sort={this.props.sort} view={this.props.view} onViewUpdate={(value) => this.props.onView(value)} onSortUpdate={(value) => {this.props.onSort(value);}} accessRight={metadata}></NewThing>
+                <NewThing path={this.props.path} sort={this.props.sort} view={this.props.view} onViewUpdate={(value) => this.props.onView(value)} onSortUpdate={(value) => {this.props.onSort(value);}} accessRight={this.props.metadata || {}}></NewThing>
                 <NgIf cond={this.props.fileIsOver}>
                   <FileZone path={this.props.path} />
                 </NgIf>
@@ -35,7 +29,7 @@ export class FileSystem extends React.Component {
                   {
                       this.props.files.map((file, index) => {
                           if(file.type === 'directory' || file.type === 'file' || file.type === 'link' || file.type === 'bucket'){
-                              return ( <ExistingThing view={this.props.view} key={file.name+file.path+(file.icon || '')} file={file} path={this.props.path} metadata={metadata} /> );
+                              return ( <ExistingThing view={this.props.view} key={file.name+file.path+(file.icon || '')} file={file} path={this.props.path} metadata={this.props.metadata || {}} /> );
                           }
                       })
                   }
@@ -56,5 +50,9 @@ export class FileSystem extends React.Component {
 FileSystem.propTypes = {
     path: PropTypes.string.isRequired,
     files: PropTypes.array.isRequired,
-    metadata: PropTypes.object.isRequired
-}
+    metadata: PropTypes.object.isRequired,
+    sort: PropTypes.string.isRequired,
+    view: PropTypes.string.isRequired,
+    onView: PropTypes.func.isRequired,
+    onSort: PropTypes.func.isRequired
+};