@applicaster/zapp-react-native-utils 14.0.0-alpha.3259144304 → 14.0.0-alpha.3471443312

package/navigationUtils/__tests__/mapContentTypesToRivers.test.ts

@@ -0,0 +1,130 @@
+import { mapContentTypesToRivers } from "../index";
+
+describe("mapContentTypesToRivers", () => {
+  it("should return the correct content types mapped to rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should return null if contentTypes is undefined", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      // contentTypes is missing
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toBeNull();
+  });
+
+  it("should skip content types whose screen does not exist in rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+        "content-type-2": {
+          screen_id: "river-2", // river-2 does not exist
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+
+    // result is not null, but may be undefined for missing keys
+    expect(result && result["content-type-2"]).toBeUndefined();
+  });
+
+  it("should use 'type' if 'plugin_type' is not present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          type: "custom-type",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "custom-type",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should skip content types if neither plugin_type nor type is present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          // no plugin_type or type
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+
+  it("should handle empty contentTypes object", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {},
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+});

package/navigationUtils/index.ts

@@ -13,6 +13,7 @@ import {
   isPlayable,
   isV2River,
 } from "./itemTypeMatchers";
+import { RootState } from "@applicaster/zapp-react-native-redux/store";
 
 type PathAttribute = {
   screenType: string;
@@ -377,10 +378,11 @@ export const usesVideoModal = (
   return targetScreenConfiguration?.styles?.use_video_modal;
 };
 
-export const mapContentTypesToRivers = ({
-  rivers,
-  contentTypes,
-}): ZappContentTypesMapped | null => {
+export const mapContentTypesToRivers = (
+  state: Partial<RootState>
+): ZappContentTypesMapped | null => {
+  const { rivers, contentTypes } = state;
+
   if (!contentTypes) {
     return null;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.3259144304",
+  "version": "14.0.0-alpha.3471443312",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-alpha.3259144304",
+    "@applicaster/applicaster-types": "14.0.0-alpha.3471443312",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/getPlayerActionButtons.ts

@@ -1,4 +1,4 @@
-import { take, map, trim } from "lodash";
+import { map, take, trim } from "../utils";
 import { selectActionButtons } from "../conf/player/selectors";
 
 /**

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

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

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/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 {
@@ -10,7 +12,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;
@@ -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,8 +1,10 @@
 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";
@@ -49,7 +51,7 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData } = useRoute();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
@@ -64,7 +66,7 @@ export const useFeedLoader = ({
     (silentRefresh = true, callback) => {
       if (callableFeedUrl) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             clearCache: true,
             silentRefresh,
             callback,
@@ -82,7 +84,7 @@ export const useFeedLoader = ({
 
       if (nextFeed) {
         dispatch(
-          loadPipesData(nextFeed, {
+          ZappPipes.loadPipesData(nextFeed, {
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
@@ -98,7 +100,7 @@ export const useFeedLoader = ({
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             ...pipesOptions,
             clearCache: true,
             riverId,
@@ -131,7 +133,9 @@ export const useFeedLoader = ({
   // 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 })
+      );
     }
   }, [callableFeedUrl]);
 

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/useRoute";
+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/useRoute";
  * @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/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

@@ -6,7 +6,10 @@ import { NativeModules, Platform } from "react-native";
  * @param {String} orientation - Orientation enum passed to the function
  * @returns {Boolean} isTablet - returns whether the given device is a tablet
  */
-export const isTablet = (dimensions, orientation) => {
+export const isTablet = (
+  dimensions?: { width: number; height: number },
+  orientation?: string
+) => {
   if (Platform?.OS === "ios") {
     return Platform?.isPad;
   } else if (Platform?.OS === "android") {
@@ -15,7 +18,7 @@ export const isTablet = (dimensions, orientation) => {
     return initialProps?.is_tablet;
   }
 
-  const { width } = dimensions;
+  const { width } = dimensions || {};
 
   if (width < 600) return false;
   if (width >= 600 && width < 840) return orientation === "portrait";