chore(in-app-messaging): refactor InAppMessaging UI components to handle landscape mode #9897

calebpollman · 2022-05-11T18:56:14Z

Description of changes

Improve InAppMessaging UI components device orientation handling:

add MessageLayout, LandscapeLayout, and PortraitLayout components
replace internal UI component implementations with MessageLayout
add getPortraitStyles and getLandscapeStyles utils in UI components for resolving orientation specific styling
update existing utils as needed
clean up some JSDoc comments to ensure correct preview information

Issue #, if available

NA

Description of how you validated changes

manual validation
updated unit tests

Checklist

PR description included
yarn test passes
Tests are changed or added

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

…dle landscape mode

...s-amplify-react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx

packages/aws-amplify-react-native/src/InAppMessaging/components/CarouselMessage/styles.ts

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageLayout/types.ts

...ages/aws-amplify-react-native/src/InAppMessaging/components/MessageLayout/PortraitLayout.tsx

packages/aws-amplify-react-native/src/InAppMessaging/components/hooks/useMessageProps/utils.ts

…on return

codecov-commenter · 2022-05-13T16:38:11Z

Codecov Report

Merging #9897 (274859b) into in-app-messaging/staging (7636d31) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@                    Coverage Diff                    @@
##           in-app-messaging/staging    #9897   +/-   ##
=========================================================
  Coverage                     79.27%   79.27%           
=========================================================
  Files                           327      327           
  Lines                         20633    20640    +7     
  Branches                       4518     4506   -12     
=========================================================
+ Hits                          16357    16363    +6     
- Misses                         4170     4171    +1     
  Partials                        106      106

Impacted Files	Coverage Δ
.../InAppMessaging/components/BannerMessage/styles.ts	`100.00% <ø> (ø)`
...ssaging/components/BannerMessage/BannerMessage.tsx	`100.00% <100.00%> (ø)`
...ing/components/CarouselMessage/CarouselMessage.tsx	`100.00% <100.00%> (ø)`
...components/CarouselMessage/CarouselMessageItem.tsx	`100.00% <100.00%> (ø)`
...nAppMessaging/components/CarouselMessage/styles.ts	`100.00% <100.00%> (+33.33%)`	⬆️
...components/FullScreenMessage/FullScreenMessage.tsx	`100.00% <100.00%> (ø)`
...ppMessaging/components/FullScreenMessage/styles.ts	`100.00% <100.00%> (ø)`
...ssaging/components/MessageLayout/MessageLayout.tsx	`100.00% <100.00%> (ø)`
...Messaging/components/ModalMessage/ModalMessage.tsx	`100.00% <100.00%> (ø)`
...c/InAppMessaging/components/ModalMessage/styles.ts	`100.00% <100.00%> (ø)`
... and 5 more

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

cshfang

Just a few minor comments/questions

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx

...ify-react-native/src/InAppMessaging/components/hooks/useMessageProps/__tests__/utils.spec.ts

packages/aws-amplify-react-native/src/InAppMessaging/components/hooks/useMessageProps/utils.ts

cshfang

Approving since remaining feedback is just minor comment tweaks. Lgtm!

Samaritan1011001 · 2022-05-13T20:08:28Z

packages/aws-amplify-react-native/src/InAppMessaging/components/CarouselMessage/styles.ts

@@ -48,63 +48,87 @@ export const defaultStyle: CarouselMessageComponentStyle = StyleSheet.create({
 	},
 });

