@applicaster/zapp-react-native-utils 13.0.0-alpha.1124981321 → 13.0.0-alpha.1173186260

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/navigation/__mocks__/useNavigation.ts

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

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

@@ -310,14 +310,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns false if it's secondary nav bar and hide_secondary_level_menu is true", () => {
+    it("returns false if it's secondary nav bar and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -329,14 +329,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(false);
     });
 
-    it("returns true if it's secondary nav bar and hide_secondary_level_menu is false", () => {
+    it("returns true if it's secondary nav bar and show_secondary_level_menu is true", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: false,
+                show_secondary_level_menu: true,
               },
             },
           ],
@@ -348,14 +348,14 @@ describe("navigation", () => {
       expect(navBarVisible).toBe(true);
     });
 
-    it("returns true if it's first level menu and hide_secondary_level_menu is true", () => {
+    it("returns true if it's first level menu and show_secondary_level_menu is false", () => {
       const navBarVisible = isNavBarVisible(
         "",
         {
           navigations: [
             {
               styles: {
-                hide_secondary_level_menu: true,
+                show_secondary_level_menu: false,
               },
             },
           ],
@@ -366,16 +366,5 @@ describe("navigation", () => {
 
       expect(navBarVisible).toBe(true);
     });
-
-    it("returns true otherwise", () => {
-      const navBarVisible = isNavBarVisible(
-        "",
-        { navigations: [] } as any,
-        true,
-        true
-      );
-
-      expect(navBarVisible).toBe(true);
-    });
   });
 });

package/reactHooks/navigation/index.ts

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from "react";
-import { BackHandler, InteractionManager, NativeModules } from "react-native";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { BackHandler } from "react-native";
 
 import {
   useContentTypes,
@@ -31,6 +31,8 @@ export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
 export { useIsScreenActive } from "./useIsScreenActive";
 
+export { useProfilerLogging } from "./useProfilerLogging";
+
 export {
   useUniqueRouteSuffix,
   useNavbarId,
@@ -106,11 +108,13 @@ export function isNavBarVisible(
     return false;
   }
 
-  const hideSecondaryLevel = screenData?.navigations?.some(
-    (navigation) => navigation.styles?.hide_secondary_level_menu
-  );
+  const showSecondaryLevel =
+    !isTV() ||
+    screenData?.navigations?.some(
+      (navigation) => navigation.styles?.show_secondary_level_menu
+    );
 
-  if (canGoBack && hideSecondaryLevel) {
+  if (canGoBack && !showSecondaryLevel) {
     return false;
   }
 
@@ -121,10 +125,8 @@ export function isNavBarVisible(
   return true;
 }
 
-const { ProfilerBridge } = NativeModules;
-
 export const useBackHandler = (cb: () => boolean) => {
-  React.useEffect(() => {
+  useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
 
     return () => {
@@ -158,7 +160,7 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = React.useContext(ZappHookModalContext.ReactContext);
+  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
 
   const {
     appData: { layoutVersion },
@@ -256,22 +258,10 @@ export const useZappHooksForEntry = (
   }, [entry.id]);
 };
 
-export const useProfilerLogging = () => {
-  const logTimestamp = (data: string) =>
-    InteractionManager.runAfterInteractions(() => {
-      if (ProfilerBridge && data) {
-        ProfilerBridge.updateTimer("navigation", data, Date.now());
-      }
-    });
-
-  return logTimestamp;
-};
-
 export const useRunIfLongPress = (
   options = { timeout: LONG_KEY_PRESS_TIMEOUT }
 ) => {
-  const pressTimeout =
-    React.useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
+  const pressTimeout = useRef<Nullable<ReturnType<typeof setTimeout>>>(null);
 
   const resetTimeout = () => {
     clearTimeout(pressTimeout.current as ReturnType<typeof setTimeout>);

package/reactHooks/navigation/useGetTabBarHeight.ts

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

package/reactHooks/navigation/useProfilerLogging.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import { InteractionManager, NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+export const useProfilerLogging = () =>
+  useCallback(
+    (data: string) =>
+      InteractionManager.runAfterInteractions(() => {
+        if (ProfilerBridge && data) {
+          ProfilerBridge.updateTimer("navigation", data, Date.now());
+        }
+      }),
+    []
+  );

package/reactHooks/navigation/useRoute.ts

@@ -7,12 +7,11 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
-
 import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useHookModalScreenData } from "../hookModal/hooks/useHookModalScreenData";
 
 import { useNavigation } from "./useNavigation";
-import { useModalStore } from "../../modalState";
+import { useModalStoreState } from "../../modalState";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 import { usePathname } from "./usePathname";
 
@@ -44,12 +43,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const { modalState } = useModalStore();
-  const hookModalState = useZappHooksModalState();
+  const modalState = useModalStoreState();
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = hookModalState.state.screenData?.payload;
+  const hookModalScreenData = useHookModalScreenData();
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

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

@@ -0,0 +1,69 @@
+import { renderHook } from "@testing-library/react-hooks";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+const {
+  useScreenConfiguration,
+} = require("@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration");
+
+const { useScreenBackgroundColor } = require("../useScreenBackgroundColor");
+
+describe("useScreenBackgroundColor", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should return the background color from screen configuration", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "#FF0000",
+    });
+
+    // Render the hook with a screen ID
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("#FF0000");
+
+    expect(useScreenConfiguration).toHaveBeenCalledWith("test-screen-id");
+  });
+
+  it("should return 'transparent' when background color is empty", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: "",
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is null", () => {
+    useScreenConfiguration.mockReturnValue({
+      backgroundColor: null,
+    });
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+
+  it("should return 'transparent' when background color is undefined", () => {
+    useScreenConfiguration.mockReturnValue({});
+
+    const { result } = renderHook(() =>
+      useScreenBackgroundColor("test-screen-id")
+    );
+
+    expect(result.current).toBe("transparent");
+  });
+});

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -1,23 +1,11 @@
-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";
 
+const DEFAULT_BACKGROUND_FALLBACK = "transparent";
+
 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;
+  return ifEmptyUseFallback(screenBackgroundColor, DEFAULT_BACKGROUND_FALLBACK);
 };

package/reactHooks/state/useRefWithInitialValue.ts

@@ -0,0 +1,14 @@
+import React from "react";
+
+/**
+ * returns a ref with an initial value that is lazily evaluated once
+ * */
+export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
+  const ref = React.useRef<T>(null);
+
+  if (ref.current === null) {
+    ref.current = initialValueGetter();
+  }
+
+  return ref;
+};

package/reactHooks/state/useStateFromSubscribe.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import type { Subject } from "rxjs";
+
+export const useStateFromSubscribe = <T, U>(
+  subject: Subject<T>,
+  onUpdate: (
+    observerValue: T,
+    next: React.Dispatch<React.SetStateAction<U>>
+  ) => void,
+  initialValue: U
+) => {
+  const [state, setState] = useState<U>(initialValue);
+
+  useEffect(() => {
+    const subscription = subject.subscribe((observer) =>
+      onUpdate(observer, setState)
+    );
+
+    return () => subscription.unsubscribe();
+  }, [subject]);
+
+  return state;
+};

package/reactHooks/useListenEventBusEvent.ts

@@ -23,5 +23,5 @@ export const useListenEventBusEvent = (
         sub.remove(); // stop listening to DeviceEventEmitter
       };
     }
-  }, []);
+  }, [handler, subscriptionID, source, events]);
 };

