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

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,13 +1,12 @@
 import * as React from "react";
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
-import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
-
 import { waitFor } from "@testing-library/react-native";
 
 const navigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),
+  data: {},
 };
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
@@ -30,7 +29,11 @@ jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   },
 }));
 
-const { useCellClick } = require("..");
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useScreenContext: jest.fn(() => navigator.data),
+}));
+
+const { useCellClick } = require("../");
 
 const mockProps = {
   item: {},
@@ -44,15 +47,9 @@ const mockProps = {
 
 const onCellTap = jest.fn();
 
-const actionExecutor = {
-  handleEntryActions: jest.fn(() => Promise.resolve()),
-};
-
 const wrapper = ({ children }) => (
   <CellTapContext.Provider value={onCellTap}>
-    <ActionExecutorContext.Provider value={actionExecutor}>
-      {children}
-    </ActionExecutorContext.Provider>
+    {children}
   </CellTapContext.Provider>
 );
 

package/reactHooks/cell-click/index.ts

@@ -1,6 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 
 import * as React from "react";
+import { useContext } from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
@@ -11,9 +12,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
-
-import { isFunction, noop } from "../../functionUtils";
+import { noop } from "../../functionUtils";
+import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = ({ component, zappPipesData, item }: Props) => {
+export const useCellClick = (props: Props) => {
+  const { component, zappPipesData } = props;
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-
-  const onCellTap: Option<Function> = React.useContext(CellTapContext);
-  const actionExecutor = React.useContext(ActionExecutorContext);
+  const onCellTap = React.useContext(CellTapContext);
+  const actionExecutor = useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    item,
+    props.item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = ({ component, zappPipesData, item }: Props) => {
     async (_item?: ZappEntry | any, _index?: number) => {
       // Making sure we are not getting GestureResponderEvent in here.
       const isZappEntry = _item?.id && _item?.type;
-      const selectedItem = isZappEntry ? _item : item;
+      const selectedItem = isZappEntry ? _item : props.item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,10 +80,10 @@ export const useCellClick = ({ component, zappPipesData, item }: Props) => {
           });
         }
       } else {
-        if (isFunction(onCellTap)) {
-          onCellTap?.(selectedItem, _index);
+        if (typeof onCellTap === "function") {
+          onCellTap(selectedItem, _index);
         } else {
-          if (currentRoute === pathname || pathname === "videoModal") {
+          if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;
 
             push(

package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx

@@ -1,26 +1,77 @@
+import React from "react";
 import { renderHook } from "@testing-library/react-hooks";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { Provider } from "react-redux";
+
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
+const mockStore = configureStore([thunk]);
+
+jest.useFakeTimers();
+
 const appData = {
   platform: "foo",
   version_name: "1.2.0",
   sdk_version: "2.0.0",
 };
 
-let INFLATED_URL;
+const pipesEndpoints = {
+  "http://foo.com/show": {
+    context_obj: [
+      { type: "ctx", key: "platform" },
+      { type: "query", mapper: "version", key: "appVersion" },
+      { type: "header", mapper: "SDK", key: "sdkVersion" },
+    ],
+  },
+};
+
+const store_mock = { appData, pipesEndpoints };
+
+const defaultStore = mockStore({
+  pipesEndpoints,
+  appData,
+});
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
-  () => ({
-    useInflatedUrl: () => INFLATED_URL,
-  })
+const wrapper: React.FC<any> = ({ children, store }) => (
+  <Provider store={store}>{children}</Provider>
 );
 
+const navigator = {
+  currentRoute: "/river/A1234",
+};
+
+jest.mock("../../navigation", () => ({
+  useNavigation: jest.fn(() => navigator),
+  useRoute: jest.fn(() => ({})),
+}));
+
+const contexts = {
+  entry: { id: "show-1" },
+  search: {},
+  screen: {},
+};
+
+const contextMock = (type) => ({
+  useZappPipesContext: () => [contexts[type] || {}],
+});
+
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: contextMock("entry"),
+  ZappPipesSearchContext: contextMock("search"),
+  ZappPipesScreenContext: contextMock("screen"),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: {
+    get: jest.fn((prop) => store_mock[prop]),
+  },
+}));
+
 const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
-    INFLATED_URL = "http://foo.com/show/show-1";
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -30,20 +81,12 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const buildResult = {
-      params: {
-        ctx: encodeParams({ platform: appData.platform }),
-        version: appData.version_name,
-      },
-      headers: { SDK: appData.sdk_version },
-    };
-
-    const mockedRequestBuilder = {
-      build: jest.fn(() => Promise.resolve(buildResult)),
-    };
-
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
+    const { result, waitForNextUpdate } = renderHook(
+      () => useBuildPipesUrl({ url, mapping }),
+      {
+        wrapper,
+        initialProps: { store: defaultStore },
+      }
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
@@ -65,7 +108,6 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
-    INFLATED_URL = "http://foobar.com/show-1";
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {
@@ -75,14 +117,12 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const buildResult = {};
-
-    const mockedRequestBuilder = {
-      build: jest.fn(() => Promise.resolve(buildResult)),
-    };
-
-    const { result, waitForNextUpdate } = renderHook(() =>
-      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
+    const { result, waitForNextUpdate } = renderHook(
+      () => useBuildPipesUrl({ url, mapping }),
+      {
+        wrapper,
+        initialProps: { store: defaultStore },
+      }
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");

package/reactHooks/feed/useBuildPipesUrl.ts

@@ -1,6 +1,7 @@
+// @ts-ignore
 import { RequestBuilder } from "@applicaster/zapp-pipes-v2-client";
-import * as React from "react";
-import { useInflatedUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
+import { useEffect, useState } from "react";
+import { useInflatedUrl } from "./useInflatedUrl";
 import { reactHooksLogger } from "../logger";
 
 export const logger = reactHooksLogger.addSubsystem("build-pipes-url");
@@ -14,16 +15,18 @@ type PipesBuildRequestObject = {
 export function useBuildPipesUrl({
   url,
   mapping = {},
-  requestBuilder = new RequestBuilder(),
 }): PipesBuildRequestObject {
-  const [requestParams, setRequestParams] = React.useState<object | null>(null);
+  const [requestParams, setRequestParams] = useState<object | null>(null);
+  const [error, setError] = useState(null);
 
-  const [error, setError] = React.useState(null);
   const inflatedUrl = useInflatedUrl({ feedUrl: url, mapping });
 
+  const requestBuilder = new RequestBuilder();
+
   const buildRequest = async (_url) => {
     try {
       const result = await requestBuilder.build(_url);
+
       setRequestParams(result);
     } catch (e) {
       setError(e);
@@ -31,7 +34,7 @@ export function useBuildPipesUrl({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (inflatedUrl && !requestParams) {
       buildRequest(inflatedUrl);
     }
@@ -39,7 +42,7 @@ export function useBuildPipesUrl({
 
   return {
     url: inflatedUrl || "",
-    requestParams, // TODO should it be: || {} ?
+    requestParams: requestParams, // TODO should it be: || {} ?
     error: error || undefined,
   };
 }

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

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute, isNavBarVisible } from "../";
+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";
 
 const plugins = [];
 
@@ -100,13 +101,15 @@ const mainStackWrapper = ({
   pathname = homeStack.route,
 }) => (
   <Provider store={store}>
-    <NavigationContext.Provider
-      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
-    >
-      <PathnameContext.Provider value={pathname}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
+    <ScreenDataContext.Provider value={homeStack.state}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+      >
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </ScreenDataContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint max-len: off */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { isEmpty } from "ramda";
 
 import {
   useContentTypes,
@@ -31,6 +32,7 @@ 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";
 
@@ -146,16 +148,8 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
-
-  /**
-   * compose `useRoute()` output data
-   */
-  const composeRouteData = (screenData: VariousScreenData) => ({
-    screenData,
-    pathname,
-  });
-
   const navigator = useNavigation();
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",
@@ -163,10 +157,11 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
+
   const modalScreenData = modalState.screen;
+
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -183,15 +178,6 @@ export const useRoute = (): {
       plugins
     );
 
-  const currentRouteScreenData = legacyScreenData(
-    {
-      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
-      entry: currentStack?.state?.entry ?? {},
-    } as NavigationScreenData,
-
-    plugins
-  );
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state
@@ -200,63 +186,33 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
+    const screenData = modalScreenData ?? ({} as ZappEntry);
+
+    return { screenData, pathname };
   }
 
   if (isVideoModalPathname(pathname)) {
-    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
+    const screenData = videoModalScreenData as LegacyNavigationScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookModalPathname(pathname)) {
-    return composeRouteData(hookModalScreenData);
+    const screenData = hookModalScreenData;
+
+    return { screenData, pathname };
   }
 
   if (isHookPathname(pathname)) {
-    /**
-     * 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;
-
-    // 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);
+    return { screenData: screenDataContext, pathname };
   }
 
-  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
-  if (!currentStack) {
-    return composeRouteData(navigator.screenData);
-  }
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = isEmpty(screenDataContext)
+    ? navigator.screenData
+    : screenDataContext;
 
-  return composeRouteData(currentRouteScreenData);
+  return { screenData, pathname };
 };
 
 type Callbacks = Partial<{
@@ -496,18 +452,3 @@ export const useIsScreenActive = () => {
 
   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/screen/__tests__/useCurrentScreenData.test.tsx

@@ -3,28 +3,23 @@ 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]);
 
-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", () => {
+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_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -32,10 +27,17 @@ describe("useScreenData", () => {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <Provider store={store}>{children}</Provider>
+    <NavigationContext.Provider
+      value={{
+        currentRoute: "/river/river_id_1/river/river_id_2",
+        data: { screen: river_id_2 },
+      }}
+    >
+      <Provider store={store}>{children}</Provider>
+    </NavigationContext.Provider>
   );
 
-  it("should return river data for the current screen/route", () => {
+  it("should return river data for the current screen/route", function () {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

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

package/reactHooks/screen/useScreenContext.ts

@@ -5,7 +5,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 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";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export function useScreenContextV2() {
   return useContext(ScreenContext);
@@ -45,8 +45,8 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
-
-  const screenData = useContext(ScreenDataContext);
+  // Cover cases where screenContext is used before navigation is initialized
+  const screenData = useContext(ScreenDataContext) || navigator.data;
 
   const modalScreenData = navigator?.modalData;