docs: async hooks docs and stories update

cuongdtt · Jul 16, 2019 · 9ea0275 · 9ea0275
1 parent 1c28c70
commit 9ea0275
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 69 deletions.
diff --git a/docs/useAsync.md b/docs/useAsync.md
@@ -8,19 +8,20 @@ a promise;
 ```jsx
 import {useAsync} from 'react-use';
 
-const Demo = ({delay = 1000}) => {
-  const state = useAsync(() => {
-    // Returns a Promise that resolves after x milliseconds
-    return new Promise((resolve) => setTimeout(() => resolve('RESOLVED'), delay);
-  }, [delay]);
+const Demo = ({url}) => {
+  const state = useAsync(async () => {
+    const response = await fetch(url);
+    const result = await response.text();
+    return result
+  }, [url]);
 
   return (
     <div>
-      {state.loading?
-        <div>Loading...</div>
-        : state.error?
-        <div>Error...</div>
-        : <div>Value: {state.value}</div>
+      {state.loading
+        ? <div>Loading...</div>
+        : state.error
+          ? <div>Error: {state.error.message}</div>
+          : <div>Value: {state.value}</div>
       }
     </div>
   );

diff --git a/docs/useAsyncFn.md b/docs/useAsyncFn.md
@@ -8,7 +8,7 @@ function that returns a promise. The state is of the same shape as `useAsync`.
 ```jsx
 import {useAsyncFn} from 'react-use';
 
