Wiki mode optimized (#2442)

frontend/src/components/dialog/zip-download-dialog.js

@@ -1,6 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
+const propTypes = {
+  onCancelDownload: PropTypes.func.isRequired,
+  progress: PropTypes.string.isRequired,
+};
+
 class ZipDownloadDialog extends React.Component {
 
   toggle = () => {
@@ -19,4 +25,6 @@ class ZipDownloadDialog extends React.Component {
   }
 }
 
+ZipDownloadDialog.propTypes = propTypes;
+
 export default ZipDownloadDialog;

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { serviceUrl, gettext } from '../../utils/constants';
+import OperationGroup from '../dirent-operation/operation-group';
+
+const propTypes = {
+  isItemFreezed: PropTypes.bool.isRequired,
+  dirent: PropTypes.object.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  onItemMenuShow: PropTypes.func.isRequired,
+  onItemMenuHide: PropTypes.func.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemStarred: PropTypes.func.isRequired,
+  onItemDownload: PropTypes.func.isRequired,
+};
+
+class DirentListItem extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOperationShow: false,
+      highlight: false
+    };
+  }
+
+  //UI Interactive
+  onMouseEnter = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
+  }
+
+  onMouseOver = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: true,
+        isOperationShow: true,
+      });
+    }
+  }
+
+  onMouseLeave = () => {
+    if (!this.props.isItemFreezed) {
+      this.setState({
+        highlight: false,
+        isOperationShow: false,
+      });
+    }
+  }
+
+  onItemMenuShow = () => {
+    this.props.onItemMenuShow();
+  }
+
+  onItemMenuHide = () => {
+    this.setState({
+      isOperationShow: false,
+      highlight: ''
+    });
+    this.props.onItemMenuHide();
+  }
+
+  //buiness handler
+  onItemSelected = () => {
+    //todos;
+  }
+
+  onItemStarred = () => {
+    this.props.onItemStarred(this.props.dirent);
+  }
+
+  onItemClick = () => {
+    this.props.onItemClick(this.props.dirent);
+  }
+
+
+  onItemDownload = () => {
+    this.props.onItemDownload(this.props.dirent);
+  }
+
+  onItemDelete = () => {
+    this.props.onItemDelete(this.props.dirent);
+  }
+
+  render() {
+    let { dirent } = this.props;
+    return (
+      <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
+        <td className="select">
+          <input type="checkbox" className="vam" />
+        </td>
+        <td className="star" onClick={this.onItemStarred}>
+          {dirent.starred !== undefined && !dirent.starred && <i className="far fa-star empty"></i>}
+          {dirent.starred !== undefined && dirent.starred && <i className="fas fa-star"></i>}
+        </td>
+        <td className="icon">
+          <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt={gettext('file icon')}></img>
+        </td>
+        <td className="name a-simulate" onClick={this.onItemClick}>{dirent.name}</td>
+        <td className="operation">
+          {
+            this.state.isOperationShow && 
+            <OperationGroup 
+              dirent={dirent} 
+              onItemMenuShow={this.onItemMenuShow}
+              onItemMenuHide={this.onItemMenuHide}
+              onDownload={this.onItemDownload}
+              onDelete={this.onItemDelete}
+            />
+          }
+        </td>
+        <td className="file-size">{dirent.size && dirent.size}</td>
+        <td className="last-update" dangerouslySetInnerHTML={{__html: dirent.mtime}}></td>
+      </tr>
+    );
+  }
+}
+
+DirentListItem.propTypes = propTypes;
+
+export default DirentListItem;

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, repoID } from '../../utils/constants';
+import URLDecorator from '../../utils/url-decorator';
+import editorUtilities from '../../utils/editor-utilties';
+import { seafileAPI } from '../../utils/seafile-api';
+import DirentListItem from './dirent-list-item';
+import ZipDownloadDialog from '../dialog/zip-download-dialog';
+
+const propTypes = {
+  filePath: PropTypes.string.isRequired,
+  direntList: PropTypes.array.isRequired,
+  onItemDelete: PropTypes.func.isRequired,
+  onItemClick: PropTypes.func.isRequired,
+  updateViewList: PropTypes.func.isRequired,
+};
+
+class DirentListView extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false,
+      isProgressDialogShow: false,
+      progress: '0%',
+    };
+  }
+
+  onItemMenuShow = () => {
+    this.setState({isItemFreezed: true});
+  }
+  
+  onItemMenuHide = () => {
+    this.setState({isItemFreezed: false});
+  }
+
+  onItemClick = (dirent) => {
+    let direntPath = this.getDirentPath(dirent);
+    this.props.onItemClick(direntPath);
+  }
+
+  onItemDelete = (dirent) => {
+    let direntPath = this.getDirentPath(dirent);
+    this.props.onItemDelete(direntPath);
+  }
+
+  onItemStarred = (dirent) => {
+    let filePath = this.getDirentPath(dirent);
+    if (dirent.starred) {
+      seafileAPI.unStarFile(repoID, filePath).then(() => {
+        this.props.updateViewList(this.props.filePath);
+      });
+    } else {
+      seafileAPI.starFile(repoID, filePath).then(() => {
+        this.props.updateViewList(this.props.filePath);
+      });
+    }
+  }
+
+  onItemDownload = (dirent) => {
+    if (dirent.type === 'dir') {
+      this.setState({isProgressDialogShow: true, progress: '0%'});
+      editorUtilities.zipDownload(this.props.filePath, dirent.name).then(res => {
+        this.zip_token = res.data['zip_token'];
+        this.addDownloadAnimation();
+        this.interval = setInterval(this.addDownloadAnimation, 1000);
+      });
+    } else {
+      let path = this.getDirentPath(dirent);
+      let url = URLDecorator.getUrl({type: 'download_file_url', repoID: repoID, filePath: path});
+      location.href = url;
+    }
+  }
+
+  addDownloadAnimation = () => {
+    let _this = this;
+    let token = this.zip_token;
+    editorUtilities.queryZipProgress(token).then(res => {
+      let data = res.data;
+      let progress = data.total === 0 ? '100%' : (data.zipped / data.total * 100).toFixed(0) + '%';
+      this.setState({progress: progress});
+
+      if (data['total'] === data['zipped']) {
+        this.setState({
+          progress: '100%'
+        });
+        clearInterval(this.interval);
+        location.href = URLDecorator.getUrl({type: 'download_dir_zip_url', token: token});
+        setTimeout(function() {
+          _this.setState({isProgressDialogShow: false});
+        }, 500);
+      }
+
+    });
+  }
+
+  onCancelDownload = () => {
+    let zip_token = this.zip_token;
+    editorUtilities.cancelZipTask(zip_token).then(res => {
+      this.setState({
+        isProgressDialogShow: false,
+      });
+    });
+  }
+
+  getDirentPath = (dirent) => {
+    let path = this.props.filePath;
+    return path === '/' ? path + dirent.name : path + '/' + dirent.name;
+  }
+
+  render() {
+    const { direntList } = this.props;
+    return (
+      <div className="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th width="3%" className="select"><input type="checkbox" className="vam" /></th>
+              <th width="3%"></th>
+              <th width="5%"></th>
+              <th width="45%">{gettext('Name')}</th>
+              <th width="20%"></th>
+              <th width="11%">{gettext('Size')}</th>
+              <th width="13%">{gettext('Last Update')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              direntList.length !== 0 && direntList.map((dirent, index) => {
+                return (
+                  <DirentListItem
+                    key={index}
+                    dirent={dirent}
+                    isItemFreezed={this.state.isItemFreezed}
+                    onItemMenuShow={this.onItemMenuShow}
+                    onItemMenuHide={this.onItemMenuHide}
+                    onItemDelete={this.onItemDelete}
+                    onItemStarred={this.onItemStarred}
+                    onItemDownload={this.onItemDownload}
+                    onItemClick={this.onItemClick}
+                  />
+                );
+              })
+            }
+          </tbody>
+        </table>
+        {
+          this.state.isProgressDialogShow && 
+          <ZipDownloadDialog progress={this.state.progress} onCancelDownload={this.onCancelDownload}/>
+        }
+      </div>
+    );
+  }
+}
+
+DirentListView.propTypes = propTypes;
+
+export default DirentListView;

