Splash Screen

Component.js

import React from 'react';

import splashActions from "actions/splashActions";
import SplashScreen from "../common/SplashScreen";

export default React.createClass({

    handleClick(){

        splashActions.show('splash1');

        $.ajax({
            url: "/my-server-script",
            method: "POST",
            success: function () {
                splashActions.hide('splash1');
                console.log('OK');
            },
            error: function () {
                splashActions.hide('splash1');
                console.log('Error');
            }
        });
    },
    
    render(){
        return (
            <SplashScreen id="splash1" message="Sending of request to a server">
                <div>
                    <h2>My form</h2>
                    <button type="button" className="greenButton submit" onClick={this.handleClick}>Submit</button>
                </div>
            </SplashScreen>
        );
    }
});

splashActions.js

'use strict';

import Reflux from 'reflux';

export default Reflux.createActions({
    init: {},
    show: {},
    hide: {}
});

SplashScreen.js

import React from 'react';
import Reflux from "reflux";
import splashActions from "actions/splashActions";

import Store from "stores/splashStore";

export default React.createClass({

    mixins: [Reflux.connect(Store)],

    componentDidMount(){
        splashActions.init(this.props.id);
    },

    render(){
        if(!this.state.instances[this.props.id]){
            if(this.props.children){
                return this.props.children;
            }
            else{
                return null;
            }
        }

        return (
            <div className="splash-screen clearfix">
                <div className="message-wrapper">
                    <h1>
                        {this.props.message}
                    </h1>
                    <p className="acenter">Please wait</p>
                    <p className="acenter"><img src="/images/waiting.gif"/></p>
                </div>
            </div>
        );
    }
});

SplashStore.js

import Reflux from "reflux";

import actions from "actions/splashActions";

export default Reflux.createStore({

    listenables: [actions],

    init() {
        this.state = {
            instances: {}
        };
    },

    getInitialState() {
        return this.state;
    },

    onInit(id){
        this.state.instances[id] = false;
        this.trigger(this.state);
    },

    onHide(id) {
        this.state.instances[id] = false;
        this.trigger(this.state);
    },

    onShow(id){
        this.state.instances[id] = true;
        this.trigger(this.state);
    }
});