@applicaster/zapp-react-native-utils 12.0.0-alpha.8417280639 → 12.0.0-alpha.8939308044

package/reactHooks/cell-click/index.ts

@@ -11,9 +11,9 @@ 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 { noop } from "../../functionUtils";
-import { useContext } from "react";
-import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
+import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = (props: Props) => {
-  const { component, zappPipesData } = props;
+export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-  const onCellTap = React.useContext(CellTapContext);
-  const actionExecutor = useContext(ActionExecutorContext);
+
+  const onCellTap: Option<Function> = React.useContext(CellTapContext);
+  const actionExecutor = React.useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = (props: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    props.item,
+    item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = (props: 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 : props.item;
+      const selectedItem = isZappEntry ? _item : item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,8 +80,8 @@ export const useCellClick = (props: Props) => {
           });
         }
       } else {
-        if (typeof onCellTap === "function") {
-          onCellTap(selectedItem, _index);
+        if (isFunction(onCellTap)) {
+          onCellTap?.(selectedItem, _index);
         } else {
           if (currentRoute === pathname || pathname === "videoModal") {
             const targetScreen = component?.data?.target;

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

@@ -1,77 +1,26 @@
-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",
 };
 
-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,
-});
+let INFLATED_URL;
 
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <Provider store={store}>{children}</Provider>
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
+  () => ({
+    useInflatedUrl: () => INFLATED_URL,
+  })
 );
 
-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 = {
@@ -81,12 +30,20 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    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 })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
@@ -108,6 +65,7 @@ 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 = {
@@ -117,12 +75,14 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {};
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");

package/reactHooks/feed/__tests__/useInflatedUrl.test.ts

@@ -12,9 +12,21 @@ const {
 
 const { reactHooksLogger } = require("../../logger");
 
+let mockStore;
+
 describe("getInflatedDataSourceUrl", () => {
   beforeEach(() => {
     reactHooksLogger.warning.mockClear();
+
+    const {
+      appStore,
+    } = require("@applicaster/zapp-react-native-redux/AppStore");
+
+    mockStore = {
+      getState: jest.fn().mockReturnValue({ pipesEndpoints: {} }),
+    };
+
+    appStore.set(mockStore);
   });
 
   it("returns the url inflated with the right params", () => {
@@ -72,7 +84,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.id}} source: http://foo.com/show/seriesId={{seriesId}}",
       data: { source, contexts, mapping },
     });
   });
@@ -107,7 +120,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName}}",
       data: { source, contexts, mapping },
     });
   });
@@ -148,7 +162,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName2}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName1}}?test={{groupName2}}",
       data: { source, contexts, mapping },
     });
   });

package/reactHooks/feed/useBuildPipesUrl.ts

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

package/reactHooks/feed/useInflatedUrl.ts

@@ -9,9 +9,15 @@ import {
 
 import { inflateString } from "../../stringUtils";
 import { useRoute } from "../navigation";
-import { isEnoughDataToInflateString } from "../../inflatedUrlUtils";
+import { getMissingValues } from "../../inflatedUrlUtils";
 import { reactHooksLogger as logger } from "../logger";
 import { isTV } from "../../reactUtils";
+import {
+  findEndpointForURL,
+  HTTP_METHODS,
+} from "@applicaster/zapp-pipes-v2-client";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { ENDPOINT_TAGS } from "../../types";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -105,24 +111,47 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
     R.keys(mapping)
   );
 
