From 5b27dcc9a595d1fad83ffd1d8d0ac0614f685aa6 Mon Sep 17 00:00:00 2001
From: zxj96 <35951769+zxj96@users.noreply.github.com>
Date: Fri, 29 Mar 2019 10:36:34 +0800
Subject: [PATCH] Merge two components into one component (#3188)

* Merge two components into one component

* Simplified code

* Delete the use of setTimeout
---
 .../components/dialog/related-file-dialogs.js | 71 +++++++++++++++
 .../dirent-detail/detail-list-view.js         | 70 ++++-----------
 .../toolbar/mutilple-dir-operation-toolbar.js | 82 ++++++------------
 .../components/toolbar/view-file-toolbar.js   | 62 ++++---------
 frontend/src/markdown-editor.js               | 86 ++++++-------------
 5 files changed, 156 insertions(+), 215 deletions(-)
 create mode 100644 frontend/src/components/dialog/related-file-dialogs.js

diff --git a/frontend/src/components/dialog/related-file-dialogs.js b/frontend/src/components/dialog/related-file-dialogs.js
new file mode 100644
index 0000000000..9503a34fb5
--- /dev/null
+++ b/frontend/src/components/dialog/related-file-dialogs.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'reactstrap';
+import AddRelatedFileDialog from './add-related-file-dialog';
+import ListRelatedFileDialog from './list-related-file-dialog';
+import ModalPortal from '../modal-portal';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  toggleCancel: PropTypes.func.isRequired,
+  onRelatedFileChange: PropTypes.func.isRequired,
+  dirent: PropTypes.object.isRequired,
+  relatedFiles: PropTypes.array,
+  viewMode: PropTypes.oneOf(['list_related_file','add_related_file']).isRequired,
+};
+
+class RelatedFileDialogs extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showListRelatedFileDialog: props.viewMode === 'list_related_file',
+    };
+  }
+
+  onAddRelatedFileToggle = () => {
+    this.setState({
+      showListRelatedFileDialog: false,
+    });
+  }
+
+  onCloseAddRelatedFileDialog = () => {
+    this.setState({
+      showListRelatedFileDialog: true,
+    });
+  }
+
+  render() {
+    return (
+      <ModalPortal>
+        <Modal isOpen={true} toggle={this.props.toggleCancel} size='lg' style={{width:'650px'}}>
+          {this.state.showListRelatedFileDialog && 
+            <ListRelatedFileDialog
+              filePath={this.props.filePath}
+              relatedFiles={this.props.relatedFiles}
+              repoID={this.props.repoID}
+              toggleCancel={this.props.toggleCancel}
+              addRelatedFileToggle={this.onAddRelatedFileToggle}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+            />
+          }
+          {!this.state.showListRelatedFileDialog && 
+            <AddRelatedFileDialog
+              filePath={this.props.filePath}
+              repoID={this.props.repoID}
+              toggleCancel={this.onCloseAddRelatedFileDialog}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+              dirent={this.props.dirent}
+              onClose={this.props.toggleCancel}
+            />
+          }
+        </Modal>
+      </ModalPortal>
+    )
+  }
+}
+
+RelatedFileDialogs.propTypes = propTypes;
+
+export default RelatedFileDialogs
\ No newline at end of file
diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js
index 3a7dd8ba7b..701f7ddc6c 100644
--- a/frontend/src/components/dirent-detail/detail-list-view.js
+++ b/frontend/src/components/dirent-detail/detail-list-view.js
@@ -4,10 +4,8 @@ import moment from 'moment';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
-import { Modal } from 'reactstrap';
 import ModalPortal from '../modal-portal';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
+import RelatedFileDialogs from '../dialog/related-file-dialogs';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -28,9 +26,7 @@ class DetailListView extends React.Component {
     super(props);
     this.state = {
       isEditFileTagShow: false,
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: false,
-      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
     };
   }
 
