Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Resolve.jsx (the one in use)
import { Component } from 'react';
import PropTypes from 'prop-types';
/**
* Resolve
*
* This is the workhorse of how Jetty does async.
* It accepts a promise, and renders one of four render props:
* - before
* - pending
* - then
* - catch
*
* It also passes the `lastSuccessfulValue` to the `catch` and `pending`
* render props, allowing you to continue to render both the results and
* a loading indicator, if you so choose.
*
* The general pattern for using resolve is as follows:
* - When the user interacts with the UI, which would trigger a new API call, call:
* this.setState({
* uiState: newUiState,
* myPromise: fetchData(newUiState),
* })
* (or use StateProvider).
* - In the render method, do:
* <Resolve
* promise={this.state.myPromise}
* then={data => <div>we got data and it is {data}</div>}
* // etc
* />
* - You do not need to prevent the user from interacting with the UI while the
* promise is pending. They can trigger many promises, and only the results of the
* last one will render.
*/
const states = {
UNINITIALIZED: 'UNINITIALIZED',
PENDING: 'PENDING',
RESOLVED: 'RESOLVED',
CAUGHT: 'CAUGHT',
};
export default class Resolve extends Component {
static propTypes = {
promise: PropTypes.shape({
then: PropTypes.func.isRequired,
}),
before: PropTypes.func,
pending: PropTypes.func,
then: PropTypes.func,
catch: PropTypes.func,
};
state = {
promiseState: states.UNINITIALIZED,
value: undefined,
error: undefined,
lastSuccessfulValue: undefined,
};
componentDidMount() {
if (this.props.promise) {
this.handlePromise(this.props.promise);
}
}
componentWillReceiveProps(newProps) {
if (newProps.promise !== this.props.promise) {
this.handlePromise(newProps.promise);
}
}
componentWillUnmount() {
this.unmounted = true;
}
handlePromise(promise) {
this.setState({
promiseState: states.PENDING,
value: undefined,
error: undefined,
promise,
});
promise.then(
(value) => {
if (this.state.promise === promise && !this.unmounted) {
this.setState({
promiseState: states.RESOLVED,
value,
lastSuccessfulValue: value,
});
}
},
(error) => {
if (this.state.promise === promise && !this.unmounted) {
this.setState({
promiseState: states.CAUGHT,
error,
});
}
}
);
}
render() {
const {
pending,
then,
catch: catchHandler, // catch is a reserved word
before,
} = this.props;
const {
promiseState,
value,
error,
lastSuccessfulValue,
} = this.state;
const renderChildFunction = (fnOrNode, ...params) => {
if (typeof fnOrNode === 'function') {
return fnOrNode(...params);
} else if (fnOrNode) {
return fnOrNode;
}
return null;
};
switch (promiseState) {
case states.UNINITIALIZED:
return renderChildFunction(before);
case states.PENDING:
return renderChildFunction(pending, lastSuccessfulValue);
case states.RESOLVED:
return renderChildFunction(then, value);
case states.CAUGHT:
return renderChildFunction(catchHandler, error, lastSuccessfulValue);
default:
throw new Error('Resolve is in an undefined state', promiseState);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment