useApi hook

useApi.tsx

import { ErrorType } from '~/core/api';

type ReturnType<DataType> = [
  {
    data: DataType;
    loading: boolean;
    isSuccess: boolean;
    errorMessage: ErrorType['message'];
    errorData: ErrorType['data'];
  },
  () => {} // <-- wip
];

export function useApi<T>(apiFunction, initialDataValue): ReturnType<T> {
  const [response, setResponse] = React.useState({
    data: initialDataValue,
    errorMessage: null,
    errorData: null,
    isFetching: false,
    isSuccess: false,
  });

  const fetchData = React.useCallback(async () => {
    setResponse(prevState => ({
      ...prevState,
      loading: true,
    }));
    try {
      const apiData = await apiFunction();
      setResponse({
        data: apiData,
        isFetching: false,
        errorMessage: null,
        errorData: null,
        isSuccess: true,
      });
    } catch (error) {
      setResponse({
        data: null,
        isFetching: false,
        errorMessage: error.message,
        errorData: error.data,
        isSuccess: false,
      });
    }
  }, [apiFunction]);

  return [response, fetchData];
}

Users.tsx

import { useApi} from "~/hooks/useApi"

const UsersPage = () => {
  type UsersType = {
    firstName: string;
    lastName: string;
  }
  const [usersResponse, getUsers] = useApi<UsersType[]>(fetchUsers, []);
}