feat: refactor IterableEmbedded components to utilize useEmbeddedView hook

lposen · lposen · commit 1115268012a8 · 2025-10-08T21:51:35.000-07:00
diff --git a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx
@@ -1,4 +1,3 @@
-import { useCallback, useMemo } from 'react';
 import {
   Image,
   Text,
@@ -8,13 +7,9 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { Iterable } from '../../../core/classes/Iterable';
-import type { IterableEmbeddedMessageElementsButton } from '../../classes/IterableEmbeddedMessageElementsButton';
 import { IterableEmbeddedViewType } from '../../enums';
-import type { IterableEmbeddedComponentProps } from '../IterableEmbeddedViewProps';
-import { getMedia } from '../utils/getMedia';
-import { getStyles } from '../utils/getStyles';
-import { getUrlFromButton } from '../utils/getUrlFromButton';
+import { useEmbeddedView } from '../../hooks/useEmbeddedView';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedViewProps';
 import { styles } from './IterableEmbeddedBanner.styles';
 
 /**
@@ -26,22 +21,9 @@ export const IterableEmbeddedBanner = ({
   message,
   onButtonClick = () => {},
 }: IterableEmbeddedComponentProps) => {
-  const parsedStyles = useMemo(() => {
-    return getStyles(IterableEmbeddedViewType.Banner, config);
-  }, [config]);
-  const media = useMemo(() => {
-    return getMedia(IterableEmbeddedViewType.Banner, message);
-  }, [message]);
-  const handleButtonClick = useCallback(
-    (button: IterableEmbeddedMessageElementsButton) => {
-      onButtonClick(button);
-      Iterable.embeddedManager.handleClick(
-        message,
-        button.id,
-        getUrlFromButton(button) ?? null
-      );
-    },
-    [onButtonClick, message]
+  const { parsedStyles, media, handleButtonClick } = useEmbeddedView(
+    IterableEmbeddedViewType.Banner,
+    { message, config, onButtonClick }
   );
 
   const buttons = message.elements?.buttons ?? [];
diff --git a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx
@@ -1,4 +1,3 @@
-import { useCallback, useMemo } from 'react';
 import {
   Image,
   Text,
@@ -8,39 +7,21 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { Iterable } from '../../../core/classes/Iterable';
-import type { IterableEmbeddedMessageElementsButton } from '../../classes/IterableEmbeddedMessageElementsButton';
 import { IterableEmbeddedViewType } from '../../enums';
-import type { IterableEmbeddedComponentProps } from '../IterableEmbeddedViewProps';
-import { getMedia } from '../utils/getMedia';
-import { getStyles } from '../utils/getStyles';
-import { getUrlFromButton } from '../utils/getUrlFromButton';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedViewProps';
 import { styles } from './IterableEmbeddedCard.styles';
+import { useEmbeddedView } from '../../hooks/useEmbeddedView';
 
 export const IterableEmbeddedCard = ({
   config,
   message,
   onButtonClick = () => {},
 }: IterableEmbeddedComponentProps) => {
-  const parsedStyles = useMemo(() => {
-    return getStyles(IterableEmbeddedViewType.Card, config);
-  }, [config]);
-  const media = useMemo(() => {
-    return getMedia(IterableEmbeddedViewType.Card, message);
-  }, [message]);
-  const handleButtonClick = useCallback(
-    (button: IterableEmbeddedMessageElementsButton) => {
-      onButtonClick(button);
-      Iterable.embeddedManager.handleClick(
-        message,
-        button.id,
-        getUrlFromButton(button) ?? null
-      );
-    },
-    [onButtonClick, message]
+  const { parsedStyles, media, handleButtonClick } = useEmbeddedView(
+    IterableEmbeddedViewType.Card,
+    { message, config, onButtonClick }
   );
-
-  const buttons = message.elements?.buttons ?? [];
+  const buttons = message?.elements?.buttons ?? [];
 
   return (
     <View
diff --git a/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx b/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx
@@ -6,34 +6,19 @@ import {
   type ViewStyle,
 } from 'react-native';
 
-import { useCallback, useMemo } from 'react';
-import { Iterable } from '../../../core/classes/Iterable';
-import type { IterableEmbeddedMessageElementsButton } from '../../classes/IterableEmbeddedMessageElementsButton';
-import { IterableEmbeddedViewType } from '../../enums';
-import type { IterableEmbeddedComponentProps } from '../IterableEmbeddedViewProps';
-import { getStyles } from '../utils/getStyles';
-import { getUrlFromButton } from '../utils/getUrlFromButton';
+import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
+import { useEmbeddedView } from '../../hooks/useEmbeddedView';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedViewProps';
 import { styles } from './IterableEmbeddedNotification.styles';
 
 export const IterableEmbeddedNotification = ({
   config,
   message,
   onButtonClick = () => {},
 }: IterableEmbeddedComponentProps) => {
-  const parsedStyles = useMemo(() => {
-    return getStyles(IterableEmbeddedViewType.Notification, config);
-  }, [config]);
-
-  const handleButtonClick = useCallback(
-    (button: IterableEmbeddedMessageElementsButton) => {
-      onButtonClick(button);
-      Iterable.embeddedManager.handleClick(
-        message,
-        button.id,
-        getUrlFromButton(button) ?? null
-      );
-    },
-    [onButtonClick, message]
+  const { parsedStyles, handleButtonClick } = useEmbeddedView(
+    IterableEmbeddedViewType.Notification,
+    { message, config, onButtonClick }
   );
 
   const buttons = message.elements?.buttons ?? [];
diff --git a/src/embedded/components/IterableEmbeddedView/IterableEmbeddedView.tsx b/src/embedded/components/IterableEmbeddedView/IterableEmbeddedView.tsx
@@ -5,7 +5,7 @@ import { IterableEmbeddedViewType } from '../../enums';
 import { IterableEmbeddedBanner } from '../IterableEmbeddedBanner';
 import { IterableEmbeddedCard } from '../IterableEmbeddedCard';
 import { IterableEmbeddedNotification } from '../IterableEmbeddedNotification';
-import type { IterableEmbeddedComponentProps } from '../IterableEmbeddedViewProps';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedViewProps';
 
 interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps {
   viewType: IterableEmbeddedViewType;
diff --git a/src/embedded/components/utils/getMedia.ts b/src/embedded/components/utils/getMedia.ts
diff --git a/src/embedded/hooks/useEmbeddedView.ts b/src/embedded/hooks/useEmbeddedView.ts
@@ -0,0 +1,39 @@
+import { useCallback, useMemo } from 'react';
+import { Iterable } from '../../core/classes/Iterable';
+import type { IterableEmbeddedMessageElementsButton } from '../classes/IterableEmbeddedMessageElementsButton';
+import { IterableEmbeddedViewType } from '../enums';
+import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedViewProps';
+import { getMedia } from '../utils/getMedia';
+import { getStyles } from '../utils/getStyles';
+import { getUrlFromButton } from '../utils/getUrlFromButton';
+
+export const useEmbeddedView = (
+  viewType: IterableEmbeddedViewType,
+  { message, config, onButtonClick = () => {} }: IterableEmbeddedComponentProps
+) => {
+  const parsedStyles = useMemo(() => {
+    return getStyles(viewType, config);
+  }, [viewType, config]);
+
+  const media = useMemo(() => {
+    return getMedia(viewType, message);
+  }, [viewType, message]);
+
+  const handleButtonClick = useCallback(
+    (button: IterableEmbeddedMessageElementsButton) => {
+      onButtonClick(button);
+      Iterable.embeddedManager.handleClick(
+        message,
+        button.id,
+        getUrlFromButton(button) ?? null
+      );
+    },
+    [onButtonClick, message]
+  );
+
+  return {
+    parsedStyles,
+    media,
+    handleButtonClick,
+  };
+};
diff --git a/src/embedded/types/IterableEmbeddedViewProps.ts b/src/embedded/types/IterableEmbeddedViewProps.ts
diff --git a/src/embedded/utils/getButtons.ts b/src/embedded/utils/getButtons.ts
@@ -1,6 +1,6 @@
-import type { IterableEmbeddedMessage } from '../../classes/IterableEmbeddedMessage';
-import type { IterableEmbeddedMessageElementsButton } from '../../classes/IterableEmbeddedMessageElementsButton';
-import type { IterableEmbeddedViewButtonInfo } from '../../types/IterableEmbeddedViewButtonInfo';
+import type { IterableEmbeddedMessage } from '../classes/IterableEmbeddedMessage';
+import type { IterableEmbeddedMessageElementsButton } from '../classes/IterableEmbeddedMessageElementsButton';
+import type { IterableEmbeddedViewButtonInfo } from '../types/IterableEmbeddedViewButtonInfo';
 
 export const getButtons = (message: IterableEmbeddedMessage) => {
   const buttons = message.elements?.buttons ?? null;
diff --git a/src/embedded/utils/getDefaultActionUrl.ts b/src/embedded/utils/getDefaultActionUrl.ts
@@ -1,4 +1,4 @@
-import type { IterableEmbeddedMessage } from '../../classes/IterableEmbeddedMessage';
+import type { IterableEmbeddedMessage } from '../classes/IterableEmbeddedMessage';
 
 export const getDefaultActionUrl = (message: IterableEmbeddedMessage) => {
   const defaultAction = message.elements?.defaultAction ?? null;
diff --git a/src/embedded/utils/getDefaultStyle.ts b/src/embedded/utils/getDefaultStyle.ts
@@ -1,4 +1,4 @@
-import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
+import { IterableEmbeddedViewType } from '../enums';
 
 export const getDefaultStyle = (
   viewType: IterableEmbeddedViewType,
diff --git a/src/embedded/utils/getMedia.ts b/src/embedded/utils/getMedia.ts
@@ -0,0 +1,15 @@
+import type { IterableEmbeddedMessage } from '../classes/IterableEmbeddedMessage';
+import { IterableEmbeddedViewType } from '../enums';
+
+export const getMedia = (
+  viewType: IterableEmbeddedViewType,
+  message: IterableEmbeddedMessage
+) => {
+  if (viewType === IterableEmbeddedViewType.Notification) {
+    return { url: null, caption: null, shouldShow: false };
+  }
+  const url = message.elements?.mediaUrl ?? null;
+  const caption = message.elements?.mediaUrlCaption ?? null;
+  const shouldShow = !!url && url.length > 0;
+  return { url, caption, shouldShow };
+};
diff --git a/src/embedded/utils/getStyles.ts b/src/embedded/utils/getStyles.ts
@@ -1,6 +1,6 @@
-import type { IterableEmbeddedViewConfig } from '../../classes/IterableEmbeddedViewConfig';
-import { embeddedStyles } from '../../constants/embeddedViewDefaults';
-import type { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
+import type { IterableEmbeddedViewConfig } from '../classes/IterableEmbeddedViewConfig';
+import { embeddedStyles } from '../constants/embeddedViewDefaults';
+import type { IterableEmbeddedViewType } from '../enums';
 import { getDefaultStyle } from './getDefaultStyle';
 
 export const getStyles = (
diff --git a/src/embedded/utils/getUrlFromButton.ts b/src/embedded/utils/getUrlFromButton.ts
@@ -1,4 +1,4 @@
-import type { IterableEmbeddedMessageElementsButton } from '../../classes/IterableEmbeddedMessageElementsButton';
+import type { IterableEmbeddedMessageElementsButton } from '../classes/IterableEmbeddedMessageElementsButton';
 
 export const getUrlFromButton = (
   button: IterableEmbeddedMessageElementsButton

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { IterableEmbeddedMessage } from '../../classes/IterableEmbeddedMessage';`
	`1`	`+import type { IterableEmbeddedMessage } from '../classes/IterableEmbeddedMessage';`
`2`	`2`
`3`	`3`	`export const getDefaultActionUrl = (message: IterableEmbeddedMessage) => {`
`4`	`4`	`const defaultAction = message.elements?.defaultAction ?? null;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';`
	`1`	`+import { IterableEmbeddedViewType } from '../enums';`
`2`	`2`
`3`	`3`	`export const getDefaultStyle = (`
`4`	`4`	`viewType: IterableEmbeddedViewType,`