Merge pull request #15 from BetterTyped/feature/send-event-callbacks

Feature/send event callbacks

Author: prc5

packages/core/__tests__/features/command/command.sending.spec.ts

@@ -76,19 +76,49 @@ describe("Command [ Sending ]", () => {
     it("should return error once request got removed", async () => {
       createRequestInterceptor(command, { delay: 10, status: 400 });
       const request = command.send();
-      await sleep(5);
+      await sleep(2);
 
       const runningRequests = builder.fetchDispatcher.getAllRunningRequest();
       builder.fetchDispatcher.delete(command.queueKey, runningRequests[0].requestId, command.abortKey);
 
       const response = await request;
-      expect(response).toStrictEqual([null, getErrorMessage(), 0]);
+      expect(response).toStrictEqual([null, getErrorMessage("deleted"), 0]);
     });
-    it("should allow to settle the request", async () => {
+    it("should call remove error", async () => {
       const spy = jest.fn();
-      const response = await command.send({}, spy);
+      createRequestInterceptor(command, { delay: 10, status: 400 });
+      const request = command.send({ onRemove: spy });
+      await sleep(2);
 
-      expect(response).toStrictEqual([fixture, null, 200]);
+      const runningRequests = builder.fetchDispatcher.getAllRunningRequest();
+      builder.fetchDispatcher.delete(command.queueKey, runningRequests[0].requestId, command.abortKey);
+
+      await request;
+      expect(spy).toBeCalledTimes(1);
+    });
+    it("should allow to call the request callbacks", async () => {
+      const spy1 = jest.fn();
+      const spy2 = jest.fn();
+      const spy3 = jest.fn();
+      const spy4 = jest.fn();
+      const spy5 = jest.fn();
+      const spy6 = jest.fn();
+
+      await command.send({
+        onSettle: spy1,
+        onRequestStart: spy2,
+        onResponseStart: spy3,
+        onUploadProgress: spy4,
+        onDownloadProgress: spy5,
+        onResponse: spy6,
+      });
+
+      expect(spy1).toBeCalledTimes(1);
+      expect(spy2).toBeCalledTimes(1);
+      expect(spy3).toBeCalledTimes(1);
+      expect(spy4).toBeCalledTimes(2);
+      expect(spy5).toBeCalledTimes(3);
+      expect(spy6).toBeCalledTimes(1);
     });
   });
 });

packages/core/src/command/command.ts

@@ -10,7 +10,6 @@ import {
   ExtractRouteParams,
   commandSendRequest,
   CommandCurrentType,
-  CommandQueueOptions,
 } from "command";
 import { Builder } from "builder";
 import { getUniqueRequestId } from "utils";
@@ -433,8 +432,7 @@ export class Command<
       HasParams,
       HasQuery,
       MappedData
-    >,
-    CommandQueueOptions
+    >
   > = async (
     options?: FetchType<
       Command<
@@ -449,25 +447,8 @@ export class Command<
         HasParams,
         HasQuery,
         MappedData
-      >,
-      CommandQueueOptions
+      >
     >,
-    onInit?: (
-      requestId: string,
-      command: Command<
-        ResponseType,
-        RequestDataType,
-        QueryParamsType,
-        GlobalErrorType,
-        LocalErrorType,
-        EndpointType,
-        ClientOptions,
-        HasData,
-        HasParams,
-        HasQuery,
-        MappedData
-      >,
-    ) => void,
   ) => {
     const { dispatcherType, ...rest } = options || {};
 
@@ -486,7 +467,7 @@ export class Command<
         HasQuery,
         MappedData
       >
-    >(command, dispatcherType, onInit);
+    >(command, options);
   };
 }
 

packages/core/src/command/command.types.ts

@@ -14,7 +14,8 @@ import {
   ExtractResponse,
 } from "types";
 import { Command } from "command";
-import { ClientResponseType, ClientQueryParamsType } from "client";
+import { ClientResponseType, ClientQueryParamsType, FetchProgressType } from "client";
+import { CommandEventDetails, CommandResponseDetails } from "managers";
 
 // Progress
 export type ClientProgressEvent = { total: number; loaded: number };
