@applicaster/zapp-react-native-utils 16.0.0-alpha.8716141508 → 16.0.0-alpha.9024462102

package/pluginUtils/__tests__/pluginUtils.test.js

@@ -1,3 +1,9 @@
+const mockAppStoreGet = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockAppStoreGet(key) },
+}));
+
 import * as R from "ramda";
 import * as pluginUtils from "../index";
 
@@ -148,6 +154,32 @@ describe("findPluginByIdentifier", () => {
   });
 });
 
+describe("getPluginByIdentifier", () => {
+  const { getPluginByIdentifier } = pluginUtils;
+
+  const plugins = {
+    foo: pluginMock("foo", "foo", "some_plugin_type"),
+    bar: pluginMock("foo", "bar", "some_plugin_type"),
+  };
+
+  beforeEach(() => {
+    mockAppStoreGet.mockReset();
+  });
+
+  it("reads plugins from appStore and returns the matching plugin", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("foo")).toEqual(plugins.foo);
+    expect(mockAppStoreGet).toHaveBeenCalledWith("plugins");
+  });
+
+  it("returns undefined when the plugin is not found", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("do_not_exist")).toBeUndefined();
+  });
+});
+
 describe("findPluginByType", () => {
   const { findPluginByType } = pluginUtils;
 

package/pluginUtils/index.ts

@@ -1,4 +1,5 @@
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { toCamelCase, toPascalCase } from "../stringUtils";
 
 import { getNavigationType } from "../navigationUtils";
@@ -97,6 +98,34 @@ export function findPluginByIdentifier(
   return plugin;
 }
 
+/**
+ * Like findPluginByIdentifier, but reads the current plugins list from appStore.
+ * Convenience for non-render / hook code that doesn't already have `plugins` in hand.
+ * @param identifier of the plugin to look for
+ * @param doNotWarn if set to true, will not log a warning if plugin is not found
+ * @return whole plugin if found, undefined otherwise
+ */
+export function getPluginByIdentifier(
+  identifier: string,
+  doNotWarn: boolean = false
+): (QuickBrickPlugin | ZappPlugin | Plugin) | undefined {
+  try {
+    const plugins = appStore.get("plugins") ?? {};
+
+    return findPluginByIdentifier(identifier, plugins, doNotWarn);
+  } catch (error) {
+    if (!doNotWarn) {
+      pluginUtilsLogger.warning({
+        message:
+          "Could not read plugins from appStore while resolving plugin by identifier",
+        data: { identifier, error },
+      });
+    }
+
+    return undefined;
+  }
+}
+
 const pluginTypeForItemTypeMap = {
   playable: "player",
 };

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";
 
@@ -34,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);
@@ -80,7 +87,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 +119,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
@@ -96,3 +139,25 @@ export function useEntryActionState(
 
   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

@@ -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/__tests__/index.test.js

@@ -1,7 +1,24 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { AppState } from "react-native";
+import { renderHook, cleanup, act } from "@testing-library/react-native";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 
+let appStateListener;
+
+AppState.currentState = "active";
+
+jest.spyOn(AppState, "addEventListener").mockImplementation((_, listener) => {
+  appStateListener = listener;
+
+  return { remove: jest.fn() };
+});
+
+const changeAppState = (state) =>
+  act(() => {
+    AppState.currentState = state;
+    appStateListener(state);
+  });
+
 const MockNetInfo = {
   type: "none",
   details: {},
@@ -9,7 +26,7 @@ const MockNetInfo = {
   isConnected: false,
 };
 
-const { useConnectionInfo } = require("../");
+const { useConnectionInfo, APP_ACTIVE_GRACE_PERIOD_MS } = require("../");
 
 describe("useConnectionInfo", () => {
   const wrapper = {
@@ -80,4 +97,139 @@ describe("useConnectionInfo", () => {
 
     expect(current).toEqual(true);
   });
+
+  describe("app state grace period", () => {
+    const offlineInfo = {
+      type: "none",
+      details: {},
+      isInternetReachable: false,
+      isConnected: false,
+    };
+
+    const onlineInfo = {
+      type: "wifi",
+      details: {},
+      isInternetReachable: true,
+      isConnected: true,
+    };
+
+    const renderConnectionHook = (justOnlineStatus, initialInfo) => {
+      let info = initialInfo;
+
+      const hook = renderHook(() => useConnectionInfo(justOnlineStatus), {
+        // eslint-disable-next-line react/prop-types,react/display-name
+        wrapper: ({ children }) => (
+          <NetworkStatusContext.Provider value={info}>
+            {children}
+          </NetworkStatusContext.Provider>
+        ),
+      });
+
+      const setInfo = (next) => {
+        info = next;
+        hook.rerender();
+      };
+
+      return { ...hook, setInfo };
+    };
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      AppState.currentState = "active";
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+      cleanup();
+    });
+
+    it("returns true while the app is in background even if offline", () => {
+      const { result, setInfo } = renderConnectionHook(true, onlineInfo);
+
+      changeAppState("background");
+      setInfo(offlineInfo);
+
+      expect(result.current).toBe(true);
+    });
+
+    it("ignores offline state for the grace period after coming back to foreground", () => {
+      const { result, setInfo } = renderConnectionHook(true, onlineInfo);
+
+      changeAppState("background");
+      setInfo(offlineInfo);
+      changeAppState("active");
+
+      expect(result.current).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(APP_ACTIVE_GRACE_PERIOD_MS - 1);
+      });
+
+      expect(result.current).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(1);
+      });
+
+      expect(result.current).toBe(false);
+    });
+
+    it("reports online when network recovers during the grace period", () => {
+      const { result, setInfo } = renderConnectionHook(true, onlineInfo);
+
+      changeAppState("background");
+      setInfo(offlineInfo);
+      changeAppState("active");
+      setInfo(onlineInfo);
+
+      act(() => {
+        jest.advanceTimersByTime(APP_ACTIVE_GRACE_PERIOD_MS);
+      });
+
+      expect(result.current).toBe(true);
+    });
+
+    it("returns last connection info seen while active during the grace period", () => {
+      const { result, setInfo } = renderConnectionHook(false, onlineInfo);
+
+      changeAppState("background");
+      setInfo(offlineInfo);
+      changeAppState("active");
+
+      expect(result.current).toBe(onlineInfo);
+
+      act(() => {
+        jest.advanceTimersByTime(APP_ACTIVE_GRACE_PERIOD_MS);
+      });
+
+      expect(result.current).toBe(offlineInfo);
+    });
+
+    it("restarts the grace period when the app goes to background again", () => {
+      const { result, setInfo } = renderConnectionHook(true, onlineInfo);
+
+      changeAppState("background");
+      setInfo(offlineInfo);
+      changeAppState("active");
+
+      act(() => {
+        jest.advanceTimersByTime(APP_ACTIVE_GRACE_PERIOD_MS - 1000);
+      });
+
+      changeAppState("background");
+      changeAppState("active");
+
+      act(() => {
+        jest.advanceTimersByTime(APP_ACTIVE_GRACE_PERIOD_MS - 1);
+      });
+
+      expect(result.current).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(1);
+      });
+
+      expect(result.current).toBe(false);
+    });
+  });
 });

