@applicaster/zapp-react-native-utils 16.0.0-alpha.1833861900 → 16.0.0-alpha.1852433906

package/reactHooks/navigation/useIsScreenActive.ts

@@ -2,20 +2,41 @@ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
+type VideoModalState = {
+  visible?: boolean;
+  mode?: string;
+} | null;
 
-  if (videoModalState.visible) {
-    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
+/**
+ * Whether a navigation route should be treated as the active/focused screen.
+ * Docked (MINIMIZED) video modal does not deactivate the underlying screen —
+ * only FULLSCREEN / MAXIMIZED / PIP do.
+ */
+export function isScreenActiveForRoute(
+  route: string,
+  currentRoute: string,
+  videoModalState: VideoModalState
+) {
+  if (videoModalState?.visible) {
+    if (route.includes(ROUTE_TYPES.VIDEO_MODAL)) {
       return true;
     }
 
-    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
+    if (
+      ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode ?? "")
+    ) {
       return false;
     }
+    // MINIMIZED (docked): fall through — underlying screen stays active
   }
 
-  return pathname === currentRoute;
+  return route === currentRoute;
+}
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  return isScreenActiveForRoute(pathname, currentRoute, videoModalState);
 };

package/reactHooks/navigation/usePresentScreen.ts

@@ -0,0 +1,157 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { useCallback } from "react";
+
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { modalStore } from "../../modalState";
+import { isWeb } from "../../reactUtils";
+import { createLogger } from "../../logger";
+import { useRivers } from "../state";
+
+const { log_error, log_info } = createLogger({
+  subsystem: "usePresentScreen",
+  category: "General",
+});
+
+export interface PresentScreenArgs {
+  /** The screen type to present (from content types mapping) */
+  typeMapping: string;
+
+  /** Entry to present the screen with. Omit to present the screen on its own. */
+  entry?: ZappEntry;
+}
+
+export interface PresentScreenResult {
+  /** The presented screen completed successfully */
+  success: boolean;
+
+  /** The presented screen was dismissed without completing (e.g. the back button) */
+  cancelled: boolean;
+
+  /** Set when the screen could not be presented at all */
+  error?: string;
+
+  /** Whatever the presented screen reported back */
+  payload?: unknown;
+}
+
+export type PresentScreenFn = (
+  args: PresentScreenArgs
+) => Promise<PresentScreenResult>;
+
+interface Dependencies {
+  rivers: Record<string, ZappRiver>;
+  contentTypes: ZappContentTypes;
+}
+
+const failure = (error: string): Promise<PresentScreenResult> => {
+  log_error(`presentScreen: ${error}`);
+
+  return Promise.resolve({ success: false, cancelled: false, error });
+};
+
+/**
+ * Presents a screen as a modal and resolves once that screen reports a result
+ * or is dismissed.
+ *
+ * The screen is rendered by the ModalProvider through the regular ScreenResolver,
+ * so it receives the `resultCallback` we pass here as its `callback` prop — the
+ * same channel hook screens already use to report success and cancellation.
+ */
+export const presentScreen = ({
+  typeMapping,
+  entry,
+  rivers,
+  contentTypes,
+}: PresentScreenArgs & Dependencies): Promise<PresentScreenResult> => {
+  if (!typeMapping) {
+    return failure("typeMapping option is missing");
+  }
+
+  // The web ModalProvider renders nothing, so no result could ever arrive and
+  // awaiting one would stall the caller indefinitely.
+  if (isWeb()) {
+    return failure("screens can not be presented as modals on web");
+  }
+
+  const screenId = contentTypes?.[typeMapping]?.screen_id;
+
+  if (!screenId) {
+    return failure(`can not resolve screen type mapping: ${typeMapping}`);
+  }
+
+  const river = rivers?.[screenId];
+
+  if (!river) {
+    return failure(`can not resolve river for screen id: ${screenId}`);
+  }
+
+  return new Promise<PresentScreenResult>((resolve) => {
+    let settled = false;
+    let unsubscribe: () => void = () => {};
+
+    const settle = (result: PresentScreenResult) => {
+      if (settled) {
+        return;
+      }
+
+      settled = true;
+      unsubscribe();
+      resolve(result);
+    };
+
+    const resultCallback = ({
+      success,
+      cancelled,
+      payload,
+    }: hookCallbackArgs) =>
+      settle({ success: !!success, cancelled: !!cancelled, payload });
+
+    const props: Record<string, unknown> = { resultCallback };
+
+    if (entry) {
+      // The ModalProvider turns this into the screen's ScreenDataContext and
+      // screenData, so the presented screen reads the entry exactly as it
+      // would when navigated to.
+      props.entry = entry;
+    }
+
+    log_info(
+      `presentScreen: presenting screen type: ${typeMapping}${
+        entry ? ` with entry id: ${entry.id}` : ""
+      }`
+    );
+
+    modalStore.getState().openModal({ item: river, props });
+
+    // Covers every dismissal we do not initiate ourselves: the hardware back
+    // button (via the Modal's onRequestClose), a swipe dismiss, another modal
+    // taking our slot, or dismissModal() called from anywhere else.
+    unsubscribe = modalStore.subscribe(({ modalState }) => {
+      if (!modalState.visible || modalState.screen !== river) {
+        settle({ success: false, cancelled: true });
+      }
+    });
+  }).then((result) => {
+    // Only take down our own modal — by now something else may already own the slot.
+    if (modalStore.getState().modalState.screen === river) {
+      modalStore.getState().dismissModal();
+    }
+
+    return result;
+  });
+};
+
+/**
+ * @returns a function presenting a screen as a modal, resolving with its result.
+ */
+export const usePresentScreen = (): PresentScreenFn => {
+  const rivers = useRivers();
+  const contentTypes = useContentTypes();
+
+  return useCallback(
+    (args: PresentScreenArgs) =>
+      presentScreen({ ...args, rivers, contentTypes }),
+    [rivers, contentTypes]
+  );
+};

