@applicaster/zapp-react-native-ui-components 13.0.0-rc.13 → 13.0.0-rc.130

package/Contexts/ScreenLayoutContext/index.tsx

@@ -8,10 +8,11 @@ type LayoutContext = {
   componentAnchorPointY: number | null;
   componentAvailableWidth: number | null;
   setScreenLayout?: (properties: {}) => void;
+  resetScreenLayout?: () => void;
   extraAnchorPointYOffset: number;
 };
 
-const screenLayoutContext: LayoutContext = {
+const initialScreenLayoutContext: LayoutContext = {
   screenMarginTop: null,
   screenMarginBottom: null,
   screenHeight: null,
@@ -21,8 +22,9 @@ const screenLayoutContext: LayoutContext = {
   extraAnchorPointYOffset: 0,
 };
 
-export const ScreenLayoutContext =
-  React.createContext<LayoutContext>(screenLayoutContext);
+export const ScreenLayoutContext = React.createContext<LayoutContext>(
+  initialScreenLayoutContext
+);
 
 export function ScreenLayoutContextConsumer(Component) {
   return function WithConsumer(props) {

package/Decorators/Navigator/__tests__/navigator.test.js

@@ -1,4 +1,7 @@
-jest.mock("react-router-native", () => require("./react-router-native-mock"));
+import React from "react";
+import { View } from "react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { withNavigator } from "..";
 
 const navigatorMock = {
   push: jest.fn(),
@@ -12,27 +15,24 @@ const navigatorMock = {
 
 const mocked_context = navigatorMock;
 
-jest.mock("react", () => {
-  return {
-    ...jest.requireActual("react"),
-    useContext: jest.fn(() => mocked_context),
-  };
-});
-
-import { View } from "react-native";
-import { shallow } from "enzyme";
-
-const React = require("react");
-const { withNavigator } = require("../index");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
+  () => {
+    return {
+      useNavigation: jest.fn(() => mocked_context),
+    };
+  }
+);
 
 describe("withNavigator Decorator", () => {
   it("renders correctly", () => {
     const Component = () => <View />;
     const WrappedComponent = withNavigator(Component);
 
-    const wrapper = shallow(<WrappedComponent someProp="foo" />);
+    const wrapper = renderWithProviders(<WrappedComponent someProp="foo" />);
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.prop("navigator")).toEqual(navigatorMock);
+    expect(wrapper.UNSAFE_getByType(Component).props.navigator).toEqual(
+      navigatorMock
+    );
   });
 });

package/Decorators/Navigator/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 import { deprecationWarningWithIdentifier } from "@applicaster/zapp-react-native-utils/appUtils";
 
 export function withNavigator(Component) {

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