Merge two components into one component (#3188)

* Merge two components into one component

* Simplified code

* Delete the use of setTimeout

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

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

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>

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>
     );
   }