From eed617f44c0e89823e63d7873eec53afc39554f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E9=A1=BA=E5=BC=BA?= <ysq9207@126.com>
Date: Sat, 22 Dec 2018 15:18:53 +0800
Subject: [PATCH] optimized repo create code (#2697)

---
 frontend/src/app.js                           |   4 -
 .../components/dialog/copy-dirent-dialog.js   |   2 +-
 .../components/dialog/move-dirent-dialog.js   |   2 +-
 frontend/src/components/dir-view/dir-panel.js | 158 +++++++++---------
 frontend/src/components/dir-view/dir-view.js  |  37 +++-
 .../toolbar/mutilple-dir-operation-toolbar.js |   2 +-
 frontend/src/css/toolbar.css                  |   3 +
 frontend/src/pages/groups/group-view.js       |   2 +-
 frontend/src/pages/my-libs/my-libs.js         |   2 +-
 .../shared-with-all/public-shared-view.js     |   6 +-
 10 files changed, 123 insertions(+), 95 deletions(-)

diff --git a/frontend/src/app.js b/frontend/src/app.js
index bf3802d8c8..e84f3d3842 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -103,10 +103,6 @@ class App extends Component {
       this.setState({currentTab: '', pathPrefix: []});
       let url = siteRoot + 'library/' + selectedItem.repo_id + '/' + selectedItem.repo_name + selectedItem.path;
       navigate(url, {repalce: true});
-    } else if (Utils.isMarkdownFile(selectedItem.path)) {
-      let url = siteRoot + 'wiki/lib/' + selectedItem.repo_id + selectedItem.path;
-      let newWindow = window.open('markdown-editor');
-      newWindow.location.href = url;
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + Utils.encodePath(selectedItem.path);
       let newWindow = window.open('about:blank');
diff --git a/frontend/src/components/dialog/copy-dirent-dialog.js b/frontend/src/components/dialog/copy-dirent-dialog.js
index 501321109a..6e0452b15c 100644
--- a/frontend/src/components/dialog/copy-dirent-dialog.js
+++ b/frontend/src/components/dialog/copy-dirent-dialog.js
@@ -167,8 +167,8 @@ class CopyDirent extends React.Component {
           {this.state.errMessage && <Alert color="danger" style={{margin: '0.5rem'}}>{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );
diff --git a/frontend/src/components/dialog/move-dirent-dialog.js b/frontend/src/components/dialog/move-dirent-dialog.js
index d1f9d22898..0b81187208 100644
--- a/frontend/src/components/dialog/move-dirent-dialog.js
+++ b/frontend/src/components/dialog/move-dirent-dialog.js
@@ -167,8 +167,8 @@ class MoveDirent extends React.Component {
           {this.state.errMessage && <Alert color="danger" style={{margin: '0.5rem'}}>{this.state.errMessage}</Alert>}
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.handleSubmit}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
     );
diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js
index 29caaaaeac..e8850742b5 100644
--- a/frontend/src/components/dir-view/dir-panel.js
+++ b/frontend/src/components/dir-view/dir-panel.js
@@ -17,6 +17,7 @@ const propTypes = {
   currentRepoInfo: PropTypes.object,
   pathPrefix: PropTypes.array.isRequired,
   path: PropTypes.string.isRequired,
+  errorMsg: PropTypes.string.isRequired,
   repoID: PropTypes.string.isRequired,
   repoName: PropTypes.string.isRequired,
   pathExist: PropTypes.bool.isRequired,
@@ -104,40 +105,40 @@ class DirPanel extends React.Component {
   }
 
   render() {
-    const ErrMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>);
+    const errMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>);
 
     return (
       <div className="main-panel wiki-main-panel o-hidden">
         <div className="main-panel-north">
-        {!this.props.libNeedDecrypt &&
-          <div className="cur-view-toolbar border-left-show">
-            <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onMenuClick}></span>
-            <div className="dir-operation">
-              {this.props.isDirentSelected ?
-                <MutipleDirOperationToolbar
-                  path={this.props.path}
-                  repoID={this.props.repoID}
-                  selectedDirentList={this.props.selectedDirentList}
-                  onItemsMove={this.props.onItemsMove}
-                  onItemsCopy={this.props.onItemsCopy}
-                  onItemsDelete={this.props.onItemsDelete}
-                /> :
-                <DirOperationToolBar 
-                  isViewFile={false}
-                  path={this.props.path}
-                  repoID={this.props.repoID}
-                  onAddFile={this.props.onAddFile}
-                  onAddFolder={this.props.onAddFolder}
-                  onUploadFile={this.onUploadFile}
-                  onUploadFolder={this.onUploadFolder}
-                />
-              }
+          {!this.props.libNeedDecrypt &&
+            <div className="cur-view-toolbar border-left-show">
+              <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onMenuClick}></span>
+              <div className="dir-operation">
+                {this.props.isDirentSelected ?
+                  <MutipleDirOperationToolbar
+                    path={this.props.path}
+                    repoID={this.props.repoID}
+                    selectedDirentList={this.props.selectedDirentList}
+                    onItemsMove={this.props.onItemsMove}
+                    onItemsCopy={this.props.onItemsCopy}
+                    onItemsDelete={this.props.onItemsDelete}
+                  /> :
+                  <DirOperationToolBar 
+                    isViewFile={false}
+                    path={this.props.path}
+                    repoID={this.props.repoID}
+                    onAddFile={this.props.onAddFile}
+                    onAddFolder={this.props.onAddFolder}
+                    onUploadFile={this.onUploadFile}
+                    onUploadFolder={this.onUploadFolder}
+                  />
+                }
+              </div>
+              <ViewModeToolbar
+                currentMode={this.state.currentMode} 
+                switchViewMode={this.switchViewMode}
+              />
             </div>
-            <ViewModeToolbar
-              currentMode={this.state.currentMode} 
-              switchViewMode={this.switchViewMode}
-            />
-          </div>
           }
           <CommonToolbar 
             repoID={this.props.repoID} 
@@ -147,54 +148,59 @@ class DirPanel extends React.Component {
         </div>
         <div className="main-panel-center flex-row">
           {!this.props.libNeedDecrypt &&
-          <div className="cur-view-container">
-            <div className="cur-view-path">
-              <CurDirPath 
-                isViewFile={false}
-                repoID={this.props.repoID}
-                repoName={this.props.repoName}
-                pathPrefix={this.props.pathPrefix}
-                currentPath={this.props.path} 
-                permission={this.props.permission}
-                onPathClick={this.props.onPathClick}
-                onTabNavClick={this.props.onTabNavClick}
-              />
+            <div className="cur-view-container">
+              <div className="cur-view-path">
+                <CurDirPath 
+                  isViewFile={false}
+                  repoID={this.props.repoID}
+                  repoName={this.props.repoName}
+                  pathPrefix={this.props.pathPrefix}
+                  currentPath={this.props.path} 
+                  permission={this.props.permission}
+                  onPathClick={this.props.onPathClick}
+                  onTabNavClick={this.props.onTabNavClick}
+                />
+              </div>
+              <div className="cur-view-content">
+                {this.props.errorMsg ?
+                 <p className="error text-center">{this.props.errorMsg}</p> :
+                  <Fragment>
+                    {!this.props.pathExist ?
+                      errMessage :
+                      <Fragment>
+                        <DirentListView
+                          path={this.props.path}
+                          repoID={this.props.repoID}
+                          direntList={this.props.direntList}
+                          currentRepoInfo={this.props.currentRepoInfo}
+                          isDirentListLoading={this.props.isDirentListLoading}
+                          isAllItemSelected={this.props.isAllDirentSelected}
+                          isRepoOwner={this.state.isRepoOwner}
+                          onAddFile={this.props.onAddFile}
+                          onItemDetails={this.onItemDetails}
+                          onItemMove={this.props.onItemMove}
+                          onItemCopy={this.props.onItemCopy}
+                          onItemClick={this.props.onItemClick}
+                          onItemDelete={this.props.onItemDelete}
+                          onItemRename={this.props.onItemRename}
+                          onItemSelected={this.props.onItemSelected}
+                          onAllItemSelected={this.props.onAllItemSelected}
+                          updateDirent={this.props.updateDirent}
+                        />
+                        <FileUploader
+                          dragAndDrop={true}
+                          ref={uploader => this.uploader = uploader}
+                          path={this.props.path}
+                          repoID={this.props.repoID}
+                          direntList={this.props.direntList}
+                          onFileUploadSuccess={this.props.onFileUploadSuccess}
+                        />
+                      </Fragment>
+                    }
+                  </Fragment>
+                }
+              </div>
             </div>
-            <div className="cur-view-content">
-              {!this.props.pathExist ?
-                ErrMessage :
-                <Fragment>
-                  <DirentListView
-                    path={this.props.path}
-                    repoID={this.props.repoID}
-                    direntList={this.props.direntList}
-                    currentRepoInfo={this.props.currentRepoInfo}
-                    isDirentListLoading={this.props.isDirentListLoading}
-                    isAllItemSelected={this.props.isAllDirentSelected}
-                    isRepoOwner={this.state.isRepoOwner}
-                    onAddFile={this.props.onAddFile}
-                    onItemDetails={this.onItemDetails}
-                    onItemMove={this.props.onItemMove}
-                    onItemCopy={this.props.onItemCopy}
-                    onItemClick={this.props.onItemClick}
-                    onItemDelete={this.props.onItemDelete}
-                    onItemRename={this.props.onItemRename}
-                    onItemSelected={this.props.onItemSelected}
-                    onAllItemSelected={this.props.onAllItemSelected}
-                    updateDirent={this.props.updateDirent}
-                  />
-                  <FileUploader
-                    dragAndDrop={true}
-                    ref={uploader => this.uploader = uploader}
-                    path={this.props.path}
-                    repoID={this.props.repoID}
-                    direntList={this.props.direntList}
-                    onFileUploadSuccess={this.props.onFileUploadSuccess}
-                  />
-                </Fragment>
-              }
-            </div>
-          </div>
           }
           {this.state.isDirentDetailShow && (
             <div className="cur-view-detail">
diff --git a/frontend/src/components/dir-view/dir-view.js b/frontend/src/components/dir-view/dir-view.js
index 55ae1d1abd..3593ee0ccb 100644
--- a/frontend/src/components/dir-view/dir-view.js
+++ b/frontend/src/components/dir-view/dir-view.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -24,7 +24,7 @@ class DirView extends React.Component {
 
     this.state = {
       path: '/',
-      pathExit: true,
+      pathExist: true,
       repoName: '',
       repoID: '',
       permission: true,
@@ -36,6 +36,7 @@ class DirView extends React.Component {
       direntList: [],
       selectedDirentList: [],
       dirID: '',
+      errorMsg: '',
     };
     window.onpopstate = this.onpopstate;
   }
@@ -69,6 +70,25 @@ class DirView extends React.Component {
       if (!res.data.lib_need_decrypt) {
         this.updateDirentList(path);
       }
+    }).catch(error => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            isDirentListLoading: false,
+            errorMsg: gettext('Permission denied')
+          });
+        } else {
+          this.setState({
+            isDirentListLoading: false,
+            errorMsg: gettext('Error')
+          });
+        }
+      } else {
+        this.setState({
+          isDirentListLoading: false,
+          errorMsg: gettext('Please check the network.')
+        });
+      }
     });
   }
 