-const Demo = (url) => {
+const Demo = ({url}) => {
   const [state, fetch] = useAsyncFn(async () => {
     const response = await fetch(url);
     const result = await response.text();
@@ -21,7 +21,7 @@ const Demo = (url) => {
         ? <div>Loading...</div>
         : state.error
           ? <div>Error: {state.error.message}</div>
-          : state.value && <div>Value: {state.value}</div>
+          : <div>Value: {state.value}</div>
       }
       <button onClick={() => fetch()}>Start loading</button>
     </div>

diff --git a/docs/useAsyncRetry.md b/docs/useAsyncRetry.md
@@ -2,44 +2,32 @@
 
 Uses `useAsync` with an additional `retry` method to easily retry/refresh the async function;
 
-
 ## Usage
 
 ```jsx
 import {useAsyncRetry} from 'react-use';
 
-// Returns a Promise that resolves after one second.
-const fn = () => new Promise((resolve, reject) => {
-  setTimeout(() => {
-    if (Math.random() > 0.5) {
-      reject(new Error('Random error!'));
-    } else {
-      resolve('RESOLVED');
-    }
-  }, 1000);
-});
-
-const Demo = () => {
-  const state = useAsyncRetry(fn);
+const Demo = ({url}) => {
+  const state = useAsyncRetry(async () => {
+    const response = await fetch(url);
+    const result = await response.text();
+    return result;
+  }, [url]);
 
   return (
     <div>
-      {state.loading?
-        <div>Loading...</div>
-        : state.error?
-        <div>Error...</div>
-        : <div>Value: {state.value}</div>
-      }
-      {!state.loading?
-        <a href='javascript:void 0' onClick={() => state.retry()}>Retry</a>
-        : null
+      {state.loading
+        ? <div>Loading...</div>
+        : state.error
+          ? <div>Error: {state.error.message}</div>
+          : <div>Value: {state.value}</div>
       }
+      {!loading && <button onClick={() => state.retry()}>Start loading</button>}
     </div>
   );
 };
 ```
 
-
 ## Reference
 
 ```ts

diff --git a/src/__stories__/useAsync.story.tsx b/src/__stories__/useAsync.story.tsx
@@ -5,16 +5,31 @@ import { useAsync } from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = ({ delay }) => {
-  const { loading, error, value } = useAsync<string>(
+  const state = useAsync<string>(
     () =>
-      new Promise<string>(resolve => {
-        setTimeout(() => resolve('RESOLVED'), delay);
+      new Promise<string>((resolve, reject) => {
+        setTimeout(() => {
+          if (Math.random() > 0.5) {
+            resolve('✌️');
+          } else {
+            reject(new Error('A pseudo random error occurred'));
+          }
+        }, delay);
       }),
     [delay]
   );
 
   return (
-    <div>{loading ? <div>Loading...</div> : error ? <div>Error: {error.message}</div> : <div>Value: {value}</div>}</div>
+    <div>
+      {state.loading ? (
+        <p>Loading...</p>
+      ) : state.error ? (
+        <p>Error: {state.error.message}</p>
+      ) : (
+        <p>Value: {state.value}</p>
+      )}
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+    </div>
   );
 };
 

diff --git a/src/__stories__/useAsyncFn.story.tsx b/src/__stories__/useAsyncFn.story.tsx
@@ -3,24 +3,31 @@ import * as React from 'react';
 import { useAsyncFn } from '..';
 import ShowDocs from './util/ShowDocs';
 
-const fn = () =>
-  new Promise<string>((resolve, reject) => {
-    setTimeout(() => {
-      if (Math.random() > 0.5) {
-        reject(new Error('Random error!'));
-      } else {
-        resolve('RESOLVED');
-      }
-    }, 1000);
-  });
-
 const Demo = () => {
-  const [{ loading, error, value }, callback] = useAsyncFn<string>(fn);
+  const [state, callback] = useAsyncFn<string>(
+    () =>
+      new Promise<string>((resolve, reject) => {
+        setTimeout(() => {
+          if (Math.random() > 0.5) {
+            resolve('✌️');
+          } else {
+            reject(new Error('A pseudo random error occurred'));
+          }
+        }, 1000);
+      })
+  );
 
   return (
     <div>
-      {loading ? <div>Loading...</div> : error ? <div>Error: {error.message}</div> : value && <div>Value: {value}</div>}
+      {state.loading ? (
+        <p>Loading...</p>
+      ) : state.error ? (
+        <p>Error: {state.error.message}</p>
+      ) : (
+        <p>Value: {state.value}</p>
+      )}
       <button onClick={() => callback()}>Start</button>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
     </div>
   );
 };

diff --git a/src/__stories__/useAsyncRetry.story.tsx b/src/__stories__/useAsyncRetry.story.tsx
@@ -1,30 +1,43 @@
+import { number, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import { useAsyncRetry } from '..';
 import ShowDocs from './util/ShowDocs';
 
-const fnRetry = () =>
-  new Promise<string>((resolve, reject) => {
-    setTimeout(() => {
-      if (Math.random() > 0.5) {
-        reject(new Error('Random error!'));
-      } else {
-        resolve('RESOLVED');
-      }
-    }, 1000);
-  });
-
-const DemoRetry = () => {
-  const { loading, value, error, retry } = useAsyncRetry<string>(fnRetry);
+const Demo = ({ delay }) => {
+  const state = useAsyncRetry<string>(
+    () =>
+      new Promise<string>((resolve, reject) => {
+        setTimeout(() => {
+          if (Math.random() > 0.5) {
+            resolve('✌️');
+          } else {
+            reject(new Error('A pseudo random error occurred'));
+          }
+        }, delay);
+      }),
+    [delay]
+  );
 
   return (
     <div>
-      {loading ? <div>Loading...</div> : error ? <div>Error: {error.message}</div> : <div>Value: {value}</div>}
-      <button onClick={() => retry()}>Retry</button>
+      {state.loading ? (
+        <p>Loading...</p>
+      ) : state.error ? (
+        <p>Error: {state.error.message}</p>
+      ) : (
+        <p>Value: {state.value}</p>
+      )}
+      <button onClick={() => state.retry()}>Retry</button>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
     </div>
   );
 };
 
 storiesOf('Side effects|useAsyncRetry', module)
+  .addDecorator(withKnobs)
   .add('Docs', () => <ShowDocs md={require('../../docs/useAsyncRetry.md')} />)
-  .add('Demo', () => <DemoRetry />);
+  .add('Demo', () => {
+    const delay = number('delay', 1000, { range: true, min: 100, max: 5000, step: 100 });
+    return <Demo delay={delay} />;
+  });