@applicaster/zapp-react-native-utils 14.0.0-alpha.6242515303 → 14.0.0-alpha.6391068513

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/useBatchLoading.ts

@@ -1,8 +1,10 @@
 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 {
+  ZappPipes,
+  useAppDispatch,
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import {
@@ -63,7 +65,7 @@ export const useBatchLoading = (
   componentsToRender: { data?: ZappDataSource; component_type: string }[],
   options: Options
 ) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screen: screenContext, entry: entryContext } = useScreenContext();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
@@ -118,7 +120,7 @@ export const useBatchLoading = (
     []
   );
 
-  const feeds = useZappPipesFeeds(feedUrls);
+  const feeds = useZappPipesFeed(feedUrls);
 
   // dispatch loadPipesData for each feed that is not loaded
   const runBatchLoading = React.useCallback(() => {
@@ -139,7 +141,7 @@ export const useBatchLoading = (
         if (mappedFeedUrl) {
           // 4. load data
           return dispatch(
-            loadPipesData(mappedFeedUrl, { riverId: options.riverId })
+            ZappPipes.loadPipesData(mappedFeedUrl, { riverId: options.riverId })
           );
         }
       }

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,13 +1,16 @@
 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 {
+  ZappPipes,
+  useAppDispatch,
+  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 { useScreenResolvers } from "@applicaster/zapp-react-native-utils/actionsExecutor/screenResolver";
 
 const logger = reactHooksLogger.addSubsystem("useFeedLoader");
 
@@ -49,8 +52,9 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData } = useRoute();
+  const resolvers = useScreenResolvers();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
 
@@ -64,16 +68,17 @@ export const useFeedLoader = ({
     (silentRefresh = true, callback) => {
       if (callableFeedUrl) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             clearCache: true,
             silentRefresh,
             callback,
             riverId,
+            resolvers,
           })
         );
       }
     },
-    [callableFeedUrl]
+    [callableFeedUrl, resolvers]
   );
 
   const loadNext: FeedLoaderResponse["loadNext"] = React.useCallback(() => {
@@ -82,15 +87,16 @@ export const useFeedLoader = ({
 
       if (nextFeed) {
         dispatch(
-          loadPipesData(nextFeed, {
+          ZappPipes.loadPipesData(nextFeed, {
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
+            resolvers,
           })
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data?.next]);
+  }, [callableFeedUrl, currentFeed?.data?.next, resolvers]);
 
   useEffect(() => {
     if (
@@ -98,10 +104,11 @@ export const useFeedLoader = ({
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             ...pipesOptions,
             clearCache: true,
             riverId,
+            resolvers,
           })
         );
       } else if (!callableFeedUrl) {
@@ -126,14 +133,20 @@ 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(
+        ZappPipes.loadPipesData(callableFeedUrl, {
+          ...pipesOptions,
+          riverId,
+          resolvers,
+        })
+      );
     }
-  }, [callableFeedUrl]);
+  }, [callableFeedUrl, resolvers]);
 
   return React.useMemo(() => {
     if (!callableFeedUrl || !feedUrl) {

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { useDispatch } from "react-redux";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 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";
+import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
  * reset river components cache when screen is unmounted
@@ -13,7 +13,7 @@ import { useRoute } from "../navigation";
  * @param {Array} riverComponents list of UI components
  */
 export const usePipesCacheReset = (riverId, riverComponents) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
 

package/reactHooks/flatList/useSequentialRenderItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View } from "react-native";
+import { View, ViewStyle } from "react-native";
 
 import { platformSelect } from "../../reactUtils";
 
@@ -49,13 +49,13 @@ export const useSequentialRenderItem = (data: Data) => {
         const readyToDisplay =
           index === 0 ? true : arePreviousComponentsReady(index);
 
-        const displayStyle = {
+        const displayStyle: ViewStyle = {
           display: readyToDisplay ? "flex" : "none",
         };
 
         const readyStyle = {
           visibility: readyToDisplay ? "visible" : "hidden",
-        };
+        } as ViewStyle;
 
         const style = platformSelect({
           tvos: readyStyle,

package/reactHooks/layout/__tests__/index.test.tsx

@@ -42,15 +42,17 @@ jest.mock("react-native-safe-area-context", () => ({
 }));
 
 jest.mock("../../../reactUtils", () => ({
+  ...jest.requireActual("../../../reactUtils"),
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => mock_tv_flag),
 }));
 
 jest.mock("../../navigation", () => ({
-  useNavigation: () => null,
   useIsScreenActive: () => true,
 }));
 
+jest.mock("../../navigation/useNavigation");
+
 const { Dimensions } = require("react-native");
 const { useDimensions } = require("..");
 

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/layout/useDimensions/__tests__/useDimensions.test.ts

@@ -1,46 +1,48 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { Dimensions, StatusBar } from "react-native";
+import { useDimensions } from "../useDimensions";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux";
 
-const mockUsePickFromState = jest.fn();
-const mockUseIsScreenActive = jest.fn();
-const mockGetInitialDimensions = jest.fn();
-const mockGetDeviceInfo = jest.fn();
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  ...(jest.requireActual("@applicaster/zapp-react-native-redux/hooks") as {}),
-  usePickFromState: mockUsePickFromState,
-}));
-
-jest.mock("../../../navigation", () => ({
-  useIsScreenActive: mockUseIsScreenActive,
-}));
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
+  return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+    usePickFromState: jest.fn(),
+  };
+});
 