@@ -233,36 +234,35 @@ export type CommandQueueOptions = {
   dispatcherType?: "auto" | "fetch" | "submit";
 };
 
-export type FetchType<Command extends CommandInstance, AdditionalOptions = unknown> = FetchQueryParamsType<
+export type FetchType<Command extends CommandInstance> = FetchQueryParamsType<
   ExtractQueryParams<Command>,
   ExtractHasQueryParams<Command>
 > &
   FetchParamsType<ExtractEndpoint<Command>, ExtractHasParams<Command>> &
   FetchRequestDataType<ExtractRequestData<Command>, ExtractHasData<Command>> &
-  FetchOptionsType<ExtractClientOptions<Command>> &
-  AdditionalOptions;
+  Omit<FetchOptionsType<ExtractClientOptions<Command>>, "params" | "data"> &
+  FetchSendActionsType<Command> &
+  CommandQueueOptions;
 
-export type FetchMethodType<Command extends CommandInstance, AdditionalOptions = unknown> = FetchType<
-  Command,
-  AdditionalOptions
->["data"] extends any
-  ? (
-      options?: FetchType<Command, AdditionalOptions>,
-      onInit?: (requestId: string, command: Command) => void,
-    ) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>
-  : FetchType<Command, AdditionalOptions>["data"] extends NegativeTypes
-  ? FetchType<Command, AdditionalOptions>["params"] extends NegativeTypes
-    ? (
-        options?: FetchType<Command, AdditionalOptions>,
-        onInit?: (requestId: string, command: Command) => void,
-      ) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>
-    : (
-        options: FetchType<Command, AdditionalOptions>,
-        onInit?: (requestId: string, command: Command) => void,
-      ) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>
-  : (
-      options: FetchType<Command, ExtractHasQueryParams<Command>>,
-      onInit?: (requestId: string, command: Command) => void,
-    ) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>;
+export type FetchSendActionsType<Command extends CommandInstance> = {
+  onSettle?: (requestId: string, command: Command) => void;
+  onRequestStart?: (details: CommandEventDetails<Command>) => void;
+  onResponseStart?: (details: CommandEventDetails<Command>) => void;
+  onUploadProgress?: (values: FetchProgressType, details: CommandEventDetails<Command>) => void;
+  onDownloadProgress?: (values: FetchProgressType, details: CommandEventDetails<Command>) => void;
+  onResponse?: (
+    response: ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>,
+    details: CommandResponseDetails,
+  ) => void;
+  onRemove?: (details: CommandEventDetails<Command>) => void;
+};
+
+export type FetchMethodType<Command extends CommandInstance> = FetchType<Command>["data"] extends any
+  ? (options?: FetchType<Command>) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>
+  : FetchType<Command>["data"] extends NegativeTypes
+  ? FetchType<Command>["params"] extends NegativeTypes
+    ? (options?: FetchType<Command>) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>
+    : (options: FetchType<Command>) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>
+  : (options: FetchType<Command>) => Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>;
 
 export type CommandInstance = Command<any, any, any, any, any, any, any, any, any, any, any>;

packages/core/src/command/command.utils.ts

@@ -1,5 +1,5 @@
 import { FetchProgressType, ClientResponseType, getErrorMessage } from "client";
-import { ClientProgressEvent, CommandInstance, CommandDump } from "command";
+import { ClientProgressEvent, CommandInstance, CommandDump, FetchType } from "command";
 import { HttpMethodsEnum } from "constants/http.constants";
 import { canRetryRequest, Dispatcher, isFailedRequest } from "dispatcher";
 import { ExtractError, ExtractResponse } from "types";
@@ -110,20 +110,32 @@ export const getCommandDispatcher = <Command extends CommandInstance>(
   return [dispatcher, isFetchDispatcher];
 };
 