package/reactHooks/connection/index.tsx

@@ -1,27 +1,91 @@
 /*   eslint-disable no-unused-vars, no-redeclare */
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 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";
 
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { useAppState } from "../app/useAppState";
+
+const { log_debug } = createLogger({
+  subsystem: "connection",
+  category: "useConnectionInfo",
+});
+
+type ConnectionInfo = NetInfoState & { deviceStatus: NetStatus };
+
+/**
+ * Time after the app returns to the foreground during which network changes are ignored.
+ * NetInfo may report a stale "offline" state right after resume (e.g. in power saving mode),
+ * see https://github.com/react-native-netinfo/react-native-netinfo/issues/538
+ */
+export const APP_ACTIVE_GRACE_PERIOD_MS = 3000;
+
+/**
+ * Returns true while the app is not active, and for APP_ACTIVE_GRACE_PERIOD_MS after it becomes active again
+ */
+const useIsNetworkStatusUnreliable = (isAppActive: boolean): boolean => {
+  const [isSettling, setIsSettling] = useState(!isAppActive);
+
+  useEffect(() => {
+    if (!isAppActive) {
+      setIsSettling(true);
+
+      return;
+    }
+
+    const timer = setTimeout(
+      () => setIsSettling(false),
+      APP_ACTIVE_GRACE_PERIOD_MS
+    );
+
+    return () => clearTimeout(timer);
+  }, [isAppActive]);
+
+  return !isAppActive || isSettling;
+};
+
 /**
  * This hook returns connection type from RN NetInfo component or boolean for iConnected if justOnlineStatus flag is set
+ * While the app is in background and for APP_ACTIVE_GRACE_PERIOD_MS after it comes back to foreground,
+ * network changes are ignored: the boolean form returns true and the object form returns the last state seen while active
  * @param {boolean} justOnlineStatus - flag if to return boolean for isConnected
  *  Returns connection object from NetInfo or boolean if isConnected
  */
 
 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;
+
+  const appState = useAppState();
+  const isAppActive = appState === "active";
+  const ignoreNetworkChanges = useIsNetworkStatusUnreliable(isAppActive);
+
+  const lastReliableConnectionInfo = useRef(connectionInfo);
+
+  if (!ignoreNetworkChanges) {
+    lastReliableConnectionInfo.current = connectionInfo;
+  }
+
+  useEffect(() => {
+    log_debug("useConnectionInfo: change", {
+      connectionInfo,
+      isOnline: isOnline(connectionInfo),
+      appState,
+      ignoreNetworkChanges,
+    });
+  }, [connectionInfo, appState, ignoreNetworkChanges]);
+
+  if (justOnlineStatus) {
+    return ignoreNetworkChanges || isOnline(connectionInfo) === true;
+  }
 
-  return justOnlineStatus ? isOnline(connectionInfo) === true : connectionInfo;
+  return lastReliableConnectionInfo.current;
 }

package/reactHooks/index.ts

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