-export const getStyles = (imageDimensions: ImageStyle): CarouselMessageStyle =>
+const commonStyles: Omit<CarouselMessageStyle, 'image'> = {


I understand these commonStyles are specific common styles for each of the message type but is there any benefit in having a common style across the message type? (modal, full screen, banner, carousel)

That's a valid question. At this point we could definitely just share the button and text styles across all the Message components as they do not change based on layout or orientation, but with the size of this refactor being what it is decided to leave that alone for the time being

Samaritan1011001 · 2022-05-13T20:24:24Z

packages/aws-amplify-react-native/src/InAppMessaging/components/hooks/index.ts

@@ -1,4 +1,4 @@
 export { default as useMessage } from './useMessage';
 export { default as useMessageImage, ImageDimensions } from './useMessageImage';
-export { default as useMessageProps } from './useMessageProps';
+export { default as useMessageProps, UseMessageProps } from './useMessageProps';


Question: Why are there two similar named exports?

UseMessageProps is the return type of useMessageProps

Samaritan1011001 · 2022-05-13T20:34:02Z

...s-amplify-react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx

@@ -30,7 +35,7 @@ export default function CarouselMessageItem(props: CarouselMessageItemProps) {

 	return (
 		<SafeAreaView style={styles.componentWrapper}>
-			<FullScreenContent {...props} {...messageProps} />
+			<MessageLayout {...props} {...messageProps} orientation={deviceOrientation} />


Curious: Where in code is the layout being set so this common element can conditionally switch to different layouts?

layout is included in props

Samaritan1011001 · 2022-05-13T20:37:39Z

packages/aws-amplify-react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx

+			testID={IN_APP_MESSAGING.CLOSE_BUTTON}
+		/>
+	);
+
 	return (
 		<View style={styles.container}>


Question: Does this generic MessageLayout component handle the differences in layouts? I remember modal having slightly different layout than fullscreen and likewise with banner.

After some discussion it was decided that we could closer align the component composition and would just leverage styling differences per orientation/layout

Samaritan1011001

Looks good. Just a couple of questions out of curiosity. Thank you!

github-actions · 2023-05-14T01:55:44Z

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server amplify-help forum.

chore(in-app-messaging): refactor InAppMessaging UI components to han…

d62a213

…dle landscape mode

calebpollman requested a review from nickarocho as a code owner May 11, 2022 18:56

cshfang reviewed May 12, 2022

View reviewed changes

calebpollman added 5 commits May 12, 2022 14:00

add isLandscapeMode and isPortraitMode booleans to useDeviceOrientati…

0dadc03

…on return

simplify commonStyle usage, remove a testing related style prop

1d06baf

move layout handling in to MessageLayout, align styling

1e87930

fix a ModalMessage unit test

2b4e7cb

add shouldFillDeviceScreen util, update JSDoc function documentation

274859b

cshfang reviewed May 13, 2022

View reviewed changes

fix a JSDoc typo, add back hyphens

95c99c0

cshfang approved these changes May 13, 2022

View reviewed changes

fix a typo, delete an obselete comment

5903745

Samaritan1011001 reviewed May 13, 2022

View reviewed changes

Samaritan1011001 approved these changes May 13, 2022

View reviewed changes

calebpollman merged commit 6cd8d45 into aws-amplify:in-app-messaging/staging May 13, 2022

calebpollman deleted the in-app-messaging/refactor-landscape-handling branch May 13, 2022 20:56

github-actions bot locked as resolved and limited conversation to collaborators May 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(in-app-messaging): refactor InAppMessaging UI components to handle landscape mode #9897

chore(in-app-messaging): refactor InAppMessaging UI components to handle landscape mode #9897

calebpollman commented May 11, 2022

codecov-commenter commented May 13, 2022

cshfang left a comment

cshfang left a comment

Samaritan1011001 May 13, 2022

calebpollman May 13, 2022

Samaritan1011001 May 13, 2022

calebpollman May 13, 2022

Samaritan1011001 May 13, 2022

calebpollman May 13, 2022

Samaritan1011001 May 13, 2022

calebpollman May 13, 2022

Samaritan1011001 left a comment

github-actions bot commented May 14, 2023

chore(in-app-messaging): refactor InAppMessaging UI components to handle landscape mode #9897

chore(in-app-messaging): refactor InAppMessaging UI components to handle landscape mode #9897

Conversation

calebpollman commented May 11, 2022

Description of changes

Issue #, if available

Description of how you validated changes

Checklist

codecov-commenter commented May 13, 2022

Codecov Report

cshfang left a comment

Choose a reason for hiding this comment

cshfang left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Samaritan1011001 left a comment

Choose a reason for hiding this comment

github-actions bot commented May 14, 2023