-jest.mock("../helpers", () => ({
-  getInitialDimensions: mockGetInitialDimensions,
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn().mockReturnValue(true),
+  })
+);
+
+jest.doMock("../helpers", () => ({
+  getInitialDimensions: jest
+    .fn()
+    .mockReturnValue({ width: 100, height: 200, scale: 1, fontScale: 1 }),
 }));
 
 jest.mock("../../getDeviceInfo", () => ({
-  getDeviceInfo: mockGetDeviceInfo,
+  getDeviceInfo: jest.fn().mockReturnValue({ deviceInfo: "testDeviceInfo" }),
 }));
 
-const { useDimensions } = require("../useDimensions");
+const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
+
+Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
+
+Dimensions.addEventListener = jest.fn().mockReturnValue({
+  remove: jest.fn(),
+});
 
 describe("useDimensions", () => {
-  const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
   const mockAppData = { someData: "test" };
 
   beforeEach(() => {
-    jest.clearAllMocks();
-    Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
-
-    Dimensions.addEventListener = jest.fn().mockReturnValue({
-      remove: jest.fn(),
-    });
-
-    mockUsePickFromState.mockReturnValue({ appData: mockAppData });
-    mockUseIsScreenActive.mockReturnValue(true);
-    mockGetInitialDimensions.mockReturnValue(mockDimensions);
-    mockGetDeviceInfo.mockReturnValue({ deviceInfo: "testDeviceInfo" });
+    StatusBar.currentHeight = 20;
+    (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
   });
 
   it("returns correct initial dimensions", () => {
@@ -48,12 +50,9 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: false })
     );
 
-    expect(result.current).toEqual({
-      ...mockDimensions,
+    expect(result.current).toMatchObject({
       statusBarHeight: StatusBar.currentHeight,
     });
-
-    expect(mockGetInitialDimensions).toHaveBeenCalledWith("window");
   });
 
   it("calls handler on mount", () => {
@@ -70,7 +69,7 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: false })
     );
 
-    mockUseIsScreenActive.mockReturnValue(false);
+    (useIsScreenActive as jest.Mock).mockReturnValue(false);
     rerender();
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
@@ -84,8 +83,7 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: true })
     );
 
-    expect(result.current).toEqual({
-      ...mockDimensions,
+    expect(result.current).toMatchObject({
       scale: 1,
       fontScale: 1,
       statusBarHeight: StatusBar.currentHeight,
@@ -98,7 +96,7 @@ describe("useDimensions", () => {
     );
 
     expect(result.current.height).toBe(
-      mockDimensions.height - StatusBar.currentHeight ?? 0
+      mockDimensions.height - (StatusBar?.currentHeight ?? 0)
     );
   });
 

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -10,7 +10,7 @@ import { isTV } from "../../../reactUtils";
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
-import { useIsScreenActive } from "../../navigation";
+import { useIsScreenActive } from "../../navigation/useIsScreenActive";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -24,8 +24,6 @@ const applyScaleToDimensions = R.unless(R.propEq("scale", 1), (dimensions) => ({
   scale: 1,
 }));
 
-const statusBarHeight = StatusBar?.currentHeight;
-
 /**
  * Returns React-native Dimensions object and updates it on any dimension change
  * @param {('screen'|'window')} [context=window] - Dimensions context passed to Dimensions.get method
@@ -37,6 +35,7 @@ export const useDimensions: UseDimensions = (
   context = "window",
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const statusBarHeight = StatusBar?.currentHeight;
   const isActive = useIsScreenActive();
   const { appData } = usePickFromState(["appData"]);