@applicaster/zapp-react-native-utils 15.0.0-alpha.2004137882 → 15.0.0-alpha.2060204268

package/reactHooks/index.ts

@@ -15,3 +15,5 @@ export * from "./device";
 export * from "./screen";
 
 export * from "./state";
+
+export * from "./events";

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

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

@@ -1,11 +1,10 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
@@ -83,10 +82,44 @@ const hookModalContextState = {
   },
   setState: jest.fn(),
   resetState: jest.fn(),
+  hookPresentationMode: null,
 };
 
 const hooksModalPathname = `${ROUTE_TYPES.HOOKS_MODAL}/${hookModalContextState.state.screenData.payload.id}`;
 const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext",
+  () => {
+    const mockState = {
+      isRunningInBackground: false,
+      setIsRunningInBackground: jest.fn(),
+      setIsPresentingFullScreen: jest.fn(),
+      isPresentationFullScreen: true,
+      isHooksExecutionInProgress: true,
+      setIsHooksExecutionInProgress: jest.fn(),
+      state: {
+        path: "/home",
+        screenData: { payload: { id: "hookExecutedInModal" } },
+      },
+      setState: jest.fn(),
+      resetState: jest.fn(),
+      hookPresentationMode: null,
+    };
+
+    const mockHook = jest.fn((selector) => {
+      return selector ? selector(mockState) : mockState;
+    }) as jest.MockedFunction<any> & { getState: () => typeof mockState };
+
+    mockHook.getState = jest.fn(() => mockState);
+
+    return {
+      useZappHookModalStore: mockHook,
+      zappHookModalStore: mockHook,
+    };
+  }
+);
+
 const mockStore = configureMockStore();
 
 const store = mockStore({
@@ -125,13 +158,11 @@ const videoModalWrapper = ({ children }) => (
 
 const hookModalWrapper = ({ children }) => (
   <Provider store={store}>
-    <ZappHookModalContext.ReactContext.Provider value={hookModalContextState}>
-      <NavigationContext.Provider value={hookModalNavigator}>
-        <PathnameContext.Provider value={hooksModalPathname}>
-          {children}
-        </PathnameContext.Provider>
-      </NavigationContext.Provider>
-    </ZappHookModalContext.ReactContext.Provider>
+    <NavigationContext.Provider value={hookModalNavigator}>
+      <PathnameContext.Provider value={hooksModalPathname}>
+        {children}
+      </PathnameContext.Provider>
+    </NavigationContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,5 +1,6 @@
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { BackHandler } from "react-native";
+import { shallow } from "zustand/shallow";
 
 import {
   useContentTypes,
@@ -8,13 +9,13 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { pick } from "@applicaster/zapp-react-native-utils/utils";
 import { useNavbarState } from "../screen";
 import { useRivers } from "../state";
 import { useLayoutVersion } from "../layout";
@@ -88,6 +89,10 @@ export function isNavBarVisible(
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;
 
+    if (module === undefined) {
+      return showNavBar;
+    }
+
     if (module?.presentFullScreen) {
       return false;
     }
@@ -164,7 +169,17 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
+  } = useZappHookModalStore(
+    (state) =>
+      pick(state, [
+        "setState",
+        "resetState",
+        "setIsHooksExecutionInProgress",
+        "setIsPresentingFullScreen",
+        "setIsRunningInBackground",
+      ]),
+    shallow
+  );
 
   const plugins = usePlugins();
   const rivers = useRivers();

package/reactHooks/navigation/useRoute.ts

@@ -54,7 +54,9 @@ export const useRoute = (
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = useHookModalScreenData();
+  const hookModalScreenData = useHookModalScreenData(
+    !isHookModalPathname(pathname)
+  );
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/reactHooks/player/__tests__/useAutoSeek._test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 
 import { ON_HOLD_INTERVAL, SEEK_TYPE, SKIP_TIME_BASE } from "../const";

package/reactHooks/player/__tests__/useTapSeek._test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { useTapSeek } from "../useTapSeek";
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 const mockStore = configureStore([thunk]);
 

package/reactHooks/state/useRefWithInitialValue.ts

@@ -1,5 +1,9 @@
 import React from "react";
 
+type WithOptionalCleanup = {
+  cleanup?: () => void;
+};
+
 /**
  * returns a ref with an initial value that is lazily evaluated once
  * */
@@ -10,5 +14,11 @@ export const useRefWithInitialValue = <T>(initialValueGetter: () => T) => {
     ref.current = initialValueGetter();
   }
 
+  React.useEffect(() => {
+    return () => {
+      (ref.current as unknown as WithOptionalCleanup)?.cleanup?.();
+    };
+  }, []);
+
   return ref;
 };