debug merge

frontend/src/components/main-panel.js

@@ -1,87 +0,0 @@
-import React, { Component } from 'react';
-import { gettext, repoID, serviceUrl, slug, siteRoot } from './constance';
-import Search from './search';
-import Account from './account';
-import MarkdownViewer from './markdown-viewer';
-import TreeDirView from './tree-dir-view/tree-dir-view';
-
-class MainPanel extends Component {
-
-  onMenuClick = () => {
-    this.props.onMenuClick();
-  }
-
-  onEditClick = (e) => {
-    // const w=window.open('about:blank')
-    e.preventDefault();
-    window.location.href= serviceUrl + '/lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
-  }
-
-  onMainNavBarClick = (e) => {
-    this.props.onMainNavBarClick(e.target.dataset.path);
-  }
-
-  render() {
-
-    let filePathList = this.props.filePath.split('/');
-    let nodePath = "";
-    let pathElem = filePathList.map((item, index) => {
-      if (item === "") {
-        return;
-      } 
-      if (index === (filePathList.length - 1)) {
-        return (
-          <span key={index}><span className="path-split">/</span>{item}</span>
-        )
-      } else {
-        nodePath += "/" + item;
-        return (
-          <a key={index} className="custom-link" data-path={nodePath} onClick={this.onMainNavBarClick}><span className="path-split">/</span>{item}</a>
-        )
-      }
-    });
-
-    return (
-      <div className="wiki-main-panel o-hidden">
-        <div className="main-panel-top panel-top">
-          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-           <div className={`wiki-page-ops ${this.props.permission === 'rw' ? '' : 'hide'}`}>
-              <a className="btn btn-secondary btn-topbar" onClick={this.onEditClick}>{gettext("Edit Page")}</a>
-           </div>
-          <div className="common-toolbar">
-            <Search  onSearchedClick={this.props.onSearchedClick}/>
-            <Account />
-          </div>
-        </div>
-        <div className="cur-view-main">
-          <div className="cur-view-path">
-            <div className="path-containter">
-              <a href={siteRoot + 'wikis/'} className="normal">{gettext("Wikis")}</a>
-              <span className="path-split">/</span>
-              <a href={siteRoot + 'wikis/' + slug} className="normal">{slug}</a>
-              {pathElem}
-            </div>
-          </div>
-          <div className="cur-view-container">
-            { this.props.isViewFileState && <MarkdownViewer
-              markdownContent={this.props.content}
-              latestContributor={this.props.latestContributor}
-              lastModified = {this.props.lastModified}
-              onLinkClick={this.props.onLinkClick}
-              isFileLoading={this.props.isFileLoading}
-            />}
-            { !this.props.isViewFileState && 
-              <TreeDirView 
-                node={this.props.changedNode}
-                onMainNodeClick={this.props.onMainNodeClick}
-              >
-              </TreeDirView>
-            }
-          </div>
-        </div>
-    </div>
-    )
-  }
-}
-
-export default MainPanel;

frontend/src/components/side-panel.js

