Feat/use async

README.md

@@ -41,6 +41,8 @@ Visit [storybook](https://beizhedenglong.github.io/react-hooks-lib)
 | [`useTouch`](#useTouch)                                  | -                                  | { touched, bind }                                            |
 | <h6>Data Entry</h6>                                      |                                    |                                                              |
 | [`useField`](#useFieldInitial)                           | initial                            | { value, set, reset, bind }                                  |
+| <h6>Async</h6>                                         |                                    |                                                              |
+| `useAsync`                                  | f                                 | { f, loading }                                            |
 
 
 ## API

__tests__/async.test.js

@@ -0,0 +1,21 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useAsync } from '../src'
+
+test('useAsync: resolve', async () => {
+  const delay = time => new Promise(res => setTimeout(() => res(), time))
+  const { result } = renderHook(() => useAsync(() => delay(100)))
+  expect(result.current.loading).toBe(false)
+  await act(() => result.current.f())
+  expect(result.current.loading).toBe(false)
+})
+
+test('useAsync: reject', async () => {
+  const delay = time => new Promise((res, rej) => setTimeout(() => rej('error'), time))
+  const { result } = renderHook(() => useAsync(() => delay(100)))
+  expect(result.current.loading).toBe(false)
+  try {
+    await act(() => result.current.f())
+  } catch (error) {
+    expect(result.current.loading).toBe(false)
+  }
+})

package.json

@@ -49,7 +49,7 @@
     "@storybook/addons": "^5.1.9",
     "@storybook/react": "^5.1.9",
     "@storybook/storybook-deployer": "^2.8.1",
-    "@testing-library/react-hooks": "^1.1.0",
+    "@testing-library/react-hooks": "^3.4.1",
     "@types/jest": "^23.3.10",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",

src/hooks/useAsync.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-underscore-dangle */
+import { useState } from 'react'
+
+const useAsync = (f = () => {}) => {
+  const [loading, setLoading] = useState(false)
+  const _f = async (...args) => {
+    setLoading(true)
+    try {
+      const res = await f(...args)
+      setLoading(false)
+      return res
+    } catch (e) {
+      setLoading(false)
+      throw e
+    }
+  }
+  return {
+    f: _f,
+    loading,
+  }
+}
+
+
+export default useAsync

src/index.js

@@ -35,3 +35,5 @@ export { default as useUndo } from './hooks/useUndo'
 export { default as useStateCallback } from './hooks/useStateCallback'
 
 export { useShallowEqualEffect, useDeepEqualEffect } from './hooks/useEqualEffect'
+
+export { default as useAsync } from './hooks/useAsync'

stories/async.stories.js

@@ -0,0 +1,19 @@
+import { storiesOf } from '@storybook/react'
+
+const section = name => `Async|${name}`
+
+
+storiesOf(section('useAsync'), module)
+  .addLiveSource('demo', `
+  const wait = time => new Promise(res => setTimeout(() => res(), time))
+
+  const AsyncButton = (props) => {
+    const { f, loading } = useAsync(props.onClick)
+    return (
+      <button onClick={f} disabled={loading}>
+        {loading ? 'Loading...' : props.children}
+      </button>
+    )
+  }
+  return <AsyncButton onClick={() => wait(1000)}>Async Click</AsyncButton>
+ `)