Naughty Program Manipulator

    @stak-digital/async-event
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    async-event

    Build Status codecov

    An immutable micro-library for state management of async events

    Usage

    import createAsyncEvent from '@stak-digital/async-event';
    
    const apiRequest = createAsyncEvent();
    
    async function apiCall() {
        apiRequest.markAsExecuting();
        
        try {
            await fetch('/some-url')
        
            apiRequest.resolve();
        } catch (e) {
            apiRequest.reject(e);
        }
    }

    This unlocks the ability to easily manage loading/loaded states in your view.

    React:

    class App extends React.Component() {
        constructor() {
            super();
            
            this.state = {
                apiRequestEvent: createAsyncEvent()
            };
        }
        
        async handleButtonClicked() {
            this.setState({
                apiRequestEvent: this.state.apiRequestEvent.markAsExecuting()
            });
                
            try {
                await fetch('/some-url')
            
                this.setState({
                    apiRequestEvent: this.state.apiRequestEvent.resolve()
                });
            } catch (e) {
                this.setState({
                    apiRequestEvent: this.state.apiRequestEvent.reject(e)
                });
            }
        }
        
        render() {
            return (
                <div>
                    {this.state.apiRequestEvent.isExecuting && (
                        <Spinner />
                    )}
                    {this.state.apiRequestEvent.hasError && (
                        <span>
                            Something went wrong!
                        </span>
                    )}
                    
                    <button 
                        onClick={this.handleButtonClicked} 
                        disabled={this.state.apiRequestEvent.isExecuting}
                    >
                        Click me for magic
                    </button>
                </div>	
            );
        }
    }

    API

    createAsyncEvent

    import createAsyncEvent
    

    Returns

    AsyncEvent

    Properties

    Property Type Default
    status string 'ready'
    errorMessage boolean or null null
    isExecuting boolean false
    isSuccessful boolean false
    isReady boolean true
    hasError boolean false

    Methods

    markAsExecuting

    status - 'executing'
    errorMessage - null
    isExecuting - true
    hasError - false
    isReady - false
    isSuccessful - false
    

    resolve

    status - 'success'
    errorMessage - null
    isExecuting - false
    hasError - false
    isReady - false
    isSuccessful - true
    

    reject

    Arguments

    Property Type Example
    errorMessage string 'Internal Server Error'
    status - 'success'
    errorMessage - null
    isExecuting - false
    hasError - true
    isReady - false
    isSuccessful - true
    

    reset

    status - 'ready'
    errorMessage - null
    isExecuting - false
    hasError - false
    isReady - true
    isSuccessful - false
    

    Keywords

    none

    Install

    npm i @stak-digital/async-event

    DownloadsWeekly Downloads

    53

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    150 kB

    Total Files

    19

    Last publish

    Collaborators

    • brycehanscomb
    • lukeboyle