package/reactHooks/navigation/useRoute.ts

@@ -50,14 +50,18 @@ export const useRoute = (
   const rivers = useRivers();
   const contentTypes = useContentTypes();
 
-  const modalState = useModalStoreState();
-
-  const modalScreenData = modalState.screen;
-
+  // useRoute runs in every cell, so both modal stores are subscribed to only on
+  // the routes that actually read them. Off those routes the selectors return a
+  // stable reference, which keeps an unrelated modal opening or closing from
+  // re-rendering the whole tree.
   const hookModalScreenData = useHookModalScreenData(
     !isHookModalPathname(pathname)
   );
 
+  const modalState = useModalStoreState(!isModalPathname(pathname));
+
+  const modalScreenData = modalState.screen;
+
   const videoModalScreenData =
     navigator?.videoModalState?.item &&
     legacyScreenData(
@@ -80,7 +84,20 @@ export const useRoute = (
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
+    if (!modalScreenData) {
+      return { screenData: {} as ZappEntry, pathname };
+    }
+
+    // Mirror the pushed-screen shape ({ ...entry, targetScreen }) so a screen
+    // presented as a modal reads its entry the same way it would when
+    // navigated to, instead of only seeing the bare river.
+    const screenData = legacyScreenData(
+      {
+        screen: modalScreenData,
+        entry: modalState.props?.entry as NavigatorEntry,
+      },
+      plugins
+    );
 
     return { screenData, pathname };
   }

package/reactHooks/state/useComponentScreenState.ts

@@ -41,5 +41,5 @@ export const useComponentScreenState = <T = unknown>(
     [componentId, store]
   );
 
-  return [value, setValue] as const;
+  return [value, setValue];
 };

package/reactHooks/usePluginConfiguration.ts

@@ -1,4 +1,3 @@
-import * as R from "ramda";
 import { useMemo } from "react";
 
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
@@ -6,7 +5,8 @@ import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
 import { populateConfigurationValues } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import { useLocalizedStrings } from "../localizationUtils";
+import { getLocalizedStrings, useLocalizedStrings } from "../localizationUtils";
+import { isNil, pathOr } from "../utils";
 
 const populateFields = (
   data,
@@ -14,21 +14,80 @@ const populateFields = (
   pathToValues: string | string[] = "configuration",
   skipDefaults = false
 ) =>
-  R.compose(
-    (config) =>
-      populateConfigurationValues(manifestFields, config, skipDefaults),
-    R.pathOr({}, R.unless(Array.isArray, Array)(pathToValues))
-  )(data);
+  populateConfigurationValues(
+    manifestFields,
+    pathOr({}, pathToValues, data),
+    skipDefaults
+  );
 
 export function parsePluginConfiguration(plugin, manifest) {
   return populateFields(plugin, manifest.custom_configuration_fields);
 }
 
-export function usePluginConfiguration<T, S>(identifier, manifest) {
+const getDefaultLocalizations = (manifest) =>
+  manifest?.localizations?.fields?.reduce(
+    (defaults, { key, initial_value }) => ({
+      en: { ...defaults.en, [key]: initial_value },
+    }),
+    { en: {} }
+  ) || {};
+
+const isPlainObject = (value) =>
+  Object.prototype.toString.call(value) === "[object Object]";
+
+// Deep merge where configured values win, except nil ones (defaults fill the gaps)
+export const mergeLocalizations = (configured, defaults) => {
+  if (!isPlainObject(configured)) return { ...defaults };
+  if (!isPlainObject(defaults)) return { ...configured };
+
+  // Configured keys first, as R.mergeDeepWith: the first language is the fallback
+  return Object.keys({ ...configured, ...defaults }).reduce((merged, key) => {
+    const left = configured[key];
+    const right = defaults[key];
+
+    if (!(key in defaults)) {
+      merged[key] = left;
+    } else if (!(key in configured)) {
+      merged[key] = right;
+    } else if (isPlainObject(left) && isPlainObject(right)) {
+      merged[key] = mergeLocalizations(left, right);
+    } else {
+      merged[key] = isNil(left) ? right : left;
+    }
+
+    return merged;
+  }, {});
+};
+
+/**
+ * usePluginConfiguration outside React: the same result, read once instead of subscribed.
+ */
+export function getPluginConfiguration<T = any, S = Record<string, any>>(
+  plugin,
+  manifest?: any
+): { configurationFields: T; localizations: S } {
+  return {
+    configurationFields: populateFields(
+      plugin,
+      manifest?.custom_configuration_fields
+    ),
+    localizations: getLocalizedStrings(
+      mergeLocalizations(
+        plugin?.configuration?.localizations,
+        getDefaultLocalizations(manifest)
+      )
+    ),
+  };
+}
+
+export function usePluginConfiguration<T = any, S = Record<string, any>>(
+  identifier: string,
+  manifest?: any
+) {
   const plugins = usePlugins();
 
   const plugin = useMemo(
-    () => R.find(R.propEq("identifier", identifier), plugins),
+    () => plugins?.find((item) => item?.identifier === identifier),
     [plugins, identifier]
   );
 
@@ -37,29 +96,20 @@ export function usePluginConfiguration<T, S>(identifier, manifest) {
     [plugin, manifest]
   );
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         plugin?.configuration?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [plugin?.configuration?.localizations, defaultLocalizations]);
+    }),
+    [plugin?.configuration?.localizations, defaultLocalizations]
+  );
 
   const localizations: S = useLocalizedStrings(localizationsParams);
 
