@applicaster/zapp-react-native-ui-components 13.0.0-rc.14 → 13.0.0-rc.141

package/Decorators/RiverResolver/index.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = ZappUIComponentProps & {
   rivers: ZappRivers;
@@ -12,27 +12,25 @@ type Props = ZappUIComponentProps & {
 
 export function withRiver(Component: ZappComponent): ZappComponent {
   const RiverWithData = ({ screenId, ...otherProps }: Props) => {
-    const { rivers } = usePickFromState(["rivers"]);
+    const river = useRivers()?.[screenId];
     const pathname = usePathname();
-    const river = rivers[screenId];
 
     if (!river) {
       return null;
     }
 
-    if (!otherProps.screenData) {
-      otherProps.screenData = river;
-    }
-
     return (
       <Component
         screenId={screenId}
         river={river}
         key={isTV() ? pathname : undefined}
         {...otherProps}
+        screenData={otherProps.screenData || river}
       />
     );
   };
 
+  RiverWithData.displayName = `RiverWithData(${Component.displayName || Component.name})`;
+
   return RiverWithData;
 }

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/__tests__/zappPipesDataConnector.test.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
@@ -8,6 +8,7 @@ import thunk from "redux-thunk";
 import { zappPipesDataConnector } from "../index";
 
 import { Hero } from "./Hero";
+import { render } from "ejs";
 
 const mockStore = configureStore([thunk]);
 
@@ -20,6 +21,15 @@ const initialState = {
   },
 };
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: () => ({
+      isScreenActive: true,
+    }),
+  })
+);
+
 const store = mockStore(initialState);
 
 const zappPipesSpy = jest
@@ -31,6 +41,7 @@ const WrappedComponent = zappPipesDataConnector(Hero);
 const componentProp = (data) => ({ data });
 
 // tests need to be re-written due to TS refactor
