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} onReload({ params: { reload: true } })}>Retry
)
+ return (Something bad happened: {error.message} makeRequest({ params: { reload: true } })}>Retry
)
}
else if(isLoading) {
return (Loading...
)
}
else if(response !== null) {
- return ({response.data.message} onReload({ params: { refresh: true } })}>Refresh
)
+ return ({response.data.message} makeRequest({ params: { refresh: true } })}>Refresh
)
}
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} onReload()}>Retry
)
+ return (Something bad happened: {error.message} makeRequest()}>Retry
)
} else if(isLoading) {
return (
)
} else if(response !== null) {
- return ({response.data.message} onReload({ params:{ refresh: true } })}>Refresh
)
+ return ({response.data.message} makeRequest({ params:{ refresh: true } })}>Refresh
)
}
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) => (