@applicaster/zapp-react-native-ui-components 14.0.0-alpha.8419134002 → 14.0.0-alpha.8557119261

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/ResolverSelector.tsx

@@ -0,0 +1,25 @@
+// ResolverSelector.tsx
+import React from "react";
+import { ComponentDataSourceContext, ZappPipesDataProps } from "./types";
+import { StaticFeedResolver } from "./resolvers/StaticFeedResolver";
+import { UrlFeedResolver } from "./resolvers/UrlFeedResolver";
+import { NullFeedResolver } from "./resolvers/NullFeedResolver";
+
+type ResolverSelectorProps = ComponentDataSourceContext & {
+  children: (dataProps: ZappPipesDataProps) => React.ReactNode;
+};
+
+export function ResolverSelector(props: ResolverSelectorProps) {
+  const { getStaticComponentFeed, component, feedUrl, children } = props;
+
+  // Determine which resolver to use
+  if (getStaticComponentFeed) {
+    return <StaticFeedResolver {...props}>{children}</StaticFeedResolver>;
+  }
+
+  if (feedUrl || component?.data?.source) {
+    return <UrlFeedResolver {...props}>{children}</UrlFeedResolver>;
+  }
+
+  return <NullFeedResolver>{children}</NullFeedResolver>;
+}

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { NullFeedResolver } from "../resolvers/NullFeedResolver";
+import { ReloadDataFunction } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
+
+type MockChildrenArgs = {
+  zappPipesData?: {
+    loading: boolean;
+    data?: any;
+    error?: Error | null;
+  };
+  reloadData?: ReloadDataFunction;
+  loadNextData?: () => void;
+};
+
+describe("NullFeedResolver", () => {
+  it("should render children with correct default props", () => {
+    const mockChildren = jest.fn((_args: MockChildrenArgs) => (
+      <View testID="mock-children" />
+    ));
+
+    render(<NullFeedResolver>{mockChildren}</NullFeedResolver>);
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: {
+          url: "",
+          loading: false,
+          data: null,
+          error: null,
+        },
+        reloadData: expect.any(Function),
+        loadNextData: undefined,
+      })
+    );
+  });
+
+  it("should render children component", () => {
+    const { getByTestId } = render(
+      <NullFeedResolver>{() => <View testID="test-child" />}</NullFeedResolver>
+    );
+
+    expect(getByTestId("test-child")).toBeTruthy();
+  });
+
+  it("should create a memoized data object that doesn't change on re-renders", () => {
+    const mockChildren = jest.fn(() => <View testID="mock-children" />);
+
+    const { rerender } = render(
+      <NullFeedResolver>{mockChildren}</NullFeedResolver>
+    );
+
+    expect(mockChildren).toHaveBeenCalled();
+    // @ts-ignore
+    const firstCallDataProps = mockChildren.mock.calls[0][0];
+
+    rerender(<NullFeedResolver>{mockChildren}</NullFeedResolver>);
+
+    // @ts-ignore
+    const secondCallDataProps = mockChildren.mock.calls[1][0];
+
+    expect(firstCallDataProps).toBe(secondCallDataProps);
+  });
+
+  it("should have reloadData function that returns null", () => {
+    const mockChildren = jest.fn(() => <View testID="mock-children" />);
+
+    render(<NullFeedResolver>{mockChildren}</NullFeedResolver>);
+
+    expect(mockChildren).toHaveBeenCalled();
+
+    // @ts-ignore
+    const { reloadData } = mockChildren.mock.calls[0][0];
+
+    expect(reloadData()).toBeNull();
+  });
+});

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

