Implement stackable modals

src/features/modals/ModalManager.jsx

@@ -7,24 +7,24 @@ const modalComponentLookupTable = {
     TestModal
 };
 
-const mapState = (state) => ({currentModal : state.modals});
+const mapState = (state) => ({currentModals : state.modals});
 
 
 export class ModalManager extends Component {
     render() {
-        const {currentModal} = this.props;
+        const {currentModals} = this.props;
 
 
-        let renderedModal;
-
-        if(currentModal) {
-            const {modalType, modalProps = {}} = currentModal;
+        const renderedModals = currentModals.map( (modalDescription, index) => {
+            const {modalType, modalProps = {}} = modalDescription;
             const ModalComponent = modalComponentLookupTable[modalType];
 
-            renderedModal = <ModalComponent {...modalProps} />;
-        }
+            return <ModalComponent {...modalProps}  key={modalType + index}/>;
+
+        });
+
 
-        return <span>{renderedModal}</span>
+        return <span>{renderedModals}</span>
     }
 }
 

src/features/modals/TestModal.jsx

@@ -2,25 +2,42 @@ import React, {Component} from "react";
 import {connect} from "react-redux";
 import {
     Modal,
+    Button,
 } from "semantic-ui-react";
 
-import {closeModal} from "features/modals/modalActions";
+import {openModal, closeModal} from "features/modals/modalActions";
 
-const actions = {closeModal};
+const actions = {openModal, closeModal};
 
 export class TestModal extends Component {
+
+    onNextModalClick = () => {
+        const {counter} = this.props;
+
+        this.props.openModal("TestModal", {counter : counter + 1});
+    }
+
     render() {
+        const {counter, closeModal} = this.props;
 
         return (
             <Modal
                 closeIcon="close"
                 open={true}
-                onClose={this.props.closeModal}
+                onClose={closeModal}
             >
-                <Modal.Header>Modal #1</Modal.Header>
+                <Modal.Header>Modal #{counter}</Modal.Header>
                 <Modal.Content image>
                     <Modal.Description>
-                        <p>This is a modal dialog.  Pretty neat, huh?</p>
+                        <h4>
+                            Value from props:
+                        </h4>
+                        <div>
+                            counter = {counter}
+                        </div>
+                        <div>
+                            <Button onClick={this.onNextModalClick}>Add Another Modal</Button>
+                        </div>
                     </Modal.Description>
                 </Modal.Content>
                 <Modal.Actions>
@@ -31,4 +48,4 @@ export class TestModal extends Component {
 }
 
 
-export default connect(null, actions)(TestModal);
+export default connect(null, actions)(TestModal);

src/features/modals/modalReducer.js

@@ -6,19 +6,24 @@ import {
 import {createReducer} from "common/utils/reducerUtils";
 
 
-const initialState = null;
+const initialState = [];
+
 
 export function openModal(state, payload) {
     const {modalType, modalProps} = payload;
-    return {modalType, modalProps};
+    // Always pushing a new modal onto the stack
+    return state.concat({modalType, modalProps});
 }
 
 export function closeModal(state, payload) {
-    return null;
+    // Always popping the last modal off the stack
+    const newState = state.slice();
+    newState.pop();
+    return newState;
 }
 
 
 export default createReducer(initialState,  {
     [MODAL_OPEN] : openModal,
     [MODAL_CLOSE] : closeModal
-});
+});

src/features/tools/Tools/Tools.jsx

@@ -13,7 +13,7 @@ const actions = {loadUnitData, openModal};
 class Tools extends Component {
 
     onOpenModalClicked = () => {
-        this.props.openModal("TestModal", {a : 42});
+        this.props.openModal("TestModal", {counter : 1});
     }
 
     render() {