Merge pull request #66 from BetterTyped/65-responsemapper-in-combination-with-usefetch

feat: 🎸 Added response mapping to the helper hooks

Author: prc5

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

@@ -1,4 +1,4 @@
-import { act } from "@testing-library/react";
+import { act, waitFor } from "@testing-library/react";
 import { AdapterType, ResponseReturnType, xhrExtra } from "@hyper-fetch/core";
 
 import { createRequest, renderUseFetch, createCacheData, client, sleep } from "../../utils";
@@ -127,6 +127,40 @@ describe("useFetch [ Base ]", () => {
     it("should change loading to false on success", async () => {
       // Todo
     });
+    it("should map response data", async () => {
+      const mappedData = { test: 1, test2: 2, test3: 3 };
+      const mappedRequest = request.setResponseMapper((response) => ({
+        ...response,
+        data: mappedData,
+      }));
+      createRequestInterceptor(mappedRequest);
+      const view = renderUseFetch(mappedRequest);
+
+      await testSuccessState(mappedData, view);
+    });
+    it("should map async response data", async () => {
+      const spy = jest.fn();
+      const mappedData = { test: 1, test2: 2, test3: 3 };
+      const mappedRequest = request.setResponseMapper(async (response) => ({
+        ...response,
+        data: mappedData,
+      }));
+      createRequestInterceptor(mappedRequest);
+      const view = renderUseFetch(mappedRequest, { disabled: true });
+
+      act(() => {
+        view.result.current.onSuccess(() => {
+          expect(view.result.current.data).toEqual(null);
+          spy();
+        });
+        view.rerender({ disabled: false });
+      });
+
+      await waitFor(() => {
+        expect(spy).toBeCalledTimes(1);
+      });
+      await testSuccessState(mappedData, view);
+    });
   });
   describe("when hook get error response", () => {
     it("should set state with error data", async () => {

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

@@ -37,6 +37,7 @@ export const useRequestEvents = <T extends RequestInstance>({
   actions,
   setCacheData,
 }: UseRequestEventsPropsType<T>): UseRequestEventsReturnType<T> => {
+  const { responseMapper } = request;
   const { cache, requestManager } = request.client;
 
   // ******************
@@ -136,10 +137,18 @@ export const useRequestEvents = <T extends RequestInstance>({
 
   const handleResponse = (req: T) => {
     return (
-      data: ResponseReturnType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>>,
+      response: ResponseReturnType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>>,
       details: ResponseDetailsType,
     ) => {
-      handleResponseCallbacks(req, data, details);
+      const data = responseMapper ? responseMapper(response) : response;
+
+      if (data instanceof Promise) {
+        return (async () => {
+          const promiseData = await data;
+          handleResponseCallbacks(req, promiseData, details);
+        })();
+      }
+      return handleResponseCallbacks(req, data, details);
     };
   };
 

packages/react/src/helpers/use-tracked-state/use-tracked-state.hooks.ts

@@ -125,26 +125,6 @@ export const useTrackedState = <T extends RequestInstance>({
     return false;
   };
 
-  const mapResponseData = (
-    data: CacheValueType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>>,
-  ):
-    | Promise<CacheValueType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>>>
-    | CacheValueType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>> => {
-    if (responseMapper) {
-      const response = responseMapper(data);
-      if (response instanceof Promise) {
-        return new Promise((resolve) => {
-          (async () => {
-            const newResponse = await response;
-            resolve({ ...data, ...newResponse });
-          })();
-        });
-      }
-      return { ...data, ...response };
-    }
-    return data;
-  };
-
   const handleCacheData = (
     cacheData: CacheValueType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>>,
   ) => {
@@ -178,15 +158,15 @@ export const useTrackedState = <T extends RequestInstance>({
   const setCacheData = (
     cacheData: CacheValueType<ExtractResponseType<T>, ExtractErrorType<T>, ExtractAdapterType<T>>,
   ): Promise<void> | void => {
-    const data = mapResponseData(cacheData);
+    const data = responseMapper ? responseMapper(cacheData) : cacheData;
 
     if (data instanceof Promise) {
       return (async () => {
         const promiseData = await data;
-        handleCacheData(promiseData);
+        handleCacheData({ ...cacheData, ...promiseData });
       })();
     }
-    return handleCacheData(data);
+    return handleCacheData({ ...cacheData, ...data });
   };
 
   // ******************