usePoolingCallback.ts

import { CancelTokenSource } from 'axios';
import { useCallback, useRef } from 'react';
import { newCancelTokenSource } from '../network/api/Network';
import { delay } from '../utils/FlowUtils';
import { useOnComponentUnmount } from './useOnComponentUnmount';
import { useScope } from './useScope';

// when your callback returns usePoolingCallback.RETRY, it retries after delay
export const usePoolingCallback = <R, D>(
  callback: (cancelTokenSource: CancelTokenSource, data: D) => Promise<R | typeof usePoolingCallback.RETRY>,
  poolingDelay = 250
) => {
  const cancelTokenSource = useRef<CancelTokenSource>();
  const scope = useScope({ callback, poolingDelay });

  useOnComponentUnmount(() => cancelTokenSource.current?.cancel());

  return useCallback(
    async (data?: D) => {
      cancelTokenSource.current?.cancel();
      cancelTokenSource.current = newCancelTokenSource();
      const currentCancelTokenSource = cancelTokenSource.current;

      let result = await scope.callback(currentCancelTokenSource, data as unknown as D);
      while (result === usePoolingCallback.RETRY) {
        await delay(scope.poolingDelay, currentCancelTokenSource.token);
        result = await scope.callback(currentCancelTokenSource, data as unknown as D);
      }

      return result;
    },
    [scope]
  );
};
usePoolingCallback.RETRY = Symbol('RETRY');