Add basic handling for a single modal dialog

src/app/layout/App.js

@@ -12,6 +12,8 @@ import Pilots from "features/pilots/Pilots";
 import Mechs from "features/mechs/Mechs";
 import UnitOrganization from "features/unitOrganization/UnitOrganization";
 import Tools from "features/tools/Tools";
+import ModalManager from "features/modals/ModalManager";
+
 
 
 class App extends Component {
@@ -26,6 +28,7 @@ class App extends Component {
 
         return (
             <div className="App">
+                <ModalManager />
                 <div className="App-header">
                     <Header inverted as="h1">Project Mini-Mek</Header>
                 </div>

src/app/reducers/rootReducer.js

@@ -8,6 +8,8 @@ import pilotsReducer from "features/pilots/pilotsReducer";
 import mechsReducer from "features/mechs/mechsReducer";
 import tabReducer from "features/tabs/tabsReducer";
 import unitInfoReducer from "features/unitInfo/unitInfoReducer";
+import modalsReducer from "features/modals/modalReducer.js";
+
 
 import entityCrudReducer from "features/entities/entityReducer";
 import editingFeatureReducer from "features/editing/editingReducer";
@@ -20,6 +22,7 @@ const combinedReducer = combineReducers({
     mechs : mechsReducer,
     unitInfo : unitInfoReducer,
     tabs : tabReducer,
+    modals : modalsReducer,
 });
 
 const rootReducer = reduceReducers(

src/features/modals/ModalManager.jsx

@@ -0,0 +1,31 @@
+import React, {Component} from "react";
+import {connect} from "react-redux";
+
+import TestModal from "./TestModal";
+
+const modalComponentLookupTable = {
+    TestModal
+};
+
+const mapState = (state) => ({currentModal : state.modals});
+
+
+export class ModalManager extends Component {
+    render() {
+        const {currentModal} = this.props;
+
+
+        let renderedModal;
+
+        if(currentModal) {
+            const {modalType, modalProps = {}} = currentModal;
+            const ModalComponent = modalComponentLookupTable[modalType];
+
+            renderedModal = <ModalComponent {...modalProps} />;
+        }
+
+        return <span>{renderedModal}</span>
+    }
+}
+
+export default connect(mapState)(ModalManager);

src/features/modals/TestModal.jsx

@@ -0,0 +1,34 @@
+import React, {Component} from "react";
+import {connect} from "react-redux";
+import {
+    Modal,
+} from "semantic-ui-react";
+
+import {closeModal} from "features/modals/modalActions";
+
+const actions = {closeModal};
+
+export class TestModal extends Component {
+    render() {
+
+        return (
+            <Modal
+                closeIcon="close"
+                open={true}
+                onClose={this.props.closeModal}
+            >
+                <Modal.Header>Modal #1</Modal.Header>
+                <Modal.Content image>
+                    <Modal.Description>
+                        <p>This is a modal dialog.  Pretty neat, huh?</p>
+                    </Modal.Description>
+                </Modal.Content>
+                <Modal.Actions>
+                </Modal.Actions>
+            </Modal>
+        )
+    }
+}
+
+
+export default connect(null, actions)(TestModal);

src/features/modals/modalActions.js

@@ -0,0 +1,17 @@
+import {
+    MODAL_CLOSE,
+    MODAL_OPEN
+} from "./modalConstants";
+
+export function openModal(modalType, modalProps) {
+    return {
+        type : MODAL_OPEN,
+        payload : { modalType, modalProps}
+    };
+}
+
+export function closeModal() {
+    return {
+        type : MODAL_CLOSE
+    };
+}

src/features/modals/modalConstants.js

@@ -0,0 +1,2 @@
+export const MODAL_OPEN = "MODAL_OPEN";
+export const MODAL_CLOSE = "MODAL_CLOSE";

src/features/modals/modalReducer.js

@@ -0,0 +1,22 @@
+import {createReducer} from "common/utils/reducerUtils";
+
+import {
+    MODAL_CLOSE,
+    MODAL_OPEN
+} from "./modalConstants";
+
+const initialState = null;
+
+export function openModal(state, payload) {
+    const {modalType, modalProps} = payload;
+    return {modalType, modalProps};
+}
+
+export function closeModal(state, payload) {
+    return null;
+}
+
+export default createReducer(initialState,  {
+    [MODAL_OPEN] : openModal,
+    [MODAL_CLOSE] : closeModal
+});

src/features/tools/Tools.jsx

@@ -6,16 +6,23 @@ import {
 } from "semantic-ui-react";
 
 import {loadUnitData} from "./toolActions";
+import {openModal} from "features/modals/modalActions";
 
-const actions = {loadUnitData};
+const actions = {loadUnitData, openModal};
 
 class Tools extends Component {
+
+    onOpenModalClicked = () => {
+        this.props.openModal("TestModal", {a : 42});
+    }
+
     render() {
         const {loadUnitData} = this.props;
 
         return (
             <Segment attached="bottom">
                 <Button onClick={loadUnitData}>Reload Unit Data</Button>
+                <Button primary onClick={this.onOpenModalClicked}>Show Test Modal</Button>
             </Segment>
         )
     }