Wiki improve (#2894)

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

@@ -1,44 +1,35 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, repoID, slug, siteRoot } from '../../utils/constants';
+import { gettext, repoID, slug, siteRoot, username } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
-import TreeDirView from '../../components/tree-dir-view/tree-dir-view';
+import WikiDirListView from '../../components/wiki-dir-list-view/wiki-dir-list-view';
+import Loading from '../../components/loading';
 
-let loginUser = window.app.pageOptions.username;
 const propTypes = {
+  path: PropTypes.string.isRequired,
+  pathExist: PropTypes.bool.isRequired,
+  isViewFile: PropTypes.bool.isRequired,
+  isDataLoading: PropTypes.bool.isRequired,
   content: PropTypes.string,
+  permission: PropTypes.string,
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
-  permission: PropTypes.string,
-  filePath: PropTypes.string.isRequired,
-  isFileLoading: PropTypes.bool.isRequired,
-  isViewFileState: PropTypes.bool.isRequired,
-  changedNode: PropTypes.object,
+  direntList: PropTypes.array.isRequired,
   onMenuClick: PropTypes.func.isRequired,
   onSearchedClick: PropTypes.func.isRequired,
   onMainNavBarClick: PropTypes.func.isRequired,
-  onMainNodeClick: PropTypes.func.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
   onLinkClick: PropTypes.func.isRequired,
-  onDeleteNode: PropTypes.func.isRequired,
-  onRenameNode: PropTypes.func.isRequired,
 };
 
 class MainPanel extends Component {
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      needOperationGroup: false
-    };
-  }
-
   onMenuClick = () => {
     this.props.onMenuClick();
   }
 
   onEditClick = (e) => {
-    // const w=window.open('about:blank')
     e.preventDefault();
     window.location.href= siteRoot + 'lib/' + repoID + '/file' + this.props.filePath + '?mode=edit';
   }
@@ -47,16 +38,14 @@ class MainPanel extends Component {
     this.props.onMainNavBarClick(e.target.dataset.path);
   }
 
-
-  render() {
-
-    let filePathList = this.props.filePath.split('/');
+  renderNavPath = () => {
+    let paths = this.props.path.split('/');
     let nodePath = '';
-    let pathElem = filePathList.map((item, index) => {
+    let pathElem = paths.map((item, index) => {
       if (item === '') {
         return;
       } 
-      if (index === (filePathList.length - 1)) {
+      if (index === (paths.length - 1)) {
         return (
           <span key={index}><span className="path-split">/</span>{item}</span>
         );
@@ -75,18 +64,21 @@ class MainPanel extends Component {
         );
       }
     });
+    return pathElem;
+  }
 
+
+  render() {
     return (
       <div className="main-panel wiki-main-panel o-hidden">
         <div className="main-panel-top panel-top">
-          {loginUser &&
+          {username && (
             <Fragment>
               <div className="cur-view-toolbar border-left-show">
                 <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-                { 
-                  this.props.permission === 'rw' && 
+                {this.props.permission === 'rw' && (
                   <button className="btn btn-secondary operation-item" title="Edit File" onClick={this.onEditClick}>{gettext('Edit Page')}</button>
-                }
+                )}
               </div>
               <CommonToolbar 
                 repoID={repoID}
@@ -94,35 +86,40 @@ class MainPanel extends Component {
                 searchPlaceholder={gettext('Search files in this library')}
               />
             </Fragment>
-          }
+          )}
         </div>
         <div className="cur-view-container">
           <div className="cur-view-path">
             <div className="path-containter">
-              {loginUser &&
+              {username &&
                 <Fragment>
                   <a href={siteRoot + 'wikis/'} className="normal">{gettext('Wikis')}</a>
                   <span className="path-split">/</span>
                 </Fragment>
               }
               <a href={siteRoot + 'wikis/' + slug} className="normal">{slug}</a>
-              {pathElem}
+              {this.renderNavPath()}
             </div>
           </div>
           <div className="cur-view-content">
-            {this.props.isViewFileState && 
+            {this.props.isDataLoading && <Loading />}
+            {(!this.props.isDataLoading && this.props.isViewFile) && (
               <WikiMarkdownViewer
                 markdownContent={this.props.content}
-                isFileLoading={this.props.isFileLoading}
+                isFileLoading={this.props.isDataLoading}
                 lastModified = {this.props.lastModified}
                 latestContributor={this.props.latestContributor}
                 onLinkClick={this.props.onLinkClick}
                 isWiki={true}
               />
-            }
-            {!this.props.isViewFileState && 
-              <TreeDirView node={this.props.changedNode} onMainNodeClick={this.props.onMainNodeClick} />
-            }
+            )}
+            {(!this.props.isDataLoading && !this.props.isViewFile) && (
+              <WikiDirListView
+                path={this.props.path}
+                direntList={this.props.direntList}
+                onDirentClick={this.props.onDirentClick} 
+              />
+            )}
           </div>
         </div>
       </div>