@applicaster/zapp-react-native-utils 13.0.0-rc.2 → 13.0.0-rc.21

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/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/navigation/__tests__/index.test.tsx

@@ -135,10 +135,6 @@ const hookModalWrapper = ({ children }) => (
   </Provider>
 );
 
-jest.mock("../../../modalState", () => ({
-  useModalStore: jest.fn(),
-}));
-
 describe("navigation", () => {
   describe("useRoute", () => {
     describe("Main stack components", () => {

package/reactHooks/navigation/index.ts

@@ -1,9 +1,5 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint max-len: off */
-
-import React, { useContext, useEffect, useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
   useContentTypes,
@@ -11,34 +7,36 @@ import {
 } from "@applicaster/zapp-react-native-redux/hooks";
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
-import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import {
-  LONG_KEY_PRESS_TIMEOUT,
-  QUICK_BRICK_NAVBAR,
-  QUICK_BRICK_CONTENT,
-} from "@applicaster/quick-brick-core/const";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
-import {
-  getNavigationProps,
-  getRiverFromRoute,
-  getTargetRoute,
-} from "../../navigationUtils";
-import { platformSelect } from "../../reactUtils";
+import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
-import { getTargetScreenData } from "../screen/useTargetScreenData";
 
-import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
-import { useNavigation } from "./useNavigation";
-import { useModalStore } from "../../modalState";
-import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export { useNavigation } from "./useNavigation";
 
+export { useRoute } from "./useRoute";
+
+export { usePathname } from "./usePathname";
+
+export { useNavigationPluginData } from "./useNavigationPluginData";
+
+export { useNavigationType } from "./useNavigationType";
+
+export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
+
+export { useIsScreenActive } from "./useIsScreenActive";
+
+export {
+  useUniqueRouteSuffix,
+  useNavbarId,
+  useContentId,
+} from "./useUniqueRouteSuffix";
+
 /**
  * This function helps to decide wether the navbar should be presented on the screen
  * based on route and / or screen Data
@@ -125,8 +123,6 @@ export function isNavBarVisible(
 
 const { ProfilerBridge } = NativeModules;
 
-export const usePathname = () => React.useContext(PathnameContext);
-
 export const useBackHandler = (cb: () => boolean) => {
   React.useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
@@ -137,88 +133,6 @@ export const useBackHandler = (cb: () => boolean) => {
   }, [cb]);
 };
 
-// starts with modal/
-const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
-
-const isVideoModalPathname = (pathname: string) =>
-  /^video-modal\//.test(pathname);
-
-const isHookModalPathname = (pathname: string) =>
-  /^hooks-modal\//.test(pathname);
-
-const isHookPathname = (pathname: string) => /^\/hooks\//.test(pathname);
-
-type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
-
-export const useRoute = (): {
-  screenData: VariousScreenData;
-  pathname: string;
-} => {
-  const pathname = usePathname() || "";
-  const navigator = useNavigation();
-  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
-
-  const { plugins, contentTypes, rivers } = usePickFromState([
-    "plugins",
-    "rivers",
-    "contentTypes",
-  ]);
-
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
-
-  const modalScreenData = modalState.screen;
-
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
-
-  const videoModalScreenData =
-    navigator.videoModalState?.item &&
-    legacyScreenData(
-      {
-        entry: navigator.videoModalState?.item as ZappEntry,
-        screen: getTargetScreenData(
-          navigator.videoModalState?.item as ZappEntry,
-          rivers,
-          contentTypes
-        ),
-      },
-      plugins
-    );
-
-  // There are 4 route scenarios
-  // For regular screens take date from navigator stack.
-  // is path is model grab screenData from modal state
-  // if path is video modal grab screenData from video state
-  // if path is hook modal grab screenData from hook state
-  // if path is hook grab screenData from screenData
-
-  if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
-
-    return { screenData, pathname };
-  }
-
-  if (isVideoModalPathname(pathname)) {
-    const screenData = videoModalScreenData as LegacyNavigationScreenData;
-
-    return { screenData, pathname };
-  }
-
-  if (isHookModalPathname(pathname)) {
-    const screenData = hookModalScreenData;
-
-    return { screenData, pathname };
-  }
-
-  if (isHookPathname(pathname)) {
-    return { screenData: screenDataContext, pathname };
-  }
-
-  const screenData = screenDataContext;
-
-  return { screenData, pathname };
-};
-
 type Callbacks = Partial<{
   handleHookPresent: ({
     route,
@@ -320,16 +234,19 @@ export const useZappHooksForEntry = (
         callbacks?.handleHookComplete?.(props);
       };
 
-      const hookManager = HooksManager(hooksOptions)
+      const hookManager = HooksManager(hooksOptions);
+
+      hookManager.subscriber
         .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
         .on(HOOKS_EVENTS.ERROR, handleHookError)
         .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
         .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
-        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete)
-        .handleHooks(entry);
+        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete);
+
+      hookManager.handleHooks(entry);
 
       return () => {
-        hookManager
+        hookManager.subscriber
           .removeHandler(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .removeHandler(HOOKS_EVENTS.ERROR, handleHookError)
           .removeHandler(HOOKS_EVENTS.CANCEL, handleHookCancel)
@@ -339,34 +256,6 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export enum MenuTypes {
-  drawer = "DRAWER",
-  bottomTabBar = "BOTTOM_TAB_BAR",
-}
-
-export const useNavigationPluginData = (): ZappNavigation | undefined => {
-  const {
-    screenData: useRouteScreenData,
-  }: { screenData: QuickBrickNavigationData | null } = useRoute();
-
-  const navigations = useRouteScreenData?.targetScreen
-    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
-    : (useRouteScreenData as ZappRiver).navigations;
-
-  const navigationMenu = navigations?.find((nav) => nav.category === "menu");
-
-  return navigationMenu;
-};
-
-export const useNavigationType = (): MenuTypes => {
-  const navigationMenu = useNavigationPluginData();
-
-  return !navigationMenu ||
-    navigationMenu.navigation_type === "quick_brick_side_menu"
-    ? MenuTypes.drawer
-    : MenuTypes.bottomTabBar;
-};
-
 export const useProfilerLogging = () => {
   const logTimestamp = (data: string) =>
     InteractionManager.runAfterInteractions(() => {
@@ -411,81 +300,3 @@ export const useIsNavBarVisible = (): boolean => {
 
   return useMemo(() => visible, [visible]);
 };
-
-const useGetNavBarTopBorderWidth = (): number => {
-  const navigator = useNavigation();
-
-  const navProps = getNavigationProps({
-    navigator,
-    title: "",
-    category: "menu",
-  });
-
-  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
-};
-
-const TAB_BAR_HEIGHT_IOS = 49;
-const TAB_BAR_HEIGHT_ANDROID = 56;
-
-const useGetTabBarHeight = () =>
-  platformSelect({
-    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
-    android: TAB_BAR_HEIGHT_ANDROID,
-  }) as number;
-
-export const useGetBottomTabBarHeight = (): number => {
-  const topBorderWidth = useGetNavBarTopBorderWidth();
-  const tabBarHeight = useGetTabBarHeight();
-
-  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
-
-  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
-};
-
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
-
-  if (
-    videoModalState.visible &&
-    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
-  ) {
-    return false;
-  }
-
-  return pathname === currentRoute;
-};
-
-type Return = (prefix: string) => string;
-
-export const useUniqueRouteSuffix = (): Return => {
-  const pathname = usePathname();
-  const { currentRoute } = useNavigation();
-
-  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
-
-  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
-    if (isWeb()) {
-      // we should use extended route prefix only on Web, where we have stack-navigator
-      return `${prefix}___${suffix}`;
-    }
-
-    // for other platforms use previous version
-    return prefix;
-  }, []);
-
-  return withUniqueRouteSuffix;
-};
-
-export const useNavbarId = () => {
-  const withUniqueRouteSuffix = useUniqueRouteSuffix();
-
-  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
-};
-
-export const useContentId = () => {
-  const withUniqueRouteSuffix = useUniqueRouteSuffix();
-
-  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
-};

package/reactHooks/navigation/useGetBottomTabBarHeight.ts

@@ -0,0 +1,12 @@
+import { useGetNavBarTopBorderWidth } from "./useGetNavBarTopBorderWidth";
+import { useGetTabBarHeight } from "./useGetTabBarHeight";
+import { MenuTypes, useNavigationType } from "./useNavigationType";
+
+export const useGetBottomTabBarHeight = (): number => {
+  const topBorderWidth = useGetNavBarTopBorderWidth();
+  const tabBarHeight = useGetTabBarHeight();
+
+  const isBottomBarNavigation = useNavigationType() === MenuTypes.bottomTabBar;
+
+  return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
+};

package/reactHooks/navigation/useGetNavBarTopBorderWidth.ts

@@ -0,0 +1,14 @@
+import { getNavigationProps } from "../../navigationUtils";
+import { useNavigation } from "./useNavigation";
+
+export const useGetNavBarTopBorderWidth = (): number => {
+  const navigator = useNavigation();
+
+  const navProps = getNavigationProps({
+    navigator,
+    title: "",
+    category: "menu",
+  });
+
+  return Number(((navProps?.styles as any)?.top_border_width as number) ?? 0);
+};

package/reactHooks/navigation/useGetTabBarHeight.ts

@@ -0,0 +1,12 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { platformSelect } from "../../reactUtils";
+
+const TAB_BAR_HEIGHT_IOS = 49;
+const TAB_BAR_HEIGHT_ANDROID = 56;
+
+export const useGetTabBarHeight = () =>
+  platformSelect({
+    ios: TAB_BAR_HEIGHT_IOS + (useSafeAreaInsets().bottom ?? 0),
+    android: TAB_BAR_HEIGHT_ANDROID,
+  }) as number;

package/reactHooks/navigation/useIsScreenActive.ts

@@ -0,0 +1,17 @@
+import { useNavigation } from "./useNavigation";
+import { usePathname } from "./usePathname";
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
+};

package/reactHooks/navigation/useNavigationPluginData.ts

@@ -0,0 +1,15 @@
+import { useRoute } from "./useRoute";
+
+export const useNavigationPluginData = (): ZappNavigation | undefined => {
+  const {
+    screenData: useRouteScreenData,
+  }: { screenData: QuickBrickNavigationData | null } = useRoute();
+
+  const navigations = useRouteScreenData?.targetScreen
+    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
+    : (useRouteScreenData as ZappRiver).navigations;
+
+  const navigationMenu = navigations?.find((nav) => nav.category === "menu");
+
+  return navigationMenu;
+};

package/reactHooks/navigation/useNavigationType.ts

@@ -0,0 +1,15 @@
+import { useNavigationPluginData } from "./useNavigationPluginData";
+
+export enum MenuTypes {
+  drawer = "DRAWER",
+  bottomTabBar = "BOTTOM_TAB_BAR",
+}
+
+export const useNavigationType = (): MenuTypes => {
+  const navigationMenu = useNavigationPluginData();
+
+  return !navigationMenu ||
+    navigationMenu.navigation_type === "quick_brick_side_menu"
+    ? MenuTypes.drawer
+    : MenuTypes.bottomTabBar;
+};

package/reactHooks/navigation/usePathname.ts

@@ -0,0 +1,4 @@
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+import React from "react";
+
+export const usePathname = () => React.useContext(PathnameContext);