@applicaster/zapp-react-native-utils 16.0.0-rc.9 → 16.0.0-rc.90

package/reactHooks/actions/index.ts

@@ -1,8 +1,13 @@
 /// <reference types="@applicaster/applicaster-types" />
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Context, useContext, useState } from "react";
+import { Context, useCallback, useContext, useEffect, useState } from "react";
 import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ActionsContext";
 
+import {
+  observeEntryState,
+  RegisteredActionValue,
+  uiActionsRegistry,
+} from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
 const logger = reactHooksLogger.addSubsystem("actions");
@@ -30,7 +35,13 @@ export function useActions<T = unknown>(plugId: string): any {
       if (!logged) {
         logger.warning({
           message: `useActions: Couldn't find an action for ${plugId} plugin`,
-          data: { actions: context?.actions },
+          // Identifiers only. The action map holds every plugin's module and
+          // live React context, which is far too large for a log line and can
+          // carry whatever state those plugins hold.
+          data: {
+            plugId,
+            availableActions: Object.keys(context?.actions ?? {}),
+          },
         });
 
         setLogged(true);
@@ -46,3 +57,107 @@ export function useActions<T = unknown>(plugId: string): any {
 
   return context;
 }
+
+export type UseEntryActionState = {
+  state: CellActionEntryState | undefined;
+  invokeAction: (options?: InvokeArgsOptions) => void;
+};
+
+/**
+ * Subscribes a component to a single action's state for a given `entry`.
+ *
+ * It observes state changes reactively via `observeEntryState` (which is backed
+ * by the action's `addListener`), seeds the initial value synchronously from
+ * `initialEntryState`, and returns a memoized `invokeAction` that forwards
+ * optimistic `updateState` updates back into local state.
+ *
+ * This is the single, unified way to drive an action button - it works the same
+ * for registry actions, legacy context-provider actions and entry actions.
+ */
+export function useEntryActionState(
+  action: RegisteredActionValue | undefined,
+  entry: ZappEntry | ZappFeed
+): UseEntryActionState {
+  const [state, setState] = useState<CellActionEntryState | undefined>(() =>
+    action?.initialEntryState?.(entry)
+  );
+
+  const entryId = (entry as ZappEntry)?.id;
+
+  useEffect(() => {
+    if (!action) return undefined;
+
+    // An action's stream is third-party code. Subscribing with only a `next`
+    // handler lets RxJS rethrow an error notification asynchronously, where no
+    // error boundary catches it - one plugin faulting would take the app down
+    // rather than this one button. The button keeps its last known state.
+    let subscription;
+
+    try {
+      subscription = observeEntryState(action, entry).subscribe({
+        next: setState,
+        error: (error) =>
+          logger.warning({
+            message:
+              "useEntryActionState: the action's state stream failed - the button keeps its last state",
+            data: { entryId, error },
+          }),
+      });
+    } catch (error) {
+      logger.warning({
+        message:
+          "useEntryActionState: could not observe the action - the button keeps its initial state",
+        data: { entryId, error },
+      });
+
+      return undefined;
+    }
+
+    return () => subscription.unsubscribe();
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [action, entryId]);
+
+  const invokeAction = useCallback(
+    (options: InvokeArgsOptions = {}) => {
+      if (typeof action?.invokeAction !== "function") {
+        // A button was rendered and pressed, and the press goes nowhere. Only
+        // reachable on a user interaction, so it costs nothing on render. The
+        // action value carries no identifier, so the label is what locates the
+        // button that misbehaved.
+        logger.warning({
+          message:
+            "useEntryActionState: the pressed action has no invokeAction - the press did nothing",
+          data: { entryId, label: state?.label },
+        });
+      }
+
+      action?.invokeAction?.(entry, { updateState: setState, ...options });
+    },
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+    [action, entryId]
+  );
+
+  return { state, invokeAction };
+}
+
+/**
+ * A value that changes whenever a provider is added to or removed from
+ * `uiActionsRegistry`.
+ *
+ * Providers can register after the UI that wants them has rendered - the audio
+ * player registers playback speed only once its controller has state, and
+ * plugin-backed actions are bridged in from an effect. Put this in the
+ * dependency list of anything that resolves actions, so the list is re-read
+ * instead of being frozen at first paint.
+ */
+export function useRegistryRevision(): number {
+  const [revision, setRevision] = useState(0);
+
+  useEffect(
+    () =>
+      uiActionsRegistry.subscribe(() => setRevision((current) => current + 1)),
+    []
+  );
+
+  return revision;
+}

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

@@ -5,6 +5,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 
 const mockNavigator = {
   getPathname: () => "pathnameMock",
+  currentRoute: "pathnameMock",
   push: jest.fn(),
   data: {},
 };
@@ -29,6 +30,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
+  useScreenContext: jest.fn(() => ({})),
 }));
 
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
@@ -66,6 +68,12 @@ const wrapper = ({ children }) => (
   </CellTapContext.Provider>
 );
 
