@applicaster/zapp-react-native-utils 14.0.0-alpha.1235043154 → 14.0.0-alpha.1308901965

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

@@ -1,7 +1,8 @@
 import { renderHook } from "@testing-library/react-hooks";
-import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
-import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import * as reduxMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import React from "react";
+import * as ReactRedux from "react-redux";
 
 jest.mock("../../navigation");
 
@@ -12,18 +13,17 @@ jest.mock(
   })
 );
 
-const wrapper = WrappedWithProviders;
+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>
+);
 
 describe("useBatchLoading", () => {
-  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
-  ];
+  const useDispatchSpy = jest.spyOn(ReactRedux, "useDispatch");
 
   beforeAll(() => {
     jest.useFakeTimers();
@@ -34,7 +34,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading not started requests", () => {
-    const store = {
+    const store = mockStore({
       zappPipes: {
         url1: {
           loading: true,
@@ -53,17 +53,29 @@ 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 = (appStore.getStore() as any).getActions();
+    const actions = store.getActions();
 
     expect(actions).toHaveLength(2);
 
@@ -79,7 +91,7 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
-    const store = {
+    const store = mockStore({
       zappPipes: {
         url1: {
           loading: false,
@@ -98,17 +110,31 @@ 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 = (appStore.getStore() as any).getActions();
+    const actions = store.getActions();
 
     expect(actions).toHaveLength(1);
 
@@ -119,26 +145,38 @@ describe("useBatchLoading", () => {
   });
 
   it("loadPipesData has been called when no data cached", () => {
-    const store = {
+    const store = mockStore({
       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 = (appStore.getStore() as any).getActions();
+    const actions = store.getActions();
 
     expect(actions).toHaveLength(3);
   });
 
   it("initial batch ready when all initial items loaded", () => {
-    const store = {
+    const store = mockStore({
       zappPipes: {
         url1: {
           loading: false,
@@ -156,11 +194,19 @@ 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 } }
@@ -170,10 +216,12 @@ describe("useBatchLoading", () => {
   });
 
   it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
-    const store = {
+    const store = mockStore({
       zappPipes: {},
       test: "true",
-    };
+    });
+
+    useDispatchSpy.mockReturnValue(store.dispatch);
 
     const initialBatchSize = 3;
     const riverId = "123";
@@ -183,11 +231,11 @@ describe("useBatchLoading", () => {
         component_type: "gallery-qb",
         ui_components: [{ data: { source: "url1" } }],
       },
-      { 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" },
+      { data: { source: "url2" } },
+      { data: { source: "url3" } },
+      { data: { source: "url4" } },
+      { data: { source: "url5" } },
+      { data: { source: "url6" } },
       // ... more items
     ];
 
@@ -196,13 +244,13 @@ describe("useBatchLoading", () => {
       initialProps: { store },
     });
 
-    const actions = (appStore.getStore() as any).getActions();
+    const actions = store.getActions();
 
     expect(actions).toHaveLength(1);
   });
 
   it("gallery-qb: initial batch ready when all initial items loaded", () => {
-    const store = {
+    const store = mockStore({
       zappPipes: {
         url1: {
           loading: false,
@@ -210,19 +258,20 @@ describe("useBatchLoading", () => {
           data: {},
         },
       },
-    };
+    });
+
+    useDispatchSpy.mockReturnValue(store.dispatch);
 
     const initialBatchSize = 3;
     const riverId = "123";
 
-    const data = [
+    const data: Partial<ZappUIComponent>[] = [
       {
         component_type: "gallery-qb",
-        data: {},
-        ui_components: [{ data: { source: "url1" } }] as any,
+        ui_components: [{ data: { source: "url1" } }],
       },
-      { data: { source: "url2" }, component_type: "any" },
-      { data: { source: "url3" }, component_type: "any" },
+      { data: { source: "url2" } },
+      { data: { source: "url3" } },
     ];
 
     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/useBatchLoading.ts

@@ -10,7 +10,7 @@ import {
   getSearchContext,
 } 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;

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/feed/usePipesCacheReset.ts

@@ -5,7 +5,7 @@ import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/D
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
 import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
-import { useRoute } from "../navigation/useRoute";
+import { useRoute } from "../navigation";
 
 /**
  * reset river components cache when screen is unmounted

package/reactHooks/navigation/index.ts

@@ -127,10 +127,10 @@ export function isNavBarVisible(
 
 export const useBackHandler = (cb: () => boolean) => {
   useEffect(() => {
-    const unsubscribe = BackHandler.addEventListener("hardwareBackPress", cb);
+    BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
-      unsubscribe.remove();
+      BackHandler.removeEventListener("hardwareBackPress", cb);
     };
   }, [cb]);
 };

package/reactHooks/navigation/useIsScreenActive.ts

@@ -1,3 +1,4 @@
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
@@ -6,11 +7,14 @@ export const useIsScreenActive = () => {
   const pathname = usePathname();
   const { currentRoute, videoModalState } = useNavigation();
 
-  if (
-    videoModalState.visible &&
-    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
-  ) {
-    return false;
+  if (videoModalState.visible) {
+    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
+      return true;
+    }
+
+    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
+      return false;
+    }
   }
 
   return pathname === currentRoute;

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,11 @@
+import { useRoute } from "./useRoute";
+import { useMemo } from "react";
+
+export const useScreenStateStore = () => {
+  const route = useRoute(false);
+
+  return useMemo(
+    () => route.screenData["screenStateStore"],
+    [route.screenData["screenStateStore"]]
+  );
+};

package/reactHooks/screen/useScreenContext.ts

@@ -2,7 +2,7 @@ import { useContext, useMemo } from "react";
 
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { useNavigation } from "../navigation/useNavigation";
+import { useNavigation } from "../navigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";

package/reactHooks/state/__tests__/ZStoreProvider.test.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable no-console */
 import React from "react";
 import { render, screen } from "@testing-library/react-native";
 import { Text } from "react-native";
-import { ZStoreProvider, useZStore } from "../ZStoreProvider";
+import { useZStore, ZStoreProvider } from "../ZStoreProvider";
 import { useStore } from "zustand";
 
 interface TestState {

package/riverComponetsMeasurementProvider/index.tsx

@@ -3,7 +3,7 @@ import { NativeModules, StyleSheet, View } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
 import { isApplePlatform, isWeb } from "../reactUtils";
-import { useRivers } from "../reactHooks/state";
+import { useRivers } from "../reactHooks";
 
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({

package/services/js2native.ts

@@ -496,6 +496,7 @@ async function removeStorageListenerHandler(payload: { listenerId?: string }) {
 function log({ level, messages }) {
   try {
     const parsedMessages = parseJsonIfNeeded(messages);
+    // eslint-disable-next-line no-console
     const logFn = console[level] || console.log;
 
     if (Array.isArray(parsedMessages)) {