-export const commandSendRequest = <T extends CommandInstance>(
-  command: T,
-  dispatcherType: "auto" | "fetch" | "submit" = "auto",
-  settleCallback?: (requestId: string, command: T) => void,
-) => {
+export const commandSendRequest = <Command extends CommandInstance>(command: Command, options?: FetchType<Command>) => {
   const { commandManager } = command.builder;
-  const [dispatcher] = getCommandDispatcher(command, dispatcherType);
+  const [dispatcher] = getCommandDispatcher(command, options?.dispatcherType);
 
-  return new Promise<ClientResponseType<ExtractResponse<T>, ExtractError<T>>>((resolve) => {
+  return new Promise<ClientResponseType<ExtractResponse<Command>, ExtractError<Command>>>((resolve) => {
     const requestId = dispatcher.add(command);
-    settleCallback?.(requestId, command);
+    options?.onSettle?.(requestId, command);
+
+    const unmountRequestStart = commandManager.events.onRequestStartById<Command>(requestId, (...props) =>
+      options?.onRequestStart?.(...props),
+    );
+
+    const unmountResponseStart = commandManager.events.onResponseStartById<Command>(requestId, (...props) =>
+      options?.onResponseStart?.(...props),
+    );
+
+    const unmountUpload = commandManager.events.onUploadProgressById<Command>(requestId, (...props) =>
+      options?.onUploadProgress?.(...props),
+    );
+
+    const unmountDownload = commandManager.events.onDownloadProgressById<Command>(requestId, (...props) =>
+      options?.onDownloadProgress?.(...props),
+    );
 
     // When resolved
-    const unmountResponse = commandManager.events.onResponseById<ExtractResponse<T>, ExtractError<T>>(
+    const unmountResponse = commandManager.events.onResponseById<ExtractResponse<Command>, ExtractError<Command>>(
       requestId,
       (response, details) => {
         const isFailed = isFailedRequest(response);
@@ -136,20 +148,32 @@ export const commandSendRequest = <T extends CommandInstance>(
         // When command is in retry mode we need to listen for retries end
         if (isFailed && willRetry) return;
 
+        options?.onResponse?.(response, details);
         resolve(response);
 
         // Unmount Listeners
-        unmountResponse();
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        umountAll();
       },
     );
 
     // When removed from queue storage we need to clean event listeners and return proper error
-    const unmountRemoveQueueElement = commandManager.events.onRemoveById(requestId, () => {
-      resolve([null, getErrorMessage("deleted") as unknown as ExtractError<T>, 0]);
+    const unmountRemoveQueueElement = commandManager.events.onRemoveById<Command>(requestId, (...props) => {
+      options?.onRemove?.(...props);
+      resolve([null, getErrorMessage("deleted") as unknown as ExtractError<Command>, 0]);
 
       // Unmount Listeners
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      umountAll();
+    });
+
+    function umountAll() {
+      unmountRequestStart();
+      unmountResponseStart();
+      unmountUpload();
+      unmountDownload();
       unmountResponse();
       unmountRemoveQueueElement();
-    });
+    }
   });
 };

packages/react/__tests__/features/use-fetch/use-fetch.utils.spec.ts

@@ -0,0 +1,26 @@
+import { getRefreshTime } from "use-fetch";
+
+describe("useFetch [ Utils ]", () => {
+  const refreshTime = 1000;
+  describe("given using getRefreshTime util", () => {
+    describe("when state is available", () => {
+      it("should give the reduced refresh time based on timestamp", async () => {
+        const timestamp = new Date(+new Date() - 500);
+        const time = getRefreshTime(refreshTime, timestamp);
+        expect(time).toBeLessThanOrEqual(500);
+        expect(time).toBeGreaterThanOrEqual(490);
+      });
+      it("should give refreshTime on old timestamp", async () => {
+        const timestamp = new Date(+new Date() - refreshTime);
+        const time = getRefreshTime(refreshTime, timestamp);
+        expect(time).toBe(refreshTime);
+      });
+    });
+    describe("when only refreshTime gets provided", () => {
+      it("should give refreshTime", async () => {
+        const time = getRefreshTime(refreshTime);
+        expect(time).toBe(refreshTime);
+      });
+    });
+  });
+});

packages/react/__tests__/features/use-submit/use-submit.submit.spec.ts

@@ -36,6 +36,17 @@ describe("useSubmit [ Base ]", () => {
 
       expect(data).toStrictEqual([mock, null, 200]);
     });
+    it("should call onSettle", async () => {
+      const spy = jest.fn();
+      createRequestInterceptor(command);
+      const response = renderUseSubmit(command);
+
+      await act(async () => {
+        await response.result.current.submit({ onSettle: spy });
+      });
+
+      expect(spy).toBeCalledTimes(1);
+    });
     it("should return data from submit method on retries", async () => {
       let data: unknown = null;
       let mock: unknown = {};

packages/react/src/helpers/use-command-events/use-command-events.hooks.ts

@@ -3,7 +3,6 @@ import {
   ExtractError,
   ExtractResponse,
   CommandInstance,
-  getErrorMessage,
   FetchProgressType,
   ClientResponseType,
   CommandEventDetails,
@@ -144,24 +143,6 @@ export const useCommandEvents = <T extends CommandInstance>({
     removeLifecycleListener(requestId);
   };
 
-  const handleAbort = (cmd: T) => {
-    return () => {
-      const data: ClientResponseType<ExtractResponse<T>, ExtractError<T>> = [
-        null,
-        getErrorMessage("abort") as ExtractError<T>,
-        0,
-      ];
-      const details: CommandResponseDetails = {
-        retries: 0,
-        timestamp: +new Date(),
-        isFailed: false,
-        isCanceled: true,
-        isOffline: false,
-      };
-      handleResponseCallbacks(cmd, data, details);
-    };
-  };
-
   // ******************
   // Data Listeners
   // ******************
@@ -175,12 +156,10 @@ export const useCommandEvents = <T extends CommandInstance>({
     // Data handlers
     const loadingUnmount = commandManager.events.onLoading(cmd.queueKey, handleGetLoadingEvent(cmd.queueKey));
     const getResponseUnmount = cache.events.onData<ExtractResponse<T>, ExtractError<T>>(cmd.cacheKey, setCacheData);
-    const abortUnmount = commandManager.events.onAbort(cmd.abortKey, handleAbort(cmd));
 
     const unmount = () => {
       loadingUnmount();
       getResponseUnmount();
-      abortUnmount();
     };
 
     clearDataListener();

packages/react/src/use-fetch/index.ts

@@ -1,3 +1,4 @@
 export * from "./use-fetch.hooks";
 export * from "./use-fetch.types";
+export * from "./use-fetch.utils";
 export * from "./use-fetch.constants";

packages/react/src/use-fetch/use-fetch.hooks.ts

@@ -3,7 +3,7 @@ import { useDidUpdate, useDidMount } from "@better-typed/react-lifecycle-hooks";
 import { CommandInstance, Command, getCommandKey } from "@better-typed/hyper-fetch";
 
 import { useDebounce, useCommandEvents, useTrackedState } from "helpers";
-import { UseFetchOptionsType, useFetchDefaultOptions, UseFetchReturnType } from "use-fetch";
+import { UseFetchOptionsType, useFetchDefaultOptions, UseFetchReturnType, getRefreshTime } from "use-fetch";
 import { useConfigProvider } from "config-provider";
 
 /**
@@ -91,7 +91,9 @@ export const useFetch = <T extends CommandInstance>(
 
   function handleRefresh() {
     if (!refresh) return;
-    logger.debug(`Starting refresh counter, request will be send in ${refreshTime}ms`);
+    const time = getRefreshTime(refreshTime, state.timestamp);
+
+    logger.debug(`Starting refresh counter, request will be send in ${time}ms`);
 
     refreshDebounce.debounce(() => {
       const isBlurred = !appManager.isFocused;
@@ -110,7 +112,7 @@ export const useFetch = <T extends CommandInstance>(
 
       // Start new refresh counter
       handleRefresh();
-    });
+    }, time);
   }
 
   const revalidate = (invalidateKey?: string | CommandInstance | RegExp) => {

packages/react/src/use-fetch/use-fetch.utils.ts

@@ -0,0 +1,7 @@
+export const getRefreshTime = (refreshTime: number, dataTimestamp?: Date) => {
+  if (dataTimestamp) {
+    const timeDiff = Date.now() - +dataTimestamp;
+    return timeDiff < refreshTime ? refreshTime - timeDiff : refreshTime;
+  }
+  return refreshTime;
+};