An API state machine HOC

withApiState.js

// @flow
import * as React from 'react';

const states = {
    IDLE: 'idle',
    PENDING: 'pending',
    ERROR: 'error',
    SUCCESS: 'success',
};

type State = {
    currentState: $Values<typeof states>,
}

const withApiState = (TargetComponent: React.ComponentType<{}>): React.ComponentType<{}> => {
    class WithApiState extends React.Component<{}, State> {
        state = {
            currentState: states.IDLE,
        };

        stateMachine = {
            isIdle: () => this.state.currentState === states.IDLE,
            isPending: () => this.state.currentState === states.PENDING,
            isSuccess: () => this.state.currentState === states.SUCCESS,
            isError: () => this.state.currentState === states.ERROR,
            setIdle: () => this.setState({ currentState: states.IDLE }),
            setPending: () => this.setState({ currentState: states.PENDING }),
            setSuccess: () => this.setState({ currentState: states.SUCCESS }),
            setError: () => this.setState({ currentState: states.ERROR }),
        };

        render() {
            return (
                <TargetComponent {...this.props} apiState={this.stateMachine} />
            );
        }
    }

    const targetName = TargetComponent.displayName || TargetComponent.name;
    WithApiState.displayName = `withApiState(${targetName})`;

    return WithApiState;
};