@applicaster/zapp-react-native-utils 14.0.0-alpha.9119252693 → 14.0.0-alpha.9203091422

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.tsx

@@ -1,25 +1,27 @@
 import React from "react";
 
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import { useTrackedView } from "../useTrackedView";
 
 const mockUpdateComponentsPositions = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",
   () => ({
-    useScreenTrackedViewPositionsContext: jest.fn().mockReturnValue({
+    useScreenTrackedViewPositionsContext: jest.fn(() => ({
       updateComponentsPositions: mockUpdateComponentsPositions,
       value: {
         "123": { componentId: "123", centerX: 0.4, centerY: 0.5 },
         "124": { componentId: "124", centerX: 0.2, centerY: 0.3 },
       },
-    }),
+    })),
   })
 );
 
-jest.useFakeTimers({ legacyFakeTimers: true });
+jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
@@ -32,10 +34,8 @@ const Wrapper = ({ children }: { children: React.ReactChild }) => (
   <Provider store={store}>{children}</Provider>
 );
 
-const { useTrackedView } = require("../useTrackedView");
-
 describe("useTrackCurrentAutoScrollingElement", () => {
-  it("should update position for selected component - onViewportEnter", () => {
+  it("should update position for selected component - onViewportEnter", async () => {
     const { result } = renderHook(() => useTrackedView("123"), {
       wrapper: Wrapper,
     });
@@ -46,14 +46,13 @@ describe("useTrackCurrentAutoScrollingElement", () => {
       rect: { left: 1, right: 1, top: 1, bottom: 1 },
     };
 
-    act(async () => {
-      await result.current.onPositionUpdated(mockRect);
+    act(() => {
+      result.current.onPositionUpdated(mockRect);
     });
 
-    // Fast-forward until all timers have been executed
-    jest.runAllTimers();
-
-    expect(result.current.inViewPort).toBe(true);
+    await waitFor(() => {
+      expect(result.current.inViewPort).toBe(true);
+    });
 
     expect(mockUpdateComponentsPositions).toHaveBeenCalledWith(
       "123",

package/reactHooks/cell-click/index.ts

@@ -16,7 +16,8 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
-import { useCurrentScreenData } from "../screen";
+import { useCurrentScreenData, useScreenContext } from "../screen";
+import { useScreenStateStore } from "../navigation/useScreenStateStore";
 
 /**
  * If onCellTap is defined execute the function and
@@ -42,10 +43,12 @@ export const useCellClick = ({
 }: Props): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -83,6 +86,9 @@ export const useCellClick = ({
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
           screenData,
+          screenState,
+          screenRoute: pathname,
+          screenStateStore,
         });
       }
 
@@ -117,6 +123,7 @@ export const useCellClick = ({
       push,
       sendAnalyticsOnPress,
       screenData,
+      screenState,
     ]
   );
 

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

@@ -1,8 +1,7 @@
 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";
 
 jest.mock("../../navigation");
 
@@ -13,17 +12,18 @@ jest.mock(
   })
 );
 
-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();
@@ -34,7 +34,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading not started requests", () => {
-    const store = mockStore({
+    const store = {
       zappPipes: {
         url1: {
           loading: true,
@@ -53,29 +53,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
-    ];
-
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
       wrapper,
       initialProps: { store },
     });
 
-    const actions = store.getActions();
+    const actions = (appStore.getStore() as any).getActions();
 
     expect(actions).toHaveLength(2);
 
@@ -91,7 +79,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 +98,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 +119,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 +156,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 +170,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 +183,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 +196,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 +210,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

@@ -138,6 +138,11 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: undefined,
+          },
+        },
       });
 
       const store2 = mockStore({
@@ -179,6 +184,11 @@ describe("useFeedLoader", () => {
       expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
         clearCache: true,
         riverId: undefined,
+        resolvers: {
+          screen: {
+            screenStateStore: undefined,
+          },
+        },
       });
 
       const store2 = mockStore({
@@ -228,6 +238,11 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
           clearCache: true,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: undefined,
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();
@@ -267,6 +282,11 @@ describe("useFeedLoader", () => {
         expect(loadPipesDataSpy).toBeCalledWith(nextUrl, {
           parentFeed: feedUrlWithNext,
           silentRefresh: true,
+          resolvers: {
+            screen: {
+              screenStateStore: undefined,
+            },
+          },
         });
 
         loadPipesDataSpy.mockRestore();

package/reactHooks/feed/useFeedLoader.tsx

@@ -8,6 +8,7 @@ import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
+import { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -51,6 +52,7 @@ export const useFeedLoader = ({
   const isInitialRender = useIsInitialRender();
   const dispatch = useDispatch();
   const { screenData } = useRoute();
+  const resolvers = useScreenResolvers();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
@@ -69,11 +71,12 @@ export const useFeedLoader = ({
             silentRefresh,
             callback,
             riverId,
+            resolvers,
           })
         );
       }
     },
-    [callableFeedUrl]
+    [callableFeedUrl, resolvers]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
@@ -86,11 +89,12 @@ export const useFeedLoader = ({
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
+            resolvers,
           })
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data?.next]);
+  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
 
   useEffect(() => {
     if (
@@ -102,6 +106,7 @@ export const useFeedLoader = ({
             ...pipesOptions,
             clearCache: true,
             riverId,
+            resolvers,
           })
         );
       } else if (!callableFeedUrl) {
@@ -126,14 +131,16 @@ export const useFeedLoader = ({
         jsOnly: true,
       });
     }
-  }, []);
+  }, [resolvers]);
 
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      dispatch(
+        loadPipesData(callableFeedUrl, { ...pipesOptions, riverId, resolvers })
+      );
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, resolvers]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/reactHooks/layout/isTablet/index.ts

@@ -1,5 +1,11 @@
 import { NativeModules, Platform } from "react-native";
 
+export const isAndroidTablet = () => {
+  const { initialProps } = NativeModules.QuickBrickCommunicationModule;
+
+  return initialProps?.is_tablet;
+};
+
 /**
  * Determines wether the given device is a tablet based on dimensions, orientation, and platform
  * @param {Object} dimensions - Dimensions object passed to the function
@@ -13,9 +19,7 @@ export const isTablet = (
   if (Platform?.OS === "ios") {
     return Platform?.isPad;
   } else if (Platform?.OS === "android") {
-    const { initialProps } = NativeModules.QuickBrickCommunicationModule;
-
-    return initialProps?.is_tablet;
+    return isAndroidTablet();
   }
 
   const { width } = dimensions || {};

package/reactHooks/navigation/index.ts

@@ -14,7 +14,7 @@ import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 
 export { useNavigation } from "./useNavigation";
@@ -127,11 +127,13 @@ export function isNavBarVisible(
 
 export const useBackHandler = (cb: () => boolean) => {
   useEffect(() => {
-    BackHandler.addEventListener("hardwareBackPress", cb);
+    if (!isWeb()) {
+      const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
 
-    return () => {
-      BackHandler.removeEventListener("hardwareBackPress", cb);
-    };
+      return () => {
+        unsubscribe.remove();
+      };
+    }
   }, [cb]);
 };
 

package/reactHooks/navigation/useRoute.ts

@@ -28,14 +28,19 @@ const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useRoute = (): {
+export const useRoute = (
+  useLegacy = true
+): {
   screenData: VariousScreenData;
   pathname: string;
 } => {
   const pathname = usePathname() || "";
   const navigator = useNavigation();
+  const screenContext = useContext(ScreenDataContext);
 
-  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
+  const screenDataContext = useLegacy
+    ? legacyScreenData(screenContext)
+    : screenContext;
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",

package/reactHooks/navigation/useScreenStateStore.ts

@@ -0,0 +1,8 @@
+import { useRoute } from "./useRoute";
+import { useMemo } from "react";
+
+export const useScreenStateStore = () => {
+  const route = useRoute(false);
+
+  return useMemo(() => route.screenData["screenStateStore"], [route.pathname]);
+};