+const actionExecutorWrapper = ({ children }) => (
+  <ActionExecutorContext.Provider value={actionExecutor}>
+    {children}
+  </ActionExecutorContext.Provider>
+);
+
 describe("useCellClick", () => {
   it("returns a function", () => {
     const { result } = renderHook(() => useCellClick(mockProps));
@@ -95,4 +103,60 @@ describe("useCellClick", () => {
 
     cleanup();
   });
+
+  it("does not push when the cell finishes a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "profile-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [
+            { type: "sessionStorageSet" },
+            { type: "finishHook", options: { success: true } },
+          ],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(actionExecutor.handleEntryActions).toHaveBeenCalled();
+    });
+
+    expect(mockNavigator.push).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("pushes after tap actions that do not finish a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "episode-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [{ type: "sessionStorageSet" }],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(mockNavigator.push).toHaveBeenCalled();
+    });
+
+    cleanup();
+  });
 });

package/reactHooks/cell-click/index.ts

@@ -4,6 +4,7 @@ import * as React 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";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import {
   useNavigation,
   useProfilerLogging,
@@ -28,7 +29,6 @@ import { useScreenStateStore } from "../navigation/useScreenStateStore";
 type Props = {
   item?: ZappEntry;
   index?: number;
-  component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
 };
 
@@ -37,24 +37,25 @@ type onPressReturnFn =
   | (() => void);
 
 export const useCellClick = ({
-  component,
   zappPipesData,
   item,
-}: Props): onPressReturnFn => {
+}: Props = {}): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
   const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const component = useUIComponentContext();
   const screenData = useCurrentScreenData();
   const screenState = useScreenContext()?.options;
+  const entry = useScreenContext()?.entry;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
   );
 
-  const [entryContext, setEntryContext] =
+  const [_entryContext, setEntryContext] =
     ZappPipesEntryContext.useZappPipesContext(pathname);
 
   const logTimestamp = useProfilerLogging();
@@ -82,6 +83,12 @@ export const useCellClick = ({
 
       logOnPress(selectedItem, pathname, component, onCellTap);
 
+      const tapActions = selectedItem?.extensions?.tap_actions?.actions;
+
+      const finishesHook =
+        Array.isArray(tapActions) &&
+        tapActions.some((action) => action?.type === "finishHook");
+
       if (selectedItem) {
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
@@ -89,7 +96,8 @@ export const useCellClick = ({
           screenState,
           screenRoute: pathname,
           screenStateStore,
-          entryContext,
+          entryContext: selectedItem,
+          screenEntry: entry,
         });
       }
 
@@ -99,32 +107,39 @@ export const useCellClick = ({
             url: selectedItem.link.href,
           });
         }
-      } else {
-        if (isFunction(onCellTap)) {
-          onCellTap?.(selectedItem, _index);
-        } else {
-          if (currentRoute === pathname || pathname.includes("video-modal")) {
-            const targetScreen = component?.data?.target;
-
-            push(
-              R.when(
-                () => targetScreen,
-                R.mergeLeft({ screen_type: targetScreen })
-              )(selectedItem)
-            );
-          }
+      } else if (isFunction(onCellTap)) {
+        onCellTap?.(selectedItem, _index);
+      } else if (!finishesHook) {
+        // finishHook already completes the hook and navigates to the original
+        // target. Pushing the cell as well stacks a second copy of that screen
+        // (e.g. home/home after a profile selector hook).
+        if (currentRoute === pathname || pathname.includes("video-modal")) {
+          const targetScreen = component?.data?.target;
+
+          push(
+            R.when(
+              () => targetScreen,
+              R.mergeLeft({ screen_type: targetScreen })
+            )(selectedItem)
+          );
         }
       }
     },
     [
-      onCellTap,
-      currentRoute,
+      item,
       setEntryContext,
-      pathname,
-      push,
       sendAnalyticsOnPress,
+      logTimestamp,
+      pathname,
+      component,
+      onCellTap,
+      entry,
+      actionExecutor,
       screenData,
       screenState,
+      screenStateStore,
+      currentRoute,
+      push,
     ]
   );
 