@@ -102,29 +152,20 @@ export function useLayoutConfiguration<
     "localizations",
   ];
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         layoutData?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [layoutData?.localizations, defaultLocalizations]);
+    }),
+    [layoutData?.localizations, defaultLocalizations]
+  );
 
   // Always call useLocalizedStrings regardless of whether localizations is in the keys
   const localizations: L = useLocalizedStrings(localizationsParams);

package/reactHooks/utils/__tests__/index.test.js

@@ -1,5 +1,5 @@
-import { usePrevious, useIsInitialRender } from "../";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { usePrevious, useIsInitialRender, useForceUpdate } from "../";
+import { renderHook, cleanup, act } from "@testing-library/react-native";
 
 describe("usePrevious", () => {
   it("renders", () => {
@@ -49,3 +49,23 @@ describe("useIsInitialRender", () => {
     expect(result.current).toBe(false);
   });
 });
+
+describe("useForceUpdate", () => {
+  it("forces component to re-render when called", () => {
+    let renderCount = 0;
+
+    const { result } = renderHook(() => {
+      renderCount++;
+
+      return useForceUpdate();
+    });
+
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      result.current();
+    });
+
+    expect(renderCount).toBe(2);
+  });
+});

package/reactHooks/utils/index.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useReducer, useRef } from "react";
 
 /**
  * This hook returns a previous value that was passed to it.
@@ -31,6 +31,16 @@ export const useIsInitialRender = (): boolean => {
   return isInitialRenderRef.current;
 };
 
+/**
+ * Returns a function that forces a re-render of the component when invoked.
+ * @return {() => void}
+ */
+export const useForceUpdate = (): (() => void) => {
+  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);
+
+  return forceUpdate;
+};
+
 export const checkIsLocalFeed = (feedUrl) => feedUrl?.startsWith("pipesv2://");
 
 export const shouldDispatchData = (
@@ -40,6 +50,7 @@ export const shouldDispatchData = (
 ) => {
   const currentFeedHasData = feed?.data;
   const isLocalFeed = checkIsLocalFeed(url);
+  const isFeedStale = feed?.stale;
 
-  return !currentFeedHasData || clearCache || isLocalFeed;
+  return !currentFeedHasData || clearCache || isFeedStale || isLocalFeed;
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -1,10 +1,20 @@
 import * as React from "react";
-import { NativeModules, StyleSheet, View } from "react-native";
+import { NativeModules, View, StyleSheet } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
-import { isApplePlatform, isWeb } from "../reactUtils";
+import { isApplePlatform, isWeb, isTV } from "../reactUtils";
 import { useRivers } from "../reactHooks";
 
+const isTVPlatform = isTV();
+
+const styles = StyleSheet.create({
+  container: isTVPlatform
+    ? {
+        flex: 1,
+      }
+    : {},
+});
+
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
     height: index === payload.index ? payload.height : item.height,
@@ -24,18 +34,13 @@ type Props = {
 type ItemProps = {
   children: React.ReactNode;
   index: number;
+  testID?: string;
 };
 
 type MeasurementContext = {
   onLayout: (index: number) => (event) => void;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const { Logger } = getXray();
 
 const logger = new Logger("general", "ui");
@@ -149,11 +154,12 @@ export const ScreenLoadingMeasurements = ({
 export const ScreenLoadingMeasurementsListItemWrapper = ({
   children,
   index,
+  testID,
 }: ItemProps) => {
   const { onLayout } = React.useContext(MeasurementsSettersContext);
 
   return (
-    <View style={styles.container} onLayout={onLayout?.(index)}>
+    <View style={styles.container} onLayout={onLayout?.(index)} testID={testID}>
       {children}
     </View>
   );

package/stringUtils/__tests__/stringUtils.test.js

@@ -122,6 +122,48 @@ describe("inflate string", () => {
       "this is a string with custom separators"
     );
   });
+
+  it("does not HTML-escape search variables containing single quotes or apostrophes", () => {
+    const string = "https://api.example.com/search?q={{search.query}}";
+    const data = { search: { query: "L'aventure" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.example.com/search?q=L'aventure"
+    );
+  });
+
+  it("search context with straight apostrophe", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l'a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l'a"
+    );
+  });
+
+  it("search context with backtick apostrophe", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l`a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l`a"
+    );
+  });
+
+  it("search context with right single quotation mark", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l’a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l’a"
+    );
+  });
 });
 
 describe("objectToReadableString", () => {

package/stringUtils/index.ts

@@ -72,8 +72,8 @@ const valueIsNull = (value) => () => value === null;
 const encodeHelper = "encodeURL";
 
 const encodeHandlebarsExpressions = R.compose(
-  R.replace(/{{([^}]+)}}/g, (match, p1) =>
-    p1.includes("search") ? match : `{{{${encodeHelper} ${p1}}}}`
+  R.replace(/{{([^}]+)}}/g, (_, p1) =>
+    p1.includes("search") ? `{{{${p1}}}}` : `{{{${encodeHelper} ${p1}}}}`
   )
 );