Suppress duplicate modal close actions

6 files changed, 39 insertions, 19 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;
diff --git a/src/containers/projects/ProjectActions.js b/src/containers/projects/ProjectActions.js
index 3746bdb8..098d9966 100644
--- a/src/containers/projects/ProjectActions.js
+++ b/src/containers/projects/ProjectActions.js
@@ -2,8 +2,10 @@ import {connect} from "react-redux";
 import {deleteProject, openProject} from "../../actions/projects";
 import ProjectActionButtons from "../../components/projects/ProjectActionButtons";
 
-const mapStateToProps = state => {
-    return {};
+const mapStateToProps = (state, ownProps) => {
+    return {
+        projectId: ownProps.projectId
+    };
 };
 
 const mapDispatchToProps = dispatch => {
diff --git a/src/reducers/projects.js b/src/reducers/projects.js
index ff5c37cd..b6450fd7 100644
--- a/src/reducers/projects.js
+++ b/src/reducers/projects.js
@@ -13,7 +13,7 @@ export const authorizations = (state = [], action) => {
                 ...state,
                 {
                     userId: -1,
-                    simulation: {name: action.name, datetimeLastEdited: "2017-08-06T12:43:00"},
+                    simulation: {name: action.name, datetimeLastEdited: "2017-08-06T12:43:00", id: state.length},
                     authorizationLevel: "OWN"
                 }
             ];