userSearch.tsx

import * as React from "react";
import { useDebounce } from "react-use";
import { useActions, useStoreState } from "app/store";
import { searchedUsersSelector, searchedUsersWithoutCurrentUserSelector } from "app/selectors/search";
import useCancelToken from "common/hooks/useCancelToken";
import {
  ActionCreators,
  getSearchUsers as getSearchUsersAction,
} from "app/actions/user";

const useUserSearch = ({limitResult, withoutCurrentUser}:{limitResult?: number; withoutCurrentUser?: boolean}) => {
  const cancelToken = useCancelToken();
  const { searchedUsers, isLoading } = useStoreState(storeState => ({
    searchedUsers: withoutCurrentUser ? searchedUsersWithoutCurrentUserSelector(storeState) : searchedUsersSelector(storeState),
    isLoading: storeState.search.searchUsersLoading,
  }));
  const { getSearchUsers, clearSearchedUsers } = useActions({
    getSearchUsers: getSearchUsersAction,
    clearSearchedUsers: ActionCreators.clearSearchedUsers,
  });

  const debouncedGetUser = React.useCallback(
    (query: string) => {
      cancelToken.cancelAndRenewal();

      clearSearchedUsers();
      getSearchUsers(
        { query: query.trim(), limit: limitResult },
        cancelToken.current.token,
      );
    },
    [cancelToken, clearSearchedUsers, getSearchUsers, limitResult],
  );
  useDebounce(debouncedGetUser, 500);

  return [debouncedGetUser, searchedUsers, isLoading];
};

export default useUserSearch;