From 9a967169095e76cbefc727443b105fc3d9ceb387 Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Mon, 23 Apr 2018 13:58:58 +1000
Subject: [PATCH] Add reset function to children render props

---
 README.md    | 15 ++++++++++++++-
 src/index.js | 15 ++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index d6291ba..2781e0c 100644
--- a/README.md
+++ b/README.md
@@ -76,7 +76,7 @@ export default () => (
 <table>
 <thead><tr><th>Prop</th><th>Type</th><th>Default value</th><th>Description</th></tr></thead>
 <tbody>
-  <tr><td>  children </td><td><code>({ response?: any, error?: any, load: Function, state: 'idle' | 'loading' | 'timeout' | 'success' | 'error' })</code></td><td>N/A (required)</td> <td></td></tr>
+  <tr><td>  children </td><td><code>({ response?: any, error?: any, load: (...args: any) => ?Promise&lt;any&gt;, reset: Function, state: 'idle' | 'loading' | 'timeout' | 'success' | 'error' })</code></td><td>N/A (required)</td> <td></td></tr>
   <tr><td>  delay </td><td><code>number</code></td><td><code>300</code></td> <td>Number of milliseconds before component transitions to <code>loading</code> state upon invoking <code>fn</code>/<code>load</code>.</td></tr>
   <tr><td>  loadOnMount </td><td><code>boolean</code></td><td><code>false</code></td> <td>Whether or not to invoke the <code>fn</code> on mount.</td></tr>
   <tr><td>  fn </td><td><code>(...args: any) => Promise&lt;any&gt;</code></td><td>N/A (required)</td> <td>The promise to invoke.</td></tr>
@@ -84,6 +84,19 @@ export default () => (
 </tbody>
 </table>
 
+##### `children` Render Props
+
+<table>
+<thead><tr><th>Prop</th><th>Type</th><th>Description</th></tr></thead>
+<tbody>
+  <tr><td>  response </td><td><code>any</code></td><td>Response from the resolved promise (`fn`)</td></tr>
+  <tr><td>  error </td><td><code>any</code></td><td>Error from the rejected promise (`fn`)</td></tr>
+  <tr><td>  load </td><td><code>(...args: any) => ?Promise&lt;any&gt;</code></td><td>Trigger to load `fn`</td></tr>
+  <tr><td>  resetState </td><td><code>() => void</code></td><td>Reset state back to `idle`.</td></tr>
+  <tr><td>  state </td><td><code>'idle' | 'loading' | 'timeout' | 'success' | 'error'</code></td><td>Current state.</td></tr>
+</tbody>
+</table>
+
 ### `<IfIdle>`, `<IfLoading>`, `<IfTimeout>`, `<IfSuccess>`, `<IfError>`
 
 These components determine what node to render based on the loading/response state.
diff --git a/src/index.js b/src/index.js
index b5b8a71..1e53870 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,6 +30,7 @@ const statechart = {
     },
     success: {
       on: {
+        RESET: 'idle',
         FETCH: 'loading',
         SUCCESS: 'success',
         ERROR: 'error'
@@ -37,6 +38,7 @@ const statechart = {
     },
     error: {
       on: {
+        RESET: 'idle',
         FETCH: 'loading',
         SUCCESS: 'success',
         ERROR: 'error'
@@ -46,7 +48,13 @@ const statechart = {
 };
 
 type Props = {
-  children: ({ response?: any, error?: any, load?: () => ?Promise<void> }) => any,
+  children: ({
+    response?: any,
+    error?: any,
+    load?: (...args: any) => ?Promise<any>,
+    resetState: () => void,
+    state: string
+  }) => any,
   delay?: number,
   isErrorSilent?: boolean,
   loadOnMount?: boolean,
@@ -149,9 +157,10 @@ class Loads extends Component<Props, State> {
     const state = machineState.value;
     return children({
       error,
+      load: this.handleLoad,
+      resetState: () => this.transition('RESET'),
       response,
-      state,
-      load: this.handleLoad
+      state
     });
   };
 }