useAPI Hook

useApi.ts

interface CombinedStatus<T> {
  status: "IDLE" | "PENDING" | "SUCCESS" | "FAILURE";
  data: T | null;
}
function useApi<ApiResultType extends object, Payload>(
  repoFunc: (
    payload: Payload
  ) => Promise<ApiResultType>
) {
  const _repoFunc = useRef(repoFunc);
  const _payload = useRef<Payload>({});
  const [flag, setFlag] = useState(-1);
  const [statusData, setStatusData] = useState<CombinedStatus<ApiResultType>>({
    status: ApiStatus.IDLE,
    data: null,
  });

  useEffect(() => {
    let detached = false;
    if (flag === -1) {
      return;
    }

    setStatusData((statusData) => {
      return { status: "PENDING", data: statusData.data };
    });

    _repoFunc
      .current(_payload.current)
      .then((d) => {
        if (!detached) {
          setStatusData({
            status: "SUCCESS",
            data: d,
          });
        }
      })
      .catch((error) => {
        if (!detached) {
          setStatusData({
            status: "FAILURE",
            data: null,
          });
        }
      });

    return () => {
      detached = true;
    };
  }, [flag, _payload, _repoFunc]);

  const call = useCallback((newPayload: Payload) => {
    _payload.current = newPayload;
    setFlag((r) => (r + 1) % 2);
  }, []);

  const status = statusData.status;
  const data = statusData.data;
  return { call, status, data };
}

export { useApi };