From d88c845a06a6caf3c771552d2c52e395784f57d6 Mon Sep 17 00:00:00 2001
From: Mickael KERJEAN <mickael.kerjean@gmail.com>
Date: Thu, 5 Apr 2018 04:47:32 +1000
Subject: [PATCH] feature (links): leverage default browser navigation and
 behavior for links #27,#26

---
 client/pages/filespage.js                | 35 ++++++++++++++----------
 client/pages/filespage/thing-existing.js | 28 +++++++++----------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/client/pages/filespage.js b/client/pages/filespage.js
index 69a3c4fb..aa806df4 100644
--- a/client/pages/filespage.js
+++ b/client/pages/filespage.js
@@ -55,34 +55,39 @@ export class FilesPage extends React.Component {
         if(this.observers.ls) this.observers.ls.unsubscribe();
     }
 
+    componentWillReceiveProps(nextProps){
+        let new_path = function(path){
+            if(path === undefined){ path = "/"; }
+            if(/\/$/.test(path) === false){ path = path + "/"; }
+            if(/^\//.test(path) === false){ path = "/"+ path; }
+            return path;
+        }(nextProps.match.params.path);
+        if(new_path !== this.state.path){
+            this.setState({path: new_path, loading: true});
+            this.onRefresh(new_path);
+        }
+    }
+
     hideError(){
         this.setState({error: false});
     }
 
     onRefresh(path = this.state.path){
+        this.resetHeight();
         if(this.observers.ls) this.observers.ls.unsubscribe();
         this.observers.ls = Files.ls(path).subscribe((files) => {
-            this.setState({files: files, loading: false})
+            files = files.map((file) => {
+                let path = this.state.path+file.name;
+                file.link = file.type === "file" ? "/view"+path : "/files"+path+"/";
+                return file;
+            });
+            this.setState({files: files, loading: false});
         }, (error) => {
-            console.log("ERROR", error);
             this.setState({error: error});
         });
         this.setState({error: false});
     }
 
-    onPathUpdate(path, type = 'directory'){
-        window.timestamp = new Date();
-        if(type === 'file'){
-            this.props.history.push('/view'+path);
-        }else{
-            this.setState({path: path, loading: true});
-            this.onRefresh(path)
-            if(path !== this.state.path){
-                this.props.history.push('/files'+path);
-            }
-        }
-    }
-
     onCreate(path, type, file){
         if(type === 'file'){
             return Files.touch(path, file);
diff --git a/client/pages/filespage/thing-existing.js b/client/pages/filespage/thing-existing.js
index 5f09ca84..985745fc 100644
--- a/client/pages/filespage/thing-existing.js
+++ b/client/pages/filespage/thing-existing.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import { DragSource, DropTarget } from 'react-dnd';
 
 import './thing.scss';
-import { Card, NgIf, Icon, EventEmitter, Prompt } from '../../components/';
-import { pathBuilder } from '../../helpers/';
+import { Card, NgIf, Icon, EventEmitter } from '../../components/';
+import { pathBuilder, prompt } from '../../helpers/';
 
 const fileSource = {
     beginDrag(props, monitor, component) {
@@ -146,19 +147,16 @@ export class ExistingThing extends React.Component {
 
         return connectDragSource(connectDropNativeFile(connectDropFile(
             <div className="component_thing">
-              <Card className={this.state.hover} onClick={this.onSelect.bind(this)} onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} className={className}>
-                <DateTime show={this.state.hover !== true || this.state.icon === 'loading'} timestamp={this.props.file.time} />
-                <Updater filename={this.props.file.name}
-                         icon={this.props.file.icon || this.props.file.type}
-                         can_move={this.props.file.can_move !== false}
-                         can_delete={this.props.file.can_delete !== false}
-                         show={this.state.hover === true && this.state.icon !== 'loading' && !('ontouchstart' in window)}
-                         onRename={this.onRename.bind(this)}
-                         onDelete={this.onDeleteRequest.bind(this)} />
-                <FileSize type={this.props.file.type} size={this.props.file.size} />
-                <Message message={this.state.message} />
-              </Card>
-              <Prompt appear={this.state.delete_request} error={this.state.delete_error} message={this.state.delete_message} onCancel={this.onDeleteCancel.bind(this)} onSubmit={this.onDeleteConfirm.bind(this)}/>
+              <Link to={this.props.file.link}>
+                <Card className={this.state.hover} onClick={this.onSelect.bind(this)} onMouseEnter={() => this.setState({hover: true})} onMouseLeave={() => this.setState({hover: false})} className={className}>
+                  <Icon name={this.props.file.icon || this.props.file.type} />
+                  <Filename filename={this.props.file.name} onRename={this.onRename.bind(this)} is_renaming={this.state.is_renaming} />
+                  <FileSize type={this.props.file.type} size={this.props.file.size} />
+                  <Message message={this.state.message} />
+                  <DateTime show={this.state.icon !== 'loading'} timestamp={this.props.file.time} />
+                  <ActionButton onClickRename={this.onRenameRequest.bind(this)} onClickDelete={this.onDeleteRequest.bind(this)} can_move={this.props.file.can_move !== false} can_delete={this.props.file.can_delete !== false} />
+                </Card>
+              </Link>
             </div>
         )));
     }