@applicaster/zapp-react-native-utils 15.0.0-alpha.8680244503 → 15.0.0-alpha.9102777840

package/reactHooks/feed/__tests__/{useInflatedUrl.test.ts → useInflatedUrl.test.tsx}

@@ -1,3 +1,34 @@
+import React from "react";
+
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useGetUrlInflater,
+} from "../useInflatedUrl";
+
+import { reactHooksLogger } from "../../logger";
+
+jest.mock("../../navigation", () => ({
+  useRoute: () => ({ pathname: "/mock/path" }),
+}));
+
+// mock contexts hooks
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: {
+    useZappPipesContext: () => [
+      { id: "entry-1", extensions: { showId: "A123" } },
+    ],
+  },
+  ZappPipesSearchContext: {
+    useZappPipesContext: () => ["user%20query"],
+  },
+  ZappPipesScreenContext: {
+    useZappPipesContext: () => [{ id: "screen-1" }],
+  },
+}));
+
 jest.mock("../../logger", () => ({
   reactHooksLogger: {
     warning: jest.fn(),
@@ -5,13 +36,6 @@ jest.mock("../../logger", () => ({
   },
 }));
 
-const {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} = require("../useInflatedUrl");
-
-const { reactHooksLogger } = require("../../logger");
-
 let mockStore;
 
 describe("getInflatedDataSourceUrl", () => {
@@ -188,3 +212,34 @@ describe("getSearchContext", () => {
     expect(result).toHaveProperty(mapping.queryParam.property, searchContext);
   });
 });
+
+describe("useGetUrlInflater", () => {
+  const { renderHook } = require("@testing-library/react-native");
+
+  it("returns original url when mapping is not provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: WrappedWithProviders,
+    });
+
+    const src = "https://foo.com/feed";
+    expect(result.current(src)).toBe(src);
+  });
+
+  it("inflates url using entry/search/screen contexts when mapping provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders>{children}</WrappedWithProviders>
+      ),
+    });
+
+    const source = "https://foo.com/shows/{{showId}}?q={{q}}";
+
+    const mapping = {
+      showId: { source: "entry", property: "extensions.showId" },
+      q: { source: "search", property: "q" },
+    };
+
+    const url = result.current(source, mapping);
+    expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
+  });
+});

package/reactHooks/feed/index.ts

@@ -1,5 +1,3 @@
-export { useFeedRefresh, feedRefreshLogger } from "./useFeedRefresh";
-
 export { useFeedLoader } from "./useFeedLoader";
 
 export { getSearchContext, getInflatedDataSourceUrl } from "./useInflatedUrl";

package/reactHooks/feed/useInflatedUrl.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import * as R from "ramda";
 
 import {
@@ -169,7 +169,7 @@ const encodeIfNeeded: (string) => string = R.tryCatch(
 
 export function getSearchContext(
   searchContext: string,
-  mapping: ZappTypeMapping
+  mapping: Nullable<ZappTypeMapping>
 ) {
   if (!mapping) {
     return {};
@@ -183,31 +183,57 @@ export function getSearchContext(
   return { [property]: encodeIfNeeded(searchContext) };
 }
 
-export function useInflatedUrl({
-  feedUrl,
-  mapping,
-}: {
-  feedUrl?: string;
-  mapping?: ZappTypeMapping;
-}) {
+/**
+ * Hook returns a function that replace placeholders with context values
+ * @returns function that inflates urls based on contexts
+ */
+export const useGetUrlInflater = () => {
   const { pathname } = useRoute();
 
   const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const url = useMemo(
-    () =>
-      getInflatedDataSourceUrl({
+  const entryContextRef = useRef(entryContext);
+  entryContextRef.current = entryContext;
+
+  const screenContextRef = useRef(screenContext);
+  screenContextRef.current = screenContext;
+
+  const searchContextRef = useRef(searchContext);
+  searchContextRef.current = searchContext;
+
+  return useCallback(
+    (
+      feedUrl: Nullable<string>,
+      mapping?: Nullable<ZappTypeMapping>
+    ): Nullable<string> => {
+      return getInflatedDataSourceUrl({
         source: feedUrl,
         contexts: {
-          entry: entryContext,
-          screen: screenContext,
-          search: getSearchContext(searchContext, mapping),
+          entry: entryContextRef.current,
+          screen: screenContextRef.current,
+          search: getSearchContext(searchContextRef.current, mapping),
         },
         mapping,
-      }),
-    [entryContext, feedUrl, mapping, screenContext, searchContext]
+      });
+    },
+    []
+  );
+};
+
+export function useInflatedUrl({
+  feedUrl,
+  mapping,
+}: {
+  feedUrl?: string;
+  mapping?: ZappTypeMapping;
+}) {
+  const urlInflater = useGetUrlInflater();
+
+  const url = useMemo(
+    () => urlInflater(feedUrl, mapping),
+    [urlInflater, feedUrl, mapping]
   );
 
   return url;

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -1,20 +1,24 @@
 import { reactHooksLogger } from "../../logger";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 
 const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useHookModalScreenData = (): VariousScreenData | undefined => {
-  const hookModalState = useZappHooksModalState();
+export const useHookModalScreenData = (
+  skipSubscription: boolean
+): VariousScreenData | undefined => {
+  const hookModalState = useZappHookModalStore((state) =>
+    skipSubscription ? undefined : state.state
+  );
 
-  if (!hookModalState.state?.screenData) {
+  if (!hookModalState?.screenData) {
     return;
   }
 
   try {
-    const screenData = hookModalState.state.screenData?.payload;
-    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+    const screenData = hookModalState.screenData?.payload;
+    const hookPlugin = hookModalState.screenData.hookPlugin;
 
     if (hookPlugin?.screen_id) {
       return {
@@ -23,7 +27,7 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       };
     }
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   } catch (error) {
     logger.error({
       message: "Hook modal screen data creation failed",
@@ -34,6 +38,6 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       jsOnly: true,
     });
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   }
 };

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]);