Sync URL with state using react-router

useQuery.js

// Usage: const [filters, setFilters] = useQuery(useState({}));

import { useHistory, useLocation } from "react-router-dom";

export default function useQuery([defaultQuery, setValue], method = "push") {
  const history = useHistory();
  const { search, pathname, hash } = useLocation();
  const hasParams = search.indexOf("=") > -1;
  const setValueWithQuery = (newQuery) => {
    setValue((state) => {
      const fromUrl = Object.fromEntries(new URLSearchParams(search).entries());
      const updatedState = { ...state, ...fromUrl, ...newQuery };
      const searchFragment = new URLSearchParams(updatedState).toString();
      history[method](pathname + "?" + searchFragment + hash);
      return updatedState;
    });
  };

  return [
    hasParams
      ? {
          ...defaultQuery,
          ...Object.fromEntries(new URLSearchParams(search).entries()),
        }
      : {
          ...defaultQuery,
          area: null,
          supplier: null,
        },
    setValueWithQuery,
  ];
}