@applicaster/zapp-react-native-ui-components 13.0.0-alpha.5033140607 → 13.0.0-alpha.5304771702

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

@@ -4,206 +4,206 @@ exports[`WithRiverFeedLoader renders correctly 1`] = `
 <View
   dispatch={[MockFunction]}
   river={
-    Object {
+    {
       "id": "A1234",
-      "ui_components": Array [
-        Object {
-          "data": Object {
+      "ui_components": [
+        {
+          "data": {
             "source": "http://datasource0",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource1",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource2",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource3",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource4",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource5",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource6",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource7",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource8",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource9",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource10",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource11",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource12",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": true,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource13",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource14",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource15",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource16",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource17",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource18",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource19",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource20",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": true,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource21",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource22",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource23",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },
-        Object {
-          "data": Object {
+        {
+          "data": {
             "source": "http://datasource24",
           },
-          "rules": Object {
+          "rules": {
             "clear_cache_on_reload": false,
           },
         },

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

@@ -3,73 +3,68 @@ import * as R from "ramda";
 import { View } from "react-native";
 import { render } from "@testing-library/react-native";
 
-import {
-  entryContext,
-  navigator,
-  river,
-  riverDataSources,
-  screenContext,
-  screenData,
-  searchContext,
-} from "./fixtures";
+import * as mock_fixtures from "./fixtures";
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
-  useNavigation: jest.fn(() => navigator),
-  useRoute: jest.fn(() => ({ screenData })),
-}));
+const mockUsePipesContexts = () => ({
+  entry: mock_fixtures.entryContext,
+  screen: mock_fixtures.screenContext,
+  search: mock_fixtures.searchContext,
+});
+
+const mockGetDatasourceUrl = jest.fn(
+  R.curry((_, component) => component.data.source)
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
+  () => ({
+    useRoute: jest.fn(() => ({ screenData: mock_fixtures.screenData })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => ({
+    useNavigation: jest.fn(() => mock_fixtures.navigator),
+  })
+);
 
 jest.mock("../utils", () => ({
-  DATASOURCE_CHUNKS: 10,
+  ...jest.requireActual("../utils"),
   loadDatasources: jest.fn(),
-  getDatasourceUrl: jest.fn(R.curry((_, component) => component.data.source)),
-  usePipesContexts: jest.fn(() => ({
-    entryContext,
-    searchContext,
-    screenContext,
-  })),
-  ignoreComponentsWithClearCacheFlag: R.reject(
-    R.pathEq(["rules", "clear_cache_on_reload"], true)
-  ),
+  getDatasourceUrl: mockGetDatasourceUrl,
+  usePipesContexts: mockUsePipesContexts,
 }));
 
-const { WithRiverFeedLoader } = require("../index");
-
 const River = function (props) {
   return <View {...props} />;
 };
 
 const riverProps = {
-  river,
+  river: mock_fixtures.river,
   dispatch: jest.fn(),
 };
 
-const DecoratedRiver = WithRiverFeedLoader(River);
-
 const { loadDatasources, getDatasourceUrl } = require("../utils");
 
-describe("WithRiverFeedLoader", () => {
-  const getWrapper = () => render(<DecoratedRiver {...riverProps} />);
+const { WithRiverFeedLoader } = require("..");
 
-  beforeEach(() => {
-    getDatasourceUrl.mockClear();
-    loadDatasources.mockClear();
-  });
+describe("WithRiverFeedLoader", () => {
+  const DecoratedRiver = WithRiverFeedLoader(River);
+  const wrapper = render(<DecoratedRiver {...riverProps} />);
 
   it("renders correctly", () => {
-    const wrapper = getWrapper();
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   it("collects the datasources in the screen and loads them", () => {
-    getWrapper();
-
     expect(getDatasourceUrl).toHaveBeenCalledTimes(1);
     expect(loadDatasources).toHaveBeenCalledTimes(1);
 
     expect(loadDatasources).toHaveBeenNthCalledWith(
       1,
-      riverDataSources,
-      river.id,
+      mock_fixtures.riverDataSources,
+      mock_fixtures.river.id,
       riverProps.dispatch
     );
   });

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

@@ -14,7 +14,6 @@ jest.mock("@applicaster/zapp-react-native-redux/ZappPipes", () => ({
 }));
 
 const {
-  DATASOURCE_CHUNKS,
   loadDatasources,
   riverIsCurrentRoute,
   getDatasourceUrl,
@@ -27,14 +26,6 @@ const {
 
 const dispatch = (value) => Promise.resolve(value);
 
-describe("DATASOURCE_CHUNKS", () => {
-  const DEFAULT_DATASOURCE_CHUNKS = 10;
-
-  it("has the correct value", () => {
-    expect(DATASOURCE_CHUNKS).toBe(DEFAULT_DATASOURCE_CHUNKS);
-  });
-});
-
 describe("loadDataSource", () => {
   it("calls loadPipesData for each provided urls", async () => {
     const urls = [

package/Decorators/RiverFeedLoader/index.tsx

@@ -2,7 +2,7 @@ import React, { ComponentClass, FC, useEffect } from "react";
 import * as R from "ramda";
 import { DispatchProp } from "react-redux";
 
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 
 import { mapAndSplit } from "@applicaster/zapp-react-native-utils/arrayUtils";
 

package/Decorators/RiverFeedLoader/utils/getDatasourceUrl.ts

@@ -0,0 +1,39 @@
+import * as R from "ramda";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { ZappPipesEntryContext } from "../../../Contexts";
+
+export const getDatasourceUrl: (
+  contexts: {
+    screenData?: Record<string, any>;
+    entryContext: ReturnType<
+      typeof ZappPipesEntryContext.useZappPipesContext
+    >[0];
+    searchContext: string;
+    screenContext: ZappRiver;
+  },
+  component?: ZappUIComponent
+) => string | null = R.curry(
+  (
+    { screenData, entryContext, searchContext, screenContext },
+    component: ZappUIComponent
+  ) => {
+    const { source, mapping } = R.propOr({}, ["data"], component);
+
+    if (mapping) {
+      const contexts = {
+        entry: entryContext,
+        screen: screenContext || screenData,
+        search: getSearchContext(searchContext, mapping),
+      };
+
+      return getInflatedDataSourceUrl({ source, mapping, contexts });
+    }
+
+    return source;
+  }
+);

package/Decorators/RiverFeedLoader/utils/index.ts

@@ -0,0 +1,29 @@
+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";
+
+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/RiverFeedLoader/utils/usePipesContexts.ts

@@ -0,0 +1,40 @@
+import * as R from "ramda";
+
+import {
+  ZappPipesEntryContext,
+  ZappPipesScreenContext,
+  ZappPipesSearchContext,
+} from "../../../Contexts";
+
+export function riverIsCurrentRoute(riverId, route) {
+  const routeRiverId = R.compose(R.last, R.split("/"))(route);
+
+  return typeof riverId === "undefined" || routeRiverId === riverId;
+}
+
+export function usePipesContexts(
+  riverId: string,
+  route: string
+): {
+  entryContext: ReturnType<typeof ZappPipesEntryContext.useZappPipesContext>[0];
+  searchContext: string;
+  screenContext: ZappRiver;
+} {
+  const isNestedScreen = !riverIsCurrentRoute(riverId, route);
+
+  const routeForEntry = isNestedScreen ? `${route}/river/${riverId}` : route;
+
+  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
+    routeForEntry,
+    isNestedScreen
+  );
+
+  const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
+  const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
+
+  return {
+    entryContext,
+    searchContext,
+    screenContext,
+  };
+}

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

@@ -4,22 +4,22 @@ exports[`withRiver HoC renders correctly 1`] = `
 <mockConstructor
   otherProp="otherProp"
   river={
-    Object {
+    {
       "id": "A123",
     }
   }
   rivers={
-    Object {
-      "A123": Object {
+    {
+      "A123": {
         "id": "A123",
       },
-      "B345": Object {
+      "B345": {
         "id": "B345",
       },
     }
   }
   screenData={
-    Object {
+    {
       "id": "A123",
     }
   }

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

@@ -2,7 +2,7 @@ import React from "react";
 import { shallow } from "enzyme";
 import { View } from "react-native";
 import { shallowToJson } from "enzyme-to-json";
-import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import * as usePathnameHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
 
 const rivers = {
   A123: {
@@ -13,15 +13,21 @@ const rivers = {
   },
 };
 
-jest.doMock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  usePickFromState: jest.fn(() => ({ rivers })),
-}));
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
-  useLayoutVersion: jest.fn(() => true),
-}));
-
-jest.spyOn(navigationHooks, "usePathname").mockReturnValue("/home");
+jest.doMock(
+  "@applicaster/zapp-react-native-redux/hooks/usePickFromState",
+  () => ({
+    usePickFromState: jest.fn(() => ({ rivers })),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/layout/useLayoutVersion",
+  () => ({
+    useLayoutVersion: jest.fn(() => true),
+  })
+);
+
+jest.spyOn(usePathnameHooks, "usePathname").mockReturnValue("/home");
 
 // mocks useNavigator to return currentRoute: "/home"
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({

package/Decorators/ZappPipesDataConnector/__tests__/Hero.js

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { View } from "react-native";
 
 type Props = {
-  onLoadFinished: () => void,
+  onLoadFinished: () => void;
 };
 
 export function Hero(props: Props) {

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -1,10 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React, { useEffect, useMemo } from "react";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+
 import * as R from "ramda";
 import { Platform } from "react-native";
 import Url from "url";
-
+import { ENDPOINT_TAGS } from "@applicaster/zapp-react-native-utils/types";
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -16,9 +18,15 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import {
+  findEndpointForURL,
+  HTTP_METHODS,
+} from "@applicaster/zapp-pipes-v2-client";
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
 
 type Props = {
   component: ZappUIComponent;
@@ -291,6 +299,28 @@ export function zappPipesDataConnector(
         if (addListener) {
           return addListener(reloadData);
         }
+      } else {
+        const pipesEndpoints = appStore.get("pipesEndpoints");
+
+        const endpointURL = findEndpointForURL(
+          dataSourceUrl,
+          pipesEndpoints,
+          HTTP_METHODS.GET
+        );
+
+        const endpoint = pipesEndpoints?.[endpointURL];
+
+        if (endpoint?.tags?.includes(ENDPOINT_TAGS.observe_storage)) {
+          const subscriptions: (() => void)[] = endpoint.context_obj.map(
+            (data: Record<string, any>) => {
+              const { namespace, key } = getNamespaceAndKey(data.key);
+
+              return localStorage.addListener({ key, namespace }, reloadData);
+            }
+          );
+
+          return () => subscriptions.forEach((listener) => listener());
+        }
       }
     }, [dataSourceUrl, reloadData]);