-  if (!isEnoughDataToInflateString(contexts, string)) {
-    const message = "Not enough data to fully inflate url";
+  const missingValues = getMissingValues(contexts, string);
 
-    // todo: add js only payload instead
-    if (__DEV__) {
-      logger.warning({
-        message,
-        data: { source, contexts, mapping },
-      });
+  if (missingValues && missingValues.length > 0) {
+    const pipesEndpoints = appStore.get("pipesEndpoints");
+
+    const endpointURL = findEndpointForURL(
+      source,
+      pipesEndpoints,
+      HTTP_METHODS.GET
+    );
+
+    const tags = pipesEndpoints?.[endpointURL]?.tags;
+    const allowMissingKeys = tags?.includes(ENDPOINT_TAGS.allow_missing_keys);
+
+    if (!allowMissingKeys) {
+      const message = `Not enough data to fully inflate url: ${missingValues.join(
+        ","
+      )} source: ${source}`;
+
+      // todo: add js only payload instead
+      if (__DEV__) {
+        logger.warning({
+          message,
+          data: { source, contexts, mapping },
+        });
+      } else {
+        // todo: log values we've failed to resolve
+        logger.warning({
+          message,
+        });
+      }
+
+      // return null in order to prevent start fetching data with invalid url
+      return null;
     } else {
-      // todo: log values we've failed to resolve
-      logger.warning({
-        message,
+      logger.debug({
+        message: `Ignoring missing values in url because ${
+          ENDPOINT_TAGS.allow_missing_keys
+        } endpoint tag, keys: ${missingValues.join(",")}`,
       });
     }
-
-    // return null in order to prevent start fetching data with invalid url
-    return null;
   }
 
   return inflateString({ string, data: contexts });

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,8 +15,21 @@ 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",
 }));
 

package/reactHooks/navigation/__mocks__/useNavigation.ts

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

package/reactHooks/navigation/index.ts

@@ -496,3 +496,18 @@ 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,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

@@ -5,8 +5,9 @@ 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";
 
-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/screenState/index.ts

@@ -49,11 +49,3 @@ export function useScreenState(
     setSelectedEntry: (entryId) => setSelectedEntry(screenId, entryId),
   };
 }
-
-export const useScreenScrollStore = create<{
-  scrollPosition: number;
-  scrollingVelocity: number;
-}>(() => ({
-  scrollPosition: 0,
-  scrollingVelocity: 0,
-}));

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/testUtils/getByTestId.ts

@@ -0,0 +1,14 @@
+export const getByTestId = (wrapper, testId) => {
+  try {
+    if (wrapper?.getByTestId) {
+      return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+    } else if (wrapper?.root?.findByProps) {
+      return wrapper.root.findAllByProps({ testID: testId })?.[0] ?? undefined;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};

package/testUtils/index.tsx

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { View } from "react-native";
 
 import { Provider } from "react-redux";
@@ -11,6 +11,8 @@ import { SafeAreaProvider } from "react-native-safe-area-context";
 import { render } from "@testing-library/react-native";
 import { AnalyticsProvider } from "../analyticsUtils";
 
+export { getByTestId } from "./getByTestId";
+
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
  * Example:
@@ -21,17 +23,6 @@ import { AnalyticsProvider } from "../analyticsUtils";
 export const testIDEquals = (testId: any): boolean =>
   R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
 
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
 /** Helper function for react-test-renderer, accepts type and renderer
  * * @param {*} type React Component type instance  or name of component
  * * @param {*} renderer renderer instance
@@ -47,11 +38,11 @@ export const findByType = (type, renderer) => {
 export function createComponentMock(mockName, hasChildren = false) {
   return hasChildren
     ? jest.fn(({ children }) => (
-        <View comp={mockName} testID={mockName}>
+        <View testID={mockName}>
           {typeof children === "function" ? children() : children}
         </View>
       ))
-    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+    : jest.fn(() => <View testID={mockName} />);
 }
 
 const initialState = {
@@ -64,14 +55,21 @@ const initialState = {
     AppContainer: createComponentMock("appContainer", true),
     DisplayError: createComponentMock("displayError"),
   },
-  rivers: [{ id: "A1234", home: true }],
+  rivers: { id: "A1234", home: true },
   appSettings: {},
   plugins: [],
-  appState: { appReady: true },
+  appState: { appReady: true, appLaunched: true },
+  appData: { layoutVersion: "v1" },
+  contentTypes: null,
 };
 
-export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, ...store });
+export const WrappedWithProviders = ({
+  children,
+  store: storeObj = {},
+}: any) => {
+  const _store = configureStore([thunk])(
+    R.mergeDeepWith(R.concat, { ...initialState }, storeObj)
+  );
 
   return (
     <SafeAreaProvider
@@ -93,8 +91,12 @@ export const WrappedWithProviders = ({ children, store = {} }: any) => {
  * @param store optional store to pass to the provider
  * @returns
  */
-export const renderWithProviders = (component, store?: unknown) => {
-  return render(
-    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
-  );
+export const renderWithProviders = (component, storeObj?: unknown) => {
+  return render(component, {
+    wrapper: function TestWrapper({ children }: PropsWithChildren<any>) {
+      return (
+        <WrappedWithProviders store={storeObj}>{children}</WrappedWithProviders>
+      );
+    },
+  });
 };