@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-rc.2

package/Components/HookRenderer/HookRenderer.tsx

@@ -6,7 +6,12 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { PresentationType } from "../ScreenResolver";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("HookRenderer");
+
+const HOOK_PRESENTATION_TYPE = "Hook";
 
 type Props = {
   focused?: boolean;
@@ -15,20 +20,17 @@ type Props = {
   callback: hookCallback;
 };
 
-export const HookRenderer = (props: Props) => {
-  const {
-    focused,
-    screenData: { payload, hookPlugin },
-    callback,
-  } = props;
-
-  const { setVisible: showNavBar } = useSetNavbarState();
+const HookRenderer = (props: Props) => {
+  const { focused, screenData, callback } = props;
+  const { payload, hookPlugin } = screenData;
 
   const {
     module: { Component: HookComponent, presentFullScreen },
     configuration,
   } = hookPlugin;
 
+  const { setVisible: showNavBar } = useSetNavbarState();
+
   useHookAnalytics(props);
 
   const isNavBarVisible = useIsNavBarVisible();
@@ -63,8 +65,36 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
-        presentationType: PresentationType.Hook,
+        presentationType: HOOK_PRESENTATION_TYPE,
       }}
     />
   );
 };
+
+/**
+ * Guard component to prevent rendering HookRenderer when screenData or hookPlugin is missing. This is to avoid potential crashes due to missing data.
+ */
+const HookRendererGuard = (props: Props) => {
+  React.useEffect(() => {
+    if (!props.screenData) {
+      logger.error(
+        "HookRenderer received no screenData, screen cannot be rendered"
+      );
+    } else if (!props.screenData.hookPlugin) {
+      logger.error(
+        "HookRenderer received screenData with no hookPlugin, screen cannot be rendered",
+        {
+          screenData: props.screenData,
+        }
+      );
+    }
+  }, [props.screenData]);
+
+  if (!props.screenData || !props.screenData.hookPlugin) {
+    return null;
+  }
+
+  return <HookRenderer {...props} />;
+};
+
+export { HookRendererGuard as HookRenderer };

