feat(useLocationHashQueryState): provide new exports useLocationHashQueryState and useLocationHashQu

BREAKING CHANGE: renamed exports, queryState and setQueryState are now all returned as array tuples

fix #20

Author: xiel

src/examples/use-location-state/01-simple/src/QueryStateTest.tsx

@@ -1,15 +1,10 @@
 import React from 'react'
-import { useLocationQueryState, useLocationHashQueryStringInterface } from 'use-location-state'
+import { useLocationHashQueryState } from 'use-location-state'
 
 interface Props {}
 
-const queryStateDefault = { name: 'Sarah', age: 25 }
-
 export default function QueryStateTest(props: Props) {
-  const locationHashQueryStringInterface = useLocationHashQueryStringInterface()
-  const [queryState, setQueryState] = useLocationQueryState(queryStateDefault, {
-    queryStringInterface: locationHashQueryStringInterface,
-  })
+  const [queryState, setQueryState] = useLocationHashQueryState({ name: 'Sarah', age: 25 })
 
   return (
     <div>

src/packages/use-location-state/src/use-location-state.test.ts

@@ -1,5 +1,11 @@
 import { act, renderHook } from 'react-hooks-testing-library'
-import { useLocationQueryState, useLocationHashQueryStringInterface } from './use-location-state'
+import {
+  useLocationQueryState,
+  useLocationHashQueryState,
+  useLocationHashQueryStringInterface,
+  useLocationHashQueryStateItem,
+} from './use-location-state'
+import { cleanup } from 'react-testing-library'
 
 // reset jest mocked hash
 beforeAll(() => {
@@ -8,10 +14,11 @@ beforeAll(() => {
 
 afterEach(() => {
   location.hash = ''
+  cleanup()
 })
 
-describe('useLocationQueryState hook with hash GetSetQueryStringInterface', () => {
-  it('TODO: ...', () => {
+describe('useLocationQueryState hook', () => {
+  it('should work with passed HashQueryStringInterface', () => {
     const hashQSI = renderHook(() => useLocationHashQueryStringInterface())
     const { result } = renderHook(
       props => useLocationQueryState(props, { queryStringInterface: hashQSI.result.current }),
@@ -21,10 +28,56 @@ describe('useLocationQueryState hook with hash GetSetQueryStringInterface', () =
     )
 
     expect(result.current[0]).toEqual({ name: 'Sarah' })
-
     act(() => result.current[1]({ name: 'Kim' }))
+    expect(location.hash).toEqual('#name=Kim')
+    expect(result.current[0]).toEqual({ name: 'Kim' })
+  })
+})
+
+describe('useLocationHashQueryState hook', () => {
+  it('should work with internal HashQueryStringInterface', () => {
+    const { result } = renderHook(props => useLocationHashQueryState(props), {
+      initialProps: { name: 'Sarah' },
+    })
 
+    expect(result.current[0]).toEqual({ name: 'Sarah' })
+    act(() => result.current[1]({ name: 'Kim' }))
     expect(location.hash).toEqual('#name=Kim')
     expect(result.current[0]).toEqual({ name: 'Kim' })
   })
 })
+
+describe('useLocationHashQueryStateItem hook', () => {
+  it('should work with internal HashQueryStringInterface', () => {
+    const { result } = renderHook(
+      ({ itemName, defaultValue }) => useLocationHashQueryStateItem(itemName, defaultValue),
+      {
+        initialProps: { itemName: 'name', defaultValue: 'Sarah' },
+      }
+    )
+
+    expect(result.current[0]).toEqual('Sarah')
+    act(() => result.current[1]('Kim'))
+    expect(location.hash).toEqual('#name=Kim')
+    expect(result.current[0]).toEqual('Kim')
+  })
+
+  it('should reset hash when default', () => {
+    const { result } = renderHook(
+      ({ itemName, defaultValue }) => useLocationHashQueryStateItem(itemName, defaultValue),
+      {
+        initialProps: { itemName: 'name', defaultValue: 'Sarah' },
+      }
+    )
+
+    expect(result.current[0]).toEqual('Sarah')
+
+    act(() => result.current[1]('Kim'))
+    expect(location.hash).toEqual('#name=Kim')
+    expect(result.current[0]).toEqual('Kim')
+
+    act(() => result.current[1]('Sarah'))
+    expect(location.hash).toEqual('')
+    expect(result.current[0]).toEqual('Sarah')
+  })
+})

src/packages/use-location-state/src/use-location-state.ts

@@ -5,7 +5,8 @@ export { useLocationHashQueryStringInterface } from './hooks/useLocationHashQuer
 
 type QueryString = string
 type ExtendedQueryState<T> = Partial<T> & QueryState
-type SetQueryStateFn<T> = (newState: Partial<T> & QueryState, opts?: SetQueryStringOptions) => void
+type SetQueryStateFn<T> = (newState: ExtendedQueryState<T>, opts?: SetQueryStringOptions) => void
+type SetQueryStateItemFn<T> = (newValue: T, opts?: SetQueryStringOptions) => void
 
 export interface QueryStringInterface {
   getQueryString: () => QueryString
@@ -102,12 +103,11 @@ export function useLocationQueryStateItem<T>(
   itemName: string,
   defaultValue: T,
   queryStateOpts: QueryStateOpts
-): [T, (newValue: T, opts?: SetQueryStringOptions) => void] {
+): [T, SetQueryStateItemFn<T>] {
   const defaultQueryState = useMemo(() => ({ [itemName]: defaultValue }), [
     itemName,
     defaultValue,
   ])
-  // const { queryState, setQueryState } = useLocationQueryState(defaultQueryState, queryStateOpts)
   const [queryState, setQueryState] = useLocationQueryState(defaultQueryState, queryStateOpts)
   const setQueryStateItem = useCallback(
     (newValue: T, opts?: SetQueryStringOptions) => setQueryState({ [itemName]: newValue }, opts),
@@ -125,9 +125,8 @@ export function useLocationHashQueryStateItem<T>(
   itemName: string,
   defaultValue: T,
   queryStateOpts: QueryStateOptsSetInterface = {}
-): [T, SetQueryStateFn<T>] {
+): [T, SetQueryStateItemFn<T>] {
   const hashGSI = useLocationHashQueryStringInterface()
-
   return useLocationQueryStateItem(itemName, defaultValue, {
     ...queryStateOpts,
     queryStringInterface: hashGSI