From dcd10137360b4b39764be40947cdf0f5c3890d41 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Mon, 29 Oct 2018 17:41:34 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useGetSetState?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                |  1 +
 docs/useGetSetState.md                   | 23 +++++++++++++++++++
 src/__stories__/useGetSetState.story.tsx | 23 +++++++++++++++++++
 src/index.ts                             |  2 ++
 src/useAudio.ts                          | 12 +++++-----
 src/useGetSetState.ts                    | 28 ++++++++++++++++++++++++
 6 files changed, 83 insertions(+), 6 deletions(-)
 create mode 100644 docs/useGetSetState.md
 create mode 100644 src/__stories__/useGetSetState.story.tsx
 create mode 100644 src/useGetSetState.ts

diff --git a/README.md b/README.md
index 53b9fa461e..db9660053f 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,7 @@
     <br/>
 - [**State**](./docs/State.md)
   - [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
+  - [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
   - [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.
   - [`useSetState`](./docs/useSetState.md) &mdash; creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)
   - [`useToggle` and `useBoolean`](./docs/useToggle.md) &mdash; tracks state of a boolean.
diff --git a/docs/useGetSetState.md b/docs/useGetSetState.md
new file mode 100644
index 0000000000..059e00be0a
--- /dev/null
+++ b/docs/useGetSetState.md
@@ -0,0 +1,23 @@
+# `useGetSetState`
+
+A mix of `useGetSet` and `useGetSetState`.
+
+
+## Usage
+
+```jsx
+import {useGetSetState} from 'react-use';
+
+const Demo = () => {
+  const [get, setState] = useGetSetState({cnt: 0});
+  const onClick = () => {
+    setTimeout(() => {
+      setState({cnt: get().cnt + 1})
+    }, 1_000);
+  };
+
+  return (
+    <button onClick={onClick}>Clicked: {get().cnt}</button>
+  );
+};
+```
diff --git a/src/__stories__/useGetSetState.story.tsx b/src/__stories__/useGetSetState.story.tsx
new file mode 100644
index 0000000000..15971beaf1
--- /dev/null
+++ b/src/__stories__/useGetSetState.story.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useGetSetState, useSetState} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo = () => {
+  const [get, setState] = useGetSetState<{cnt: number}>({cnt: 0});
+  const onClick = () => {
+    setTimeout(() => {
+      setState({cnt: get().cnt + 1})
+    }, 1_000);
+  };
+
+  return (
+    <button onClick={onClick}>Clicked: {get().cnt}</button>
+  );
+};
+
+storiesOf('useGetSetState', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useGetSetState.md')} />)
+  .add('Demo', () =>
+    <Demo/>
+  )
diff --git a/src/index.ts b/src/index.ts
index 00a5e59738..b32ad71aea 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@ import useCss from './useCss';
 import useFavicon from './useFavicon';
 import useGeolocation from './useGeolocation';
 import useGetSet from './useGetSet';
+import useGetSetState from './useGetSetState';
 import useHover from './useHover';
 import useIdle from './useIdle';
 import useLifecycles from './useLifecycles';
@@ -45,6 +46,7 @@ export {
   useFavicon,
   useGeolocation,
   useGetSet,
+  useGetSetState,
   useHover,
   useIdle,
   useLifecycles,
diff --git a/src/useAudio.ts b/src/useAudio.ts
index 50a8e5da29..f0df39a3b5 100644
--- a/src/useAudio.ts
+++ b/src/useAudio.ts
@@ -48,7 +48,7 @@ const useAudio = (props: AudioProps): [React.ReactElement<AudioProps>, AudioStat
 
   const onPlay = () => setState({isPlaying: true});
   const onPause = () => setState({isPlaying: false});
-  const onVolumeChange = (event) => {
+  const onVolumeChange = () => {
     const el = ref.current;
     if (!el) return;
     setState({
@@ -56,7 +56,7 @@ const useAudio = (props: AudioProps): [React.ReactElement<AudioProps>, AudioStat
       volume: el.volume,
     });
   };
-  const onDurationChange = (event) => {
+  const onDurationChange = () => {
     const el = ref.current;
     if (!el) return;
     const {duration, buffered} = el;
@@ -70,7 +70,7 @@ const useAudio = (props: AudioProps): [React.ReactElement<AudioProps>, AudioStat
     if (!el) return;
     setState({time: el.currentTime});
   };
-  const onProgress = (event) => {
+  const onProgress = () => {
     const el = ref.current;
     if (!el) return;
     setState({buffered: parseTimeRanges(el.buffered)});
@@ -102,7 +102,7 @@ const useAudio = (props: AudioProps): [React.ReactElement<AudioProps>, AudioStat
       if (!lockPlay) {
         const promise = el.play();
         const isPromise = typeof promise === 'object';
-  
+
         if (isPromise) {
           lockPlay = true;
           const resetLock = () => {
@@ -152,14 +152,14 @@ const useAudio = (props: AudioProps): [React.ReactElement<AudioProps>, AudioStat
     if (!el) {
       if (process.env.NODE_ENV !== 'production') {
         console.error(
-          'useAudio() ref to <audio> element is empty at mount. ' + 
+          'useAudio() ref to <audio> element is empty at mount. ' +
           'It seem you have not rendered the audio element, which is ' +
           'returns as the first argument const [audio] = useAudio(...).'
         );
       }
       return;
     }
-    
+
     // Start media, if autoPlay requested.
     if (props.autoPlay && el.paused) {
       controls.play();
diff --git a/src/useGetSetState.ts b/src/useGetSetState.ts
new file mode 100644
index 0000000000..bc982c0f9b
--- /dev/null
+++ b/src/useGetSetState.ts
@@ -0,0 +1,28 @@
+import {useRef} from './react';
+import useUpdate from './useUpdate';
+
+const useGetSetState = <T extends object>(initialState: T = {} as T): [() => T, (patch: Partial<T>) => void]=> {
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof initialState !== 'object') {
+      throw new TypeError('useGetSetState initial state must be an object.');
+    }
+  }
+
+  const update = useUpdate();
+  const state = useRef<T>({...(initialState as object)} as T);
+  const get = () => state.current;
+  const set = (patch: Partial<T>) => {
+    if (!patch) return;
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof patch !== 'object') {
+        throw new TypeError('useGetSetState setter patch must be an object.');
+      }
+    }
+    Object.assign(state.current, patch);
+    update();
+  };
+
+  return [get, set];
+};
+
+export default useGetSetState;