@applicaster/zapp-react-native-utils 16.0.0-alpha.4416921324 → 16.0.0-alpha.4548770949

package/reactHooks/actions/index.ts

@@ -6,6 +6,7 @@ import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Con
 import {
   observeEntryState,
   RegisteredActionValue,
+  uiActionsRegistry,
 } from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
@@ -20,21 +21,55 @@ type ActionContexts<T = unknown> = {
 };
 
 /**
- * React Hook to subscribe to the custom action context
+ * 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;
+}
+
+/**
+ * Resolves a legacy action context or falls back to the UI action registry.
  * @param {*} plugId - subscribes to the context of that action plugin
  * @return {*} - global action provider context or context for specific action plugin
  */
 export function useActions<T = unknown>(plugId: string): any {
   const [logged, setLogged] = useState(false);
   const context = useContext<ActionContexts<T>>(ActionsContext);
+  useRegistryRevision();
+
   const actionContext = context?.actions?.[plugId]?.module?.context;
 
   if (plugId) {
     if (!actionContext) {
+      const registeredAction = uiActionsRegistry.getAction(plugId);
+
+      if (registeredAction) return registeredAction;
+
       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);
@@ -80,7 +115,31 @@ export function useEntryActionState(
   useEffect(() => {
     if (!action) return undefined;
 
-    const subscription = observeEntryState(action, entry).subscribe(setState);
+    // 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
@@ -88,6 +147,18 @@ export function useEntryActionState(
 
   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

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

@@ -83,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,
@@ -101,20 +107,21 @@ 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)
+          );
         }
       }
     },

package/reactHooks/connection/index.tsx

@@ -4,6 +4,11 @@ import { NetInfoState } from "@react-native-community/netinfo";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 import { isOnline } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 
+type ConnectionInfo = NetInfoState & {
+  deviceStatus: NetStatus;
+  stillOfflineAfterResumeCount?: number;
+};
+
 /**
  * This hook returns connection type from RN NetInfo component or boolean for iConnected if justOnlineStatus flag is set
  * @param {boolean} justOnlineStatus - flag if to return boolean for isConnected
@@ -12,16 +17,14 @@ import { isOnline } from "@applicaster/quick-brick-core/App/NetworkStatusProvide
 
 export function useConnectionInfo(justOnlineStatus: true): boolean;
 
-export function useConnectionInfo(
-  justOnlineStatus: false
-): NetInfoState & { deviceStatus: NetStatus };
+export function useConnectionInfo(justOnlineStatus: false): ConnectionInfo;
 
 export function useConnectionInfo(
   justOnlineStatus: boolean
-): boolean | (NetInfoState & { deviceStatus: NetStatus }) {
+): boolean | ConnectionInfo {
   const connectionInfo = React.useContext(
     NetworkStatusContext
-  ) as NetInfoState & { deviceStatus: NetStatus };
+  ) as ConnectionInfo;
 
   return justOnlineStatus ? isOnline(connectionInfo) === true : connectionInfo;
 }

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

@@ -0,0 +1,338 @@
+import React from "react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import { act, renderHook } from "@testing-library/react-native";
+import reducer, {
+  loadPipesData,
+  unsubscribeFromDataSource,
+  zappPipesClear,
+} from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { zappPipesMiddleware } from "../../../../zapp-react-native-redux/ZappPipes/middleware";
+import { useFeedLoader } from "../useFeedLoader";
+
+const mockGet = jest.fn();
+const mockPost = jest.fn();
+const mockSubscribe = jest.fn();
+const mockRelease = jest.fn();
+let mockChange: () => void;
+let mockLoad: ReturnType<typeof jest.fn>;
+
+jest.mock("@applicaster/zapp-pipes-v2-client", () => ({
+  __esModule: true,
+  default: jest.fn(() => ({
+    get: (...args) => mockGet(...args),
+    post: (...args) => mockPost(...args),
+  })),
+  RequestBuilder: jest.fn(() => ({
+    setResolvers() {
+      return this;
+    },
+    build: async () => ({}),
+  })),
+  subscribeForUrlContextKeyChanges: (...args) => mockSubscribe(...args),
+}));
+
+jest.mock("../useInflatedUrl", () => ({
+  useInflatedUrl: ({ feedUrl }) => feedUrl,
+}));
+
+jest.mock("../useLoadPipesDataDispatch", () => ({
+  useLoadPipesDataDispatch: () => mockLoad,
+}));
+
+const url = "https://example.test/feed";
+const data = { id: "feed", type: { value: "feed" }, entry: [] };
+
+const settle = async () => {
+  for (let index = 0; index < 30; index++) await Promise.resolve();
+};
+
+const createHarness = (plugins: QuickBrickPlugin[] = []) => {
+  const store = configureStore({
+    reducer: {
+      zappPipes: reducer,
+      appData: () => ({ layoutVersion: "v2" }),
+      plugins: () => plugins,
+    },
+    middleware: (defaults) =>
+      defaults({ serializableCheck: false }).concat(zappPipesMiddleware),
+  });
+
+  mockLoad = jest.fn((feedUrl, options) =>
+    store.dispatch(loadPipesData(feedUrl, options))
+  );
+
+  const wrapper = ({ children }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return { store, wrapper };
+};
+
+describe("dependency-driven feed invalidation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGet.mockResolvedValue({ response: data, code: 200 });
+    mockPost.mockResolvedValue({ response: data, code: 200 });
+
+    mockSubscribe.mockImplementation((_url, _options, onChange) => {
+      mockChange = onChange;
+
+      return mockRelease;
+    });
+  });
+
+  afterEach(() => unsubscribeFromDataSource());
+
+  it("silently revalidates a shared mounted feed once and keeps its content", async () => {
+    const { store, wrapper } = createHarness();
+
+    const first = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    const second = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    await act(settle);
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+    expect(mockSubscribe).toHaveBeenCalledTimes(1);
+    let finish;
+
+    mockGet.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        })
+    );
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(first.result.current.data).toEqual(data);
+    expect(first.result.current.loading).toBe(false);
+    expect(store.getState().zappPipes[url].refreshing).toBe(true);
+
+    await act(async () => {
+      finish({ response: data, code: 200 });
+      await settle();
+    });
+
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    first.unmount();
+    second.unmount();
+    expect(mockRelease).not.toHaveBeenCalled();
+  });
+
+  it("invalidates an unmounted cache without fetching and revalidates on remount", async () => {
+    const { store, wrapper } = createHarness();
+
+    const first = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    await act(settle);
+    first.unmount();
+
+    mockChange();
+    mockChange();
+    await settle();
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+
+    expect(store.getState().zappPipes[url]).toMatchObject({
+      stale: true,
+      invalidationVersion: 2,
+      data,
+    });
+
+    const second = renderHook(() => useFeedLoader({ feedUrl: url }), {
+      wrapper,
+    });
+
+    await act(settle);
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    second.unmount();
+  });
+
+  it("runs one follow-up when invalidated repeatedly during a request", async () => {
+    const { store, wrapper } = createHarness();
+    let finish;
+
+    mockGet.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        })
+    );
+
+    const hook = renderHook(() => useFeedLoader({ feedUrl: url }), { wrapper });
+    await act(settle);
+
+    await act(async () => {
+      mockChange();
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      finish({ response: data, code: 200 });
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    hook.unmount();
+  });
+
+  it("stops a failed revalidation until another dependency change", async () => {
+    const { wrapper } = createHarness();
+    const hook = renderHook(() => useFeedLoader({ feedUrl: url }), { wrapper });
+    await act(settle);
+    mockGet.mockRejectedValueOnce(new Error("network unavailable"));
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(hook.result.current.error).toBeDefined();
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(3);
+    expect(hook.result.current.error).toBeUndefined();
+    hook.unmount();
+  });
+
+  it("releases cache subscriptions for direct clear actions", async () => {
+    const { store } = createHarness();
+    await store.dispatch(loadPipesData(url));
+    await store.dispatch(loadPipesData(`${url}/two`));
+    store.dispatch(zappPipesClear(url));
+    expect(mockRelease).toHaveBeenCalledTimes(1);
+    store.dispatch(zappPipesClear());
+    expect(mockRelease).toHaveBeenCalledTimes(2);
+  });
+
+  it("preserves POST method and body when revalidating", async () => {
+    const { wrapper } = createHarness();
+    const bodyParams = { filter: "recent" };
+
+    const hook = renderHook(
+      () =>
+        useFeedLoader({
+          feedUrl: url,
+          pipesOptions: { method: "post", bodyParams },
+        }),
+      { wrapper }
+    );
+
+    await act(settle);
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockSubscribe).toHaveBeenCalledWith(
+      url,
+      { method: "post" },
+      expect.any(Function)
+    );
+
+    expect(mockPost).toHaveBeenCalledTimes(2);
+    expect(mockPost).toHaveBeenLastCalledWith(url, bodyParams);
+    expect(mockGet).not.toHaveBeenCalled();
+    hook.unmount();
+  });
+
+  it("does not revalidate a skipped mounted feed until loading is enabled", async () => {
+    const { store, wrapper } = createHarness();
+    await store.dispatch(loadPipesData(url));
+
+    const hook = renderHook(
+      ({ skipLoading }) =>
+        useFeedLoader({
+          feedUrl: url,
+          pipesOptions: { skipLoading },
+        }),
+      { wrapper, initialProps: { skipLoading: true } }
+    );
+
+    await act(async () => {
+      mockChange();
+      await settle();
+    });
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+    expect(store.getState().zappPipes[url].stale).toBe(true);
+
+    hook.rerender({ skipLoading: false });
+    await act(settle);
+    expect(mockGet).toHaveBeenCalledTimes(2);
+    expect(store.getState().zappPipes[url].stale).toBeUndefined();
+    hook.unmount();
+  });
+
+  it("shares GET revalidation with an omitted or empty unused request body", async () => {
+    const { store } = createHarness();
+    await store.dispatch(loadPipesData(url));
+    mockChange();
+    mockGet.mockClear();
+
+    await Promise.all([
+      store.dispatch(loadPipesData(url)),
+      store.dispatch(loadPipesData(url, { method: "get", bodyParams: {} })),
+    ]);
+
+    expect(mockGet).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps plugin observation until its cache is cleared", async () => {
+    const release = jest.fn();
+    let changed;
+
+    const addDataSourceListener = jest.fn((callback) => {
+      changed = callback;
+
+      return release;
+    });
+
+    const { store, wrapper } = createHarness([
+      {
+        identifier: "generic-provider",
+        module: { addDataSourceListener },
+      } as QuickBrickPlugin,
+    ]);
+
+    const pluginUrl = "pipesv2://generic-provider/feed";
+
+    const hook = renderHook(() => useFeedLoader({ feedUrl: pluginUrl }), {
+      wrapper,
+    });
+
+    await act(settle);
+    hook.unmount();
+    changed();
+    await settle();
+    expect(mockGet).toHaveBeenCalledTimes(1);
+    expect(store.getState().zappPipes[pluginUrl].stale).toBe(true);
+    expect(release).not.toHaveBeenCalled();
+    store.dispatch(zappPipesClear(pluginUrl));
+    expect(release).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -2,6 +2,7 @@ import { renderHook, waitFor } from "@testing-library/react-native";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import * as ZappPipes from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 jest.mock("../../navigation");
 
@@ -32,11 +33,16 @@ describe("useBatchLoading", () => {
     // ... more items
   ];
 
-  beforeAll(() => {
-    jest.useFakeTimers();
+  beforeEach(() => {
+    jest
+      .spyOn(ZappPipes, "loadPipesData")
+      .mockImplementation((url, options) => async (dispatch) => {
+        dispatch(ZappPipes.zappPipesRequestStart(url, options));
+      });
   });
 
   afterEach(() => {
+    jest.restoreAllMocks();
     jest.clearAllMocks();
   });