@applicaster/zapp-react-native-utils 16.0.0-rc.101 → 16.0.0-rc.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-rc.101",
+  "version": "16.0.0-rc.104",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.101",
+    "@applicaster/applicaster-types": "16.0.0-rc.104",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

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

@@ -0,0 +1,243 @@
+import { renderHook } from "@testing-library/react-native";
+import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
+import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import * as useIsScreenActiveHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
+import { refreshCoordinator } from "../../../refreshUtils/RefreshCoordinator";
+import { useMarkPipesDataStale } from "../useMarkPipesDataStale";
+
+const mockDispatch = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  useAppDispatch: () => mockDispatch,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl",
+  () => ({
+    getDatasourceUrl: jest.fn(
+      (_ctx, component) => component?.data?.source || null
+    ),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts",
+  () => ({
+    usePipesContexts: jest.fn(() => ({})),
+  })
+);
+
+describe("useMarkPipesDataStale", () => {
+  let mockNavigator: any;
+  let mockRoute: any;
+  let mockIsActive: boolean;
+
+  const riverId = "river-123";
+
+  const refreshableComponent: any = {
+    id: "comp-1",
+    rules: { clear_cache_on_reload: true },
+    data: { source: "https://feed.example.com/data1" },
+  };
+
+  const stringBooleanComponent: any = {
+    id: "comp-2",
+    rules: { clear_cache_on_reload: "true" },
+    data: { source: "https://feed.example.com/data2" },
+  };
+
+  const nonRefreshableComponent: any = {
+    id: "comp-3",
+    rules: { clear_cache_on_reload: false },
+    data: { source: "https://feed.example.com/data3" },
+  };
+
+  const noSourceComponent: any = {
+    id: "comp-4",
+    rules: { clear_cache_on_reload: true },
+  };
+
+  const allComponents = [
+    refreshableComponent,
+    stringBooleanComponent,
+    nonRefreshableComponent,
+    noSourceComponent,
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockIsActive = true;
+
+    mockNavigator = {
+      currentRoute: "river/river-123",
+    };
+
+    mockRoute = {
+      pathname: "river/river-123",
+      screenData: { id: riverId },
+    };
+
+    jest
+      .spyOn(useNavigationHooks, "useNavigation")
+      .mockImplementation(() => mockNavigator);
+
+    jest.spyOn(useRouteHook, "useRoute").mockImplementation(() => mockRoute);
+
+    jest
+      .spyOn(useIsScreenActiveHook, "useIsScreenActive")
+      .mockImplementation(() => mockIsActive);
+
+    jest
+      .spyOn(refreshCoordinator, "triggerRefresh")
+      .mockImplementation(jest.fn());
+
+    jest
+      .spyOn(zappPipesModule, "markPipesDataStale")
+      .mockImplementation(
+        (url, opts) => ({ type: "MARK_STALE", url, opts }) as any
+      );
+  });
+
+  describe("on unmount", () => {
+    it("marks clear_cache_on_reload feeds stale on unmount", () => {
+      const { unmount } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data1",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data2",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).not.toHaveBeenCalledWith(
+        "https://feed.example.com/data3",
+        expect.anything()
+      );
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not mark stale on unmount if pathname includes videoModal", () => {
+      mockRoute.pathname = "videoModal/item-123";
+
+      const { unmount } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      unmount();
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on screen return (screen not unmounted in Transitioner)", () => {
+    it("does not trigger refresh on initial mount", () => {
+      renderHook(() => useMarkPipesDataStale(riverId, allComponents));
+
+      expect(refreshCoordinator.triggerRefresh).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it("triggers refresh and marks stale when returning from a deeper screen", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // 1. User navigates away to a deeper screen
+      mockNavigator.currentRoute = "river/deeper-screen";
+      mockIsActive = false;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
+
+      // 2. User presses back and returns to original screen
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+        [refreshableComponent, stringBooleanComponent],
+        riverId
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data1",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data2",
+        { riverId }
+      );
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not trigger duplicate refreshes on subsequent re-renders on the same screen", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // Navigate away
+      mockNavigator.currentRoute = "river/deeper-screen";
+      mockIsActive = false;
+      rerender({});
+
+      // Return
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      // Subsequent re-render without navigation
+      rerender({});
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+    });
+
+    it("triggers refresh again if user navigates away a second time and returns", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // First trip: navigate away and return
+      mockNavigator.currentRoute = "river/screen-2";
+      mockIsActive = false;
+      rerender({});
+
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      // Second trip: navigate away to another screen and return
+      mockNavigator.currentRoute = "river/screen-3";
+      mockIsActive = false;
+      rerender({});
+
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/reactHooks/feed/useMarkPipesDataStale.ts

@@ -3,46 +3,91 @@ 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 { markPipesDataStale } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
-import { useRoute } from "../navigation";
 import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
+import { isTrue } from "../../booleanUtils";
+import { refreshCoordinator } from "../../refreshUtils/RefreshCoordinator";
+import { useNavigation, useRoute } from "../navigation";
+import { usePrevious } from "../utils";
+
+const getRefreshableComponents = (components: ZappUIComponent[]) =>
+  components?.filter(
+    (c) => isTrue(c?.rules?.clear_cache_on_reload) && c?.data?.source
+  ) || [];
 
 /**
  * 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.
+ *
+ * Also triggers refresh for mounted components and marks feeds stale when
+ * returning back to this screen from a deeper route in the Transitioner
+ * (where the screen was kept mounted in the background).
+ *
  * @param {string} riverId screen id
  * @param {Array} riverComponents list of UI components
  */
-export const useMarkPipesDataStale = (riverId, riverComponents) => {
+export const useMarkPipesDataStale = (
+  riverId: string,
+  riverComponents: ZappUIComponent[]
+) => {
   const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
+  const { currentRoute } = useNavigation();
+  const prevRoute = usePrevious(currentRoute);
 
-  React.useEffect(() => {
-    return () => {
-      riverComponents.forEach((component) => {
-        if (
-          component?.rules?.clear_cache_on_reload &&
-          component?.data?.source &&
-          // We don't want to refresh cache when closing/minimising videoModal
-          !pathname.includes("videoModal")
-        ) {
-          const url = getDatasourceUrl(
-            {
-              screenData,
-              ...pipesContexts,
-            },
-            component
-          );
-
-          if (url) {
-            dispatch(markPipesDataStale(url, { riverId }));
-          }
+  const isBackToScreen = Boolean(
+    prevRoute && prevRoute !== currentRoute && currentRoute === pathname
+  );
+
+  const invalidateComponents = React.useCallback(
+    (components: ZappUIComponent[]) => {
+      components.forEach((component) => {
+        const url = getDatasourceUrl(
+          { screenData, ...pipesContexts },
+          component
+        );
+
+        if (url) {
+          dispatch(markPipesDataStale(url, { riverId }));
         }
       });
+    },
+    [dispatch, screenData, pipesContexts, riverId]
+  );
+
+  // Stale invalidation on unmount (existing behavior)
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
+  React.useEffect(() => {
+    return () => {
+      if (pathname?.includes("videoModal")) return;
+
+      invalidateComponents(getRefreshableComponents(riverComponents));
     };
   }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
+
+  // Reload when returning back to this screen from another screen
+  React.useEffect(() => {
+    if (!isBackToScreen || pathname?.includes("videoModal")) {
+      return;
+    }
+
+    const refreshable = getRefreshableComponents(riverComponents);
+
+    if (refreshable.length === 0) {
+      return;
+    }
+
+    invalidateComponents(refreshable);
+    refreshCoordinator.triggerRefresh(refreshable, riverId);
+  }, [
+    isBackToScreen,
+    pathname,
+    riverComponents,
+    riverId,
+    invalidateComponents,
+  ]);
 };
 
 /**