@applicaster/zapp-react-native-ui-components 13.0.8 → 13.0.9-alpha.8843371874

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

@@ -0,0 +1,368 @@
+import React from "react";
+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 { 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");
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedRefresh"
+);
+
+jest.mock("@applicaster/zapp-pipes-v2-client");
+
+jest.mock("@applicaster/zapp-react-native-bridge/Favorites", () => ({
+  favoritesListener: {
+    on: jest.fn(),
+    removeHandler: jest.fn(),
+  },
+}));
+
+jest.mock("../utils", () => ({
+  isVerticalListOrGrid: jest.fn(
+    (component) =>
+      component?.type === "vertical_list" || component?.type === "vertical_grid"
+  ),
+}));
+
+const componentRequiredKeys = { rules: { item_limit: 10 } };
+
+describe("UrlFeedResolver", () => {
+  const mockChildren = jest.fn(() => <div data-testid="mock-children" />);
+  const mockReloadData = jest.fn();
+  const mockLoadNext = jest.fn();
+
+  const mockAddDataSourceListener = jest.fn().mockReturnValue(jest.fn());
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useFeedLoaderModule.useFeedLoader as jest.Mock).mockReturnValue({
+      reloadData: mockReloadData,
+      loadNext: mockLoadNext,
+      error: null,
+      loading: false,
+      url: "test-url",
+      data: { entry: [{ id: "1" }] },
+    });
+  });
+
+  it("should use feedUrl directly when provided", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: "https://example.com/feed",
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should use component.data.source when no feedUrl is provided", () => {
+    const props = {
+      component: {
+        data: {
+          source: "https://example.com/source",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: "https://example.com/source",
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should handle FAVOURITES type correctly", () => {
+    const props = {
+      component: {
+        data: {
+          source: "favorites-source",
+          type: "FAVOURITES",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: "favorites-source",
+      pipesOptions: expect.objectContaining({
+        clearCache: true,
+        loadLocalFavorites: true,
+      }),
+    });
+
+    expect(favoritesListener.on).toHaveBeenCalledWith(
+      "FAVORITES_CHANGED",
+      mockReloadData
+    );
+  });
+
+  it("should handle APPLICASTER_COLLECTION type correctly", () => {
+    const props = {
+      component: {
+        data: {
+          source: "collection-id",
+          type: "APPLICASTER_COLLECTION",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl:
+        "applicaster://fetchData?type=APPLICASTER_COLLECTION&collectionId=collection-id",
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should handle APPLICASTER_CATEGORY type correctly", () => {
+    const props = {
+      component: {
+        data: {
+          source: "category-id",
+          type: "APPLICASTER_CATEGORY",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      plugins: [],
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(useFeedLoaderModule.useFeedLoader).toHaveBeenCalledWith({
+      feedUrl: expect.stringContaining(
+        "applicaster://fetchData?type=APPLICASTER_CATEGORY&categoryId=category-id"
+      ),
+      pipesOptions: expect.any(Object),
+    });
+  });
+
+  it("should set up URL context key changes listener", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    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", () => {
+    const props = {
+      feedUrl: "pipesv2://test-plugin/endpoint",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      plugins: [
+        {
+          identifier: "test-plugin",
+          module: {
+            addDataSourceListener: mockAddDataSourceListener,
+          },
+        },
+      ] as any,
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(mockAddDataSourceListener).toHaveBeenCalledWith(mockReloadData);
+    expect(mockSubscribeForKeyChanges).not.toHaveBeenCalled();
+  });
+
+  it("should apply item limit from component rules", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        rules: {
+          item_limit: "2",
+        },
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    (useFeedLoaderModule.useFeedLoader as jest.Mock).mockReturnValue({
+      reloadData: mockReloadData,
+      loadNext: mockLoadNext,
+      error: null,
+      loading: false,
+      url: "test-url",
+      data: { entry: [{ id: "1" }, { id: "2" }, { id: "3" }] },
+    });
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: expect.objectContaining({
+          data: expect.objectContaining({
+            entry: [{ id: "1" }, { id: "2" }],
+          }),
+        }),
+      })
+    );
+  });
+
+  it("should conditionally include loadNextData based on isLast and component type", () => {
+    // Case 1: isLast=true, should not include loadNextData regardless of component type
+    const props1 = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        type: "vertical_list",
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: true,
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props1} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadNextData: mockLoadNext,
+      })
+    );
+
+    mockChildren.mockClear();
+
+    // Case 2: isLast=false, vertical_list component, should not include loadNextData
+    const props2 = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        type: "vertical_list",
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: false,
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props2} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadNextData: undefined,
+      })
+    );
+
+    mockChildren.mockClear();
+
+    // Case 3: isLast=false, non-vertical component, should include loadNextData
+    const props3 = {
+      feedUrl: "https://example.com/feed",
+      component: {
+        type: "horizontal_list",
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: false,
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props3} />);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        loadNextData: mockLoadNext,
+      })
+    );
+  });
+
+  it("should pass correct zappPipesDataProps to children", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(mockChildren).toHaveBeenCalledWith({
+      zappPipesData: {
+        url: "test-url",
+        loading: false,
+        data: { entry: [{ id: "1" }] },
+        error: null,
+      },
+      reloadData: mockReloadData,
+      loadNextData: mockLoadNext,
+    });
+  });
+
+  it("should apply feed refresh hook", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: { ...componentRequiredKeys } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    renderWithProviders(<UrlFeedResolver {...props} />);
+
+    expect(useFeedRefreshModule.useFeedRefresh).toHaveBeenCalledWith({
+      reloadData: mockReloadData,
+      component: props.component,
+    });
+  });
+
+  it("should clean up listeners on unmount", () => {
+    const props = {
+      component: {
+        data: {
+          source: "favorites-source",
+          type: "FAVOURITES",
+        },
+        ...componentRequiredKeys,
+      } as any,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    const { unmount } = renderWithProviders(<UrlFeedResolver {...props} />);
+
+    unmount();
+
+    expect(favoritesListener.removeHandler).toHaveBeenCalledWith(
+      "FAVORITES_CHANGED",
+      mockReloadData
+    );
+  });
+});

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -17,9 +17,11 @@ import {
 
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import { subscribeForKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 import { isVerticalListOrGrid } from "./utils";
-import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
+import { useFilter } from "./utils/useFilter";
 
 type Props = {
   component: ZappUIComponent;
@@ -204,7 +206,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { pathname, screenData } = useRoute();
     const { plugins } = usePickFromState(["plugins"]);
 
     const screenContextData = useScreenContext();
@@ -286,6 +288,8 @@ export function zappPipesDataConnector(
       componentIndex
     );
 
+    const screenStateStore = useScreenStateStore();
+
     useEffect(() => {
       if (dataSourceUrl?.includes("pipesv2://") && reloadData) {
         const addListener = getListenerFromPlugin(dataSourceUrl, plugins);
@@ -294,9 +298,14 @@ export function zappPipesDataConnector(
           return addListener(reloadData);
         }
       } else {
-        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
+        return subscribeForKeyChanges({
+          url: dataSourceUrl,
+          pathname,
+          screenStateStore,
+          callback: reloadData,
+        });
       }
-    }, [dataSourceUrl, reloadData]);
+    }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
 
     useEffect(() => {
       if (type === FAVORITES_TYPE && reloadData) {
@@ -316,12 +325,17 @@ export function zappPipesDataConnector(
       [staticFeed?.loading, staticFeed?.data, data?.next, loading, data]
     );
 
+    const applyItemFilter = useFilter({ url, loading, data, error }, component);
+
     const zappPipesDataProps = useMemo(() => {
       const loadNextData =
         !isLast && isVerticalListOrGrid(component) ? undefined : loadNext;
 
       return {
-        zappPipesData: applyItemLimit(getZappPipesData(), component),
+        zappPipesData: applyItemLimit(
+          applyItemFilter(getZappPipesData()),
+          component
+        ),
         reloadData,
         loadNextData,
       };
@@ -335,6 +349,7 @@ export function zappPipesDataConnector(
       data,
       isLast,
       component,
+      applyItemFilter,
     ]);
 
     useFeedRefresh({

package/Decorators/ZappPipesDataConnector/resolvers/UrlFeedResolver.tsx

@@ -0,0 +1,266 @@
+/// <reference types="@applicaster/applicaster-types" />
+/// <reference types="@applicaster/zapp-react-native-ui-components" />
+import React, { useEffect, useMemo } from "react";
+import * as R from "ramda";
+import { Platform } from "react-native";
+import Url from "url";
+import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useFeedLoader,
+  useFeedRefresh,
+  useRoute,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+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";
+
+function getDataSourceUrl({
+  component,
+  feedUrl,
+  screenData,
+  entryContext,
+  searchContext,
+  screenContext,
+}): { dataSourceUrl: string | null; type: string | null } {
+  if (feedUrl) {
+    return { dataSourceUrl: feedUrl, type: null };
+  }
+
+  if (component.data) {
+    const {
+      data: { source, type, mapping },
+    } = component;
+
+    if (type === FAVORITES_TYPE) {
+      return { dataSourceUrl: source || FAVORITES_TYPE, type };
+    }
+
+    if (source) {
+      if (type === "APPLICASTER_COLLECTION" && !R.includes("://", source)) {
+        return {
+          dataSourceUrl: `applicaster://fetchData?type=${type}&collectionId=${source}`,
+          type,
+        };
+      }
+
+      if (type === "APPLICASTER_CATEGORY" && !R.includes("://", source)) {
+        return {
+          dataSourceUrl: `applicaster://fetchData?type=${type}&categoryId=${source}&platform=${Platform.OS}`,
+          type,
+        };
+      }
+
+      if (mapping) {
+        const contexts = {
+          entry: entryContext,
+          screen: screenContext || screenData,
+          search: getSearchContext(searchContext, mapping),
+        };
+
+        const dataSourceUrl = getInflatedDataSourceUrl({
+          source,
+          mapping,
+          contexts,
+        });
+
+        if (!dataSourceUrl) {
+          return { dataSourceUrl: null, type: null };
+        }
+
+        return { dataSourceUrl, type };
+      }
+
+      return { dataSourceUrl: source, type };
+    }
+  }
+
+  return { dataSourceUrl: null, type: null };
+}
+
+function getMethodAndParams(component) {
+  const method: "get" | "post" = R.pathOr("get", ["data", "method"], component);
+
+  const bodyParams: Record<string, unknown> = R.pathOr(
+    {},
+    ["data", "bodyParams"],
+    component
+  );
+
+  return {
+    method,
+    bodyParams,
+  };
+}
+
+function getListenerFromPlugin(
+  dataSourceUrl: string,
+  plugins: QuickBrickPlugin[]
+): AddDataSourceListener | void {
+  const url = Url.parse(dataSourceUrl, false);
+
+  const addListener = R.compose(
+    R.path(["module", "addDataSourceListener"]),
+    R.find(R.propEq("identifier", url.host))
+  )(plugins);
+
+  return addListener;
+}
+
+function applyItemLimit(zappPipesData, component) {
+  if (!zappPipesData || !zappPipesData.data) {
+    return zappPipesData;
+  }
+
+  const { data } = zappPipesData;
+
+  const {
+    rules: { item_limit },
+  } = component;
+
+  if (item_limit && data.entry && data.entry.length) {
+    return {
+      ...zappPipesData,
+      data: {
+        ...data,
+        entry: R.slice(
+          0,
+          Math.min(Number(item_limit), R.length(data.entry)),
+          data.entry
+        ),
+      },
+    };
+  }
+
+  return zappPipesData;
+}
+
+type UrlFeedResolverProps = ComponentDataSourceContext & {
+  children: (dataProps: ZappPipesDataProps) => React.ReactNode;
+};
+
+export function UrlFeedResolver({
+  children,
+  component,
+  feedUrl,
+  isLast,
+  entryContext,
+  screenContext,
+  searchContext,
+  screenData,
+  plugins,
+}: UrlFeedResolverProps) {
+  const { dataSourceUrl, type } = useMemo(
+    () =>
+      getDataSourceUrl({
+        component,
+        feedUrl,
+        screenData,
+        entryContext,
+        searchContext,
+        screenContext,
+      }),
+    [
+      component?.id,
+      feedUrl,
+      entryContext,
+      searchContext,
+      screenContext,
+      screenData?.id,
+    ]
+  );
+
+  const shouldClearCache = useMemo(
+    () => Boolean(component?.rules?.clear_cache_on_reload),
+    [component?.id]
+  );
+
+  const pipesOptions = useMemo(
+    () => ({
+      clearCache: type === FAVORITES_TYPE,
+      loadLocalFavorites: type === FAVORITES_TYPE,
+      silentRefresh: !shouldClearCache,
+      ...getMethodAndParams(component),
+    }),
+    [type, shouldClearCache, component]
+  );
+
+  const { reloadData, loadNext, error, loading, url, data } = useFeedLoader({
+    feedUrl: dataSourceUrl ?? "",
+    pipesOptions,
+  });
+
+  const { pathname } = useRoute();
+  const screenStateStore = useScreenStateStore();
+
+  // Setup listeners for data source URL
+  useEffect(() => {
+    if (!reloadData) {
+      return;
+    }
+
+    if (dataSourceUrl?.includes("pipesv2://")) {
+      (
+        getListenerFromPlugin(dataSourceUrl, plugins) as AddDataSourceListener
+      )?.(reloadData);
+    } else {
+      return subscribeForKeyChanges({
+        url: dataSourceUrl,
+        pathname,
+        screenStateStore,
+        callback: reloadData,
+      });
+    }
+  }, [dataSourceUrl, reloadData, pathname, screenStateStore]);
+
+  // Setup favorites listener
+  useEffect(() => {
+    if (type === FAVORITES_TYPE && reloadData) {
+      favoritesListener.on("FAVORITES_CHANGED", reloadData);
+
+      return () => {
+        favoritesListener.removeHandler("FAVORITES_CHANGED", reloadData);
+      };
+    }
+  }, [type, reloadData]);
+
+  // Apply feed refresh hook
+  useFeedRefresh({
+    reloadData,
+    component,
+  });
+
+  const loadNextData = useMemo(
+    () => (!isLast && isVerticalListOrGrid(component) ? undefined : loadNext),
+    [isLast, component, loadNext]
+  );
+
+  const applyItemFilter = useFilter({ url, loading, data, error }, component);
+
+  const zappPipesDataProps = useMemo(() => {
+    const pipeData = { url, loading, data, error };
+
+    return {
+      zappPipesData: applyItemLimit(applyItemFilter(pipeData), component),
+      reloadData,
+      loadNextData,
+    };
+  }, [
+    url,
+    loading,
+    data,
+    error,
+    component,
+    reloadData,
+    loadNextData,
+    applyItemFilter,
+  ]);
+
+  return <>{children(zappPipesDataProps)}</>;
+}