@applicaster/zapp-react-native-utils 14.0.0-rc.8 → 15.0.0-rc.1

package/reactHooks/feed/__tests__/useBatchLoading.test.tsx

@@ -1,29 +1,33 @@
 import { renderHook } from "@testing-library/react-hooks";
-import * as reduxMockStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import React from "react";
-import * as ReactRedux from "react-redux";
+import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { waitFor } from "@testing-library/react-native";
 
 jest.mock("../../navigation");
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
   () => ({
+    ...jest.requireActual(
+      "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext"
+    ),
     useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
   })
 );
 
-const useBatchLoading = require("../useBatchLoading").useBatchLoading;
-const allFeedsIsReady = require("../useBatchLoading").allFeedsIsReady;
-
-const mockStore = reduxMockStore.default([thunk]);
-
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <ReactRedux.Provider store={store}>{children}</ReactRedux.Provider>
-);
+const wrapper = WrappedWithProviders;
 
 describe("useBatchLoading", () => {
-  const useDispatchSpy = jest.spyOn(ReactRedux, "useDispatch");
+  const data = [
+    { data: { source: "url1" }, component_type: "any" },
+    { data: { source: "url2" }, component_type: "any" },
+    { data: { source: "url3" }, component_type: "any" },
+    { data: { source: "url4" }, component_type: "any" },
+    { data: { source: "url5" }, component_type: "any" },
+    { data: { source: "url6" }, component_type: "any" },
+    // ... more items
+  ];
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -33,8 +37,8 @@ describe("useBatchLoading", () => {
     jest.clearAllMocks();
   });
 
-  it("loadPipesData start loading not started requests", () => {
-    const store = mockStore({
+  it("loadPipesData start loading not started requests", async () => {
+    const store = {
       zappPipes: {
         url1: {
           loading: true,
@@ -53,31 +57,21 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(2);
+    await waitFor(() => {
+      expect(actions).toHaveLength(2);
+    });
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",
@@ -91,7 +85,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -110,31 +104,17 @@ describe("useBatchLoading", () => {
         },
       },
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
-    expect(useDispatchSpy).toBeCalledTimes(0);
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
 
@@ -145,38 +125,26 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData has been called when no data cached", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
-      // ... more items
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(3);
   });
 
   it("initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -194,19 +162,11 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
-      { data: { source: "url1" } },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-    ];
-
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
       { wrapper, initialProps: { store } }
@@ -216,12 +176,10 @@ describe("useBatchLoading", () => {
   });
 
   it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {},
       test: "true",
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
@@ -231,11 +189,11 @@ describe("useBatchLoading", () => {
         component_type: "gallery-qb",
         ui_components: [{ data: { source: "url1" } }],
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
-      { data: { source: "url4" } },
-      { data: { source: "url5" } },
-      { data: { source: "url6" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
+      { data: { source: "url4" }, component_type: "any" },
+      { data: { source: "url5" }, component_type: "any" },
+      { data: { source: "url6" }, component_type: "any" },
       // ... more items
     ];
 
@@ -244,13 +202,13 @@ describe("useBatchLoading", () => {
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(1);
   });
 
   it("gallery-qb: initial batch ready when all initial items loaded", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: false,
@@ -258,20 +216,19 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    });
-
-    useDispatchSpy.mockReturnValue(store.dispatch);
+    };
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data: Partial<ZappUIComponent>[] = [
+    const data = [
       {
         component_type: "gallery-qb",
-        ui_components: [{ data: { source: "url1" } }],
+        data: {},
+        ui_components: [{ data: { source: "url1" } }] as any,
       },
-      { data: { source: "url2" } },
-      { data: { source: "url3" } },
+      { data: { source: "url2" }, component_type: "any" },
+      { data: { source: "url3" }, component_type: "any" },
     ];
 
     const { result } = renderHook(

package/reactHooks/feed/__tests__/useFeedLoader.test.tsx

@@ -2,15 +2,12 @@ import { renderHook } from "@testing-library/react-hooks";
 import * as R from "ramda";
 import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
 import * as reactReduxModules from "react-redux";
-import { Provider } from "react-redux";
 import * as React from "react";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
 import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { useFeedLoader } from "../useFeedLoader";
-
-const mockStore = configureStore([thunk]);
+import { WrappedWithProviders } from "../../../testUtils";
+import { ScreenStateResolver } from "../../../appUtils/contextKeysManager/contextResolver";
 
 jest.useFakeTimers({ legacyFakeTimers: true });
 
@@ -55,13 +52,15 @@ const mockZappPipesData = {
 
 describe("useFeedLoader", () => {
   describe("with cached feed url", () => {
-    const store = mockStore({
+    const store = {
       plugins: [],
       zappPipes: { "test://testfakeurl": mockZappPipesData },
-    });
+    };
 
-    const wrapper: React.FC<any> = ({ children }) => (
-      <Provider store={store}>{children}</Provider>
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store || store}>
+        {children}
+      </WrappedWithProviders>
     );
 
     it("returns cached feed", () => {
@@ -110,8 +109,10 @@ describe("useFeedLoader", () => {
   describe("without cached feeds", () => {
     const feedUrl = "test://testfakeurl2";
 
-    const wrapper: React.FC<any> = ({ children, store }) => (
-      <Provider store={store}>{children}</Provider>
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store}>
+        {children}
+      </WrappedWithProviders>
     );
 
     it("It loads data for new url and returns it", () => {
@@ -123,10 +124,10 @@ describe("useFeedLoader", () => {
         .spyOn(zappPipesModule, "loadPipesData")
         .mockImplementation(jest.fn());
 
-      const initialStore = mockStore({
+      const initialStore = {
         plugins: [],
         zappPipes: { "test://testfakeurl": "foobar" },
-      });
+      };
 
       const { result, rerender } = renderHook(
         () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
@@ -135,15 +136,19 @@ describe("useFeedLoader", () => {
 
       expect(result.current.data).toBeNull();
 
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+      expect(loadPipesDataSpy).toHaveBeenCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        callback: expect.any(Function),
+        resolvers: {
+          screen: expect.any(ScreenStateResolver),
+        },
       });
 
-      const store2 = mockStore({
+      const store2 = {
         plugins: [],
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
-      });
+      };
 
       rerender({ store: store2 });
 
@@ -164,10 +169,10 @@ describe("useFeedLoader", () => {
         .spyOn(reactReduxModules, "useDispatch")
         .mockImplementation(() => jest.fn());
 
-      const initialStore = mockStore({
+      const initialStore = {
         plugins: [],
         zappPipes: { "test://testfakeurl": "foobar" },
-      });
+      };
 
       const { result, rerender } = renderHook(
         () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
@@ -176,15 +181,22 @@ describe("useFeedLoader", () => {
 
       expect(result.current.data).toBeNull();
 
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+      expect(loadPipesDataSpy.mock.calls[0][0]).toBe(feedUrl);
+
+      expect(loadPipesDataSpy.mock.calls[0][1]).toMatchObject({
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: expect.any(Function),
+          },
+        },
       });
 
-      const store2 = mockStore({
+      const store2 = {
         plugins: [],
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
-      });
+      };
 
       rerender({ store: store2 });
 
@@ -197,8 +209,10 @@ describe("useFeedLoader", () => {
     const feedUrl = "test://testfakeurl";
     const feedUrlWithNext = "test://withnexttestfakeurl";
 
-    const wrapper: React.FC<any> = ({ children, store }) => (
-      <Provider store={store}>{children}</Provider>
+    const wrapper: React.FC<any> = ({ children, ...props }) => (
+      <WrappedWithProviders store={props.store || {}}>
+        {children}
+      </WrappedWithProviders>
     );
 
     describe("reloadData", () => {
@@ -211,10 +225,10 @@ describe("useFeedLoader", () => {
           .spyOn(reactReduxModules, "useDispatch")
           .mockImplementation(() => jest.fn());
 
-        const initialStore = mockStore({
+        const initialStore = {
           plugins: [],
           zappPipes: { [feedUrl]: "foobar" },
-        });
+        };
 
         const { result } = renderHook(() => useFeedLoader({ feedUrl }), {
           wrapper,
@@ -223,11 +237,24 @@ describe("useFeedLoader", () => {
 
         const { reloadData } = result.current;
 
-        reloadData();
+        reloadData?.();
+
+        expect(loadPipesDataSpy).toHaveBeenCalled();
+
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][0]
+        ).toBe(feedUrl);
 
-        expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][1]
+        ).toMatchObject({
           clearCache: true,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: expect.any(Function),
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();
@@ -247,10 +274,10 @@ describe("useFeedLoader", () => {
           .spyOn(reactReduxModules, "useDispatch")
           .mockImplementation(() => jest.fn());
 
-        const initialStore = mockStore({
+        const initialStore = {
           plugins: [],
           zappPipes: { [feedUrlWithNext]: { data: { next: nextUrl } } },
-        });
+        };
 
         const { result } = renderHook(
           () => useFeedLoader({ feedUrl: feedUrlWithNext }),
@@ -262,11 +289,24 @@ describe("useFeedLoader", () => {
 
         const { loadNext } = result.current;
 
-        loadNext();
+        loadNext?.();
+
+        expect(loadPipesDataSpy).toHaveBeenCalled();
+
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][0]
+        ).toBe(nextUrl);
 
-        expect(loadPipesDataSpy).toBeCalledWith(nextUrl, {
+        expect(
+          loadPipesDataSpy.mock.calls[loadPipesDataSpy.mock.calls.length - 1][1]
+        ).toMatchObject({
           parentFeed: feedUrlWithNext,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: expect.any(Function),
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();

package/reactHooks/feed/index.ts

@@ -11,3 +11,5 @@ export { useBuildPipesUrl } from "./useBuildPipesUrl";
 export { usePipesCacheReset } from "./usePipesCacheReset";
 
 export { useBatchLoading } from "./useBatchLoading";
+
+export { useLoadPipesDataDispatch } from "./useLoadPipesDataDispatch";

package/reactHooks/feed/useBatchLoading.ts

@@ -1,16 +1,15 @@
 import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
-import { useDispatch } from "react-redux";
 import * as React from "react";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import {
   getInflatedDataSourceUrl,
   getSearchContext,
+  useLoadPipesDataDispatch,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { isGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { useScreenContext } from "../screen/useScreenContext";
+import { useScreenContext } from "../screen";
 
 type Options = {
   initialBatchSize?: number;
@@ -63,7 +62,6 @@ export const useBatchLoading = (
   componentsToRender: { data?: ZappDataSource; component_type: string }[],
   options: Options
 ) => {
-  const dispatch = useDispatch();
   const { screen: screenContext, entry: entryContext } = useScreenContext();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
@@ -118,7 +116,9 @@ export const useBatchLoading = (
     []
   );
 
-  const feeds = useZappPipesFeeds(feedUrls);
+  const feeds = useZappPipesFeed(feedUrls);
+
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
 
   // dispatch loadPipesData for each feed that is not loaded
   const runBatchLoading = React.useCallback(() => {
@@ -138,17 +138,24 @@ export const useBatchLoading = (
 
         if (mappedFeedUrl) {
           // 4. load data
-          return dispatch(
-            loadPipesData(mappedFeedUrl, { riverId: options.riverId })
+          return loadPipesDataDispatcher(
+            mappedFeedUrl,
+            {
+              riverId: options.riverId,
+            },
+            {
+              withResolvers: true,
+              withScreenRouteMapping: true,
+            }
           );
         }
       }
     });
-  }, [feedUrls]);
+  }, [feedUrls, feeds, loadPipesDataDispatcher]);
 
   React.useEffect(() => {
     runBatchLoading();
-  }, []);
+  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
 
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
+import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux";
 
 import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
-import { useRoute } from "../navigation";
+import { useLoadPipesDataDispatch } from "./useLoadPipesDataDispatch";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -49,29 +47,26 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useDispatch();
-  const { screenData } = useRoute();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const riverId =
-    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
-    screenData?.id;
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {
-      if (callableFeedUrl) {
-        dispatch(
-          loadPipesData(callableFeedUrl, {
-            clearCache: true,
-            silentRefresh,
-            callback,
-            riverId,
-          })
-        );
-      }
+      loadPipesDataDispatcher(
+        callableFeedUrl,
+        {
+          clearCache: true,
+          silentRefresh,
+          callback,
+        },
+        {
+          withResolvers: true,
+        }
+      );
     },
     [callableFeedUrl]
   );
@@ -80,15 +75,16 @@ export const useFeedLoader = ({
     if (callableFeedUrl) {
       const nextFeed = currentFeed?.data?.next;
 
-      if (nextFeed) {
-        dispatch(
-          loadPipesData(nextFeed, {
-            silentRefresh: true,
-            parentFeed: callableFeedUrl,
-            riverId,
-          })
-        );
-      }
+      loadPipesDataDispatcher(
+        nextFeed,
+        {
+          silentRefresh: true,
+          parentFeed: callableFeedUrl,
+        },
+        {
+          withResolvers: true,
+        }
+      );
     }
   }, [callableFeedUrl, currentFeed?.data?.next]);
 
@@ -97,12 +93,16 @@ export const useFeedLoader = ({
       shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
-        dispatch(
-          loadPipesData(callableFeedUrl, {
+        loadPipesDataDispatcher(
+          callableFeedUrl,
+          {
             ...pipesOptions,
             clearCache: true,
-            riverId,
-          })
+          },
+          {
+            withResolvers: true,
+            withScreenRouteMapping: true,
+          }
         );
       } else if (!callableFeedUrl) {
         logger.info({
@@ -131,9 +131,11 @@ export const useFeedLoader = ({
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      loadPipesDataDispatcher(callableFeedUrl, pipesOptions, {
+        withResolvers: true,
+      });
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, isInitialRender, pipesOptions.skipLoading]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {