@applicaster/zapp-react-native-ui-components 14.0.0-rc.8 → 15.0.0-rc.1

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

@@ -1,214 +1,226 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WithRiverFeedLoader renders correctly 1`] = `
-<View
-  dispatch={[MockFunction]}
-  river={
-    {
-      "id": "A1234",
-      "ui_components": [
-        {
-          "data": {
-            "source": "http://datasource0",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource1",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource2",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource3",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource4",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource5",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource6",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource7",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource8",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource9",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource10",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource11",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource12",
-          },
-          "rules": {
-            "clear_cache_on_reload": true,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource13",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource14",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource15",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource16",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource17",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource18",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource19",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource20",
-          },
-          "rules": {
-            "clear_cache_on_reload": true,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource21",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource22",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource23",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-        {
-          "data": {
-            "source": "http://datasource24",
-          },
-          "rules": {
-            "clear_cache_on_reload": false,
-          },
-        },
-      ],
-    }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
   }
-/>
+>
+  <View
+    dispatch={[MockFunction]}
+    river={
+      {
+        "id": "A1234",
+        "ui_components": [
+          {
+            "data": {
+              "source": "http://datasource0",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource1",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource2",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource3",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource4",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource5",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource6",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource7",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource8",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource9",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource10",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource11",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource12",
+            },
+            "rules": {
+              "clear_cache_on_reload": true,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource13",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource14",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource15",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource16",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource17",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource18",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource19",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource20",
+            },
+            "rules": {
+              "clear_cache_on_reload": true,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource21",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource22",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource23",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+          {
+            "data": {
+              "source": "http://datasource24",
+            },
+            "rules": {
+              "clear_cache_on_reload": false,
+            },
+          },
+        ],
+      }
+    }
+  />
+</RNCSafeAreaProvider>
 `;

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/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>;
+}