@@ -64,32 +60,15 @@ class DetailListView extends React.Component {
 
   onListRelatedFileToggle = () => {
     this.setState({
-      isListRelatedFileShow: true,
-      isRelatedFileDialogShow: true,
+      showRelatedFileDialog: true,
     });
   }
 
   toggleCancel = () => {
     this.setState({
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: false,
-      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
     });
   }
-
-  onCloseAddRelatedFileDialog = () => {
-    this.setState({
-      isListRelatedFileShow: true,
-      isAddRelatedFileShow: false,
-    });
-  }
-
-  onAddRelatedFileToggle = () => {
-    this.setState({
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: true
-    });
-  } 
   
   render() {
     let { direntType, direntDetail, fileTagList, relatedFiles } = this.props;
@@ -152,34 +131,19 @@ class DetailListView extends React.Component {
               </tr>
             </tbody>
           </table>
-          { this.state.isRelatedFileDialogShow && (
-            <ModalPortal>
-              <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                {
-                  this.state.isAddRelatedFileShow &&
-                  <AddRelatedFileDialog
-                    filePath={direntPath}
-                    repoID={this.props.repoID}
-                    toggleCancel={this.onCloseAddRelatedFileDialog}
-                    onRelatedFileChange={this.props.onRelatedFileChange}
-                    dirent={this.props.dirent}
-                    onClose={this.toggleCancel}
-                  />
-                }
-                {
-                  this.state.isListRelatedFileShow &&
-                  <ListRelatedFileDialog
-                    relatedFiles={relatedFiles}
-                    repoID={this.props.repoID}
-                    filePath={direntPath}
-                    toggleCancel={this.toggleCancel}
-                    addRelatedFileToggle={this.onAddRelatedFileToggle}
-                    onRelatedFileChange={this.props.onRelatedFileChange}
-                  />
-                }
-              </Modal>
-            </ModalPortal>
-          )}
+          {this.state.showRelatedFileDialog &&
+              <ModalPortal>
+                <RelatedFileDialogs
+                  repoID={this.props.repoID}
+                  filePath={direntPath}
+                  relatedFiles={relatedFiles}
+                  toggleCancel={this.toggleCancel}
+                  onRelatedFileChange={this.props.onRelatedFileChange}
+                  dirent={this.props.dirent}
+                  viewMode="list_related_file"
+                />
+              </ModalPortal>
+            }
           {
             this.state.isEditFileTagShow &&
             <EditFileTagDialog
diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
index 10087ae535..3a109d20a4 100644
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -10,8 +10,7 @@ import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import DirentsMenu from '../dirent-list-view/dirents-menu';
 import ShareDialog from '../dialog/share-dialog';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
+import RelatedFileDialogs from '../dialog/related-file-dialogs';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import toaster from '../toast';
 import ModalPortal from '../modal-portal';
@@ -46,11 +45,10 @@ class MutipleDirOperationToolbar extends React.Component {
       showLibContentViewDialogs: false,
       showShareDialog: false,
       showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: false,
       fileTagList: [],
       multiFileTagList: [],
-      isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
+      viewMode: 'list_related_file',     
     };
     this.zipToken = null;
   }
@@ -198,19 +196,20 @@ class MutipleDirOperationToolbar extends React.Component {
   openRelatedFilesDialog = (dirent) => {
     let filePath = this.getDirentPath(dirent);
     seafileAPI.listRelatedFiles(this.props.repoID, filePath).then(res => {
-      this.setState({
-        relatedFiles: res.data.related_files,
-        showLibContentViewDialogs: true,
-      });
-      if (res.data.related_files.length > 0) {
+      let relatedFiles = res.data.related_files;
+      if (relatedFiles.length > 0) {
         this.setState({
-          isRelatedFileDialogShow: true,
-          showListRelatedFileDialog: true,
+          relatedFiles: relatedFiles,
+          showLibContentViewDialogs: true,
+          showRelatedFileDialog: true,
+          viewMode: 'list_related_file',
         });
       } else {
         this.setState({
-          isRelatedFileDialogShow: true,
-          showAddRelatedFileDialog: true,
+          relatedFiles: relatedFiles,
+          showLibContentViewDialogs: true,
+          showRelatedFileDialog: true,
+          viewMode: 'add_related_file',
         });
       }
     });
@@ -221,25 +220,7 @@ class MutipleDirOperationToolbar extends React.Component {
       showLibContentViewDialogs: false,
       showShareDialog: false,
       showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: false,
-      isRelatedFileDialogShow: false,
-    });
-  }
-
-  closeAddRelatedFileDialog = () => {
-    this.setState({
-      showLibContentViewDialogs: true,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: true,
-    });
-  }
-
-  addRelatedFileToggle = () => {
-    this.setState({
-      showLibContentViewDialogs: true,
-      showAddRelatedFileDialog: true,
-      showListRelatedFileDialog: false,
+      showRelatedFileDialog: false,
     });
   }
 
@@ -359,32 +340,19 @@ class MutipleDirOperationToolbar extends React.Component {
                 />
               </ModalPortal>
             }
-            {this.state.isRelatedFileDialogShow && (
+            {this.state.showRelatedFileDialog &&
               <ModalPortal>
-                <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                  {this.state.showListRelatedFileDialog &&
-                    <ListRelatedFileDialog
-                      repoID={repoID}
-                      filePath={direntPath}
-                      relatedFiles={this.state.relatedFiles}
-                      toggleCancel={this.toggleCancel}
-                      addRelatedFileToggle={this.addRelatedFileToggle}
-                      onRelatedFileChange={this.onRelatedFileChange}
-                    />
-                  }
-                  {this.state.showAddRelatedFileDialog &&
-                    <AddRelatedFileDialog
-                      repoID={repoID}
-                      filePath={direntPath}
-                      toggleCancel={this.closeAddRelatedFileDialog}
-                      onClose={this.toggleCancel}
-                      dirent={this.props.selectedDirentList[0]}
-                      onRelatedFileChange={this.onRelatedFileChange}
-                    />
-                  }
-                </Modal>
+                <RelatedFileDialogs
+                  repoID={repoID}
+                  filePath={direntPath}
+                  relatedFiles={this.state.relatedFiles}
+                  toggleCancel={this.toggleCancel}
+                  onRelatedFileChange={this.onRelatedFileChange}
+                  dirent={this.props.selectedDirentList[0]}
+                  viewMode={this.state.viewMode}
+                />
               </ModalPortal>
-            )}
+            }
           </Fragment>
         )}
       </Fragment>
diff --git a/frontend/src/components/toolbar/view-file-toolbar.js b/frontend/src/components/toolbar/view-file-toolbar.js
index 42fc87b94b..9483552e7c 100644
--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -1,14 +1,13 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip, Modal } from 'reactstrap';
+import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip} from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import ModalPotal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
+import RelatedFileDialogs from '../dialog/related-file-dialogs';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -35,9 +34,8 @@ class ViewFileToolbar extends React.Component {
       isMoreMenuShow: false,
       isShareDialogShow: false,
       isEditTagDialogShow: false,
-      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: false,
       isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
     };
   }
 