package/Components/HookRenderer/__tests__/HookRenderer.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { HookRenderer } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useBackHandler: jest.fn(),
+  useIsNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useHookAnalytics: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useSetNavbarState: jest.fn(() => ({
+    setVisible: jest.fn(),
+  })),
+}));
+
+describe("HookRenderer", () => {
+  it("returns null when hookPlugin is missing", () => {
+    const { toJSON } = render(
+      <HookRenderer callback={jest.fn()} screenData={{ payload: {} } as any} />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it("passes Hook presentationType to rendered hook component", () => {
+    const HookComponent = (props) => (
+      <View testID="hook-component" {...props} />
+    );
+
+    const { getByTestId } = render(
+      <HookRenderer
+        callback={jest.fn()}
+        screenData={{
+          payload: { foo: "bar" },
+          hookPlugin: {
+            module: {
+              Component: HookComponent,
+              presentFullScreen: false,
+            },
+            configuration: {},
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId("hook-component").props.presentationType).toBe("Hook");
+  });
+});

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,10 +1,7 @@
 import React from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import {
-  selectRemoteConfigurations,
-  useAppSelector,
-} from "@applicaster/zapp-react-native-redux";
 
 export const LayoutBackground = ({
   Background,
@@ -15,7 +12,7 @@ export const LayoutBackground = ({
 }) => {
   const theme = useTheme();
 
-  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
+  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
 
   const backgroundColor = theme.app_background_color;
   const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);

package/Components/Layout/TV/ScreenContainer.tsx

@@ -18,7 +18,7 @@ import {
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
@@ -111,7 +111,11 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const { activeRiver } = navigator;
   const { title, visible } = useNavbarState();
 
-  const plugins = usePlugins();
+  const { plugins = [] } = usePickFromState([
+    "appState",
+    "remoteConfigurations",
+    "plugins",
+  ]);
 
   const navigationProps = getNavigationProps({
     navigator,

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -9,6 +9,11 @@ exports[`Layout TV renders 1`] = `
     excludeFromFocusSearching={true}
     id="/river/A1234"
     preferredFocus={true}
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <View
       Components={

package/Components/Layout/TV/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { LayoutContainer } from "./LayoutContainer";
@@ -10,7 +10,6 @@ import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 import { LayoutBackground } from "./LayoutBackground";
-import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -30,7 +29,9 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const appReady = useAppSelector(selectAppReady);
+  const { appState: { appReady = false } = {} } = usePickFromState([
+    "appState",
+  ]);
 
   if (!appReady) {
     return null;

package/Components/Layout/TV/index.web.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
+import { pathOr } from "ramda";
 
-import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
 import { LayoutBackground } from "./LayoutBackground";
-import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -17,7 +17,8 @@ type Props = {
 };
 
 const Layout = ({ Components }: Props) => {
-  const appReady = useAppSelector(selectAppReady);
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
 
   if (!appReady) {
     return null;

package/Components/LinkHandler/LinkHandler.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   inflateString,
   objectToReadableString,
@@ -40,7 +40,7 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState(["rivers", "plugins"]);
 
   const ScreenPlugin = findPluginByIdentifier(
     WEBVIEW_SCREEN_IDENTIFIER,

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -135,11 +135,17 @@ export const BorderContainerView = (props: Props) => {
 
   const isImageOnlyCell = useMemo(
     () =>
-      state === "focused" &&
+      !hasFocusableInside(entry) &&
       !hasTextLabels &&
-      !isMeasurement?.measuringInProgress &&
-      !hasFocusableInside(entry),
-    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
+      state === "focused" &&
+      !isMeasurement?.measuringInProgress,
+    [
+      hasFocusableInside,
+      entry,
+      hasTextLabels,
+      state,
+      isMeasurement?.measuringInProgress,
+    ]
   );
 
   useEffect(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -32,7 +32,6 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
-  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -49,10 +48,7 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps: {
-      source: sourceProp,
-      state: otherProps.state,
-    },
+    otherProps,
   });
 
   const onError = React.useCallback(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
+import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
-import { equals } from "@applicaster/zapp-react-native-utils/utils";
 
 type Source = {
   uri: string;
@@ -25,19 +25,11 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
-  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({
-    uri,
-    entry,
-    otherProps: {
-      source: sourceProp,
-      state: otherProps.state,
-    },
-  });
+  const source = useImageSource({ uri, entry, otherProps });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -57,7 +49,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...otherProps}
+      {...omit(["source"], otherProps)}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/Image.web.tsx

@@ -23,17 +23,9 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
-  source: sourceProp,
   ...otherProps
 }: Props) {
-  const source = useImageSource({
-    uri,
-    entry,
-    otherProps: {
-      source: sourceProp,
-      state: otherProps.state,
-    },
-  });
+  const source = useImageSource({ uri, entry, otherProps });
 
   const updatedSource = source ? withDimensions(source) : { uri: "" };
 

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,21 +1,19 @@
 import * as React from "react";
+import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
-type Source = { context?: string; uri?: string } | null | undefined;
 
-const getSourceContext = (source: Source) => source?.context;
-const getSourceUri = (source: Source) => source?.uri;
+const getSourceContext = path(["source", "context"]);
+const getSourceUri = path(["source", "uri"]);
+const getState = path(["state"]);
 
-export const useImageSource = ({
-  uri,
-  entry,
-  otherProps: { source, state: uriState },
-}): Return => {
-  const uriContext = getSourceContext(source);
+export const useImageSource = ({ uri, entry, otherProps }): Return => {
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -40,7 +38,7 @@ export const useImageSource = ({
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(source);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -49,7 +47,7 @@ export const useImageSource = ({
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, source) => {
+const getSource = (uri, showDefault, placeholderImage, otherProps) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -62,7 +60,7 @@ const getSource = (uri, showDefault, placeholderImage, source) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(source);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -76,9 +74,10 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps: { state: uriState, source },
+  otherProps,
 }): Return => {
-  const uriContext = getSourceContext(source);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -99,5 +98,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, source);
+  return getSource(uri, showDefault, placeholderImage, otherProps);
 };