movie-web/src/hooks/useSearchQuery.ts

import { MWMediaType, MWQuery } from "providers";
import React, { useState } from "react";
import { generatePath, useHistory, useRouteMatch } from "react-router-dom";

export function useSearchQuery(): [MWQuery, (inp: Partial<MWQuery>) => void] {
  const history = useHistory();
  const { path, params } = useRouteMatch<{ type: string; query: string }>();
  const [search, setSearch] = useState<MWQuery>({
    searchQuery: "",
    type: MWMediaType.MOVIE,
  });

  const updateParams = (inp: Partial<MWQuery>) => {
    const copySearch: MWQuery = { ...search };
    Object.assign(copySearch, inp);
    history.replace(
      generatePath(path, {
        query:
          copySearch.searchQuery.length === 0 ? undefined : inp.searchQuery,
        type: copySearch.type,
      })
    );
  };

  React.useEffect(() => {
    const type =
      Object.values(MWMediaType).find((v) => params.type === v) ||
      MWMediaType.MOVIE;
    const searchQuery = params.query || "";
    setSearch({ type, searchQuery });
  }, [params, setSearch]);

  return [search, updateParams];
}