@@ -74,33 +72,18 @@ class ViewFileToolbar extends React.Component {
 
   onListRelatedFileToggle = () => {
     this.setState({
-      isListRelatedFileDialogShow: true,
       isRelatedFileDialogShow: true,
+      showRelatedFileDialog: true,
     });
   }
 
   toggleCancel = () => {
     this.setState({
-      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: false,
       isRelatedFileDialogShow: false,
+      showRelatedFileDialog: false,
     })
   }
 
-  onCloseAddRelatedFileDialog = () => {
-    this.setState({
-      isListRelatedFileDialogShow: true,
-      isAddRelatedFileDialogShow: false,
-    });
-  }
-
-  onAddRelatedFileToggle = () => {
-    this.setState({
-      isListRelatedFileDialogShow: false,
-      isAddRelatedFileDialogShow: true,
-    });
-  }
-
   render() {
 
     let name = Utils.getFileName(this.props.path);
@@ -160,32 +143,19 @@ class ViewFileToolbar extends React.Component {
             />
           </ModalPotal>
         )}
-        {this.state.isRelatedFileDialogShow && (
+        {this.state.showRelatedFileDialog &&
           <ModalPotal>
-            <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-              {this.state.isListRelatedFileDialogShow &&
-                <ListRelatedFileDialog
-                  repoID={this.props.repoID}
-                  filePath={this.props.path}
-                  relatedFiles={this.props.relatedFiles}
-                  toggleCancel={this.toggleCancel}
-                  addRelatedFileToggle={this.onAddRelatedFileToggle}
-                  onRelatedFileChange={this.props.onRelatedFileChange}
-                />
-              }
-              {this.state.isAddRelatedFileDialogShow && 
-                <AddRelatedFileDialog
-                  dirent={dirent}
-                  repoID={this.props.repoID}
-                  filePath={this.props.path}
-                  onRelatedFileChange={this.props.onRelatedFileChange}
-                  toggleCancel={this.onCloseAddRelatedFileDialog}
-                  onClose={this.toggleCancel}
-                />
-              }
-            </Modal>
+            <RelatedFileDialogs
+              repoID={this.props.repoID}
+              filePath={this.props.path}
+              relatedFiles={this.props.relatedFiles}
+              toggleCancel={this.toggleCancel}
+              onRelatedFileChange={this.props.onRelatedFileChange}
+              dirent={dirent}
+              viewMode="list_related_file"
+            />
           </ModalPotal>
-        )}
+        }
       </Fragment>
     );
   }
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index 66f0913725..ee130627ce 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -9,8 +9,7 @@ import io from 'socket.io-client';
 import toaster from './components/toast';
 import ModalPortal from './components/modal-portal';
 import EditFileTagDialog from './components/dialog/edit-filetag-dialog';
