@applicaster/zapp-react-native-utils 13.0.0-rc.1 → 13.0.0-rc.100

package/reactHooks/cell-click/__tests__/index.test.js

@@ -5,14 +5,14 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 
 import { waitFor } from "@testing-library/react-native";
 
-const navigator = {
+const mockNavigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
   data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
-  useNavigation: () => navigator,
+  useNavigation: () => mockNavigator,
   useRoute: () => ({ pathname: "pathnameMock" }),
   useProfilerLogging: () => {
     return jest.fn();
@@ -25,7 +25,15 @@ jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils/", () => ({
   }),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useTargetScreenData: jest.fn(() => ({})),
+  useCurrentScreenData: jest.fn(() => ({})),
+}));
+
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ...jest.requireActual(
+    "@applicaster/zapp-react-native-ui-components/Contexts"
+  ),
   ZappPipesEntryContext: {
     useZappPipesContext: jest.fn(() => [undefined, jest.fn()]),
   },

package/reactHooks/cell-click/index.ts

@@ -16,6 +16,7 @@ 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";
 
 /**
  * If onCellTap is defined execute the function and
@@ -44,6 +45,7 @@ export const useCellClick = ({
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const screenData = useCurrentScreenData();
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -78,7 +80,10 @@ export const useCellClick = ({
       logOnPress(selectedItem, pathname, component, onCellTap);
 
       if (selectedItem) {
-        await actionExecutor?.handleEntryActions(selectedItem);
+        await actionExecutor?.handleEntryActions(selectedItem, {
+          component,
+          screenData,
+        });
       }
 
       if (selectedItem?.type?.value === "action") {
@@ -111,6 +116,7 @@ export const useCellClick = ({
       pathname,
       push,
       sendAnalyticsOnPress,
+      screenData,
     ]
   );
 

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

@@ -7,12 +7,12 @@ const appData = {
   sdk_version: "2.0.0",
 };
 
-let INFLATED_URL;
+const mockUseInflatedUrl = jest.fn();
 
 jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
   () => ({
-    useInflatedUrl: () => INFLATED_URL,
+    useInflatedUrl: mockUseInflatedUrl,
   })
 );
 
@@ -20,7 +20,7 @@ const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
-    INFLATED_URL = "http://foo.com/show/show-1";
+    mockUseInflatedUrl.mockReturnValue("http://foo.com/show/show-1");
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -65,7 +65,7 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
-    INFLATED_URL = "http://foobar.com/show-1";
+    mockUseInflatedUrl.mockReturnValue("http://foobar.com/show-1");
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {

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

@@ -6,42 +6,41 @@ import { Provider } from "react-redux";
 import * as React from "react";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+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]);
 
-jest.useFakeTimers();
+jest.useFakeTimers({ legacyFakeTimers: true });
 
-const logger = {
+const mockLogger = {
   warning: jest.fn(),
   log: jest.fn(),
   info: jest.fn(),
 };
 
-const navigator = {
+const mockNavigator: any = {
   currentRoute: "/river/A1234",
   getStack: jest.fn(() => []),
 };
 
-const routeData = {
+const mockRouteData: any = {
   screenData: {},
   pathname: "/river/A1234",
 };
 
-jest.mock("../../logger", () => ({
+jest.doMock("../../logger", () => ({
   reactHooksLogger: {
-    addSubsystem: jest.fn(() => logger),
+    addSubsystem: jest.fn(() => mockLogger),
   },
 }));
 
 jest
   .spyOn(useNavigationHooks, "useNavigation")
-  .mockImplementation(() => navigator);
+  .mockImplementation(() => mockNavigator);
 
-jest.spyOn(navigationHooks, "useRoute").mockImplementation(() => routeData);
-
-const { useFeedLoader } = require("../useFeedLoader");
+jest.spyOn(useRouteHook, "useRoute").mockImplementation(() => mockRouteData);
 
 const mockZappPipesData = {
   data: {
@@ -135,7 +134,11 @@ describe("useFeedLoader", () => {
       );
 
       expect(result.current.data).toBeNull();
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {});
+
+      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        clearCache: true,
+        riverId: undefined,
+      });
 
       const store2 = mockStore({
         plugins: [],
@@ -172,7 +175,11 @@ describe("useFeedLoader", () => {
       );
 
       expect(result.current.data).toBeNull();
-      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {});
+
+      expect(loadPipesDataSpy).toBeCalledWith(feedUrl, {
+        clearCache: true,
+        riverId: undefined,
+      });
 
       const store2 = mockStore({
         plugins: [],

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect } from "react";
-import { path } from "ramda";
 import { useDispatch } from "react-redux";
 
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { reactHooksLogger } from "../logger";
-import { useIsInitialRender } from "../utils";
+import { shouldDispatchData, useIsInitialRender } from "../utils";
 import { useInflatedUrl } from "./useInflatedUrl";
 import { useRoute } from "../navigation";
 
@@ -21,6 +20,7 @@ type Props = {
     silentRefresh?: boolean;
     method?: "get" | "post";
     bodyParams?: Record<string, unknown>;
+    skipLoading?: boolean;
   };
 };
 
@@ -56,9 +56,9 @@ export const useFeedLoader = ({
 
   const currentFeed = useZappPipesFeed(callableFeedUrl);
 
-  const cachedFeed = React.useMemo(() => path(["data"])(currentFeed), []);
-
-  const riverId = screenData?.id;
+  const riverId =
+    (screenData as LegacyNavigationScreenData)?.targetScreen?.id ??
+    screenData?.id;
 
   const reloadData = React.useCallback<ReloadDataFunction>(
     (silentRefresh = true, callback) => {
@@ -90,33 +90,47 @@ export const useFeedLoader = ({
         );
       }
     }
-  }, [callableFeedUrl, currentFeed?.data]);
+  }, [callableFeedUrl, currentFeed?.data?.next]);
 
-  // If feed doesn't exist, load it
   useEffect(() => {
-    if (!cachedFeed || pipesOptions.clearCache) {
-      if (callableFeedUrl) {
-        dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
-      } else {
+    if (
+      shouldDispatchData(callableFeedUrl, currentFeed, pipesOptions.clearCache)
+    ) {
+      if (callableFeedUrl && !pipesOptions.skipLoading) {
+        dispatch(
+          loadPipesData(callableFeedUrl, {
+            ...pipesOptions,
+            clearCache: true,
+            riverId,
+          })
+        );
+      } else if (!callableFeedUrl) {
         logger.info({
           message:
             "Feed is not defined or not inflated, skipping loading. \nMake sure you have correct feedUrl and mapping.",
           jsOnly: true,
         });
+      } else {
+        logger.info({
+          message:
+            "Loading skipped as per pipesOptions.skipLoading configuration.",
+          data: { url: callableFeedUrl },
+          jsOnly: true,
+        });
       }
     } else {
       logger.info({
         message:
-          "Feed already exist, skipping loading. \nCall reloadData() if you want to refresh data.",
+          "Feed already exists, skipping loading. \nCall reloadData() if you want to refresh data.",
         data: { url: callableFeedUrl },
         jsOnly: true,
       });
     }
   }, []);
 
-  // Reload feed when feedUrl changes
+  // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
-    if (!isInitialRender && callableFeedUrl) {
+    if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
       dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
     }
   }, [callableFeedUrl]);
@@ -152,7 +166,6 @@ export const useFeedLoader = ({
     currentFeed?.data,
     currentFeed?.error,
     currentFeed?.loading,
-
     reloadData,
     loadNext,
   ]);

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import {
-  getDatasourceUrl,
-  usePipesContexts,
-} from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils";
+
+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";
+
 /**
  * reset river components cache when screen is unmounted
  * @param {string} riverId screen id

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { renderHook, act } from "@testing-library/react-hooks";
-import { render } from "@testing-library/react-native";
+import { renderHook, render, act } from "@testing-library/react-native";
 import { View } from "react-native";
 
 import { useSequentialLoader, useSequentialRenderItem } from "..";
@@ -66,26 +65,28 @@ describe("flatList hooks", () => {
 
         expect(result.current.allLoaded).toBe(false);
 
-        result.current.renderItem(
-          ({ onLoadFinished }) => {
-            onLoadFinished();
-          },
-          { index: 1 }
-        );
+        act(() => {
+          result.current.renderItem(
+            ({ onLoadFinished }) => {
+              onLoadFinished();
+            },
+            { index: 1 }
+          );
+        });
 
         expect(result.current.allLoaded).toBe(true);
       });
     });
 
     describe("Rendering wrapper", () => {
-      it("wraps the elements in the View with display: none style", () => {
+      it("wraps the elements in the View with display: none style", async () => {
         const element1 = { id: 1 };
         const element2 = { id: 2 };
         const mockData = [element1, element2];
 
         const { result } = renderHook(() => useSequentialRenderItem(mockData));
 
-        const { getByTestId } = render(
+        const res = render(
           result.current.renderItem(
             () => {
               return <View testID={"test"} />;
@@ -94,7 +95,9 @@ describe("flatList hooks", () => {
           )
         );
 
-        const element = getByTestId("sequential-river-wrapper-1");
+        const element = res.root.findByProps({
+          testID: "sequential-river-wrapper-1",
+        });
 
         expect(element.props.style.display).toEqual("none");
       });
@@ -106,14 +109,16 @@ describe("flatList hooks", () => {
 
         const { result } = renderHook(() => useSequentialRenderItem(mockData));
 
-        result.current.renderItem(
-          ({ onLoadFinished }) => {
-            onLoadFinished();
-          },
-          { item: element1, index: 0 }
-        );
+        act(() => {
+          result.current.renderItem(
+            ({ onLoadFinished }) => {
+              onLoadFinished();
+            },
+            { item: element1, index: 0 }
+          );
+        });
 
-        const { getByTestId } = render(
+        const { root } = render(
           result.current.renderItem(
             ({ onLoadFinished }) => {
               onLoadFinished();
@@ -124,7 +129,9 @@ describe("flatList hooks", () => {
           )
         );
 
-        const element = getByTestId("sequential-river-wrapper-1");
+        const element = root.findByProps({
+          testID: "sequential-river-wrapper-1",
+        });
 
         expect(element.props.style.display).toEqual("flex");
       });
@@ -136,7 +143,7 @@ describe("flatList hooks", () => {
 
         const { result } = renderHook(() => useSequentialRenderItem(mockData));
 
-        const { getByTestId } = render(
+        const { root } = render(
           result.current.renderItem(
             ({ onLoadFinished }) => {
               onLoadFinished();
@@ -147,7 +154,9 @@ describe("flatList hooks", () => {
           )
         );
 
-        const element = getByTestId("sequential-river-wrapper-1");
+        const element = root.findByProps({
+          testID: "sequential-river-wrapper-1",
+        });
 
         expect(element.props.style.display).toEqual("none");
       });

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -0,0 +1,39 @@
+import { reactHooksLogger } from "../../logger";
+import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+
+const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
+
+type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
+
+export const useHookModalScreenData = (): VariousScreenData | undefined => {
+  const hookModalState = useZappHooksModalState();
+
+  if (!hookModalState.state?.screenData) {
+    return;
+  }
+
+  try {
+    const screenData = hookModalState.state.screenData?.payload;
+    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+
+    if (hookPlugin?.screen_id) {
+      return {
+        ...screenData,
+        targetScreen: hookPlugin,
+      };
+    }
+
+    return hookModalState.state.screenData?.payload;
+  } catch (error) {
+    logger.error({
+      message: "Hook modal screen data creation failed",
+      data: {
+        error,
+        hookModalState,
+      },
+      jsOnly: true,
+    });
+
+    return hookModalState.state.screenData?.payload;
+  }
+};

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

@@ -14,10 +14,10 @@ const mocked_return_value = (tv) => ({
 });
 
 const platform = "android";
-let tv_flag = false;
+let mock_tv_flag = false;
 
 ReactNative.Dimensions.get = jest.fn(
-  (context) => mocked_return_value(tv_flag)[context]
+  (context) => mocked_return_value(mock_tv_flag)[context]
 );
 
 const mockRemoveFn = jest.fn();
@@ -43,7 +43,7 @@ jest.mock("react-native-safe-area-context", () => ({
 
 jest.mock("../../../reactUtils", () => ({
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
-  isTV: jest.fn(() => tv_flag),
+  isTV: jest.fn(() => mock_tv_flag),
 }));
 
 jest.mock("../../navigation", () => ({
@@ -134,20 +134,20 @@ describe("useDimensions", () => {
 
   describe("it applies the scale to the width & height if needed", () => {
     it("applies the scale on TV, and screen context", () => {
-      tv_flag = true;
-      const { screen } = mocked_return_value(tv_flag);
+      mock_tv_flag = true;
+      const { screen } = mocked_return_value(mock_tv_flag);
       const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
       expect(dimensions).toHaveProperty("scale", 1);
 
-      tv_flag = false;
+      mock_tv_flag = false;
     });
 
     it("doesn't apply the scale on mobile with screen context", () => {
-      tv_flag = false;
-      const { screen } = mocked_return_value(tv_flag);
+      mock_tv_flag = false;
+      const { screen } = mocked_return_value(mock_tv_flag);
       const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
@@ -156,8 +156,8 @@ describe("useDimensions", () => {
     });
 
     it("doesn't apply the scale on TV with window context", () => {
-      tv_flag = true;
-      const { window } = mocked_return_value(tv_flag);
+      mock_tv_flag = true;
+      const { window } = mocked_return_value(mock_tv_flag);
       const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.native.test.js

@@ -1,25 +1,14 @@
 import * as ReactNative from "react-native";
+import NativeDeviceInfo from "react-native/Libraries/Utilities/NativeDeviceInfo";
 
-const mockDimensionsGet = jest.fn(
-  (type) =>
-    ({
-      window: { width: 1, height: 1 },
-      screen: { width: 360, height: 540 },
-    }[type])
-);
+const mockDimensions = {
+  window: { width: 1, height: 1 },
+  screen: { width: 360, height: 540 },
+};
 
-ReactNative.Dimensions.get = mockDimensionsGet;
-
-const mockGetConstants = jest.fn().mockReturnValue({
-  Dimensions: {
-    window: { width: 360, height: 540 },
-    screen: { width: 360, height: 540 },
-  },
-});
+const mockDimensionsGet = jest.fn((type) => mockDimensions[type]);
 
-jest.mock("react-native/Libraries/Utilities/NativeDeviceInfo", () => ({
-  getConstants: mockGetConstants,
-}));
+ReactNative.Dimensions.get = mockDimensionsGet;
 
 const { Platform, Dimensions } = ReactNative;
 
@@ -34,27 +23,24 @@ describe("useDimensions > helpers ( native )", () => {
 
   it("should call Dimensions.get for window context", () => {
     getInitialDimensions("window");
-    expect(Dimensions.get).toBeCalled();
+    expect(Dimensions.get).toHaveBeenCalled();
   });
 
   it("should call Dimensions.get for screen context", () => {
     getInitialDimensions("screen");
-    expect(Dimensions.get).toBeCalled();
+    expect(Dimensions.get).toHaveBeenCalled();
   });
 
   it("should call NativeDeviceInfo.getConstants for ios when width === height", () => {
     Platform.OS = "ios";
 
-    jest.fn().mockReturnValue({
-      Dimensions: {
-        window: { width: 1, height: 1 },
-        screen: { width: 360, height: 540 },
-      },
-    });
+    const mockGetConstants = jest
+      .spyOn(NativeDeviceInfo, "getConstants")
+      .mockReturnValue({ Dimensions: mockDimensions });
 
     getInitialDimensions("window");
 
-    expect(Dimensions.get).toBeCalled();
-    expect(mockGetConstants).toBeCalled();
+    expect(Dimensions.get).toHaveBeenCalled();
+    expect(mockGetConstants).toHaveBeenCalled();
   });
 });

package/reactHooks/layout/useDimensions/helpers/__tests__/getInitialDimensions.test.js

@@ -5,7 +5,7 @@ const mockDimensionsGet = jest.fn(
     ({
       window: { width: 1, height: 1 },
       screen: { width: 360, height: 540 },
-    }[type])
+    })[type]
 );
 
 ReactNative.Dimensions.get = mockDimensionsGet;

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -52,6 +52,14 @@ export const useDimensions: UseDimensions = (
       ? { fullDimensions }
       : { ...fullDimensions };
 
+  if (options.updateForInactiveScreens === undefined) {
+    options.updateForInactiveScreens = true;
+  }
+
+  if (options.fullDimensions === undefined) {
+    options.fullDimensions = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -3,5 +3,8 @@ export const useNavigation = jest.fn(() => ({
   screenData: {
     name: "someName",
   },
+  videoModalState: {
+    visible: false,
+  },
   currentRoute: "someRoute",
 }));