optimize code

frontend/src/components/shared-link-file-uploader/file-uploader.js

@@ -27,7 +27,7 @@ const propTypes = {
   fileTypeErrorCallback: PropTypes.func,
   dragAndDrop: PropTypes.bool.isRequired,
   path: PropTypes.string.isRequired,
-  uploadUrlPath: PropTypes.string.isRequired,
+  relativePath: PropTypes.string.isRequired,
   onFileUploadSuccess: PropTypes.func.isRequired
 };
 
@@ -204,8 +204,8 @@ class FileUploader extends React.Component {
         });
       } else {
         this.setUploadFileList(this.resumable.files);
-        let { token, uploadUrlPath } = this.props;
-        seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+        let { token, relativePath } = this.props;
+        seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
           this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
           this.resumableUpload(resumableFile);
         }).catch(error => {
@@ -217,8 +217,8 @@ class FileUploader extends React.Component {
       this.setUploadFileList(this.resumable.files);
       if (!this.isUploadLinkLoaded) {
         this.isUploadLinkLoaded = true;
-        let { token, uploadUrlPath } = this.props;
-        seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+        let { token, relativePath } = this.props;
+        seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
           this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
           this.resumable.upload();
         }).catch(error => {
@@ -564,8 +564,8 @@ class FileUploader extends React.Component {
 
   onUploadRetry = (resumableFile) => {
 
-    let { token, uploadUrlPath } = this.props;
-    seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+    let { token, relativePath } = this.props;
+    seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
 
       let retryFileList = this.state.retryFileList.filter(item => {
@@ -591,8 +591,8 @@ class FileUploader extends React.Component {
 
   onUploadRetryAll = () => {
 
-    let { token, uploadUrlPath } = this.props;
-    seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+    let { token, relativePath } = this.props;
+    seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
       this.state.retryFileList.forEach(item => {
         item.error = false;
@@ -645,8 +645,8 @@ class FileUploader extends React.Component {
   uploadFile = () => {
     let resumableFile = this.resumable.files[this.resumable.files.length - 1];
 
-    let { token, uploadUrlPath } = this.props;
-    seafileAPI.sharedLinkGetFileUploadUrl(token, uploadUrlPath).then(res => {
+    let { token, relativePath } = this.props;
+    seafileAPI.sharedLinkGetFileUploadUrl(token, relativePath).then(res => {
       this.resumable.opts.target = res.data.upload_link + '?ret-json=1';
       this.setState({
         isUploadRemindDialogShow: false,

frontend/src/shared-dir-view.js

@@ -21,14 +21,12 @@ moment.locale(window.app.config.lang);
 let loginUser = window.app.pageOptions.name;
 let {
   token, dirName, dirPath, sharedBy,
-  repoID, path,
+  repoID, relativePath,
   mode, thumbnailSize, zipped,
   trafficOverLimit, canDownload,
   noQuota, canUpload
 } = window.shared.pageOptions;
 
-dirPath = dirPath.replace(/\/+$/, ""); // used for upload file
-const uploadUrlPath = path.replace(/\/+$/, "");   // used for get dir upload link
 const showDownloadIcon = !trafficOverLimit && canDownload;
 
 class SharedDirView extends React.Component {
@@ -62,7 +60,7 @@ class SharedDirView extends React.Component {
       });
     }
 
-    seafileAPI.listSharedDir(token, path, thumbnailSize).then((res) => {
+    seafileAPI.listSharedDir(token, relativePath, thumbnailSize).then((res) => {
       const items = res.data['dirent_list'].map(item => {
         item.isSelected = false;
         return item;
@@ -149,7 +147,7 @@ class SharedDirView extends React.Component {
   zipDownloadSelectedItems = () => {
     this.setState({
       isZipDialogOpen: true,
-      zipFolderPath: path,
+      zipFolderPath: relativePath,
       selectedItems: this.state.items.filter(item => item.isSelected)
         .map(item => item.file_name || item.folder_name)
     });
@@ -254,7 +252,7 @@ class SharedDirView extends React.Component {
     const newItem = {
       isSelected: false,
       file_name: name,
-      file_path: Utils.joinPath(path, name),
+      file_path: Utils.joinPath(relativePath, name),
       is_dir: false,
       last_modified: moment().format(),
       size: size
@@ -288,8 +286,8 @@ class SharedDirView extends React.Component {
                 <div>
                   {isDesktop &&
                   <div className="view-mode btn-group">
-                    <a href={`?p=${encodeURIComponent(path)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')}></a>
-                    <a href={`?p=${encodeURIComponent(path)}&mode=grid`} className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`} title={gettext('Grid')}></a>
+                    <a href={`?p=${encodeURIComponent(relativePath)}&mode=list`} className={`${modeBaseClass} sf2-icon-list-view ${mode == 'list' ? 'current-mode' : ''}`} title={gettext('List')}></a>
+                    <a href={`?p=${encodeURIComponent(relativePath)}&mode=grid`} className={`${modeBaseClass} sf2-icon-grid-view ${mode == 'grid' ? 'current-mode' : ''}`} title={gettext('Grid')}></a>
                   </div>
                   }
                   {canUpload && (
@@ -301,7 +299,7 @@ class SharedDirView extends React.Component {
                   <Fragment>
                     {this.state.items.some(item => item.isSelected) ?
                       <Button color="success" onClick={this.zipDownloadSelectedItems} className="ml-2 shared-dir-op-btn">{gettext('ZIP Selected Items')}</Button> :
-                      <Button color="success" onClick={this.zipDownloadFolder.bind(this, path)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button>
+                      <Button color="success" onClick={this.zipDownloadFolder.bind(this, relativePath)} className="ml-2 shared-dir-op-btn">{gettext('ZIP')}</Button>
                     }
                   </Fragment>
                   }
@@ -312,8 +310,8 @@ class SharedDirView extends React.Component {
                   ref={uploader => this.uploader = uploader}
                   dragAndDrop={false}
                   token={token}
-                  path={dirPath}
-                  uploadUrlPath={uploadUrlPath}
+                  path={dirPath.replace(/\/+$/, "")}
+                  relativePath={relativePath.replace(/\/+$/, "")}
                   repoID={repoID}
                   onFileUploadSuccess={this.onFileUploadSuccess}
                 />

seahub/templates/view_shared_dir_react.html

@@ -23,7 +23,7 @@
             dirPath: '{{ dir_path|escapejs }}',
             sharedBy: '{{ username|email2nickname|escapejs }}',
             repoID: '{{repo.id}}',
-            path: '{{ path|escapejs }}',
+            relativePath: '{{ path|escapejs }}',
             zipped: (function() {
               var list = [];
               {% for name, path in zipped %}