@@ -101,11 +121,15 @@ class DirView extends React.Component {
       });
       this.setState({
         isDirentListLoading: false,
+        pathExist: true,
         direntList: direntList,
         dirID: res.headers.oid,
       });
     }).catch(() => {
-      this.setState({pathExist: false});
+      this.setState({
+        isDirentListLoading: false,
+        pathExist: false
+      });
     });
   }
 
@@ -365,10 +389,6 @@ class DirView extends React.Component {
   onSearchedClick = (selectedItem) => {
     if (selectedItem.is_dir === true) {
       this.setState({path: selectedItem.path});
-    } else if (Utils.isMarkdownFile(selectedItem.path)) {
-      let url = siteRoot + 'wiki/lib/' + selectedItem.repo_id + selectedItem.path;
-      let newWindow = window.open('markdown-editor');
-      newWindow.location.href = url;
     } else {
       let url = siteRoot + 'lib/' + selectedItem.repo_id + '/file' + selectedItem.path;
       let newWindow = window.open('about:blank');
@@ -487,7 +507,8 @@ class DirView extends React.Component {
         pathPrefix={this.props.pathPrefix}
         currentRepoInfo={this.state.currentRepoInfo}
         path={this.state.path}
-        pathExist={this.state.pathExit}
+        pathExist={this.state.pathExist}
+        errorMsg={this.state.errorMsg}
         repoID={this.state.repoID}
         repoName={this.state.repoName}
         permission={this.state.permission}
diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
index 8a4aaa4762..3f5fe4258b 100644
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -95,7 +95,7 @@ class MutipleDirOperationToolbar extends React.Component {
   render() {
     return (
       <Fragment>
-        <div className="operation mutiple-dirents-operation">
+        <div className="operation multiple-dirents-operation">
           <button className="btn btn-secondary operation-item op-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></button>
           <button className="btn btn-secondary operation-item op-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></button>
           <button className="btn btn-secondary operation-item op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.props.onItemsDelete}></button>
diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css
index cb60728cbf..58f14de4d5 100644
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -30,6 +30,9 @@
   border-radius: 2px;
 }
 
+.multiple-dirents-operation .operation-item {
+  font-size: 1.125rem;
+}
 /* end file-operation toolbar */
 
 /* begin view-mode toolbar */
diff --git a/frontend/src/pages/groups/group-view.js b/frontend/src/pages/groups/group-view.js
index 4decdac58a..2ab77023d7 100644
--- a/frontend/src/pages/groups/group-view.js
+++ b/frontend/src/pages/groups/group-view.js
@@ -207,7 +207,7 @@ class GroupView extends React.Component {
 
   addRepoItem = (repo) => {
     let newRepoList = this.state.repoList.map(item => {return item;});
-    newRepoList.push(repo);
+    newRepoList.unshift(repo);
     return newRepoList;
   }
 
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index d66b043cac..9ac41802ea 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -59,7 +59,7 @@ class MyLibraries extends Component {
         encrypted: res.data.encrypted,
         permission: permission,
       };
-      this.state.items.push(repo);
+      this.state.items.unshift(repo);
       this.setState({items: this.state.items});
     });
   }
diff --git a/frontend/src/pages/shared-with-all/public-shared-view.js b/frontend/src/pages/shared-with-all/public-shared-view.js
index 302682d5fd..f93e4f0e32 100644
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/frontend/src/pages/shared-with-all/public-shared-view.js
@@ -114,19 +114,21 @@ class PublicSharedView extends React.Component {
 
   addRepoItem = (repo) => {
     let isExist = false;
+    let repoIndex = 0;
     let repoList = this.state.repoList;
     for (let i = 0; i < repoList.length; i ++) {
       if (repo.repo_id === repoList[i].repo_id) {
         isExist = true;
+        repoIndex = i;
         break;
       }
     }
     if (isExist) {
-      return this.state.repoList;
+      this.state.repoList.splice(repoIndex, 1);
     }
 
     let newRepoList = this.state.repoList.map(item => {return item;});
-    newRepoList.push(repo);
+    newRepoList.unshift(repo);
     return newRepoList;
   }