@applicaster/zapp-react-native-utils 12.0.0-alpha.3977160850 → 12.0.0-alpha.4337072244

package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 import * as ReactNative from "react-native";
 
@@ -44,22 +48,47 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useNavigation: () => null,
+  useIsScreenActive: () => true,
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -68,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -86,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -112,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -127,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -140,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/types/index.ts

@@ -2,6 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {
@@ -20,6 +21,7 @@ export type Options = {
   excludeStatusBar?: boolean;
   rounded?: boolean;
   deviceInfo?: boolean;
+  updateForInactiveScreens?: boolean;
 };
 
 export type Context = "window" | "screen";

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,13 +1,16 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
+import { useIsScreenActive } from "../../navigation";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -32,8 +35,11 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -47,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -73,7 +79,7 @@ export const useDimensions: UseDimensions = (
 
       if (newDimensions.width === newDimensions.height) {
         /**
-         * Ignoring case occured on iOS when Dimensions.get sometimes returning
+         * Ignoring case occurred on iOS when Dimensions.get sometimes returning
          * wrong `window` sizes
          * when switch background -> foreground state.
          * ( TODO fix when 1:1 aspect ratio will be used )
@@ -81,8 +87,8 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+      } else if (isActive || options.updateForInactiveScreens) {
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };
@@ -92,7 +98,7 @@ export const useDimensions: UseDimensions = (
     return () => {
       activeSubscription.remove();
     };
-  }, []);
+  }, [isActive]);
 
   const memoizedDimensions = useMemo(() => {
     return { ...applyOptions(dimensions), statusBarHeight };

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,11 +15,26 @@ export const mockMenu: ZappNavigation = {
   // preset_id?: null | unknown;
 };
 
+export const useRoute = jest.fn(() => ({
+  screenData: {
+    name: "someName",
+  },
+  pathname: "someRoute",
+}));
+
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
+  activeRiver: {
+    id: "someId",
+  },
   currentRoute: "someRoute",
 }));
 
 export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
+
+export const useIsScreenActive = jest.fn().mockReturnValue(true);

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -0,0 +1,7 @@
+export const useNavigation = jest.fn(() => ({
+  data: {},
+  screenData: {
+    name: "someName",
+  },
+  currentRoute: "someRoute",
+}));

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

@@ -45,10 +45,19 @@ const videoItem = {
   type: { value: "video" },
 };
 
+const mockGetStackForPathname = jest.fn().mockReturnValue(homeStack);
+
 const mainStackNavigator = {
-  getStackForPathname: jest.fn().mockReturnValue(homeStack),
+  getStackForPathname: mockGetStackForPathname,
   getModalState: () => {},
   videoModalState: {},
+  canGoBack: jest.fn(),
+};
+
+const _createWrapper = (Wrapper, props) => {
+  return function CreatedWrapper({ children }: any) {
+    return <Wrapper {...props}>{children}</Wrapper>;
+  };
 };
 
 const videoModalNavigator = {
@@ -85,10 +94,16 @@ const store = mockStore({
   contentTypes,
 });
 
-const mainStackWrapper = ({ children }) => (
+const mainStackWrapper = ({
+  children,
+  navigator = {},
+  pathname = homeStack.route,
+}) => (
   <Provider store={store}>
-    <NavigationContext.Provider value={mainStackNavigator}>
-      <PathnameContext.Provider value={homeStack.route}>
+    <NavigationContext.Provider
+      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+    >
+      <PathnameContext.Provider value={pathname}>
         {children}
       </PathnameContext.Provider>
     </NavigationContext.Provider>

package/reactHooks/navigation/index.ts

@@ -19,9 +19,9 @@ import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Co
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import {
+  getNavigationProps,
   getRiverFromRoute,
   getTargetRoute,
-  getNavigationProps,
 } from "../../navigationUtils";
 import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
@@ -146,6 +146,15 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
+
+  /**
+   * compose `useRoute()` output data
+   */
+  const composeRouteData = (screenData: VariousScreenData) => ({
+    screenData,
+    pathname,
+  });
+
   const navigator = useNavigation();
 
   const { plugins, contentTypes, rivers } = usePickFromState([
@@ -157,9 +166,7 @@ export const useRoute = (): {
   const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
-
   const modalScreenData = modalState.screen;
-
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -193,35 +200,63 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
-
-    return { screenData, pathname };
+    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
   }
 
   if (isVideoModalPathname(pathname)) {
-    const screenData = videoModalScreenData as LegacyNavigationScreenData;
-
-    return { screenData, pathname };
+    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
   }
 
   if (isHookModalPathname(pathname)) {
-    const screenData = hookModalScreenData;
-
-    return { screenData, pathname };
+    return composeRouteData(hookModalScreenData);
   }
 
   if (isHookPathname(pathname)) {
-    const screenData =
-      "hookPlugin" in currentRouteScreenData
-        ? currentRouteScreenData
-        : navigator.screenData;
+    /**
+     * HACK
+     *
+     * This condition relies on hacky approach to get the current hook screen data
+     * using navigator.screenData for some cases.
+     * This is used when hook is in sequence.
+     */
+
+    // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+    if (!currentStack) {
+      return composeRouteData(navigator.screenData);
+    }
+
+    const isValidHookInCurrentRouteScreenData =
+      "hookPlugin" in currentRouteScreenData &&
+      !!currentRouteScreenData.hookPlugin?.module;
+
+    let screenData;
 
-    return { screenData, pathname };
+    // case 2: stack has valid hook data
+    if (isValidHookInCurrentRouteScreenData) {
+      screenData = currentRouteScreenData;
+    }
+
+    const navigatorScreenData = navigator.screenData as NavigatorEntry;
+
+    // case 3: current hookPlugin is missing weight, but navigator.screenData has weight, use navigator.screenData
+    if (
+      screenData.hookPlugin.identifier ===
+        navigatorScreenData?.hookPlugin?.identifier &&
+      !screenData.hookPlugin?.weight &&
+      navigatorScreenData?.hookPlugin?.weight
+    ) {
+      screenData = navigator.screenData;
+    }
+
+    return composeRouteData(screenData);
   }
 
-  const screenData = currentRouteScreenData;
+  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+  if (!currentStack) {
+    return composeRouteData(navigator.screenData);
+  }
 
-  return { screenData, pathname };
+  return composeRouteData(currentRouteScreenData);
 };
 
 type Callbacks = Partial<{
@@ -446,3 +481,33 @@ export const useGetBottomTabBarHeight = (): number => {
 
   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) => {
+    return `${prefix}___${suffix}`;
+  }, []);
+
+  return withUniqueRouteSuffix;
+};

package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 
@@ -12,6 +12,8 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/screen/__mocks__/useScreenContext.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import { View } from "react-native";
 
-const mockData: NavigationScreenData = {
+const mockData = {
   screen: {
     id: "screen-id",
     name: "screen",
@@ -40,3 +40,5 @@ const mockData: NavigationScreenData = {
 };
 
 export const useScreenContext = jest.fn().mockReturnValue(mockData);
+
+export const useNavbarState = () => ({ visible: true });

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -3,23 +3,28 @@ import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 
 const mockStore = configureStore([thunk]);
 
-import { useCurrentScreenData } from "../useCurrentScreenData";
-
-describe("useScreenData", function () {
-  const river_id_2: ZappRiver = {
-    name: "River 2",
-    id: "A1234",
-    home: false,
-    home_offline: false,
-    supports_offline: false,
-    navigations: [],
-    hooks: { preload_plugins: [] },
-  };
-
+const river_id_2: ZappRiver = {
+  name: "River 2",
+  id: "A1234",
+  home: false,
+  home_offline: false,
+  supports_offline: false,
+  navigations: [],
+  hooks: { preload_plugins: [] },
+};
+
+jest.mock("../useScreenContext", () => ({
+  useScreenContext: () => ({
+    screen: river_id_2,
+  }),
+}));
+
+const { useCurrentScreenData } = require("../useCurrentScreenData");
+
+describe("useScreenData", () => {
   const river_id_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -27,17 +32,10 @@ describe("useScreenData", function () {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <NavigationContext.Provider
-      value={{
-        currentRoute: "/river/river_id_1/river/river_id_2",
-        data: { screen: river_id_2 },
-      }}
-    >
-      <Provider store={store}>{children}</Provider>
-    </NavigationContext.Provider>
+    <Provider store={store}>{children}</Provider>
   );
 
-  it("should return river data for the current screen/route", function () {
+  it("should return river data for the current screen/route", () => {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

@@ -10,3 +10,5 @@ export {
   useNavbarState,
   useSetNavbarState,
 } from "./useScreenContext";
+
+export { useScreenBackgroundColor } from "./useScreenBackgroundColor";

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+export const useScreenBackgroundColor = (screenId: string): string => {
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(screenId);
+
+  const theme = useTheme();
+
+  const themeBackgroundColor = React.useMemo(
+    () => theme.app_background_color,
+    [theme.app_background_color]
+  );
+
+  const backgroundColor = ifEmptyUseFallback(
+    screenBackgroundColor,
+    themeBackgroundColor
+  );
+
+  return backgroundColor;
+};

package/reactHooks/screen/useScreenContext.ts

@@ -2,11 +2,12 @@ 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";
+import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Components/Layout/TV";
 
-function useScreenContextV2() {
+export function useScreenContextV2() {
   return useContext(ScreenContext);
 }
 
@@ -45,8 +46,8 @@ export function useSetNavbarState() {
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
 
-  const screenKey = useMemo(() => navigator?.key, [navigator]);
-  const screenData = useMemo(() => navigator?.data, [screenKey]);
+  const screenData = useContext(ScreenDataContext);
+
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();

package/reactHooks/screen/useScreenData.ts

@@ -4,7 +4,7 @@ import { useRivers } from "../state";
 
 const logger = utilsLogger.addSubsystem("useScreenData");
 
-export const useScreenData = (screenId?: string): ZappRiver => {
+export const useScreenData = (screenId: string): ZappRiver => {
   const rivers = useRivers();
 
   React.useEffect(() => {

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 export function getTargetScreenData(
   entry: ZappEntry,
@@ -35,6 +36,12 @@ export function getTargetScreenData(
   return rivers?.[screenId];
 }
 
+export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
+  const { rivers, contentTypes } = appStore.get(["rivers", "contentTypes"]);
+
+  return getTargetScreenData(entry, rivers, contentTypes);
+}
+
 export const useTargetScreenData = (entry: ZappEntry) => {
   const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
 

package/reactHooks/useListenEventBusEvent.ts

@@ -13,10 +13,7 @@ export const useListenEventBusEvent = (
     // TODO: remove after implementing ReactNativeEventBusBridge on iOS
     if (Platform.OS === "android") {
       // subscribe to DeviceEventEmitter using subsciption ID
-      const sub = DeviceEventEmitter.addListener(
-        subscriptionID,
-        handler
-      );
+      const sub = DeviceEventEmitter.addListener(subscriptionID, handler);
 
       // ask native to start routing these events to RN
       ReactNativeEventBusBridge.subscribe(subscriptionID, { [source]: events });