react-training/hotel-management/src/hooks/useFetch.ts

import { useEffect, useState } from 'react';

// Constants
import { BASE_URL } from '../constants/path';
import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';

// Utils
import { searchQuery } from '../helpers/utils';

/**
 * The function use to fetch data on server API.
 * @param path The path of url
 * @param columnSearch Column need to search
 * @param keyWord The key word to search
 * @param tempSortBy Sort by
 * @param tempOrderBy Order by
 * @param reload Fetch again
 * @returns data: A data after fetch, isPending: A boolean indicating whether or not the progress of fetch data is done, errorMsg: A error message from the server.
 */
const useFetch = (
  path: string,
  columnSearch: string = '',
  keyWord: string = '',
  tempSortBy?: string,
  tempOrderBy?: string,
  reload?: boolean,
) => {
  const [data, setData] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const [errorFetchMsg, setErrorFetchMsg] = useState<string | null>(null);

  useEffect(() => {
    // Clear data
    setData(null);

    const fetchData = async () => {
      setIsPending(true);

      // Set default value
      // prettier-ignore
      const sortBy = tempSortBy
        ? tempSortBy
        : DEFAULT_SORT_BY;

      // prettier-ignore
      const orderBy = tempOrderBy
        ? tempOrderBy
        : DEFAULT_ORDER_BY;

      // Query search
      const query = searchQuery(columnSearch, keyWord, sortBy, orderBy);

      try {
        const response = await fetch(BASE_URL + path + '?' + query);
        const json = await response.json();

        if (!response.ok)
          throw new Error(
            `Error code: ${response.status} \n Messages: ${response.statusText}`,
          );

        setIsPending(false);
        setData(json);
        setErrorFetchMsg(null);
      } catch (error) {
        setErrorFetchMsg(`Could not fetch data.\n ${error}`);
        setIsPending(false);
      }
    };

    fetchData();
  }, [path, reload, columnSearch, keyWord, tempOrderBy, tempSortBy]);
  return { data, isPending, errorFetchMsg };
};

export { useFetch };