Merge two components into one component (#3188)

* Merge two components into one component

* Simplified code

* Delete the use of setTimeout

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>