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,
+      showRelatedFileDialog: false,
-      isAddRelatedFileShow: false,
-      isRelatedFileDialogShow: false,
     };
   }
 
@@ -64,30 +60,13 @@ class DetailListView extends React.Component {
 
   onListRelatedFileToggle = () => {
     this.setState({
-      isListRelatedFileShow: true,
+      showRelatedFileDialog: true,
-      isRelatedFileDialogShow: true,
     });
   }
 
   toggleCancel = () => {
     this.setState({
-      isListRelatedFileShow: false,
+      showRelatedFileDialog: false,
-      isAddRelatedFileShow: false,
-      isRelatedFileDialogShow: false,
-    });
-  }
-
-  onCloseAddRelatedFileDialog = () => {
-    this.setState({
-      isListRelatedFileShow: true,
-      isAddRelatedFileShow: false,
-    });
-  }
-
-  onAddRelatedFileToggle = () => {
-    this.setState({
-      isListRelatedFileShow: false,
-      isAddRelatedFileShow: true
     });
   }
   
@@ -152,34 +131,19 @@ class DetailListView extends React.Component {
               </tr>
             </tbody>
           </table>
-          { this.state.isRelatedFileDialogShow && (
+          {this.state.showRelatedFileDialog &&
               <ModalPortal>
-              <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
+                <RelatedFileDialogs
-                {
-                  this.state.isAddRelatedFileShow &&
-                  <AddRelatedFileDialog
-                    filePath={direntPath}
                   repoID={this.props.repoID}
-                    toggleCancel={this.onCloseAddRelatedFileDialog}
+                  filePath={direntPath}
+                  relatedFiles={relatedFiles}
+                  toggleCancel={this.toggleCancel}
                   onRelatedFileChange={this.props.onRelatedFileChange}
                   dirent={this.props.dirent}
-                    onClose={this.toggleCancel}
+                  viewMode="list_related_file"
                 />
-                }
-                {
-                  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.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 RelatedFileDialogs from '../dialog/related-file-dialogs';
-import ListRelatedFileDialog from '../dialog/list-related-file-dialog';
 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 => {
+      let relatedFiles = res.data.related_files;
+      if (relatedFiles.length > 0) {
         this.setState({
-        relatedFiles: res.data.related_files,
+          relatedFiles: relatedFiles,
           showLibContentViewDialogs: true,
-      });
+          showRelatedFileDialog: true,
-      if (res.data.related_files.length > 0) {
+          viewMode: 'list_related_file',
-        this.setState({
-          isRelatedFileDialogShow: true,
-          showListRelatedFileDialog: true,
         });
       } else {
         this.setState({
-          isRelatedFileDialogShow: true,
+          relatedFiles: relatedFiles,
-          showAddRelatedFileDialog: true,
+          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,
+      showRelatedFileDialog: false,
-      showListRelatedFileDialog: false,
-      isRelatedFileDialogShow: false,
-    });
-  }
-
-  closeAddRelatedFileDialog = () => {
-    this.setState({
-      showLibContentViewDialogs: true,
-      showAddRelatedFileDialog: false,
-      showListRelatedFileDialog: true,
-    });
-  }
-
-  addRelatedFileToggle = () => {
-    this.setState({
-      showLibContentViewDialogs: true,
-      showAddRelatedFileDialog: true,
-      showListRelatedFileDialog: 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'}}>
+                <RelatedFileDialogs
-                  {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}
+                  viewMode={this.state.viewMode}
                 />
-                  }
-                </Modal>
               </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 RelatedFileDialogs from '../dialog/related-file-dialogs';
-import AddRelatedFileDialog from '../dialog/add-related-file-dialog';
 
 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'}}>
+            <RelatedFileDialogs
-              {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}
+              viewMode="list_related_file"
-                  filePath={this.props.path}
-                  onRelatedFileChange={this.props.onRelatedFileChange}
-                  toggleCancel={this.onCloseAddRelatedFileDialog}
-                  onClose={this.toggleCancel}
             />
-              }
-            </Modal>
           </ModalPotal>
-        )}
+        }
       </Fragment>
     );
   }

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 RelatedFileDialogs from './components/dialog/related-file-dialogs';
-import AddRelatedFileDialog from './components/dialog/add-related-file-dialog';
 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,20 +466,6 @@ 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)
     {
@@ -493,14 +474,14 @@ class MarkdownEditor extends React.Component {
             this.setState({
               showRelatedFileDialog: true,
               showMarkdownEditorDialog: true,
-            isRelatedFileDialogShow: true,
+              viewMode: 'list_related_file',
             });
           }
           else {
             this.setState({
-            showAddRelatedFileDialog: true,
+              showRelatedFileDialog: true,
               showMarkdownEditorDialog: true,
-            isRelatedFileDialogShow: true,
+              viewMode: 'add_related_file',
             });
           }
         break;
@@ -1116,32 +1097,19 @@ class MarkdownEditor extends React.Component {
                   />
                 </ModalPortal>
               }
-              {this.state.isRelatedFileDialogShow && (
-                <ModalPortal>
-                  <Modal isOpen={true} toggle={this.toggleCancel} size='lg' style={{width: '650px'}}>
               {this.state.showRelatedFileDialog &&
-                      <ListRelatedFileDialog
+                <ModalPortal>
+                  <RelatedFileDialogs
                     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}
+                    viewMode={this.state.viewMode}
                   />
-                    }
-                  </Modal>
                 </ModalPortal>
-              )}
+              }
               {this.state.showInsertFileDialog &&
                 <ModalPortal>
                   <InsertFileDialog