frontend/src/components/dirent-operation/operation-group.js

@@ -1,7 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import OperationMenu from './operation-menu';
 
+const propTypes = {
+  dirent: PropTypes.object.isRequired,
+  onItemMenuShow: PropTypes.func.isRequired,
+  onItemMenuHide: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onDownload: PropTypes.func.isRequired,
+};
+
 class OperationGroup extends React.Component {
 
   constructor(props) {
@@ -9,7 +18,7 @@ class OperationGroup extends React.Component {
     this.state = {
       isItemMenuShow: false,
       menuPosition: {top: 0, left: 0 },
-    }
+    };
   }
 
   componentDidMount() {
@@ -34,24 +43,28 @@ class OperationGroup extends React.Component {
     this.props.onDelete();
   }
 
-  onItemMenuShow = (e) => {
+  onItemMenuToggle = (e) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+
     if (!this.state.isItemMenuShow) {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-  
-      let left = e.clientX - 8*16;
-      let top  = e.clientY + 15;
-      let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
-      this.setState({
-        menuPosition: position,
-        isItemMenuShow: true,
-      });
-      this.props.onItemMenuShow();
+      this.onItemMenuShow(e);
     } else {
       this.onItemMenuHide();
     }
   }
 
+  onItemMenuShow = (e) => {
+    let left = e.clientX - 8*16;
+    let top  = e.clientY + 15;
+    let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
+    this.setState({
+      menuPosition: position,
+      isItemMenuShow: true,
+    });
+    this.props.onItemMenuShow();
+  }
+
   onItemMenuHide = () => {
     this.setState({
       isItemMenuShow: false,
@@ -81,13 +94,13 @@ class OperationGroup extends React.Component {
             <i className="sf2-icon-delete" title={gettext('Delete')} onClick={this.onDelete}></i>
           </li>
           <li className="operation-group-item">
-            <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operation')} onClick={this.onItemMenuShow}></i>
+            <i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operation')} onClick={this.onItemMenuToggle}></i>
           </li>
         </ul>
         {
           this.state.isItemMenuShow && 
           <OperationMenu 
-            currentItem={this.props.item}
+            dirent={this.props.dirent}
             menuPosition={this.state.menuPosition}
             onRename={this.onRename}
             onCopy={this.onCopy}
@@ -98,4 +111,6 @@ class OperationGroup extends React.Component {
   }
 }
 
+OperationGroup.propTypes = propTypes;
+
 export default OperationGroup;

frontend/src/components/dirent-operation/operation-menu.js

@@ -1,22 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../utils/constants';
+import { gettext, repoID } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Repo from '../../models/repo';
 
 const propTypes = {
-  currentItem: PropTypes.object.isRequired,
+  dirent: PropTypes.object.isRequired,
   menuPosition: PropTypes.object.isRequired, 
 };
 
 class OperationMenu extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      repo: null,
+      is_repo_owner: false,
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getRepoInfo(repoID).then(res => {
+      let repo = new Repo(res.data);
+      seafileAPI.getAccountInfo().then(res => {
+        let user_email = res.data.email;
+        let is_repo_owner = repo.owner_email === user_email;
+        this.setState({
+          repo: repo,
+          is_repo_owner: is_repo_owner
+        });
+      })
+    });
+  }
+
   getItemType() {
-    return this.props.currentItem.type;
+    let type = this.props.dirent.is_dir ? 'dir' : 'file';
+    return type;
   }
 
   renderDirentDirMenu() {
     let position = this.props.menuPosition;
     let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
-    if (this.props.currentItem.permission === 'rw') {
+    if (this.props.dirent.permission === 'rw') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -44,7 +69,7 @@ class OperationMenu extends React.Component {
       );
     }
 
-    if (this.props.currentItem.permission === 'r') {
+    if (this.props.dirent.permission === 'r') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -62,7 +87,7 @@ class OperationMenu extends React.Component {
   renderDirentFileMenu() {
     let position = this.props.menuPosition;
     let style = {position: 'fixed', left: position.left, top: position.top, display: 'block'};
-    if (this.props.currentItem.permission === 'rw') {
+    if (this.props.dirent.permission === 'rw') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -105,7 +130,7 @@ class OperationMenu extends React.Component {
       );
     }
 
-    if (this.props.currentItem.permission === "r") {
+    if (this.props.dirent.permission === 'r') {
       return (
         <ul className="dropdown-menu operation-menu" style={style}>
           <li className="dropdown-item operation-menu-item">
@@ -130,14 +155,14 @@ class OperationMenu extends React.Component {
     let type = this.getItemType();
     let menu = null;
     switch(type) {
-      case 'file':
-        menu = this.renderDirentFileMenu();
-        break;
-      case 'dir':
-        menu = this.renderDirentDirMenu();
-        break;
-      default:
-        break;
+    case 'file':
+      menu = this.renderDirentFileMenu();
+      break;
+    case 'dir':
+      menu = this.renderDirentDirMenu();
+      break;
+    default:
+      break;
     }
     return menu;
   }

frontend/src/models/dirent.js

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import { Utils } from '../utils/utils';
+
+class Dirent {
+  constructor(json) {
+    this.id = json.id;
+    this.name = json.name;
+    this.type = json.type;
+    this.mtime = moment.unix(json.mtime).fromNow();
+    this.permission = json.permission;
+    if (json.type === 'file') {
+      this.size = Utils.bytesToSize(json.size);
+      this.starred = json.starred;
+      this.is_locked = json.is_locked;
+      this.lock_time = moment.unix(json.lock_time).fromNow();
+      this.lock_owner= json.lock_owner;
+      this.locked_by_me = json.locked_by_me;
+      this.modifier_name = json.modifier_name;
+      this.modifier_email = json.modifier_email;
+      this.modifier_contact_email = json.modifier_contact_email;
+    }
+  }
+
+}
+
+export default Dirent;

frontend/src/models/repo.js

@@ -0,0 +1,21 @@
+import { Utils } from '../utils/utils';
+
+class Repo {
+  constructor(object) {
+    this.repo_id = object.repo_id;
+    this.repo_name = object.name;
+    this.permission = object.permission;
+    this.size = Utils.bytesToSize(object.size);
+    this.file_count = object.file_count;
+    this.owner_name = object.owner_name;
+    this.owner_email = object.owner_email;
+    this.owner_contact_email = object.owner_contact_email;
+    this.is_admin = object.is_admin;
+    this.is_virtual = object.is_virtual;
+    this.no_quota = object.no_quota;
+    this.has_been_shared_out = object.has_been_shared_out;
+    this.encrypted = object.encrypted;
+  }
+}
+
+export default Repo;

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

@@ -1,9 +1,27 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { gettext, repoID, serviceUrl, slug, siteRoot } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import PathToolbar from '../../components/toolbar/path-toolbar';
 import MarkdownViewer from '../../components/markdown-viewer';
-import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
+import DirentListView from '../../components/dirent-list-view/dirent-list-view';
+import Dirent from '../../models/dirent';
+
+const propTypes = {
+  content: PropTypes.string,
+  lastModified: PropTypes.string,
+  latestContributor: PropTypes.string,
+  permission: PropTypes.string,
+  filePath: PropTypes.string.isRequired,
+  isFileLoading: PropTypes.bool.isRequired,
+  isViewFileState: PropTypes.bool.isRequired,
+  onMenuClick: PropTypes.func.isRequired,
+  onSearchedClick: PropTypes.func.isRequired,
+  onMainNavBarClick: PropTypes.func.isRequired,
+  onMainItemClick: PropTypes.func.isRequired,
+  onMainItemDelete: PropTypes.func.isRequired,
+}
 
 class MainPanel extends Component {
 
@@ -11,20 +29,35 @@ class MainPanel extends Component {
     super(props);
     this.state = {
       isWikiMode: true,
-      needOperationGroup: true,
+      direntList: []
     };
   }
 
+  componentWillReceiveProps(nextProps) {
+    let node = nextProps.changedNode;
+    if (node && node.isDir()) {
+      let path = node.path;
+      this.updateViewList(path);
+    }
+  }
+
+  updateViewList = (filePath) => {
+    seafileAPI.listDir(repoID, filePath, 48).then(res => {
+      let direntList = [];
+      res.data.forEach(item => {
+        let dirent = new Dirent(item);
+        direntList.push(dirent);
+      });
+      this.setState({
+        direntList: direntList,
+      });
+    });
+  }
+
   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);
   }
@@ -38,8 +71,12 @@ class MainPanel extends Component {
     this.props.switchViewMode(e.target.id);
   }
 
-  render() {
+  onEditClick = (e) => {
+    e.preventDefault();
+    window.location.href= serviceUrl + '/lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
+  }
 
+  render() {
     let filePathList = this.props.filePath.split('/');
     let nodePath = '';
     let pathElem = filePathList.map((item, index) => {
@@ -88,31 +125,32 @@ class MainPanel extends Component {
             <div className="path-containter">
               <a href={siteRoot + '#common/'} className="normal">{gettext('Libraries')}</a>
               <span className="path-split">/</span>
-              <a href={siteRoot + 'wiki/lib/' + repoID + '/'} className="normal">{slug}</a>
+              { 
+                this.props.filePath === '/' ?
+                <span>{slug}</span> :
+                <a className="path-link" data-path="/" onClick={this.onMainNavBarClick}>{slug}</a>
+              }
               {pathElem}
             </div>
             <PathToolbar filePath={this.props.filePath}/>
           </div>
           <div className="cur-view-content">
-            { this.props.isViewFileState && 
+            { this.props.isViewFileState ?
               <MarkdownViewer
                 markdownContent={this.props.content}
                 latestContributor={this.props.latestContributor}
                 lastModified = {this.props.lastModified}
                 onLinkClick={this.props.onLinkClick}
                 isFileLoading={this.props.isFileLoading}
+              /> :
+              <DirentListView 
+                direntList={this.state.direntList}
+                filePath={this.props.filePath}
+                onItemClick={this.props.onMainItemClick}
+                onItemDelete={this.props.onMainItemDelete}
+                updateViewList={this.updateViewList}
               />
             }
-            { !this.props.isViewFileState && 
-              <TreeDirView 
-                node={this.props.changedNode}
-                onMainNodeClick={this.props.onMainNodeClick}
-                onDeleteItem={this.props.onDeleteNode}
-                onRenameItem={this.props.onRenameNode}
-                needOperationGroup={this.state.needOperationGroup}
-              >
-              </TreeDirView>
-            }
           </div>
         </div>
       </div>
@@ -120,4 +158,6 @@ class MainPanel extends Component {
   }
 }
 
+MainPanel.propTypes = propTypes;
+
 export default MainPanel;

frontend/src/repo-wiki-mode.js

@@ -54,31 +54,8 @@ class Wiki extends Component {
         this.exitViewFileState(treeData, node);
         this.setState({isFileLoading: false});
       } else {
-        seafileAPI.getFileInfo(repoID, filePath).then((res) => {
-          let { mtime, permission, last_modifier_name } = res.data;
-
-          this.setState({
-            tree_data: treeData,
-            latestContributor: last_modifier_name,
-            lastModified: moment.unix(mtime).fromNow(),
-            permission: permission,
-            filePath: filePath,
-            isFileLoading: false
-          });
-
-          seafileAPI.getFileDownloadLink(repoID, filePath).then((res) => {
-            const downLoadUrl = res.data;
-            seafileAPI.getFileContent(downLoadUrl).then((res) => {
-              this.setState({
-                content: res.data,
-                isFileLoading: false
-              });
-            });
-          });
-        });
-
-        let fileUrl = serviceUrl + '/wiki/lib/' + repoID + filePath;
-        window.history.pushState({urlPath: fileUrl, filePath: filePath}, filePath, fileUrl);
+        this.setState({tree_data: treeData});
+        this.initMainPanelData(filePath);
       }
     }, () => {
       /* eslint-disable */
@@ -149,7 +126,14 @@ class Wiki extends Component {
 
   onpopstate = (event) => {
     if (event.state && event.state.filePath) {
-      this.initMainPanelData(event.state.filePath);
+      let path = event.state.filePath;
+      if (this.isMarkdownFile(path)) {
+        this.initMainPanelData(path);
+      } else {
+        let changedNode = this.state.tree_data.getNodeByPath(path);
+        this.exitViewFileState(this.state.tree_data, changedNode);
+      }
+
     }
   }
   
@@ -177,9 +161,11 @@ class Wiki extends Component {
     window.history.pushState({urlPath: fileUrl, filePath: node.path},node.path, fileUrl);
   }
 
-  onMainNodeClick = (node) => {
+  onMainItemClick = (direntPath) => {
     let tree = this.state.tree_data.clone();
-    tree.expandNode(node);
+    let node = tree.getNodeByPath(direntPath);
+    let parentNode = tree.findNodeParentFromTree(node);
+    tree.expandNode(parentNode);
     if (node.isMarkdown()) {
       this.initMainPanelData(node.path);
       this.enterViewFileState(tree, node, node.path);
@@ -192,6 +178,15 @@ class Wiki extends Component {
     }
   }
 
+  onMainItemDelete = (direntPath) => {
+    let node = this.state.tree_data.getNodeByPath(direntPath);
+    this.onDeleteNode(node);
+  }
+
+  onMainItemRename = () => {
+    //todos:
+  }
+
   onNodeClick = (e, node) => {
     if (node instanceof Node && node.isMarkdown()){
       let tree = this.state.tree_data.clone();
@@ -315,7 +310,6 @@ class Wiki extends Component {
       });
     } else if (node.isDir()) {
       editorUtilities.renameDir(filePath, newName).then(res => {
-
         let currentFilePath = this.state.filePath;
         let currentFileNode = tree.getNodeByPath(currentFilePath);
         let nodePath = node.path;
@@ -355,11 +349,18 @@ class Wiki extends Component {
   onDeleteNode = (node) => {
     let filePath = node.path;
     if (node.isDir()) {
-      editorUtilities.deleteDir(filePath);
+      editorUtilities.deleteDir(filePath).then(() => {
+        this.deleteNode(node);
+      });
     } else {
-      editorUtilities.deleteFile(filePath);
+      editorUtilities.deleteFile(filePath).then(() => {
+        this.deleteNode(node);
+      });
     }
-    
+  }
+
+  deleteNode = (node) => {
+    let tree = this.state.tree_data.clone();
 
     let isCurrentFile = false;
     if (node.isDir()) {
@@ -368,9 +369,9 @@ class Wiki extends Component {
       isCurrentFile = this.isModifyCurrentFile(node);
     }
 
-    let tree = this.state.tree_data.clone();
-    
     if (this.state.isViewFileState) {
+      tree.deleteNode(node);
+
       if (isCurrentFile) {
         let homeNode = this.getHomeNode(tree);
         tree.expandNode(homeNode);
@@ -385,13 +386,14 @@ class Wiki extends Component {
     } else {
       let parentNode = tree.getNodeByPath(this.state.filePath);
       let isChild = tree.isNodeChild(parentNode, node);
+
+      tree.deleteNode(node);
       if (isChild) {
         this.exitViewFileState(tree, parentNode);
       } else {
         this.setState({tree_data: tree});
       }
     }
-    tree.deleteNode(node);
   }
 
   
@@ -528,14 +530,13 @@ class Wiki extends Component {
           isViewFileState={this.state.isViewFileState}
           changedNode={this.state.changedNode}
           isFileLoading={this.state.isFileLoading}
+          switchViewMode={this.switchViewMode}
           onLinkClick={this.onLinkClick}
           onMenuClick={this.onMenuClick}
           onSearchedClick={this.onSearchedClick}
           onMainNavBarClick={this.onMainNavBarClick}
-          onMainNodeClick={this.onMainNodeClick}
-          switchViewMode={this.switchViewMode}
-          onDeleteNode={this.onDeleteNode}
-          onRenameNode={this.onRenameNode}
+          onMainItemClick={this.onMainItemClick}
+          onMainItemDelete={this.onMainItemDelete}
         />
       </div>
     );