Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 4x 4x 4x 4x 44x 44x 44x 44x 44x 2x 44x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import { isEqual } from 'lodash-es'
import { useQueryParams } from './useQueryParams'
import { useUpdateQueryParams } from './useUpdateQueryParams'
/**
* Works like useState except it reads and sets state in query params
*/
interface UseQueryParamsStateOptions<T> {
serializer: (data: T) => string
deserializer: (data: string) => T
}
export function useQueryParamsState<T = unknown>(
name: string,
defaultValue: T,
options: UseQueryParamsStateOptions<T> = {
serializer: JSON.stringify,
deserializer: JSON.parse
}
): [T, (newState: T) => void] {
const { updateQueryParams } = useUpdateQueryParams()
const { state } = useQueryParams<{ state: T }>({
processQueryParams(params) {
const stateFromQuery = params[name]
return {
state: stateFromQuery ? options.deserializer(stateFromQuery) : defaultValue
}
}
})
const setState: (newState: T) => void = newState => {
!isEqual(state, newState) && updateQueryParams({ [name]: options.serializer(newState) })
}
return [state, setState]
}
|