Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@stak-digital/async-event

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

1

Version

2.0.1

License

MIT

Unpacked Size

150 kB

Total Files

19

Last publish

Collaborators

  • avatar
  • avatar