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

package/Components/River/RefreshControl.tsx

@@ -10,11 +10,10 @@ import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/locali
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { useSendAnalyticsEventWithFunction } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useCurrentScreenData";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useDispatch } from "react-redux";
 import { useShallow } from "zustand/react/shallow";
 import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const BRIGHTNESS_THRESHOLD = 160;
 const ABOVE_DEFAULT_COLOR = "gray";
@@ -61,38 +60,33 @@ export const usePullToRefresh = (
 ) => {
   const isPipesV1 = !!pullToRefreshPipesV1RefreshingStateUpdater;
 
-  const dispatch = useDispatch();
-
   const [refreshing, setRefreshing] = React.useState(false);
 
   const feeds: string[] =
     riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
     [];
 
-  const screenData = useCurrentScreenData();
-
   const feedsLength = feeds.length;
 
   const [requestsCompletedCounter, setRequestsCompletedCounter] =
     React.useState(0);
 
+  const loadPipesDataDispatcher = useLoadPipesDataDispatch();
+
   React.useEffect(() => {
     // will not work for pipes v1 on 1st level screens
     if (refreshing && !isPipesV1) {
       feeds.forEach((feed) => {
-        dispatch(
-          loadPipesData(feed, {
-            silentRefresh: true,
-            clearCache: true,
-            callback: () => {
-              setRequestsCompletedCounter(R.inc);
-            },
-            riverId: screenData.id,
-          })
-        );
+        loadPipesDataDispatcher(feed, {
+          silentRefresh: true,
+          clearCache: true,
+          callback: () => {
+            setRequestsCompletedCounter(R.inc);
+          },
+        });
       });
     }
-  }, [refreshing, isPipesV1]);
+  }, [refreshing, isPipesV1, feeds, loadPipesDataDispatcher]);
 
   React.useEffect(() => {
     if (requestsCompletedCounter === feedsLength) {

package/Components/River/RiverItem.tsx

@@ -13,6 +13,7 @@ import { riverLogger } from "./logger";
 import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
+import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -39,6 +40,10 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
+const isNextIndex = (index, readyIndex) => {
+  return readyIndex + 1 >= index;
+};
+
 /**
  * useLoadingState for RiverItemComponent
  * takes currentIndex and loadingState as arguments
@@ -48,24 +53,20 @@ const useLoadingState = (
   loadingState: RiverItemType["loadingState"]
 ) => {
   const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    loadingState.getValue().index + 1 >= currentIndex
+    isNextIndex(currentIndex, loadingState.getValue().index)
   );
 
   useEffect(() => {
     const subscription = loadingState.subscribe(({ index }) => {
-      if (index + 1 >= currentIndex) {
+      if (isNextIndex(currentIndex, index)) {
         setReadyToBeDisplayed(true);
       }
     });
 
-    if (loadingState.getValue().index + 1 >= currentIndex) {
-      setReadyToBeDisplayed(true);
-    }
-
     return () => {
       subscription.unsubscribe();
     };
-  }, [loadingState, currentIndex]);
+  }, [currentIndex]);
 
   return readyToBeDisplayed;
 };
@@ -85,6 +86,7 @@ function RiverItemComponent(props: RiverItemType) {
     loadingState,
   } = props;
 
+  const callbackAction = useCallbackActions(item);
   const readyToBeDisplayed = useLoadingState(index, loadingState);
 
   const feedUrl = getFeedUrl(feed, index);
@@ -151,10 +153,11 @@ function RiverItemComponent(props: RiverItemType) {
       component={item}
       componentIndex={index}
       onLoadFailed={onLoadFailed}
-      onLoadFinished={() => onLoadFinished(index)} // Keeping it here to don't break the plugins.
+      onLoadFinished={() => onLoadFinished(index)}
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}
+      callback={callbackAction}
     />
   );
 }

package/Components/River/TV/River.tsx

@@ -4,10 +4,6 @@ import * as React from "react";
 import { Text } from "react-native";
 import * as R from "ramda";
 
-import {
-  useFeedLoader,
-  useLayoutVersion,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
 import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
@@ -21,6 +17,7 @@ type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
   feedUrl?: string;
+  feedData?: PipesDataObject["data"];
   extraProps?: any;
   screenResolverExtraProps?: any;
   componentsMapExtraProps?: any;
@@ -32,7 +29,7 @@ type Props = {
 export const River = (props: Props) => {
   const {
     screenId,
-    feedUrl,
+    feedData,
     extraProps,
     screenResolverExtraProps,
     componentsMapExtraProps,
@@ -46,7 +43,6 @@ export const River = (props: Props) => {
     useSetNavbarState();
 
   const rivers = useRivers();
-  const isV2 = useLayoutVersion({ isV2: true });
 
   const river = React.useMemo(() => rivers?.[screenId], [screenId]);
 
@@ -55,17 +51,6 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const connectedScreenUrl = React.useMemo(() => {
-    // Avoid using feedUrl or content.src on layouts v2
-    if (isV2) return null;
-
-    return feedUrl || R.path(["content", "src"], screenData);
-  }, [feedUrl, screenData]);
-
-  const { data: feedData } = useFeedLoader({
-    feedUrl: connectedScreenUrl,
-  });
-
   const stringOrEmpty = (value: string | number | undefined): string =>
     R.isNil(value) ? "" : String(value);
 

package/Components/River/TV/index.tsx

@@ -2,8 +2,10 @@ import { compose } from "ramda";
 import { River as RiverComponent } from "./River";
 import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
+import { withRiverDataLoader } from "./withRiverDataLoader";
 
 export const River = compose(
   withTvEventHandler,
-  withComponentsMapOffsetContext
+  withComponentsMapOffsetContext,
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withPipesV1DataLoader.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { path } from "ramda";
+
+import {
+  useFeedLoader,
+  useRivers,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+
+type Props = {
+  screenId: string;
+  screenData: ZappRiver | ZappEntry;
+  feedUrl?: string;
+  river?: ZappRiver | ZappEntry;
+};
+
+export const withPipesV1DataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithPipesV1DataLoaderComponent(props: Props) {
+    const { screenId, feedUrl } = props;
+
+    const rivers = useRivers();
+
+    const river = React.useMemo(() => rivers?.[screenId], [screenId]);
+
+    const screenData = React.useMemo(
+      () => props.screenData || props.river || river,
+      [screenId]
+    );
+
+    const connectedScreenUrl = useMemo(() => {
+      // Avoid using feedUrl or content.src on layouts v2
+
+      return feedUrl || path(["content", "src"], screenData);
+    }, [feedUrl, screenData]);
+
+    const { data: feedData } = useFeedLoader({
+      feedUrl: connectedScreenUrl,
+    });
+
+    return <WrappedComponent {...props} feedData={feedData} />;
+  };
+};

package/Components/River/TV/withRiverDataLoader.tsx

@@ -0,0 +1,17 @@
+import { useLayoutVersion } from "@applicaster/zapp-react-native-utils/reactHooks";
+import React from "react";
+import { withPipesV1DataLoader } from "./withPipesV1DataLoader";
+
+export const withRiverDataLoader = (
+  WrappedComponent: React.ComponentType<any>
+) => {
+  return function WithRiverDataLoaderComponent(props) {
+    const isV2 = useLayoutVersion({ isV2: true });
+
+    if (isV2) {
+      return <WrappedComponent {...props} />;
+    }
+
+    return withPipesV1DataLoader(WrappedComponent)(props);
+  };
+};

package/Components/River/TV/withTVEventHandler.tsx

@@ -8,7 +8,7 @@ export const withTvEventHandler = (Component) => {
   return function WithTVEventHandler(props) {
     const navigator = useNavigation();
 
-    const remoteHandler = (_, event) => {
+    const remoteHandler = (event) => {
       const { eventType } = event;
 
       const canGoBack = navigator.canGoBack();

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -135,12 +135,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       getItemCount={[Function]}
       initialNumToRender={3}
       keyExtractor={[Function]}
-      maintainVisibleContentPosition={
-        {
-          "autoscrollToTopThreshold": 10,
-          "minIndexForVisible": 0,
-        }
-      }
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
       onLayout={[Function]}
@@ -165,6 +159,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -180,6 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/River/__tests__/river.test.js

@@ -1,20 +1,10 @@
 import React from "react";
-import { render, screen } from "@testing-library/react-native";
-import configureStore from "redux-mock-store";
+import { screen } from "@testing-library/react-native";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
-import { Provider } from "react-redux";
 
-import { River } from "../";
 import { ScreenResolver } from "../../ScreenResolver";
 import { RiverComponent } from "../River";
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
-  () => ({
-    useIsScreenActive: jest.fn(() => true),
-  })
-);
-
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen",
   () => {
@@ -46,6 +36,13 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
+
 const river = {
   home: true,
   id: "A1234",
@@ -89,28 +86,17 @@ const riverProps = {
 
 const appData = { layoutVersion: "v1" };
 
-const store = configureStore()({ rivers, appData });
+const store = { rivers, appData };
 
 describe("When River has a general_content type", () => {
   it("renders GeneralContentScreen correctly", () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <RiverComponent {...riverProps} />
-      </Provider>
+    const { getByTestId } = renderWithProviders(
+      <RiverComponent {...riverProps} />,
+      store
     );
 
     expect(getByTestId("general-content-screen")).toBeTruthy();
   });
-
-  it("renders River component correctly", () => {
-    const wrapper = render(
-      <Provider store={store}>
-        <River screenId="A1234" />
-      </Provider>
-    );
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
 });
 
 describe("When River has any other type other than general_content", () => {

package/Components/River/index.tsx

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { withRiver } from "../../Decorators/RiverResolver";
 import { withNavigator } from "../../Decorators/Navigator";

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { act, create } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {
@@ -141,8 +152,6 @@ const screenProps = {
 const { Screen } = require("..");
 
 describe("<Screen Component />", () => {
-  let wrapper;
-
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
@@ -150,26 +159,16 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    beforeEach(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      act(() => {
-        wrapper = create(<Screen {...screenProps} />);
-      });
-
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/Components/Screen/__tests__/navigationHandler.test.ts

@@ -3,61 +3,172 @@ import { isMenuVisible } from "../navigationHandler";
 describe("NavigationHandler", () => {
   describe("isMenuVisible", () => {
     it("returns false when the route is a player route", () => {
-      const menuVisible = isMenuVisible("/playable/some_vod_item", {});
+      const menuVisible = isMenuVisible("/playable/some_vod_item", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
       expect(menuVisible).toBe(false);
     });
 
     describe("when screen is a hook", () => {
       it("returns true if the `showNavBar` flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              showNavBar: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                showNavBar: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns true if presentFullScreen flag is set to false", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: false,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: false,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns false if presentFullScreen flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(false);
       });
     });
 
     it("returns false if the screen's general settings allow screen presentation", () => {
-      const menuVisible = isMenuVisible("", {
-        general: {
-          allow_screen_plugin_presentation: true,
+      const menuVisible = isMenuVisible(
+        "",
+        {
+          general: {
+            allow_screen_plugin_presentation: true,
+          },
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
         },
-      });
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
 
       expect(menuVisible).toBe(false);
     });
 
-    it("returns true otherwise", () => {
-      const menuVisible = isMenuVisible("", {});
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible(
+        "any",
+        {
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
+        },
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
+
       expect(menuVisible).toBe(true);
     });
+
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible("", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
+      expect(menuVisible).toBe(false);
+    });
   });
 });