Mobx modal store design poc

gistfile1.txt

import * as React from "react";
import { observable, action, autorun } from 'mobx';
import { Promise } from 'es6-promise';
import { FlatButton } from 'material-ui';
import { StoreManager } from './StoreManager';

export class ModalStore {
    storeManager: StoreManager
    @observable public isOpen: boolean = false;
    @observable public actions = [];
    @observable public selectedAction = -1;

    constructor(storeManager: StoreManager) {
        this.storeManager = storeManager
    }

    @action onClose = (e) => {
        this.isOpen = false
        this.selectedAction = 0
    }

    @action onOk = (e) => {
        this.isOpen = false
        this.selectedAction = 1
    }

    @action public openModal(): Promise<Boolean> {

        return new Promise<Boolean>((resolve, reject) => {

            if (!this.isOpen) {

                // Open modal
                this.selectedAction = -1

                this.actions = [
                    <FlatButton
                        label="Cancel"
                        primary={true}
                        onTouchTap={this.onClose}
                        />,
                    <FlatButton
                        label="Submit"
                        primary={true}
                        keyboardFocused={true}
                        onTouchTap={this.onOk}
                        />
                ]

                this.isOpen = true

                // Listen for user action
                var watcher = autorun(() => {
                    console.log("watching")
                    console.log(this.selectedAction)
                    switch (this.selectedAction) {
                        case 0:
                            resolve(false)
                            break;
                        case 1:
                            resolve(true)
                            break;
                        default:
                            break;
                    }
                })

            } else {
                reject("Modal already open")
            }
        })
    }

}

The client invokes openModal via:

this.storeManager.modalStore.openModal().then((res: Boolean) => {
                console.log(`User says...... ${res.toString()}`)
                if (res) {
                    resolve(EntityUserAction.Save)
                } else {
                    resolve(EntityUserAction.Cancel)
                }
            })