@@ -1,164 +0,0 @@
-import React, { Component } from 'react';
-import TreeView from './tree-view/tree-view';
-import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from './constance';
-import NodeMenu from './menu-component/node-menu';
-import MenuControl from './menu-component/node-menu-control';
-
-const gettext = window.gettext;
-
-class SidePanel extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      currentNode: null,
-      isNodeItemFrezee: false,
-      isShowMenu: false,
-      menuPosition: {
-        left: 0,
-        top: 0
-      },
-      isLoadFailed: false,
-      isMenuIconShow: false
-    }
-    this.searchedPath = null;
-  }
-
-  closeSide = () => {
-    this.props.onCloseSide();
-  }
-
-  onMouseEnter = () => {
-    this.setState({
-      isMenuIconShow: true
-    })
-  }
-
-  onMouseLeave = () => {
-    this.setState({
-      isMenuIconShow: false
-    })
-  }
-
-  onNodeClick = (e, node) => {
-    this.setState({currentNode: node})
-    this.props.onNodeClick(e, node)
-  }
-
-  onShowContextMenu = (e, node) => {
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 10;
-    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-    this.setState({
-      isShowMenu: !this.state.isShowMenu,
-      currentNode: node,
-      menuPosition: position,
-      isNodeItemFrezee: true
-    })
-  }
-
-  onHeadingMenuClick = (e) => {
-    e.nativeEvent.stopImmediatePropagation();
-    let node = this.props.treeData.root;
-    let left = e.clientX - 8*16;
-    let top  = e.clientY + 10;
-    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-    this.setState({
-      isShowMenu: !this.state.isShowMenu,
-      currentNode: node,
-      menuPosition: position
-    })
-  }
-
-  onHideContextMenu = () => {
-    this.setState({
-      isShowMenu: false,
-      isNodeItemFrezee: false
-    })
-  }
-
-  onAddFolderNode = (dirPath) => {
-    this.props.onAddFolderNode(dirPath);
-  }
-
-  onAddFileNode = (filePath) => {
-    this.props.onAddFileNode(filePath);
-  }
-  
-  onRenameNode = (newName) => {
-    let node = this.state.currentNode;
-    this.props.onRenameNode(node, newName)
-  }
-  
-  onDeleteNode = () => {
-    let node = this.state.currentNode;
-    this.props.onDeleteNode(node);
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.onHideContextMenu);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      currentNode: nextProps.changedNode
-    })
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onHideContextMenu);
-  }
-
-  render() {
-    return (
-      <div className={`wiki-side-panel ${this.props.closeSideBar ? "": "left-zero"}`}>
-        <div className="side-panel-top panel-top">
-          <a href={siteRoot} id="logo">
-            <img src={mediaUrl + logoPath} title={siteTitle} alt="logo" width={logoWidth} height={logoHeight} />
-          </a>
-          <a title="Close" aria-label="Close" onClick={this.closeSide} className="sf2-icon-x1 sf-popover-close side-panel-close op-icon d-md-none "></a>
-        </div>
-        <div id="side-nav" className="wiki-side-nav" role="navigation">
-          <h3 
-            className="wiki-pages-heading" 
-            onMouseEnter={this.onMouseEnter} 
-            onMouseLeave={this.onMouseLeave}
-          >
-            {gettext("Pages")}
-            <div className="heading-icon">
-              <MenuControl 
-                isShow={this.state.isMenuIconShow}
-                onClick={this.onHeadingMenuClick}
-              />
-            </div>
-          </h3>
-          <div className="wiki-pages-container">
-            {this.props.treeData && 
-            <TreeView
-              permission={this.props.permission}
-              currentFilePath={this.props.currentFilePath}
-              treeData={this.props.treeData}
-              currentNode={this.state.currentNode}
-              isNodeItemFrezee={this.state.isNodeItemFrezee}
-              onNodeClick={this.onNodeClick}
-              onShowContextMenu={this.onShowContextMenu}
-              onDirCollapse={this.props.onDirCollapse}
-            />
-            }
-            <NodeMenu 
-              isShowMenu={this.state.isShowMenu}
-              menuPosition={this.state.menuPosition}
-              currentNode={this.state.currentNode}
-              onHideContextMenu={this.onHideContextMenu}
-              onDeleteNode={this.onDeleteNode}
-              onAddFileNode={this.onAddFileNode}
-              onAddFolderNode={this.onAddFolderNode}
-              onRenameNode={this.onRenameNode}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-export default SidePanel;

frontend/src/pages/wiki/main-panel.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import Search from '../../components/search';
-import MarkdownViewer from '../../components/markdown-viewer';
-import Account from '../../components/account';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../components/constance';
+import Search from '../../components/search';
+import Account from '../../components/account';
+import MarkdownViewer from '../../components/markdown-viewer';
+import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
 
 class MainPanel extends Component {
 
@@ -16,15 +17,27 @@ class MainPanel extends Component {
     window.location.href= serviceUrl + '/lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
   }
 
+  onMainNavBarClick = (e) => {
+    this.props.onMainNavBarClick(e.target.dataset.path);
+  }
+
   render() {
-    var filePathList = this.props.filePath.split('/');
+
-    var pathElem = filePathList.map((item, index) => {
+    let filePathList = this.props.filePath.split('/');
-      if (item == "") {
+    let nodePath = "";
+    let pathElem = filePathList.map((item, index) => {
+      if (item === "") {
         return;
-      } else {
+      } 
+      if (index === (filePathList.length - 1)) {
         return (
           <span key={index}><span className="path-split">/</span>{item}</span>
         )
+      } else {
+        nodePath += "/" + item;
+        return (
+          <a key={index} className="custom-link" data-path={nodePath} onClick={this.onMainNavBarClick}><span className="path-split">/</span>{item}</a>
+        )
       }
     });
 
@@ -36,8 +49,8 @@ class MainPanel extends Component {
               <a className="btn btn-secondary btn-topbar" onClick={this.onEditClick}>{gettext("Edit Page")}</a>
            </div>
           <div className="common-toolbar">
-            <Search seafileAPI={this.props.seafileAPI} onSearchedClick={this.props.onSearchedClick}/>
+            <Search  onSearchedClick={this.props.onSearchedClick}/>
-            <Account seafileAPI={this.props.seafileAPI} />
+            <Account />
           </div>
         </div>
         <div className="cur-view-main">
@@ -50,13 +63,20 @@ class MainPanel extends Component {
             </div>
           </div>
           <div className="cur-view-container">
-            <MarkdownViewer
+            { this.props.isViewFileState && <MarkdownViewer
               markdownContent={this.props.content}
               latestContributor={this.props.latestContributor}
               lastModified = {this.props.lastModified}
               onLinkClick={this.props.onLinkClick}
               isFileLoading={this.props.isFileLoading}
-            />
+            />}
+            { !this.props.isViewFileState && 
+              <TreeDirView 
+                node={this.props.changedNode}
+                onMainNodeClick={this.props.onMainNodeClick}
+              >
+              </TreeDirView>
+            }
           </div>
         </div>
     </div>

frontend/src/pages/wiki/side-panel.js

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import TreeView from '../../components/tree-view/tree-view';
 import { siteRoot, logoPath, mediaUrl, siteTitle, logoWidth, logoHeight } from '../../components/constance';
-import Tree from '../../components/tree-view/tree';
-import Node from '../../components/tree-view/node'
 import NodeMenu from '../../components/menu-component/node-menu';
 import MenuControl from '../../components/menu-component/node-menu-control';
+
 const gettext = window.gettext;
 
 class SidePanel extends Component {
@@ -12,7 +11,6 @@ class SidePanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      tree_data: new Tree(),
       currentNode: null,
       isNodeItemFrezee: false,
       isShowMenu: false,
@@ -43,10 +41,8 @@ class SidePanel extends Component {
   }
 
   onNodeClick = (e, node) => {
-    this.setState({
+    this.setState({currentNode: node})
-      currentNode: node
+    this.props.onNodeClick(e, node)
-    })
-    this.props.onFileClick(e, node)
   }
 
   onShowContextMenu = (e, node) => {
@@ -63,7 +59,7 @@ class SidePanel extends Component {
 
   onHeadingMenuClick = (e) => {
     e.nativeEvent.stopImmediatePropagation();
-    let node = this.state.tree_data.root;
+    let node = this.props.treeData.root;
     let left = e.clientX - 8*16;
     let top  = e.clientY + 10;
     let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
@@ -82,191 +78,31 @@ class SidePanel extends Component {
   }
 
   onAddFolderNode = (dirPath) => {
-    this.props.editorUtilities.createDir(dirPath).then(res => {
+    this.props.onAddFolderNode(dirPath);
-      let tree = this.state.tree_data.copy();
-      let index = dirPath.lastIndexOf("/");
-      let name = dirPath.substring(index+1);
-      let parentPath = dirPath.substring(0, index);
-      if (!parentPath) {
-        parentPath = "/";
-      }
-      let node = new Node({name : name, type: "dir", isExpanded: false, children: []});
-      let parentNode = tree.getNodeByPath(parentPath);
-      tree.addChildToNode(parentNode, node);
-      tree.setOneNodeToActived({node});
-      this.setState({
-        tree_data: tree
-      })
-
-    })
   }
 
   onAddFileNode = (filePath) => {
-    this.props.editorUtilities.createFile(filePath).then(res => {
+    this.props.onAddFileNode(filePath);
-      let tree = this.state.tree_data.copy();
-      let index = filePath.lastIndexOf("/");
-      let name = filePath.substring(index+1);
-      let parentPath = filePath.substring(0, index);
-      if (!parentPath) {
-        parentPath = "/";
-      }
-      let node = new Node({name : name, type: "file", isExpanded: false, children: []});
-      let parentNode = tree.getNodeByPath(parentPath);
-      tree.addChildToNode(parentNode, node);
-      tree.setOneNodeToActived({node});
-      this.setState({
-        tree_data: tree
-      })
-    })
   }
-
+  
   onRenameNode = (newName) => {
-    let tree = this.state.tree_data.copy();
     let node = this.state.currentNode;
-    let type = node.type;
+    this.props.onRenameNode(node, newName)
-    let filePath = node.path;
-    if (type === 'file') {
-      this.props.editorUtilities.renameFile(filePath, newName).then(res => {
-        if (this.isModifyCurrentFile()) {
-          tree.updateNodeParamValue(node, "name", newName);
-          node.name = newName;  //repair current node
-          this.props.onFileClick(null, 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 => {
-        let tree = this.state.tree_data.copy();
-        let currentNode = this.state.currentNode;
-        if (this.isModifyContainsCurrentFile()) {
-          let nodePath = currentNode.path;
-          let filePath = _this.props.currentFilePath;
-          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);
-            tree.setOneNodeToActived({node});
-            this.setState({tree_data: tree});
-          }
-        } else {
-          tree.updateNodeParamValue(currentNode, "name", newName);
-          this.setState({tree_data: tree});
-        }
-      })
-    }
   }
-
+  
   onDeleteNode = () => {
-    var currentNode = this.state.currentNode;
+    let node = this.state.currentNode;
-    let filePath = currentNode.path;
+    this.props.onDeleteNode(node);
-    let type = currentNode.type;
-    if (type === 'file') {
-      this.props.editorUtilities.deleteFile(filePath);
-    } 
-
-    if (type === 'dir') {
-      this.props.editorUtilities.deleteDir(filePath);
-    }
-
-    let isCurrentFile = false;
-    if (this.state.currentNode.type === "dir") {
-      isCurrentFile = this.isModifyContainsCurrentFile(); 
-    } else {
-      isCurrentFile = this.isModifyCurrentFile();
-    }
-
-    let tree = this.state.tree_data.copy();
-    tree.removeNodeFromTree(currentNode);
-
-    if (isCurrentFile) {
-      let homeNode = this.getHomeNode();
-      this.props.onFileClick(null, homeNode);
-      tree.setNoneNodeActived();
-      this.setState({tree_data: tree})
-    } else {
-      this.setState({tree_data: tree})
-    }
-  }
-
-  isModifyCurrentFile() {
-    let nodeName = this.state.currentNode.name;
-    let filePath = this.props.currentFilePath;
-    let index    = filePath.lastIndexOf("/");
-    let fileName = filePath.slice(index+1);
-    return nodeName === fileName;
-  }
-
-  isModifyContainsCurrentFile() {
-    let filePath = this.props.currentFilePath;
-    let nodePath = this.state.currentNode.path;
-    
-    if (filePath.indexOf(nodePath) > -1) {
-      return true;
-    }
-    return false;
-  }
-
-  initializeTreeData() {
-    this.props.editorUtilities.getFiles().then((files) => {
-      // construct the tree object
-      var rootObj = {
-        name: '/',
-        type: 'dir',
-        isExpanded: true
-      }
-      var treeData = new Tree();
-      treeData.parseFromList(rootObj, files);
-      let homeNode = this.getHomeNode(treeData);
-      this.setState({
-        tree_data: treeData,
-        currentNode: homeNode
-      })
-    }, () => {
-      console.log("failed to load files");
-      this.setState({
-        isLoadFailed: true
-      })
-    })
-  }
-
-  getHomeNode(treeData) {
-    let root = null;
-    if (treeData) {
-      root = treeData.root;
-    } else {
-      root = this.state.tree_data.root;
-    }
-    let homeNode = root.getNodeByPath(decodeURI("/home.md"));
-    return homeNode;
   }
 
   componentDidMount() {
-    //init treeview data
-    this.initializeTreeData();
     document.addEventListener('click', this.onHideContextMenu);
   }
 
   componentWillReceiveProps(nextProps) {
-    let path = nextProps.searchedPath; //handle search module
+    this.setState({
-    if (path !== this.searchedPath) {
+      currentNode: nextProps.changedNode
-      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() {
@@ -297,15 +133,16 @@ class SidePanel extends Component {
             </div>
           </h3>
           <div className="wiki-pages-container">
-            {this.state.tree_data && 
+            {this.props.treeData && 
             <TreeView
               permission={this.props.permission}
               currentFilePath={this.props.currentFilePath}
-              treeData={this.state.tree_data}
+              treeData={this.props.treeData}
               currentNode={this.state.currentNode}
               isNodeItemFrezee={this.state.isNodeItemFrezee}
               onNodeClick={this.onNodeClick}
               onShowContextMenu={this.onShowContextMenu}
+              onDirCollapse={this.props.onDirCollapse}
             />
             }
             <NodeMenu