diff --git a/README.md b/README.md index db69bb0..40e0a6b 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,13 @@ This is intended to allow in render async requests. - Same great features found in [Axios](https://github.com/mzabriskie/axios) - Component driven -- Child function callback ***(error, response, isLoading, onReload, axios) => { }*** +- Child function callback ***(error, response, isLoading, makeRequest, axios) => { }*** - Auto cancel previous requests - Debounce to prevent rapid calls. - Request only invoked on prop change and *isReady* state. - Callback props for ***onSuccess***, ***onError***, and ***onLoading*** - Supports custom axios instances through ***props*** or a ***<AxiosProvider ... >*** -- Create your own request components wrapped using the withAxios({options})(ComponentToBeWrapped) HoC +- Create your own request components wrapped using the ***withAxios({options})(ComponentToBeWrapped)*** HoC ## Installing @@ -81,15 +81,15 @@ render() { return (
- {(error, response, isLoading, onReload, axios) => { + {(error, response, isLoading, makeRequest, axios) => { if(error) { - return (
Something bad happened: {error.message}
) + return (
Something bad happened: {error.message}
) } else if(isLoading) { return (
Loading...
) } else if(response !== null) { - return (
{response.data.message}
) + return (
{response.data.message}
) } return (
Default message before request is made.
) }} @@ -106,7 +106,7 @@ render() { `isLoading` Boolean flag indicating if Axios is currently making a XHR request. -`onReload(props)` Function to invoke another XHR request. This function accepts new temporary props that will be overloaded with the existing props for this request only. +`makeRequest(props)` Function to invoke another XHR request. This function accepts new temporary props that will be overloaded with the existing props for this request only. `axios` current instance of axios being used. @@ -127,7 +127,7 @@ Pass down through a provider ```jsx - {(error, response, isLoading, onReload, axios) => { + {(error, response, isLoading, makeRequest, axios) => { ... }} @@ -137,7 +137,7 @@ Pass down through a provider Or pass down through props ```jsx - {(error, response, isLoading, onReload, axios) => { + {(error, response, isLoading, makeRequest, axios) => { ... }} @@ -176,7 +176,7 @@ const MyComponent = withAxios({ params: {id: "12345"} })(class MyComponentRaw extends React.Component { render() { - const {error, response, isLoading, onReload, axios} = this.props + const {error, response, isLoading, makeRequest, axios} = this.props if(error) { return (
Something bad happened: {error.message}
) } else if(isLoading) { diff --git a/__tests__/utils.spec.js b/__tests__/utils.spec.js index 942a9f4..85cc61f 100644 --- a/__tests__/utils.spec.js +++ b/__tests__/utils.spec.js @@ -265,7 +265,9 @@ describe('components', () => { expect(props.error).toBe(null) expect(props.response).toBe(null) expect(props.isLoading).toBe(false) - expect(typeof props.onReload).toBe('function') + expect(typeof props.makeRequest).toBe('function') + expect(typeof props.axios).toBe('function') + expect(typeof props.options).toBe('object') }) }) }) diff --git a/examples/advanced/app.js b/examples/advanced/app.js index 9f86fd1..e1a4d45 100644 --- a/examples/advanced/app.js +++ b/examples/advanced/app.js @@ -36,14 +36,14 @@ class App extends React.Component { onLoading={()=>this.setState({ isLoading: true })} onError={()=>this.setState({ isReady: false, isLoading: false })} > - {(error, response, isLoading, onReload) => { + {(error, response, isLoading, makeRequest) => { if(error) { console.log(response) - return (
Something bad happened: {error.message}
) + return (
Something bad happened: {error.message}
) } else if(isLoading) { return (
) } else if(response !== null) { - return (
{response.data.message}
) + return (
{response.data.message}
) } return
Click a button to test its action.
}} diff --git a/examples/index.js b/examples/index.js index a28c6e7..557840b 100644 --- a/examples/index.js +++ b/examples/index.js @@ -6,10 +6,14 @@ let WebpackConfig = require('./webpack.config') let app = express() -app.all('/api/*', (req, res) => { // Fake API response +app.all('/api/*', (req, res) => { // Fake API response with timeout setTimeout(() => { res.status(200).json({ message: 'Success! ' + req.method + ' ' + req.url }) }, 1000) }) +app.all('/error*', (req, res) => { // Fake ERROR response with timeout + setTimeout(() => { res.status(404).json({ message: 'Error 404! ' + req.method + ' ' + req.url }) }, 500) +}) + app.use(webpackDevMiddleware(webpack(WebpackConfig), { publicPath: '/__build__/', stats: { diff --git a/examples/withAxios/app.js b/examples/withAxios/app.js index 99f92eb..eeef8db 100644 --- a/examples/withAxios/app.js +++ b/examples/withAxios/app.js @@ -16,6 +16,9 @@ class App extends React.Component {

Overloading withAxios HoC config options

+

Overloading url=undefined withAxios HoC config options

+ +

Children withAxios HoC

children
@@ -26,7 +29,7 @@ class App extends React.Component { /* eslint react/prop-types: 0 */ class DemoComponent extends React.Component { render() { - const { error, response, isLoading, children, customProp, onRendered } = this.props + const { error, response, isLoading, children, customProp, axios, makeRequest } = this.props if(error) { return (
Something bad happened: {error.message}
) } else if(isLoading) { diff --git a/src/components/Request.js b/src/components/Request.js index aee0b56..c809687 100644 --- a/src/components/Request.js +++ b/src/components/Request.js @@ -24,21 +24,19 @@ class Request extends React.Component { let oldPropStr = JSON.stringify(this.props) let newPropStr = JSON.stringify(newProps) if (oldPropStr != newPropStr && newProps.isReady) { - this.debounceMakeRequest(this.getConfig(newProps)) + this.debounceMakeRequest(newProps, this.getConfig(newProps)) } } componentDidMount() { this._mounted = true if (this.props.isReady) { - this.debounceMakeRequest(this.getConfig(this.props)) + this.debounceMakeRequest(this.props, this.getConfig(this.props)) } } - onReload(props) { - if (!this.state.isLoading) { - this.debounceMakeRequest(this.getConfig(props ? Object.assign({}, this.props, props) : this.props)) - } + onMakeReload(props) { + this.debounceMakeRequest(props || this.props, this.getConfig(props ? Object.assign({}, this.props, props) : this.props)) } componentWillUnmount() { @@ -56,9 +54,9 @@ class Request extends React.Component { return Object.assign({ url: props.url, method: props.method, data: props.data, params: props.params }, props.config) } - makeRequest(config) { - const _axios = this.props.instance || this.context.axios || axios - if (!this._mounted || !this.props.isReady || this.props.url === undefined) { + makeRequest(props, config) { + const _axios = props.instance || this.context.axios || axios + if (!this._mounted || config.url === undefined) { return } // setup cancel tokens @@ -69,8 +67,8 @@ class Request extends React.Component { // set the isLoading flag this.setState({ isLoading: true, error: null }) - if (typeof this.props.onLoading === 'function') { - this.props.onLoading() + if (typeof props.onLoading === 'function') { + props.onLoading() } // time to make the axios request @@ -79,8 +77,8 @@ class Request extends React.Component { return } this.setState({ isLoading: false, response: res }) - if (typeof this.props.onSuccess === 'function') { - this.props.onSuccess(res) + if (typeof props.onSuccess === 'function') { + props.onSuccess(res) } }, (err) => { if (!this._mounted) { @@ -88,8 +86,8 @@ class Request extends React.Component { } if (!axios.isCancel(err)) { this.setState({ isLoading: false, response: err.response, error: err }) - if (typeof this.props.onError === 'function') { - this.props.onError(err) + if (typeof props.onError === 'function') { + props.onError(err) } } }) @@ -102,7 +100,7 @@ class Request extends React.Component { this.state.error, this.state.response, this.state.isLoading, - (props) => this.onReload(props), + (props) => this.onMakeReload(props), _axios ) } diff --git a/src/components/withAxios.js b/src/components/withAxios.js index 79985f5..b1560d2 100644 --- a/src/components/withAxios.js +++ b/src/components/withAxios.js @@ -30,13 +30,13 @@ export const withAxios = (mixed = {}) => { const newOptions = { ...options, ...this.props.options } return ( - {(error, response, isLoading, onReload, axios) => ( + {(error, response, isLoading, makeRequest, axios) => (