package/reactUtils/__tests__/__snapshots__/reactUtilsHelpers.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
+exports[`reactUtils helpers addLifeCycleMethods attaches the lifecycle method to the component 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -8,7 +8,7 @@ exports[`addLifeCycleMethods attaches the lifecycle method to the component 1`]
 </View>
 `;
 
-exports[`attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
+exports[`reactUtils helpers attachMethodToPrototype attaches a lifecycle method to the component's prototype 1`] = `
 <View>
   <Text>
     I'm a class component
@@ -16,6 +16,18 @@ exports[`attachMethodToPrototype attaches a lifecycle method to the component's
 </View>
 `;
 
-exports[`attachMethodToPrototype preserves any existing lifecycle method 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers attachMethodToPrototype preserves any existing lifecycle method 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;
 
-exports[`wrapInClass wraps the stateless component in a class 1`] = `<StatelessComponent />`;
+exports[`reactUtils helpers wrapInClass wraps the stateless component in a class 1`] = `
+<View>
+  <Text>
+    I'm a stateless component
+  </Text>
+</View>
+`;

package/reactUtils/__tests__/reactUtils.test.js

@@ -7,7 +7,7 @@ import {
   componentDidMount,
 } from "./fixtures";
 
-import { attachLifeCycleMethods, createReactRef, mergeChildrenProps } from "..";
+import { attachLifeCycleMethods, mergeChildrenProps } from "..";
 
 describe("attachLifeCycleMethods", () => {
   let addLifeCycleMethodsSpy;
@@ -41,24 +41,6 @@ describe("attachLifeCycleMethods", () => {
   });
 });
 
-describe("createReactRef", () => {
-  it("calls the React.createRef function if it exists", () => {
-    jest.clearAllMocks();
-
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-  });
-
-  it("calls the polyfill if React.createRef doesn't exist", () => {
-    jest.clearAllMocks();
-    const originalCreateRef = React.createRef;
-    React.createRef = undefined;
-    const ref = createReactRef();
-    expect(ref).toHaveProperty("current");
-    React.createRef = originalCreateRef;
-  });
-});
-
 describe("mergeChildrenProps", () => {
   it("returns the cloned children with the merged props", () => {
     const Egg = () => React.createElement("Egg");

package/reactUtils/__tests__/reactUtilsHelpers.test.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
 
 import {
   isClassComponent,
@@ -20,98 +19,100 @@ import {
 } from "./fixtures";
 
 describe("reactUtils helpers", () => {
-  it("should have isNilOrEmpty", () => {
-    expect(isNilOrEmpty).toBeDefined();
-    expect(isNilOrEmpty(null)).toBeTruthy();
-    expect(isNilOrEmpty(undefined)).toBeTruthy();
-    expect(isNilOrEmpty("")).toBeTruthy();
-    expect(isNilOrEmpty([])).toBeTruthy();
+  describe("isNilOrEmpty", () => {
+    it("should return correct output", () => {
+      expect(isNilOrEmpty).toBeDefined();
+      expect(isNilOrEmpty(null)).toBeTruthy();
+      expect(isNilOrEmpty(undefined)).toBeTruthy();
+      expect(isNilOrEmpty("")).toBeTruthy();
+      expect(isNilOrEmpty([])).toBeTruthy();
+    });
   });
-});
 
-describe("isClassComponent", () => {
-  it("returns true if the component is a class component", () => {
-    expect(isClassComponent(ClassComponent)).toBe(true);
-  });
+  describe("isClassComponent", () => {
+    it("returns true if the component is a class component", () => {
+      expect(isClassComponent(ClassComponent)).toBe(true);
+    });
 
-  it("returns false otherwise", () => {
-    expect(isClassComponent(StatelessComponent)).toBe(false);
+    it("returns false otherwise", () => {
+      expect(isClassComponent(StatelessComponent)).toBe(false);
+    });
   });
-});
 
-describe("attachMethodToPrototype", () => {
-  const initialWrapper = shallow(<ClassComponent />);
+  describe("attachMethodToPrototype", () => {
+    const initialWrapper = render(<ClassComponent />);
 
-  expect(initialWrapper.instance()).not.toHaveProperty(
-    COMPONENT_DID_MOUNT_METHOD
-  );
-
-  afterEach(() => {
-    componentDidMount.mockClear();
-  });
-
-  it("attaches a lifecycle method to the component's prototype", () => {
-    const NewComponent = attachMethodToPrototype(ClassComponent)(
-      componentDidMount,
+    expect(initialWrapper.toJSON()).not.toHaveProperty(
       COMPONENT_DID_MOUNT_METHOD
     );
 
-    const wrapper = shallow(<NewComponent />);
+    afterEach(() => {
+      componentDidMount.mockClear();
+    });
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(wrapper.instance()).toHaveProperty(COMPONENT_DID_MOUNT_METHOD);
-    expect(componentDidMount).toHaveBeenCalled();
-  });
+    it("attaches a lifecycle method to the component's prototype", () => {
+      const NewComponent = attachMethodToPrototype(ClassComponent)(
+        componentDidMount,
+        COMPONENT_DID_MOUNT_METHOD
+      );
 
-  it("preserves any existing lifecycle method", () => {
-    const NewComponent = attachMethodToPrototype(ComponentWithLifeCycle)(
-      componentDidMount,
-      COMPONENT_DID_MOUNT_METHOD
-    );
+      const wrapper = render(<NewComponent />);
 
-    expect(componentDidMount).not.toHaveBeenCalled();
+      expect(wrapper.toJSON(wrapper)).toMatchSnapshot();
+      expect(new NewComponent()).toHaveProperty(COMPONENT_DID_MOUNT_METHOD);
+      expect(componentDidMount).toHaveBeenCalled();
+    });
 
-    const wrapper = shallow(<NewComponent />);
+    it("preserves any existing lifecycle method", () => {
+      const NewComponent = attachMethodToPrototype(ComponentWithLifeCycle)(
+        componentDidMount,
+        COMPONENT_DID_MOUNT_METHOD
+      );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(componentDidMount).toHaveBeenCalled();
-    expect(existingMethod).toHaveBeenCalled();
-  });
-});
+      expect(componentDidMount).not.toHaveBeenCalled();
 
-describe("wrapInClass", () => {
-  let NewComponent;
-  let wrapper;
+      const wrapper = render(<NewComponent />);
 
-  beforeEach(() => {
-    NewComponent = wrapInClass(StatelessComponent);
-    wrapper = shallow(<NewComponent />);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(componentDidMount).toHaveBeenCalled();
+      expect(existingMethod).toHaveBeenCalled();
+    });
   });
 
-  it("wraps the stateless component in a class", () => {
-    expect(isClassComponent(NewComponent)).toBe(true);
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-});
+  describe("wrapInClass", () => {
+    let NewComponent;
+    let wrapper;
 
-describe("addLifeCycleMethods", () => {
-  let NewComponent;
-  let wrapper;
+    beforeEach(() => {
+      NewComponent = wrapInClass(StatelessComponent);
+      wrapper = render(<NewComponent />);
+    });
 
-  beforeEach(() => {
-    NewComponent = addLifeCycleMethods({ componentDidMount })(ClassComponent);
-    wrapper = shallow(<NewComponent />);
+    it("wraps the stateless component in a class", () => {
+      expect(isClassComponent(NewComponent)).toBe(true);
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
   });
 
-  afterEach(() => {
-    componentDidMount.mockClear();
-  });
+  describe("addLifeCycleMethods", () => {
+    let NewComponent;
+    let wrapper;
 
-  it("attaches the lifecycle method to the component", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
+    beforeEach(() => {
+      NewComponent = addLifeCycleMethods({ componentDidMount })(ClassComponent);
+      wrapper = render(<NewComponent />);
+    });
+
+    afterEach(() => {
+      componentDidMount.mockClear();
+    });
+
+    it("attaches the lifecycle method to the component", () => {
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
 
-  it("adds the lifecycle method to the component", () => {
-    expect(componentDidMount).toHaveBeenCalled();
+    it("adds the lifecycle method to the component", () => {
+      expect(componentDidMount).toHaveBeenCalled();
+    });
   });
 });