+// this test has old usage of enzyme API, that's need to be replaced with @testing-library/react-native
 describe.skip("zappPipesDataConnector", () => {
   beforeEach(() => {
     zappPipesSpy.mockClear();
@@ -43,7 +54,7 @@ describe.skip("zappPipesDataConnector", () => {
     it("loads the provided feed url", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={componentProp(data)}
           feedUrl={feedUrl}
@@ -51,8 +62,7 @@ describe.skip("zappPipesDataConnector", () => {
         />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(feedUrl, {
         clearCache: false,
@@ -71,12 +81,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
         clearCache: false,
@@ -99,12 +108,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("calls clearCache true and silentRefresh with false", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={{ data, rules }} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(data.source, {
         clearCache: true,
@@ -123,12 +131,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-      expect(wrapper.first().shallow()).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(
         "applicaster://fetchData?type=APPLICASTER_COLLECTION&collectionId=1234",
@@ -146,11 +153,11 @@ describe.skip("zappPipesDataConnector", () => {
     it("is a HoC", () => {
       expect(zappPipesDataConnector).toBeFunction();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
       expect(wrapper.first().shallow()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith(
@@ -171,11 +178,11 @@ describe.skip("zappPipesDataConnector", () => {
     };
 
     it("calls loadPipesData with favourites option", () => {
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
+      expect(wrapper.toJSON()).toMatchSnapshot();
       expect(wrapper.first().shallow()).toMatchSnapshot();
 
       expect(zappPipesSpy).toHaveBeenCalledWith("FAVOURITES", {
@@ -188,7 +195,7 @@ describe.skip("zappPipesDataConnector", () => {
 
   describe("getDataSourceUrl", () => {
     it("returns null if data prop is empty", () => {
-      const wrapper = shallow(
+      const wrapper = render(
         <WrappedComponent component={componentProp({})} store={store} />
       ).dive();
 
@@ -199,7 +206,7 @@ describe.skip("zappPipesDataConnector", () => {
     });
 
     it("returns null if data.source is falsy", () => {
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={componentProp({ source: null })}
           store={store}
@@ -222,7 +229,7 @@ describe.skip("zappPipesDataConnector", () => {
     it("reloads the app's datasource", () => {
       store.clearActions();
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent component={componentProp(data)} store={store} />
       ).dive();
 
@@ -251,7 +258,7 @@ describe.skip("zappPipesDataConnector", () => {
         entry: [{ id: "test-entry", title: "test entry" }],
       }));
 
-      const wrapper = shallow(
+      const wrapper = renderWithProviders(
         <WrappedComponent
           component={{ data, getStaticComponentFeed }}
           store={store}

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -1,10 +1,10 @@
 /// <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 { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -16,9 +16,10 @@ 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 { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -229,7 +230,8 @@ export function zappPipesDataConnector(
     const entryContext =
       (shouldUseNestedContext && screenContextData?.nested?.entry
         ? screenContextData?.nested?.entry
-        : screenContextData?.entry) || {};
+        : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+      {};
 
     const screenContext =
       (shouldUseNestedContext && screenContextData?.nested?.screen
@@ -291,6 +293,8 @@ export function zappPipesDataConnector(
         if (addListener) {
           return addListener(reloadData);
         }
+      } else {
+        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
       }
     }, [dataSourceUrl, reloadData]);
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-rc.14",
+  "version": "13.0.0-rc.141",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid typescript build for now"
   },
   "publishConfig": {
@@ -29,25 +28,28 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-native": "0.69.6",
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.14",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.14",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.14",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.14",
+    "@applicaster/applicaster-types": "13.0.0-rc.141",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.141",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.141",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.141",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
+    "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "react": "17.0.2",
-    "react-native": "0.68.6",
+    "immer": "*",
+    "react": "*",
+    "react-native": "*",
     "react-native-safe-area-context": "*",
-    "react-native-svg": "*"
+    "react-native-svg": "*",
+    "uglify-js": "*",
+    "validate-color": "*",
+    "zustand": "*"
   }
 }

package/tsconfig.json

@@ -2,8 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./lib",
-    "rootDir": "./src"
+    "rootDir": "./"
   },
-  "exclude": ["src/**/*.test.tsx"],
-  "include": ["src/**/*"]
+  "include": ["**/*"],
 }

package/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": ["react-native", "flow", "react-native-stage-0/decorator-support"],
-  "env": {
-    "test": {
-      "presets": [["env", { "modules": "commonjs" }], "react-native", "flow"]
-    }
-  }
-}

package/Components/AudioPlayer/Artwork.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import { View, Image } from "react-native";
-
-type Props = {
-  srcImage: string;
-  config?: {
-    titleColor: string;
-    summaryColor: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    isRTL: boolean;
-  };
-};
-
-const containerStyles = {
-  marginHorizontal: 24,
-};
-
-const imageStyles = {
-  width: 400,
-  height: 400,
-};
-
-export function Artwork({ srcImage }: Props) {
-  return (
-    <View style={containerStyles}>
-      <Image
-        fadeDuration={0}
-        source={{ uri: srcImage }}
-        style={imageStyles}
-        resizeMode="cover"
-      />
-    </View>
-  );
-}

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AudioPlayer /> renders correctly 1`] = `
-<AudioPlayerLayout
-  config={
-    Object {
-      "artworkAspectRatio": "1:1",
-      "audioPlayerBackgroundImageQuery": "",
-      "backgroundColor": "black",
-      "backgroundImage": "https://example.com",
-      "channelIcon": "https://example.com",
-      "isRTL": true,
-      "magicBackground": false,
-      "runTimeFontFamily": undefined,
-      "runTimeFontSize": undefined,
-      "summaryColor": "white",
-      "summaryFontFamily": undefined,
-      "summaryFontSize": undefined,
-      "titleColor": "white",
-      "titleFontFamily": undefined,
-      "titleFontSize": undefined,
-    }
-  }
-  style={Object {}}
->
-  <Channel
-    config={
-      Object {
-        "artworkAspectRatio": "1:1",
-        "audioPlayerBackgroundImageQuery": "",
-        "backgroundColor": "black",
-        "backgroundImage": "https://example.com",
-        "channelIcon": "https://example.com",
-        "isRTL": true,
-        "magicBackground": false,
-        "runTimeFontFamily": undefined,
-        "runTimeFontSize": undefined,
-        "summaryColor": "white",
-        "summaryFontFamily": undefined,
-        "summaryFontSize": undefined,
-        "titleColor": "white",
-        "titleFontFamily": undefined,
-        "titleFontSize": undefined,
-      }
-    }
-    srcImage="https://example.com"
-  />
-  <Title
-    config={
-      Object {
-        "artworkAspectRatio": "1:1",
-        "audioPlayerBackgroundImageQuery": "",
-        "backgroundColor": "black",
-        "backgroundImage": "https://example.com",
-        "channelIcon": "https://example.com",
-        "isRTL": true,
-        "magicBackground": false,
-        "runTimeFontFamily": undefined,
-        "runTimeFontSize": undefined,
-        "summaryColor": "white",
-        "summaryFontFamily": undefined,
-        "summaryFontSize": undefined,
-        "titleColor": "white",
-        "titleFontFamily": undefined,
-        "titleFontSize": undefined,
-      }
-    }
-    title="tittle"
-  />
-  <Summary
-    config={
-      Object {
-        "artworkAspectRatio": "1:1",
-        "audioPlayerBackgroundImageQuery": "",
-        "backgroundColor": "black",
-        "backgroundImage": "https://example.com",
-        "channelIcon": "https://example.com",
-        "isRTL": true,
-        "magicBackground": false,
-        "runTimeFontFamily": undefined,
-        "runTimeFontSize": undefined,
-        "summaryColor": "white",
-        "summaryFontFamily": undefined,
-        "summaryFontSize": undefined,
-        "titleColor": "white",
-        "titleFontFamily": undefined,
-        "titleFontSize": undefined,
-      }
-    }
-    summary="Summary"
-  />
-  <Runtime
-    audio_player_artwork_aspect_ratio="1:1"
-    audio_player_background_color="black"
-    audio_player_background_image="https://example.com"
-    audio_player_channel_icon="https://example.com"
-    audio_player_rtl={true}
-    audio_player_summary_color="white"
-    audio_player_title_color="white"
-    config={
-      Object {
-        "artworkAspectRatio": "1:1",
-        "audioPlayerBackgroundImageQuery": "",
-        "backgroundColor": "black",
-        "backgroundImage": "https://example.com",
-        "channelIcon": "https://example.com",
-        "isRTL": true,
-        "magicBackground": false,
-        "runTimeFontFamily": undefined,
-        "runTimeFontSize": undefined,
-        "summaryColor": "white",
-        "summaryFontFamily": undefined,
-        "summaryFontSize": undefined,
-        "titleColor": "white",
-        "titleFontFamily": undefined,
-        "titleFontSize": undefined,
-      }
-    }
-    end_time="11:11"
-    start_time="10:10"
-  />
-</AudioPlayerLayout>
-`;

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayerLayout.test.js.snap

@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AudioPlayerLayout  /> renders correctly 1`] = `
-<View
-  pointerEvents="none"
-  style={
-    Object {
-      "backgroundColor": "transparent",
-      "overflow": "hidden",
-    }
-  }
->
-  <ForwardRef(AnimatedComponentWrapper)
-    style={
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-          "overflow": "hidden",
-        },
-        Object {
-          "opacity": 0,
-        },
-      ]
-    }
-  >
-    <ImageBackground
-      resizeMode="cover"
-      source={
-        Object {
-          "uri": "https://example.com",
-        }
-      }
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        style={
-          Object {
-            "backgroundColor": "transparent",
-            "overflow": "hidden",
-          }
-        }
-      />
-    </ImageBackground>
-  </ForwardRef(AnimatedComponentWrapper)>
-</View>
-`;

package/Components/AudioPlayer/__tests__/audioPlayerLayout.test.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
-
-import { AudioPlayerLayout } from "../AudioPlayerLayout";
-
-const audioPlayerLayoutProps = {
-  artwork: "string",
-  config: {
-    titleColor: "white",
-    summaryColor: "white",
-    backgroundColor: "black",
-    backgroundImage: "https://example.com",
-    isRTL: true,
-  },
-  children: [],
-};
-
-jest.useFakeTimers();
-
-describe("<AudioPlayerLayout  />", () => {
-  const wrapper = shallow(<AudioPlayerLayout {...audioPlayerLayoutProps} />);
-
-  it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-});

package/Components/AudioPlayer/index.ts

@@ -1 +0,0 @@
-export { AudioPlayer } from "./AudioPlayer";