feat: add useNestedState hook

Author: beizhedenglong

README.md

@@ -22,6 +22,7 @@ Visit [storybook](https://beizhedenglong.github.io/react-hooks-lib)
 | [`createContextState`](#createContextStateInitial)       | initial                            | { ContextProvider, ContextConsumer,  set, useSelector, useSet }  |
 | [`createGlobalState`](#createGlobalStateInitial)         | initial                            | { GlobalProvider, GlobalConsumer, set, useSelector, useSet }      |
 | [`useMergeState`](#usemergestateinitial)                 | initial                            | { state, set }                                               |
+| [`useNestedState`](#usenestedstateinitial)                 | initial                            | { state, get, set }                                               |
 | [`useStateCallback`](#useStateCallbackInitial-f)         | initial, f                         | { state, set }                                               |
 | [`useUndo`](#useUndoInitial)                             | initial                            | { past, present, future, set, undo, redo }                   |
 | [`useCounter`](#useCounterInitial)                       | initial                            | { count, set, reset, inc, dec }                              |
@@ -122,6 +123,13 @@ const MergeState = () => {
   )
 }
 ```
+### `useNestedState`
+#### Arguments
+- `initial?`: Initial state, default is `undefined`.
+#### Returns
+- `state`: Current state.
+- `get(pathString, defaultValue)`: Get value form state at a specific `pathString`. eg: `get("a.b.c")`/`get("" | undefined)`, if `pathString` is empty,it will return the state object.
+- `set: (pathString, newValue | prevValue => newValue)`: Set value at a specific `pathString`. eg: `set("a.b.c", prev => prev + 1)`/`set("" | undefined, {})`. if `pathString` is empty,it will set the entire state object.
 
 ### `useStateCallback(initial, f?)`
 

__tests__/useNestedState.test.js

@@ -0,0 +1,20 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useNestedState } from '../src'
+
+test('useNestedState', () => {
+  const { result } = renderHook(() => useNestedState())
+  expect(result.current.state).toEqual(undefined)
+  expect(result.current.get('a.b.c')).toEqual(undefined)
+  expect(result.current.get('a.b.c', 'default')).toEqual('default')
+  act(() => {
+    result.current.set('a.b.c', 1)
+  })
+  expect(result.current.state).toEqual({ a: { b: { c: 1 } } })
+  expect(result.current.get('')).toEqual({ a: { b: { c: 1 } } })
+  expect(result.current.get('a.b.c')).toEqual(1)
+  act(() => {
+    result.current.set('b[0].c', 1)
+    result.current.set('b[0].c', prev => prev + 1)
+  })
+  expect(result.current.state).toEqual({ a: { b: { c: 1 } }, b: [{ c: 2 }] })
+})

__tests__/util.test.js

@@ -1,6 +1,43 @@
 
-import { isNil } from '../src/utils'
+import {
+  isNil, toPath, get, set,
+} from '../src/utils'
 
-test('1+1 = 2', () => {
+test('isNil', () => {
   expect(isNil(2)).toBe(false)
 })
+
+
+test('toPath', () => {
+  expect(toPath('a.b.c')).toEqual(['a', 'b', 'c'])
+  expect(toPath('a[0].b.c')).toEqual(['a', '0', 'b', 'c'])
+  expect(toPath('')).toEqual([])
+  expect(toPath([])).toEqual([])
+  expect(toPath(123)).toEqual(['123'])
+})
+
+
+test('get', () => {
+  const obj = { a: [{ b: { c: 3 } }] }
+
+  expect(get(obj, 'a[0].b.c')).toEqual(3)
+  expect(get(obj, ['a', '0', 'b', 'c'])).toEqual(3)
+  expect(get(obj, 'a.b.c', 'default')).toEqual('default')
+  expect(get(obj)).toEqual(obj)
+  expect(get(obj, '')).toEqual(obj)
+  expect(get(obj, [])).toEqual(obj)
+})
+
+test('set', () => {
+  const obj = { a: [{ b: { c: 3 } }] }
+
+  expect(set(obj, 'a[0].b.c', 4)).toEqual({ a: [{ b: { c: 4 } }] })
+  expect(set(obj, ['a', '0', 'b', 'c'], 4)).toEqual({ a: [{ b: { c: 4 } }] })
+  // TODO
+  expect(set(obj, 'a.b.c', 'default').a.b.c).toEqual('default')
+  expect(set(obj, [], 3)).toEqual(3)
+  expect(set(obj, [], 3)).toEqual(3)
+  expect(set(obj, [])).toEqual(undefined)
+  expect(obj).toEqual({ a: [{ b: { c: 3 } }] })
+  expect(set(2, 'a.b.c', 3)).toEqual({ a: { b: { c: 3 } } })
+})

package.json

@@ -37,7 +37,8 @@
     "@babel/core": "^7.5.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
+    "@babel/core": "^7.12.10",
+    "@babel/node": "^7.12.10",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.2.3",

src/hooks/useNestedState.js

@@ -0,0 +1,16 @@
+import { useState } from 'react'
+import { get, set } from '../utils'
+
+
+const useNestedState = (initial) => {
+  const [state, setState] = useState(initial)
+  return {
+    state,
+    get: (pathString, defaultValue) => get(state, pathString, defaultValue),
+    set: (pathString, updater) => setState(prev => (typeof updater === 'function'
+      ? set(prev, pathString, updater(get(prev, pathString)))
+      : set(prev, pathString, updater))),
+  }
+}
+
+export default useNestedState

src/index.js

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

src/utils.js

@@ -53,3 +53,63 @@ export const shallowEqual = /* istanbul ignore next */ (objA, objB) => {
 
 
 export const identity = x => x
+
+export const toPath = (x = '') => {
+  if (Array.isArray(x)) {
+    return x
+  }
+  return x.toString().replace(/[[\]]/g, '.').split('.').reduce((acc, item) => {
+    if (item.trim() !== '') {
+      acc.push(item)
+    }
+    return acc
+  }, [])
+}
+
+export const get = (obj, pathString, defaultValue) => {
+  const path = toPath(pathString)
+  const res = path.reduce((acc, key) => {
+    if (isNil(acc)) {
+      return undefined
+    }
+    return acc[key]
+  }, obj)
+  return isNil(res) ? defaultValue : res
+}
+
+export const isPlainObject = value => Object.prototype.toString.call(value) === '[object Object]'
+
+
+const copyCurrentValue = (obj, nextKey) => {
+  if (Array.isArray(obj)) {
+    return [
+      ...obj,
+    ]
+  } if (isPlainObject(obj)) {
+    return { ...obj }
+  }
+  if (/[0-9]+/.test(nextKey) && parseInt(nextKey, 10).toString() === nextKey.toString()) {
+    return []
+  }
+  return {}
+}
+export const set = (obj, pathString, value) => {
+  const path = toPath(pathString)
+  if (path.length === 0) {
+    return value
+  }
+
+  const result = copyCurrentValue(obj, path[0])
+
+  path.reduce((acc, currentKey, index) => {
+    const hasNext = index !== path.length - 1
+    const nextKey = path[index + 1]
+    if (hasNext) {
+      acc[currentKey] = copyCurrentValue(acc[currentKey], nextKey)
+    } else {
+      acc[currentKey] = value
+    }
+    return acc[currentKey]
+  }, result)
+  return result
+}

stories/state.stories.js

@@ -46,6 +46,49 @@ storiesOf(section('useMergeState'), module)
   return <MergeState />
 `)
 
+storiesOf(section('useNestedState'), module)
+  .addLiveSource('demo', `
+  const Contacts = () => {
+    const { state, get, set } = useNestedState([])
+    return (
+      <div>
+        <div>
+          <ol>
+            {state.map((_, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+              <li key={index} style={{ margin: 10, padding: 10, border: '1px solid black' }}>
+                <label>
+                  Name:
+                  <input type="text" value={get(\`$\{index}.name\`, '')} onChange={e => set(\`$\{index}.name\`, e.target.value)} />
+                </label>
+                <label>
+                  Age:
+                  <input type="number" value={get(\`$\{index}.age\`, 0)} onChange={e => set(\`$\{index}.age\`, e.target.value)} />
+                </label>
+                <div>
+                  <h4>Extra Info:</h4>
+                  <label>
+                    Email:
+                    <input type="email" value={get(\`$\{index}.extraInfo.email\`, '')} onChange={e => set(\`$\{index}.extraInfo.email\`, e.target.value)} />
+                  </label>
+                </div>
+              </li>
+            ))}
+          </ol>
+          <button onClick={() => set('', prev => ([...prev, {}]))}>Add Contact</button>
+        </div>
+        <div>
+          <h3>
+            State:
+          </h3>
+          <pre>{JSON.stringify(state, null, 2)}</pre>
+        </div>
+      </div>
+    )
+  }
+  return <Contacts />
+`)
+
 storiesOf(section('useStateCallback'), module)
   .addLiveSource('demo', `
  const StateCallback = () => {
@@ -65,26 +108,6 @@ storiesOf(section('useStateCallback'), module)
   return <StateCallback />
 `)
 
-// storiesOf(section('createContextState'), module)
-//   .addLiveSource('demo', `
-//   const { ContextProvider, useContextState } = createContextState({ counter: 1 })
-
-//   const ContextState = () => {
-//     const { state, set } = useContextState()
-//     return (
-//       <div>
-//         counter:
-//         {state.counter}
-//         <button onClick={() => set(
-//           prev => ({ counter: prev.counter + 1 })
-//         )}>+1</button>
-//       </div>
-//     )
-//   }
-
-//   return <ContextState />
-// `)
-
 storiesOf(section('useCounter'), module)
   .addLiveSource('demo', `
   const Counter = () => {