Wiki sidebar bug (#2321)

* repair rename bug

* modify rename module and  search module

* add hight-light style for tree-node

frontend/src/components/SidePanel.js

@@ -23,6 +23,7 @@ class SidePanel extends Component {
       isLoadFailed: false,
       isMenuIconShow: false
     }
+    this.searchedPath = null;
   }
 
   closeSide = () => {
@@ -120,32 +121,45 @@ class SidePanel extends Component {
   }
 
   onRenameNode = (newName) => {
-    var node = this.state.currentNode;
+    let tree = this.state.tree_data.copy();
+    let node = this.state.currentNode;
     let type = node.type;
     let filePath = node.path;
     if (type === 'file') {
       this.props.editorUtilities.renameFile(filePath, newName).then(res => {
         if (this.isModifyCurrentFile()) {
-          node.name = newName;
+          tree.updateNodeParamValue(node, "name", newName);
+          node.name = newName;  //repair current node
           this.props.onFileClick(null, node);
-          this.changeActivedNode({node});
+          tree.setOneNodeToActived({node});
+          this.setState({tree_data: tree});
+        } else {
+          tree.updateNodeParamValue(node, "name", newName);
+          this.setState({tree_data: tree});
         }
       })
     }
 
     if (type === 'dir') {
+      let _this = this;
       this.props.editorUtilities.renameDir(filePath, newName).then(res => {
-        if (this.isModifyContainsCurrentFile()) {
+        let tree = this.state.tree_data.copy();
         let currentNode = this.state.currentNode;
-          let nodePath = encodeURI(currentNode.path);
-          let pathname = window.location.pathname;
-          let start =  pathname.indexOf(nodePath);
-          let node = currentNode.getNodeByPath(decodeURI(pathname.slice(start)));
+        if (this.isModifyContainsCurrentFile()) {
+          let nodePath = currentNode.path;
+          let filePath = _this.props.currentFileNode.path;
+          let start =  filePath.indexOf(nodePath);
+          let node = currentNode.getNodeByPath(filePath.slice(start));
           if (node) {
+            tree.updateNodeParamValue(currentNode, "name", newName);
             currentNode.name = newName;
             this.props.onFileClick(null, node);
-            this.changeActivedNode({node})
+            tree.setOneNodeToActived({node});
+            this.setState({tree_data: tree});
           }
+        } else {
+          tree.updateNodeParamValue(currentNode, "name", newName);
+          this.setState({tree_data: tree});
         }
       })
     }
@@ -183,26 +197,17 @@ class SidePanel extends Component {
     }
   }
 
-  changeActivedNode(node) {
-    let tree = this.state.tree_data.copy();
-    tree.setOneNodeToActived(node);
-    this.setState({
-      tree_data: tree
-    })
-  }
-
   isModifyCurrentFile() {
-    let name = this.state.currentNode.name;
-    let pathname = window.location.pathname;
-    let currentName = pathname.slice(pathname.lastIndexOf("/") + 1);
-    return encodeURI(name) === currentName;
+    let nodeName = this.state.currentNode.name;
+    let fileName = this.props.currentFileNode.name;
+    return nodeName === fileName;
   }
 
   isModifyContainsCurrentFile() {
-    let pathname = window.location.pathname;
+    let filePath = this.props.currentFileNode.path;
     let nodePath = this.state.currentNode.path;
     
-    if (pathname.indexOf(encodeURI(nodePath)) > -1) {
+    if (filePath.indexOf(nodePath) > -1) {
       return true;
     }
     return false;
@@ -249,6 +254,20 @@ class SidePanel extends Component {
     document.addEventListener('click', this.onHideContextMenu);
   }
 
+  componentWillReceiveProps(nextProps) {
+    let path = nextProps.searchedPath; //handle search module
+    if (path !== this.searchedPath) {
+      let node = this.state.tree_data.getNodeByPath(path);
+      this.searchedPath = path;
+      this.props.onFileClick(null, node);
+      let tree = this.state.tree_data.copy();
+      tree.setOneNodeToActived({node});
+      this.setState({
+        tree_data: tree
+      })
+    }
+  }
+
   componentWillUnmount() {
     document.removeEventListener('click', this.onHideContextMenu);
   }
@@ -280,6 +299,7 @@ class SidePanel extends Component {
             {this.state.tree_data && 
             <TreeView
               permission={this.props.permission}
+              currentFileNode={this.props.currentFileNode}
               treeData={this.state.tree_data}
               currentNode={this.state.currentNode}
               isNodeItemFrezee={this.state.isNodeItemFrezee}

frontend/src/components/tree-view/tree-node-view.js

@@ -114,6 +114,7 @@ class TreeNodeView extends React.Component {
                 treeView={this.props.treeView}
                 isNodeItemFrezee={this.props.isNodeItemFrezee}
                 permission={this.props.permission}
+                currentFileNode={this.props.currentFileNode}
               />
             );
           })}
@@ -171,9 +172,14 @@ class TreeNodeView extends React.Component {
     const styles = {};
     let node = this.props.node;
     let { type, icon } = this.getNodeTypeAndIcon();
+    let hlClass = "";
+    if (node.path === this.props.currentFileNode.path) {
+      hlClass = "tree-node-hight-light";
+    }
+    let customClass = "tree-node " + hlClass;
 
     return (
-      <div type={type} className="tree-node" style={styles}>
+      <div type={type} className={customClass} style={styles}>
         <div 
           onMouseLeave={this.onMouseLeave} 
           onMouseEnter={this.onMouseEnter}

frontend/src/components/tree-view/tree-view.js

@@ -53,6 +53,7 @@ class TreeView extends React.PureComponent {
           node={this.props.treeData.root}
           isNodeItemFrezee={this.props.isNodeItemFrezee}
           permission={this.props.permission}
+          currentFileNode={this.props.currentFileNode}
           onShowContextMenu={this.props.onShowContextMenu}
         />
       </div>

frontend/src/components/tree-view/tree.js

@@ -88,6 +88,15 @@ class Tree {
     return findNode;
   }
 
+  updateNodeParamValue(node, param, value) {
+    let findNode = this.getNodeByPath(node.path);
+    if (findNode[param]) {
+      findNode[param] = value;
+      return true;
+    }
+    return false;
+  }
+
   traverseDF(callback) {
     let stack = [];
     let found = false;

frontend/src/css/side-panel.css

@@ -158,6 +158,10 @@
   line-height: 1.625 !important;
 }
 
+.tree-node-hight-light {
+  background-color: rgb(255,239,178);
+}
+
 .dropdown-menu {
   min-width: 8rem;
 }

frontend/src/wiki.js

@@ -73,13 +73,15 @@ class Wiki extends Component {
       latestContributor: '',
       lastModified: '',
       permission: '',
-      isFileLoading: false
+      isFileLoading: false,
+      currentFileNode: null,
+      searchedPath: null,
     };
     window.onpopstate = this.onpopstate;
   }
 
   componentDidMount() {
-    this.loadFile(initialFilePath);
+    this.loadFile({path: initialFilePath});
   }
 
   fileNameFromPath(filePath) {
@@ -114,14 +116,14 @@ class Wiki extends Component {
   }
 
   onSearchedClick = (path) => {
-    if (path) {
-      this.loadFile(path);
+    if (this.state.currentFileNode.path !== path) {
+      this.setState({searchedPath : path});
     }
   }
 
   onFileClick = (e, node) => {
     if (node.isMarkdown()) {
-      this.loadFile(node.path);
+      this.loadFile(node);
     } else {
       const w=window.open('about:blank');
       const url = serviceUrl + '/lib/' + repoID + '/file' + node.path;
@@ -129,10 +131,9 @@ class Wiki extends Component {
     }
   }
 
-  loadFile(filePath) {
-    this.setState({
-      isFileLoading: true
-    })
+  loadFile(node) {
+    let filePath = node.path;
+    this.setState({isFileLoading: true});
     seafileAPI.getWikiFileContent(slug, filePath)
       .then(res => {
         this.setState({
@@ -142,7 +143,8 @@ class Wiki extends Component {
           permission: res.data.permission,
           fileName: this.fileNameFromPath(filePath),
           filePath: filePath,
-          isFileLoading: false
+          isFileLoading: false,
+          currentFileNode: node
         })
       })
 
@@ -178,6 +180,8 @@ class Wiki extends Component {
           onCloseSide ={this.onCloseSide}
           editorUtilities={editorUtilities}
           permission={this.state.permission}
+          currentFileNode={this.state.currentFileNode}
+          searchedPath={this.state.searchedPath}
         />
         <MainPanel
           content={this.state.content}