From a19f234b3b252a205d5649f5f2a2fd48bb33aff9 Mon Sep 17 00:00:00 2001
From: Mark Erikson <mark@isquaredsoftware.com>
Date: Sat, 11 Nov 2017 16:56:47 -0500
Subject: [PATCH] Add basic handling for a single modal dialog

---
 src/app/layout/App.js                 |  3 +++
 src/app/reducers/rootReducer.js       |  3 +++
 src/features/modals/ModalManager.jsx  | 31 ++++++++++++++++++++++++
 src/features/modals/TestModal.jsx     | 34 +++++++++++++++++++++++++++
 src/features/modals/modalActions.js   | 17 ++++++++++++++
 src/features/modals/modalConstants.js |  2 ++
 src/features/modals/modalReducer.js   | 22 +++++++++++++++++
 src/features/tools/Tools.jsx          |  9 ++++++-
 8 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/features/modals/ModalManager.jsx
 create mode 100644 src/features/modals/TestModal.jsx
 create mode 100644 src/features/modals/modalActions.js
 create mode 100644 src/features/modals/modalConstants.js
 create mode 100644 src/features/modals/modalReducer.js

diff --git a/src/app/layout/App.js b/src/app/layout/App.js
index 6fdb26f..03d4f65 100644
--- a/src/app/layout/App.js
+++ b/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>
diff --git a/src/app/reducers/rootReducer.js b/src/app/reducers/rootReducer.js
index 963d40f..8c3ebeb 100644
--- a/src/app/reducers/rootReducer.js
+++ b/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(
diff --git a/src/features/modals/ModalManager.jsx b/src/features/modals/ModalManager.jsx
new file mode 100644
index 0000000..2dfb6d0
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/src/features/modals/TestModal.jsx b/src/features/modals/TestModal.jsx
new file mode 100644
index 0000000..c5de7dd
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/src/features/modals/modalActions.js b/src/features/modals/modalActions.js
new file mode 100644
index 0000000..96e41c1
--- /dev/null
+++ b/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
+    };
+}
diff --git a/src/features/modals/modalConstants.js b/src/features/modals/modalConstants.js
new file mode 100644
index 0000000..f169cc2
--- /dev/null
+++ b/src/features/modals/modalConstants.js
@@ -0,0 +1,2 @@
+export const MODAL_OPEN = "MODAL_OPEN";
+export const MODAL_CLOSE = "MODAL_CLOSE";
diff --git a/src/features/modals/modalReducer.js b/src/features/modals/modalReducer.js
new file mode 100644
index 0000000..79e1365
--- /dev/null
+++ b/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
+});
diff --git a/src/features/tools/Tools.jsx b/src/features/tools/Tools.jsx
index f51eab4..117f915 100644
--- a/src/features/tools/Tools.jsx
+++ b/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>
         )
     }