-import ListRelatedFileDialog from './components/dialog/list-related-file-dialog';
-import AddRelatedFileDialog from './components/dialog/add-related-file-dialog';
+import RelatedFileDialogs from './components/dialog/related-file-dialogs';
 import ShareDialog from './components/dialog/share-dialog';
 import CommentDialog from './components/markdown-view/comment-dialog';
 import InsertFileDialog from './components/dialog/insert-file-dialog';
@@ -23,7 +22,6 @@ import HistoryList from './components/markdown-view/history-list';
 import CommentPanel from './components/file-view/comment-panel';
 import OutlineView from './components/markdown-view/outline';
 import Loading from './components/loading';
-import { Modal } from 'reactstrap';
 import { findRange } from '@seafile/slate-react';
 
 import './css/markdown-viewer/markdown-editor.css';
@@ -297,7 +295,6 @@ class MarkdownEditor extends React.Component {
       localDraftDialog: false,
       showRelatedFileDialog: false,
       showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
       showMarkdownEditorDialog: false,
       showShareLinkDialog: false,
       showCommentDialog: false,
@@ -311,7 +308,7 @@ class MarkdownEditor extends React.Component {
       isShowComments: false,
       isShowHistory: false,
       isShowOutline: true,
-      isRelatedFileDialogShow: false,
+      viewMode:'list_related_file',
     };
 
     if (this.state.collabServer) {
@@ -394,12 +391,10 @@ class MarkdownEditor extends React.Component {
     this.setState({
       showRelatedFileDialog: false,
       showEditFileTagDialog: false,
-      showAddRelatedFileDialog: false,
       showMarkdownEditorDialog: false,
       showShareLinkDialog: false,
       showCommentDialog: false,
       showInsertFileDialog: false,
-      isRelatedFileDialogShow: false,
     });
   }
 
@@ -471,38 +466,24 @@ class MarkdownEditor extends React.Component {
     this.timer = null;
   }
 
-  closeAddRelatedFileDialog = () => {
-    this.setState({
-      showAddRelatedFileDialog: false,
-      showRelatedFileDialog: true,
-    });
-  }
-
-  addRelatedFileToggle = () => {
-    this.setState({
-      showRelatedFileDialog: false,
-      showAddRelatedFileDialog: true,
-    });
-  }
-
   openDialogs = (option) => {
     switch(option)
     {
       case 'related_files':
-        if (this.state.relatedFiles.length > 0) {
-          this.setState({
-            showRelatedFileDialog: true,
-            showMarkdownEditorDialog: true,
-            isRelatedFileDialogShow: true,
-          });
-        }
-        else {
-          this.setState({
-            showAddRelatedFileDialog: true,
-            showMarkdownEditorDialog: true,
-            isRelatedFileDialogShow: true,
-          });
-        }
+          if (this.state.relatedFiles.length > 0) {
+            this.setState({
+              showRelatedFileDialog: true,
+              showMarkdownEditorDialog: true,
+              viewMode: 'list_related_file',
+            });
+          }
+          else {
+            this.setState({
+              showRelatedFileDialog: true,
+              showMarkdownEditorDialog: true,
+              viewMode: 'add_related_file',
+            });
+          }
         break;
       case 'tags':
         this.setState({
@@ -1116,32 +1097,19 @@ class MarkdownEditor extends React.Component {
                   />
                 </ModalPortal>
               }
-              {this.state.isRelatedFileDialogShow && (
+              {this.state.showRelatedFileDialog &&
                 <ModalPortal>
-                  <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
-                    {this.state.showRelatedFileDialog &&
-                      <ListRelatedFileDialog
-                        repoID={repoID}
-                        filePath={filePath}
-                        relatedFiles={this.state.relatedFiles}
-                        toggleCancel={this.toggleCancel}
-                        addRelatedFileToggle={this.addRelatedFileToggle}
-                        onRelatedFileChange={this.onRelatedFileChange}
-                      />
-                    }
-                    {this.state.showAddRelatedFileDialog &&
-                      <AddRelatedFileDialog
-                        repoID={repoID}
-                        filePath={filePath}
-                        toggleCancel={this.closeAddRelatedFileDialog}
-                        onClose={this.toggleCancel}
-                        dirent={this.state.fileInfo}
-                        onRelatedFileChange={this.onRelatedFileChange}
-                      />
-                    }
-                  </Modal>
+                  <RelatedFileDialogs
+                    repoID={repoID}
+                    filePath={filePath}
+                    relatedFiles={this.state.relatedFiles}
+                    toggleCancel={this.toggleCancel}
+                    onRelatedFileChange={this.onRelatedFileChange}
+                    dirent={this.state.fileInfo}
+                    viewMode={this.state.viewMode}
+                  />
                 </ModalPortal>
-              )}
+              }
               {this.state.showInsertFileDialog &&
                 <ModalPortal>
                   <InsertFileDialog