@@ -138,5 +153,5 @@ export const useCellClick = ({
     onPressRef.current = onPress;
   }
 
-  return React.useCallback(onPressRef.current, []);
+  return React.useCallback(onPressRef.current, [item]);
 };

package/reactHooks/feed/__mocks__/useMarkPipesDataStale.ts

@@ -0,0 +1,4 @@
+export const useMarkPipesDataStale = jest.fn();
+
+/** @deprecated alias of useMarkPipesDataStale */
+export const usePipesCacheReset = useMarkPipesDataStale;

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

@@ -242,4 +242,29 @@ describe("useGetUrlInflater", () => {
     const url = result.current(source, mapping);
     expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
   });
+
+  it("handles search queries with apostrophes without HTML entity escaping or URL truncation", () => {
+    const source =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q={{q}}";
+
+    const mapping = {
+      q: { source: "search", property: "q" },
+    };
+
+    const searchContext = getSearchContext("L'aventure", mapping);
+
+    const result = getInflatedDataSourceUrl({
+      source,
+      contexts: {
+        search: searchContext,
+      },
+      mapping,
+    });
+
+    expect(result).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q=L'aventure"
+    );
+
+    expect(result).not.toContain("'");
+  });
 });

package/reactHooks/feed/index.ts

@@ -6,7 +6,11 @@ export { useEntryScreenId } from "./useEntryScreenId";
 
 export { useBuildPipesUrl } from "./useBuildPipesUrl";
 
-export { usePipesCacheReset } from "./usePipesCacheReset";
+export {
+  useMarkPipesDataStale,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  usePipesCacheReset,
+} from "./useMarkPipesDataStale";
 
 export { useBatchLoading } from "./useBatchLoading";
 

package/reactHooks/feed/useBatchLoading.ts

@@ -159,9 +159,17 @@ export const useBatchLoading = (
     options.riverId,
   ]);
 
+  // Initial preload only. Batch loading warms the first batch of component
+  // feeds and signals readiness; the feed set is frozen at mount on purpose.
+  // Per-component loads and reloads (including stale revalidation) are owned by
+  // useFeedLoader in ZappPipesDataConnector. Re-running on `feeds`/input changes
+  // would re-fire on every store update and cause redundant dispatch storms, so
+  // this intentionally runs once on mount.
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/{usePipesCacheReset.ts → useMarkPipesDataStale.ts}

@@ -2,17 +2,19 @@ import React from "react";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
-import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { markPipesDataStale } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { useRoute } from "../navigation";
 import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
- * reset river components cache when screen is unmounted
+ * Mark a river's `clear_cache_on_reload` feeds as stale when the screen is
+ * unmounted. The cached data is kept (so a screen sharing the same feed does
+ * not lose it mid-mount) and revalidated on next access.
  * @param {string} riverId screen id
  * @param {Array} riverComponents list of UI components
  */
-export const usePipesCacheReset = (riverId, riverComponents) => {
+export const useMarkPipesDataStale = (riverId, riverComponents) => {
   const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
@@ -35,10 +37,16 @@ export const usePipesCacheReset = (riverId, riverComponents) => {
           );
 
           if (url) {
-            dispatch(clearPipesData(url, { riverId }));
+            dispatch(markPipesDataStale(url, { riverId }));
           }
         }
       });
     };
   }, []);
 };
+
+/**
+ * @deprecated Renamed to `useMarkPipesDataStale`. Kept as an alias for backward
+ * compatibility with external consumers.
+ */
+export const usePipesCacheReset = useMarkPipesDataStale;

package/reactHooks/index.ts

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

package/reactHooks/layout/index.ts

@@ -49,7 +49,7 @@ export function useStatusBarHeight() {
   });
 }
 
-const getNavbarHeight = () => {
+export const getNavbarHeight = () => {
   return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
 };
 

package/reactHooks/navigation/__mocks__/index.ts

@@ -38,3 +38,7 @@ export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
 
 export const useIsScreenActive = jest.fn().mockReturnValue(true);
+
+export const isScreenActiveForRoute = jest.fn(
+  (route, currentRoute) => route === currentRoute
+);