Suppress duplicate modal close actions

4 files changed, 34 insertions, 16 deletions

diff --git a/src/components/modals/Modal.js b/src/components/modals/Modal.js
index bb8fa00f..e7054fec 100644
--- a/src/components/modals/Modal.js
+++ b/src/components/modals/Modal.js
@@ -10,29 +10,46 @@ class Modal extends React.Component {
     };
     static idCounter = 0;
 
+    // Local, up-to-date copy of modal visibility for time between close and props update (to prevent duplicate close
+    // triggers)
+    visible = false;
+
     constructor() {
         super();
-        this.id = "modal-" + Modal.idCounter;
+        this.id = "modal-" + Modal.idCounter++;
     }
 
     componentDidMount() {
+        this.visible = this.props.show;
         this.openOrCloseModal();
 
-        window["$"]("#" + this.id).on("hide.bs.modal", this.props.onCancel.bind(this));
+        window["$"]("#" + this.id).on("hide.bs.modal", () => {
+            if (this.visible) {
+                this.props.onCancel();
+                console.log("TEST");
+            }
+        });
     }
 
     componentDidUpdate() {
+        this.visible = this.props.show;
         this.openOrCloseModal();
     }
 
     onSubmit() {
-        this.props.onSubmit();
-        this.closeModal();
+        if (this.visible) {
+            this.props.onSubmit();
+            this.visible = false;
+            this.closeModal();
+        }
     }
 
     onCancel() {
-        this.props.onCancel();
-        this.closeModal();
+        if (this.visible) {
+            this.props.onCancel();
+            this.visible = false;
+            this.closeModal();
+        }
     }
 
     openModal() {
@@ -44,7 +61,7 @@ class Modal extends React.Component {
     }
 
     openOrCloseModal() {
-        if (this.props.show) {
+        if (this.visible) {
             this.openModal();
         } else {
             this.closeModal();
diff --git a/src/components/projects/ProjectActionButtons.js b/src/components/projects/ProjectActionButtons.js
index 085438d8..66eb8bfa 100644
--- a/src/components/projects/ProjectActionButtons.js
+++ b/src/components/projects/ProjectActionButtons.js
@@ -1,24 +1,26 @@
 import PropTypes from "prop-types";
 import React from 'react';
 
-const ProjectActionButtons = ({onOpen, onViewUsers, onDelete}) => (
+const ProjectActionButtons = ({projectId, onOpen, onViewUsers, onDelete}) => (
     <div className="project-icons">
-        <div className="open" title="Open this project" onClick={onOpen}>
+        <div className="open" title="Open this project" onClick={() => onOpen(projectId)}>
             <span className="fa fa-play"/>
         </div>
-        <div className="users" title="View and edit collaborators on this project" onClick={onViewUsers}>
+        <div className="users" title="View and edit collaborators on this project"
+             onClick={() => onViewUsers(projectId)}>
             <span className="fa fa-users"/>
         </div>
-        <div className="delete" title="Delete this project" onClick={onDelete}>
+        <div className="delete" title="Delete this project" onClick={() => onDelete(projectId)}>
             <span className="fa fa-trash"/>
         </div>
     </div>
 );
 
 ProjectActionButtons.propTypes = {
-    onOpen: PropTypes.func.isRequired,
-    onViewUsers: PropTypes.func.isRequired,
-    onDelete: PropTypes.func.isRequired,
+    projectId: PropTypes.number.isRequired,
+    onOpen: PropTypes.func,
+    onViewUsers: PropTypes.func,
+    onDelete: PropTypes.func,
 };
 
 export default ProjectActionButtons;
diff --git a/src/components/projects/ProjectAuth.js b/src/components/projects/ProjectAuth.js
index e58ac92b..10cfd252 100644
--- a/src/components/projects/ProjectAuth.js
+++ b/src/components/projects/ProjectAuth.js
@@ -13,7 +13,7 @@ const ProjectAuth = ({projectAuth}) => (
             <span className={classNames("fa", "fa-" + AUTH_ICON_MAP[projectAuth.authorizationLevel])}/>
             {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
         </div>
-        <ProjectActions/>
+        <ProjectActions projectId={projectAuth.simulation.id}/>
     </div>
 );
 
diff --git a/src/components/projects/ProjectAuthList.js b/src/components/projects/ProjectAuthList.js
index 217a8375..94e7abad 100644
--- a/src/components/projects/ProjectAuthList.js
+++ b/src/components/projects/ProjectAuthList.js
@@ -28,7 +28,6 @@ const ProjectAuthList = ({authorizations}) => {
 
 ProjectAuthList.propTypes = {
     authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
-    onProjectClick: PropTypes.func.isRequired,
 };
 
 export default ProjectAuthList;