@applicaster/zapp-react-native-ui-components 14.0.0-alpha.2175196485 → 14.0.0-alpha.2292190333

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/__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/Tabs/Tabs.tsx

@@ -158,12 +158,11 @@ const TabsComponent = ({
 
   const renderItem = React.useCallback(
     ({ item, index, item: { id } }: RenderItemProps) => (
-      <>
+      <React.Fragment key={id}>
         <Tab
           ref={(ref) => {
             tabRefs.current[index] = ref;
           }}
-          key={id}
           {...{
             title: getTitle(item),
             id,
@@ -177,7 +176,7 @@ const TabsComponent = ({
         {display_mode === "fractional" &&
           index !== tabs?.length - 1 &&
           renderGutter()}
-      </>
+      </React.Fragment>
     ),
     [tabs, display_mode, configuration, onTabPress, getTitle, getSelectedItem]
   );

package/Components/Touchable/__tests__/touchable.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { create, act } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 import { Touchable } from "..";
 
@@ -23,38 +23,31 @@ describe("<Touchable />", () => {
     });
 
     it("has accessible flag set to false", () => {
-      let wrapper;
+      const { toJSON, UNSAFE_getByType } = render(<Touchable {...props} />);
 
-      act(() => {
-        wrapper = create(<Touchable {...props} />);
-      });
-
-      const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
+      expect(toJSON()).toMatchSnapshot();
       expect(touchableWrapper.props).toHaveProperty("accessible", false);
     });
   });
 
   describe("when not running in automated tests environment", () => {
-    let wrapper;
-
-    act(() => {
-      wrapper = create(<Touchable {...props} />);
-    });
-
-    const touchableWrapper = wrapper.root.findByType(TouchableOpacity);
-
     beforeEach(props.onPress.mockClear);
 
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Touchable {...props} />);
+      expect(toJSON()).toMatchSnapshot();
     });
 
     it("has accessible flag set to true", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("accessible", true);
     });
 
     it("assigns testID and accessibilityLabel props correctly", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       expect(touchableWrapper.props).toHaveProperty("testID", props.testID);
 
       expect(touchableWrapper.props).toHaveProperty(
@@ -64,6 +57,8 @@ describe("<Touchable />", () => {
     });
 
     it("calls the onPress event when it is pressed", () => {
+      const { UNSAFE_getByType } = render(<Touchable {...props} />);
+      const touchableWrapper = UNSAFE_getByType(TouchableOpacity);
       touchableWrapper.props.onPress();
       expect(props.onPress).toHaveBeenCalledTimes(1);
     });

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { Animated, Platform, StyleSheet, View } from "react-native";
+import { Animated, StyleSheet, View } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
-  GestureHandlerRootView,
   NativeViewGestureHandler,
   PanGestureHandler,
   State,
@@ -357,15 +356,10 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     };
   }, [playerAnimationState, isAudioItem, isMinimizedModal]);
 
-  const Wrapper = React.useMemo(
-    () => (Platform.OS === "android" ? GestureHandlerRootView : View),
-    []
-  );
-
   const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
 
   return (
-    <Wrapper style={generalStyles.container}>
+    <View style={generalStyles.container}>
       <TapGestureHandler
         maxDurationMs={100000}
         ref={tapHandlerRef}
@@ -405,7 +399,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           </PanGestureHandler>
         </View>
       </TapGestureHandler>
-    </Wrapper>
+    </View>
   );
 };
 

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -11,6 +11,7 @@ import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
+import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
@@ -102,14 +103,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      resetPlayerAnimationState();
-      yTranslate.current?.setValue(Dimensions.get("window").height);
-    }
-  }, [visible, resetPlayerAnimationState]);
-
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;
@@ -122,6 +115,29 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
   const startComponentsAnimationDistance = Math.round((height * 60) / 100);
