simple-async-component-for-react-router.js

##### Async.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Async extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loader: true,
            status: 'Pending',
            response: {
                error: undefined,
                errorMassage: undefined
            }
        };
    }

    static arrayify(children) {
        if (children.map) {
            return children;
        }

        return [children];
    }

    static renderChildren(props) {
        return Async.arrayify(props.children).map((child, index) => React.cloneElement(
            child, {...props._props, ...props._state, key: props.key || index})
        )
    }

    static Failure(props) {
        return (<React.Fragment>{Async.renderChildren(props)}</React.Fragment>)
    }

    static Success(props) {
        return (<React.Fragment>{props.children}</React.Fragment>)
    }

    static Pending(props) {
        return (<React.Fragment>{props.children}</React.Fragment>)
    }

    static DefaultPending(props) {
        return (
            <div style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '500px',
            }}><span>hold on!</span></div>
        );
    }

    componentDidMount() {
        this.props.middleware((data) => {
            this.setState({
                loader: false,
                status: data.error ? 'Failure' : 'Success',
                response: {
                    error: data.error,
                    errorMessage: data.errorMassage
                }
            })
        })
    }

    render() {
        const Component = this.props.children.filter(child => this.state.status === child.type.name);

        if (Component.length === 0) {
            return <Async.DefaultPending _state={this.state} _props={this.props}/>
        }

        if(Component[0].type.name === 'Failure') {
            return React.cloneElement(Component[0], {_props: this.props, _state: this.state});
        }

        return Component;
    }
}

Async.propTypes = {
    middleware: PropTypes.func.isRequired
};

export default Async;
          
          
##### Router.js
import React, {Component, Fragment} from 'react';
import {HashRouter, Route} from 'react-router-dom';
import Index from "./pages/index/Index";
import {Switch} from 'react-router';
import Async from "./common/Async";
import {store} from "./index";
import {authenticate_action} from "./api/Authenticate";

const OnMiddleWareFailure = (props) => {
    return (
        <div style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '500px',
        }}>
            <span>error : {props.response.errorMessage} </span>
        </div>
    );
};

const AsyncIndex = () => (
    <Async middleware={(resolve) => store.dispatch(authenticate_action(resolve))}>
        <Async.Success>
            <Index/>
        </Async.Success>
        <Async.Failure>
            <OnMiddleWareFailure/>
        </Async.Failure>
    </Async>
);

export default class Routes extends Component {
    render() {
        return (
            <Fragment>
                <HashRouter>
                    <Switch>
                        <Route exact path="/" component={AsyncIndex}/>
                    </Switch>
                </HashRouter>
            </Fragment>
        );
    }
}

##### Authenticate.js
##### you can handle this action in your way though

function* get_authentication({resolve}) {
    try {
        const {error, response} = yield get_secret_key();
        if (!!error === false) {
            yield put(set_secret_key(response.token));
            const data = yield get_jwt_token(response.token);
            if(data.error) {
                return resolve({error: true, errorMessage: 'there is some propblems!'});
            }

            return resolve({error: false});
        }
    } catch (exception) {
        console.log(exception);
    }
}

export function* watch_get_authentication() {
    yield takeEvery('AUTHENTICATE', get_authentication);
}