@@ -0,0 +1,205 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { ResolverSelector } from "../ResolverSelector";
+import { StaticFeedResolver } from "../resolvers/StaticFeedResolver";
+import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
+import { NullFeedResolver } from "../resolvers/NullFeedResolver";
+
+jest.mock("../resolvers/StaticFeedResolver", () => ({
+  StaticFeedResolver: jest.fn(() => null),
+}));
+
+jest.mock("../resolvers/UrlFeedResolver", () => ({
+  UrlFeedResolver: jest.fn(() => null),
+}));
+
+jest.mock("../resolvers/NullFeedResolver", () => ({
+  NullFeedResolver: jest.fn(() => null),
+}));
+
+const testPlugin = {
+  identifier: "test-plugin",
+  name: "test",
+  type: "general" as PluginType,
+  module: jest.fn(),
+};
+
+describe("ResolverSelector", () => {
+  const mockChildren = jest.fn(() => <View testID="mock-children" />);
+
+  const mockComponent = {
+    id: "test-component",
+    type: "vertical_list",
+    styles: {},
+  } as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render StaticFeedResolver when getStaticComponentFeed is provided", () => {
+    const props = {
+      getStaticComponentFeed: jest.fn(),
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(StaticFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        getStaticComponentFeed: props.getStaticComponentFeed,
+        component: mockComponent,
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(UrlFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should render UrlFeedResolver when feedUrl is provided", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(UrlFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        feedUrl: props.feedUrl,
+        component: mockComponent,
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(StaticFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should render UrlFeedResolver when component.data.source is provided", () => {
+    const componentWithSource = {
+      ...mockComponent,
+      data: {
+        source: "data-source",
+      },
+    };
+
+    const props = {
+      component: componentWithSource,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(UrlFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        component: componentWithSource,
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(StaticFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should render NullFeedResolver when no data source is provided", () => {
+    const props = {
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(NullFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining({
+        children: mockChildren,
+      }),
+      expect.anything()
+    );
+
+    expect(StaticFeedResolver).not.toHaveBeenCalled();
+    expect(UrlFeedResolver).not.toHaveBeenCalled();
+  });
+
+  it("should pass all props to StaticFeedResolver", () => {
+    const props = {
+      getStaticComponentFeed: jest.fn(),
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: true,
+      componentIndex: 1,
+      isScreenWrappedInContainer: true,
+      entryContext: { entry: "test" },
+      screenContext: { screen: "test" },
+      searchContext: "search",
+      screenData: { data: "test" },
+      plugins: [testPlugin],
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(StaticFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining(props),
+      expect.anything()
+    );
+  });
+
+  it("should pass all props to UrlFeedResolver", () => {
+    const props = {
+      feedUrl: "https://example.com/feed",
+      component: mockComponent,
+      children: mockChildren,
+      riverId: "test-river",
+      isLast: true,
+      componentIndex: 1,
+      isScreenWrappedInContainer: true,
+      entryContext: { entry: "test" },
+      screenContext: { screen: "test" },
+      searchContext: "search",
+      screenData: { data: "test" },
+      plugins: [testPlugin],
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(UrlFeedResolver).toHaveBeenCalledWith(
+      expect.objectContaining(props),
+      expect.anything()
+    );
+  });
+
+  it("should prioritize StaticFeedResolver over UrlFeedResolver when both conditions are met", () => {
+    const componentWithSource = {
+      ...mockComponent,
+      data: {
+        source: "data-source",
+      },
+    };
+
+    const props = {
+      getStaticComponentFeed: jest.fn(),
+      feedUrl: "https://example.com/feed",
+      component: componentWithSource,
+      children: mockChildren,
+      riverId: "test-river",
+    };
+
+    render(<ResolverSelector {...props} />);
+
+    expect(StaticFeedResolver).toHaveBeenCalled();
+    expect(UrlFeedResolver).not.toHaveBeenCalled();
+    expect(NullFeedResolver).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,251 @@
+import React from "react";
+import { render, act, waitFor } from "@testing-library/react-native";
+import { StaticFeedResolver } from "../resolvers/StaticFeedResolver";
+import { View } from "react-native";
+import { ReloadDataFunction } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useFeedLoader";
+
+type MockChildrenArgs = {
+  zappPipesData?: {
+    loading: boolean;
+    data?: any;
+    error?: Error | null;
+  };
+  reloadData?: ReloadDataFunction;
+};
+
+describe("StaticFeedResolver", () => {
+  const mockChildren = jest.fn((_args: MockChildrenArgs) => (
+    <View data-testid="mock-children" />
+  ));
+
+  const mockComponent = {
+    id: "test-component",
+    position: 1,
+  } as any;
+
+  const mockGetStaticComponentFeed = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockGetStaticComponentFeed.mockResolvedValue({ entry: [{ id: "1" }] });
+  });
+
+  it("should generate correct static URL based on component", () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: expect.objectContaining({
+          url: "static://component?id=test-component&position=1",
+        }),
+      })
+    );
+  });
+
+  it("should start with loading state", () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockChildren).toHaveBeenCalledWith(
+      expect.objectContaining({
+        zappPipesData: expect.objectContaining({
+          loading: true,
+          data: null,
+          error: null,
+        }),
+      })
+    );
+  });
+
+  it("should fetch data when mounted", async () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockGetStaticComponentFeed).toHaveBeenCalledWith({
+      index: 0,
+      component: mockComponent,
+    });
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+            data: { entry: [{ id: "1" }] },
+          }),
+        })
+      );
+    });
+  });
+
+  it("should handle errors from getStaticComponentFeed", async () => {
+    const error = new Error("Test error");
+    mockGetStaticComponentFeed.mockRejectedValue(error);
+
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+            error,
+          }),
+        })
+      );
+    });
+  });
+
+  it("should provide a reloadData function that refreshes the data", async () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+          }),
+        })
+      );
+    });
+
+    const { reloadData } =
+      mockChildren.mock.calls[mockChildren.mock.calls.length - 1][0];
+
+    mockGetStaticComponentFeed.mockClear();
+    mockGetStaticComponentFeed.mockResolvedValue({ entry: [{ id: "2" }] });
+
+    await act(async () => {
+      await reloadData();
+    });
+
+    expect(mockGetStaticComponentFeed).toHaveBeenCalledWith({
+      index: 0,
+      component: mockComponent,
+    });
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            data: { entry: [{ id: "2" }] },
+          }),
+        })
+      );
+    });
+  });
+
+  it("should handle errors in reloadData", async () => {
+    render(
+      <StaticFeedResolver
+        getStaticComponentFeed={mockGetStaticComponentFeed}
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: false,
+          }),
+        })
+      );
+    });
+
+    const { reloadData } =
+      mockChildren.mock.calls[mockChildren.mock.calls.length - 1][0];
+
+    const error = new Error("Reload error");
+    mockGetStaticComponentFeed.mockRejectedValue(error);
+
+    await expect(reloadData()).rejects.toEqual(error);
+
+    await waitFor(() => {
+      expect(mockChildren).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            error,
+          }),
+        })
+      );
+    });
+  });
+
+  it("should not fetch data if getStaticComponentFeed is not provided", async () => {
+    render(
+      <StaticFeedResolver
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    expect(mockGetStaticComponentFeed).not.toHaveBeenCalled();
+  });
+
+  it("should provide reloadData function that resolves immediately if getStaticComponentFeed is not provided", async () => {
+    render(
+      <StaticFeedResolver
+        component={mockComponent}
+        componentIndex={0}
+        riverId="test-river"
+      >
+        {mockChildren}
+      </StaticFeedResolver>
+    );
+
+    const { reloadData } = mockChildren.mock.calls[0][0];
+
+    await expect(reloadData()).resolves.toBeUndefined();
+  });
+});