+  const isTabletLandscape = useIsTabletLandscape();
+  const windowDimensions = Dimensions.get("window");
+
+  useEffect(() => {
+    // Reset player animation state when video modal is closed
+    if (!visible) {
+      resetPlayerAnimationState();
+
+      if (!isTabletLandscape) {
+        // restore to portrait ( in portrait mode height is bigger)
+        if (windowDimensions.height > windowDimensions.width) {
+          yTranslate.current?.setValue(windowDimensions.height);
+        }
+      } else {
+        yTranslate.current?.setValue(windowDimensions.height);
+      }
+    }
+  }, [
+    visible,
+    resetPlayerAnimationState,
+    windowDimensions.height,
+    isTabletLandscape,
+  ]);
 
   React.useEffect(() => {
     if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {

package/Components/VideoModal/__tests__/PlayerDetails.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import renderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const props = {
   entry: {},
@@ -42,16 +42,16 @@ const { PlayerDetails } = require("../PlayerDetails");
 
 describe("PlayerDetails", () => {
   it("renders properly", () => {
-    const element = renderer.create(<PlayerDetails {...props} />);
+    const { toJSON } = render(<PlayerDetails {...props} />);
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("renders properly on tablet in landscape orientation", () => {
-    const element = renderer.create(
+    const { toJSON } = render(
       <PlayerDetails {...props} isTabletLandscape={true} />
     );
 
-    expect(element).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Contexts/ConfigutaionContext/__tests__/ConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 
@@ -14,12 +14,12 @@ describe("withConfigurationProvider", () => {
   };
 
   it("provides configuration to children", () => {
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <ConfigurationProvider configuration={{ target: "foobar" }}>
         <TestComponent />
       </ConfigurationProvider>
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/Contexts/ScreenContext/index.tsx

@@ -13,7 +13,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { create, StoreApi, UseBoundStore } from "zustand";
+import { create } from "zustand";
+import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
 import { Animated } from "react-native";
 
@@ -39,11 +40,26 @@ interface NavBarState {
   setSummary: (subtitle: string) => void;
 }
 
-type ScreenContextType = {
-  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
-  navBar: NavBarState;
-  legacyFormatScreenData: LegacyNavigationScreenData | null;
-};
+const createStateStore = () =>
+  create(
+    subscribeWithSelector<ScreenStateStore>((set) => ({
+      data: {},
+      setValue: (key, value) =>
+        set((state) => ({
+          data: {
+            ...state.data,
+            [key]: value,
+          },
+        })),
+      removeValue: (key) =>
+        set((state) => {
+          const newData = { ...state.data };
+          delete newData[key];
+
+          return { data: newData };
+        }),
+    }))
+  );
 
 const createStore = () =>
   create<NavBarStoreState>((set) => ({
@@ -65,7 +81,15 @@ const createStore = () =>
     },
   }));
 
+type ScreenContextType = {
+  _navBarStore: ReturnType<typeof createStore>;
+  _stateStore: ReturnType<typeof createStateStore>;
+  navBar: NavBarState;
+  legacyFormatScreenData: LegacyNavigationScreenData | null;
+};
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _stateStore: createStateStore(),
   _navBarStore: createStore(),
   navBar: {
     visible: true,
@@ -103,6 +127,21 @@ export function ScreenContextProvider({
     null
   );
 
+  const screenStateRef = useRef<null | ReturnType<typeof createStateStore>>(
+    null
+  );
+
+  const getScreenState = useCallback(() => {
+    if (screenStateRef.current !== null) {
+      return screenStateRef.current;
+    }
+
+    const stateStore = createStateStore();
+    screenStateRef.current = stateStore;
+
+    return stateStore;
+  }, []);
+
   const getScreenNavBarState = useCallback(() => {
     if (screenNavBarStateRef.current !== null) {
       return screenNavBarStateRef.current;
@@ -163,6 +202,7 @@ export function ScreenContextProvider({
       value={useMemo(
         () => ({
           _navBarStore: getScreenNavBarState(),
+          _stateStore: getScreenState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Decorators/ConfigurationWrapper/__tests__/withConfigurationProvider.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import TestRenderer from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import { View } from "react-native";
 import { withConfigurationProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ConfigurationWrapper";
@@ -15,12 +15,12 @@ describe("withConfigurationProvider", () => {
   it("correctly passes all the configuration keys child component", () => {
     const Component = withConfigurationProvider(TestComponent);
 
-    const wrapper = TestRenderer.create(
+    const { toJSON } = render(
       <Component
         screenData={{ styles: {}, general: {}, data: { source: "test" } }}
       />
     );
 
-    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(toJSON()).toMatchSnapshot();
   });
 });