import { useCallback, useMemo, useRef } from 'preact/hooks' import { useHashLocation } from './useHashLocation' export const useQueryString = () => { const [location, setLocation] = useHashLocation() const values = useMemo(() => { const queryIndex = location.indexOf('?') if (queryIndex === -1) { return [location, new URLSearchParams()] as const } const search = location.slice(queryIndex + 1) return [location.slice(0, queryIndex), new URLSearchParams(search)] as const }, [location]) const valuesRef = useRef(values) valuesRef.current = values const getValues = useCallback(() => { const [, searchParams] = valuesRef.current const result = {} as Record searchParams.forEach((value, key) => { result[key] = value }) return result }, []) const setValues = useCallback((values: Record) => { const [baseLocation] = valuesRef.current const newParams = new URLSearchParams(values) setLocation(`${baseLocation}?${newParams}`) }, []) const hookData = useMemo( () => ({ getValues, setValues }), [getValues, setValues] ) return hookData }