@applicaster/zapp-react-native-ui-components 14.0.0-alpha.5114565431 → 14.0.0-alpha.5203410334

package/Decorators/RiverFeedLoader/__tests__/riverFeedLoader.test.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import * as R from "ramda";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
 
 import * as mock_fixtures from "./fixtures";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 const mockUsePipesContexts = () => ({
   entry: mock_fixtures.entryContext,
@@ -11,8 +10,13 @@ const mockUsePipesContexts = () => ({
   search: mock_fixtures.searchContext,
 });
 
-const mockGetDatasourceUrl = jest.fn(
-  R.curry((_, component) => component.data.source)
+const mockDispatchLoadPipesData = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useLoadPipesDataDispatch",
+  () => ({
+    useLoadPipesDataDispatch: jest.fn(() => mockDispatchLoadPipesData),
+  })
 );
 
 jest.mock(
@@ -31,8 +35,6 @@ jest.mock(
 
 jest.mock("../utils", () => ({
   ...jest.requireActual("../utils"),
-  loadDatasources: jest.fn(),
-  getDatasourceUrl: mockGetDatasourceUrl,
   usePipesContexts: mockUsePipesContexts,
 }));
 
@@ -45,27 +47,23 @@ const riverProps = {
   dispatch: jest.fn(),
 };
 
-const { loadDatasources, getDatasourceUrl } = require("../utils");
-
 const { WithRiverFeedLoader } = require("..");
 
 describe("WithRiverFeedLoader", () => {
   const DecoratedRiver = WithRiverFeedLoader(River);
-  const wrapper = render(<DecoratedRiver {...riverProps} />);
+  const wrapper = renderWithProviders(<DecoratedRiver {...riverProps} />);
 
   it("renders correctly", () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("collects the datasources in the screen and loads them", () => {
-    expect(getDatasourceUrl).toHaveBeenCalledTimes(1);
-    expect(loadDatasources).toHaveBeenCalledTimes(1);
+    expect(mockDispatchLoadPipesData).toHaveBeenCalledTimes(23);
 
-    expect(loadDatasources).toHaveBeenNthCalledWith(
-      1,
-      mock_fixtures.riverDataSources,
-      mock_fixtures.river.id,
-      riverProps.dispatch
+    expect(mockDispatchLoadPipesData).toHaveBeenLastCalledWith(
+      "http://datasource24",
+      {},
+      { withResolvers: true, withScreenRouteMapping: true }
     );
   });
 });

package/Decorators/RiverFeedLoader/__tests__/utils.test.ts

@@ -14,31 +14,11 @@ jest.mock("@applicaster/zapp-react-native-redux/ZappPipes", () => ({
 }));
 
 const {
-  loadDatasources,
   riverIsCurrentRoute,
   getDatasourceUrl,
   ignoreComponentsWithClearCacheFlag,
 } = require("../utils");
 
-const {
-  loadPipesData,
-} = require("@applicaster/zapp-react-native-redux/ZappPipes");
-
-const dispatch = (value) => Promise.resolve(value);
-
-describe("loadDataSource", () => {
-  it("calls loadPipesData for each provided urls", async () => {
-    const urls = [
-      ["http://datasource1", "http://datasource2"],
-      ["http://datasource3", "http://datasource4"],
-    ];
-
-    await loadDatasources(urls, river.id, dispatch);
-
-    expect(loadPipesData).toHaveBeenCalledTimes(R.flatten(urls).length);
-  });
-});
-
 describe("riverIsCurrentRoute", () => {
   const route = "/river/homeId/river/screenId";
   const riverId = "screenId";

package/Decorators/RiverFeedLoader/index.tsx

@@ -4,15 +4,19 @@ import { DispatchProp } from "react-redux";
 
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 
-import { mapAndSplit } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import {
+  mapAndSplit,
+  mapPromises,
+  reducePromises,
+} from "@applicaster/zapp-react-native-utils/arrayUtils";
 
 import {
   DATASOURCE_CHUNKS,
   getDatasourceUrl,
   ignoreComponentsWithClearCacheFlag,
-  loadDatasources,
   usePipesContexts,
 } from "./utils";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type RiverProps = {
   dispatch: DispatchProp;
@@ -25,9 +29,10 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
   return function WrappedWithRiverFeedLoader(props: RiverProps) {
     const { river } = props;
     const { screenData, pathname } = useRoute();
-
     const pipesContexts = usePipesContexts(river.id, pathname);
 
+    const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
     const componentsToLoad = ignoreComponentsWithClearCacheFlag(
       river?.ui_components || []
     );
@@ -49,7 +54,20 @@ export function WithRiverFeedLoader(Component: ZappComponent) {
         item?.filter((item2) => item2 !== undefined)
       );
 
-      loadDatasources(nonEmptyDataSources, river?.id, props.dispatch);
+      reducePromises<string, void>(
+        mapPromises<string, void>((url) =>
+          loadPipesDataDispatcher(
+            url,
+            {},
+            {
+              withResolvers: true,
+              withScreenRouteMapping: true,
+            }
+          )
+        ),
+        undefined,
+        nonEmptyDataSources
+      );
     }, []);
 
     return <Component {...props} />;

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -1,10 +1,4 @@
 import * as R from "ramda";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
-import {
-  mapPromises,
-  reducePromises,
-} from "@applicaster/zapp-react-native-utils/arrayUtils";
 
 export { riverIsCurrentRoute, usePipesContexts } from "./usePipesContexts";
 
@@ -12,18 +6,6 @@ export { getDatasourceUrl } from "./getDatasourceUrl";
 
 export const DATASOURCE_CHUNKS = 10;
 
-export async function loadDatasources(urls: string[][], riverId, dispatch) {
-  return reducePromises<string, void>(
-    mapPromises<string, void>((url) => {
-      if (url) {
-        return dispatch(loadPipesData(url, { riverId }));
-      }
-    }),
-    undefined,
-    urls
-  );
-}
-
 export const ignoreComponentsWithClearCacheFlag = R.reject(
   R.pathEq(["rules", "clear_cache_on_reload"], true)
 );

package/Decorators/RiverResolver/__tests__/riverResolver.test.tsx

@@ -13,12 +13,9 @@ const rivers = {
   },
 };
 
-jest.doMock(
-  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
-  () => ({
-    usePickFromState: jest.fn(() => ({ rivers })),
-  })
-);
+jest.doMock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePickFromState: jest.fn(() => ({ rivers })),
+}));
 
 jest.doMock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname",

package/Decorators/ZappPipesDataConnector/__tests__/UrlFeedResolver.test.tsx

@@ -1,10 +1,16 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
 import * as useFeedLoaderModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
 import * as useFeedRefreshModule from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh";
-import * as zappPipesClientModule from "@applicaster/zapp-pipes-v2-client";
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import * as ZappPipesModule from "@applicaster/zapp-pipes-v2-client";
+
+const mockSubscribeForKeyChanges = jest.fn();
+
+jest
+  .spyOn(ZappPipesModule, "subscribeForKeyChanges")
+  .mockImplementation(mockSubscribeForKeyChanges);
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader");
 
@@ -35,9 +41,6 @@ describe("UrlFeedResolver", () => {
   const mockReloadData = jest.fn();
   const mockLoadNext = jest.fn();
 
-  const mockSubscribeForUrlContextKeyChanges =
-    zappPipesClientModule.subscribeForUrlContextKeyChanges as jest.Mock;
-
   const mockAddDataSourceListener = jest.fn().mockReturnValue(jest.fn());
 
   beforeEach(() => {
@@ -51,8 +54,6 @@ describe("UrlFeedResolver", () => {
       url: "test-url",
       data: { entry: [{ id: "1" }] },
     });
-
-    mockSubscribeForUrlContextKeyChanges.mockReturnValue(jest.fn());
   });
 
   it("should use feedUrl directly when provided", () => {
@@ -63,7 +64,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
       feedUrl: "https://example.com/feed",
@@ -83,7 +84,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
       feedUrl: "https://example.com/source",
@@ -104,7 +105,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
       feedUrl: "favorites-source",
@@ -133,7 +134,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
       feedUrl:
@@ -156,7 +157,7 @@ describe("UrlFeedResolver", () => {
       plugins: [],
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
       feedUrl: expect.stringContaining(
@@ -174,13 +175,12 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
-    expect(mockSubscribeForUrlContextKeyChanges).toHaveBeenCalledWith(
-      "https://example.com/feed",
-      {},
-      mockReloadData
-    );
+    expect(mockSubscribeForKeyChanges.mock.calls[0][0]).toMatchObject({
+      url: "https://example.com/feed",
+      callback: mockReloadData,
+    });
   });
 
   it("should set up pipesv2 URL listener from plugin if available", () => {
@@ -199,10 +199,10 @@ describe("UrlFeedResolver", () => {
       ] as any,
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(mockAddDataSourceListener).toHaveBeenCalledWith(mockReloadData);
-    expect(mockSubscribeForUrlContextKeyChanges).not.toHaveBeenCalled();
+    expect(mockSubscribeForKeyChanges).not.toHaveBeenCalled();
   });
 
   it("should apply item limit from component rules", () => {
@@ -226,7 +226,7 @@ describe("UrlFeedResolver", () => {
       data: { entry: [{ id: "1" }, { id: "2" }, { id: "3" }] },
     });
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(mockChildren).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -252,7 +252,7 @@ describe("UrlFeedResolver", () => {
       isLast: true,
     };
 
-    render(<UrlFeedResolver {...props1} />);
+    renderWithProviders(<UrlFeedResolver {...props1} />);
 
     expect(mockChildren).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -274,7 +274,7 @@ describe("UrlFeedResolver", () => {
       isLast: false,
     };
 
-    render(<UrlFeedResolver {...props2} />);
+    renderWithProviders(<UrlFeedResolver {...props2} />);
 
     expect(mockChildren).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -296,7 +296,7 @@ describe("UrlFeedResolver", () => {
       isLast: false,
     };
 
-    render(<UrlFeedResolver {...props3} />);
+    renderWithProviders(<UrlFeedResolver {...props3} />);
 
     expect(mockChildren).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -313,7 +313,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(mockChildren).toHaveBeenCalledWith({
       zappPipesData: {
@@ -335,7 +335,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    render(<UrlFeedResolver {...props} />);
+    renderWithProviders(<UrlFeedResolver {...props} />);
 
     expect(useFeedRefreshModule.useFeedRefresh).toHaveBeenCalledWith({
       reloadData: mockReloadData,
@@ -356,7 +356,7 @@ describe("UrlFeedResolver", () => {
       riverId: "test-river",
     };
 
-    const { unmount } = render(<UrlFeedResolver {...props} />);
+    const { unmount } = renderWithProviders(<UrlFeedResolver {...props} />);
 
     unmount();
 

package/Decorators/ZappPipesDataConnector/resolvers/UrlFeedResolver.tsx

@@ -10,10 +10,14 @@ import {
   getSearchContext,
   useFeedLoader,
   useFeedRefresh,
+  useRoute,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
+
 import { ComponentDataSourceContext, ZappPipesDataProps } from "../types";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
 import { isVerticalListOrGrid } from "../utils";
+import { useFilter } from "../utils/useFilter";
+import { subscribeForKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 const FAVORITES_TYPE = "FAVOURITES";
 
@@ -192,18 +196,28 @@ export function UrlFeedResolver({
     pipesOptions,
   });
 
+  const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
+
   // Setup listeners for data source URL
   useEffect(() => {
-    if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
-      const addListener = getListenerFromPlugin(dataSourceUrl, plugins);
+    if (!reloadData) {
+      return;
+    }
 
-      if (addListener) {
-        return addListener(reloadData);
-      }
+    if (dataSourceUrl?.includes("pipesv2://")) {
+      (
+        getListenerFromPlugin(dataSourceUrl, plugins) as AddDataSourceListener
+      )?.(reloadData);
     } else {
-      return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
+      return subscribeForKeyChanges({
+        url: dataSourceUrl,
+        pathname,
+        screenStateStore,
+        callback: reloadData,
+      });
     }
-  }, [dataSourceUrl, reloadData]);
+  }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
 
   // Setup favorites listener
   useEffect(() => {
@@ -227,15 +241,26 @@ export function UrlFeedResolver({
     [isLast, component, loadNext]
   );
 
+  const applyItemFilter = useFilter({ url, loading, data, error }, component);
+
   const zappPipesDataProps = useMemo(() => {
     const pipeData = { url, loading, data, error };
 
     return {
-      zappPipesData: applyItemLimit(pipeData, component),
+      zappPipesData: applyItemLimit(applyItemFilter(pipeData), component),
       reloadData,
       loadNextData,
     };
-  }, [url, loading, data, error, component, reloadData, loadNextData]);
+  }, [
+    url,
+    loading,
+    data,
+    error,
+    component,
+    reloadData,
+    loadNextData,
+    applyItemFilter,
+  ]);
 
   return <>{children(zappPipesDataProps)}</>;
 }