Skip to content

[connectReactNativeChat] fix broken demo app and code cleanup#279

Merged
spenlep-amzn merged 1 commit intomasterfrom
spenlep/react-native-cleanup
Jun 16, 2025
Merged

[connectReactNativeChat] fix broken demo app and code cleanup#279
spenlep-amzn merged 1 commit intomasterfrom
spenlep/react-native-cleanup

Conversation

@spenlep-amzn
Copy link
Copy Markdown
Collaborator

@spenlep-amzn spenlep-amzn commented May 23, 2025

Issue #, if available:

Description of changes:
Fix the React Native demo app. WebSocketManager was broken on mobile, and code was very messy.

This new implementation is robust, including browser-refresh and auto re-connect when the device goes offline/online.

Testing

Tested end-to-end chat on 5/23 ✅

react-native-demo-app-web-testing.mov
end-to-end-android.mov

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

{/* Header */}
<View style={styles.headerContainer}>
<View style={styles.headerContent}>
<Text style={styles.headerText}>Chat UI Demo - Amazon Connect ChatJS</Text>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Recommendation generated by Amazon CodeGuru Reviewer. Leave feedback on this recommendation by replying to the comment or by reacting to the comment using emoji.

JSX element content is not internationalized. Application should support multiple languages through internationalization. Instead, utilize packages like 'i18next' to internationalize your items.

Comment thread mobileChatExamples/connectReactNativeChat/src/ChatContext.js
Comment thread mobileChatExamples/connectReactNativeChat/src/ChatContext.js
@spenlep-amzn spenlep-amzn force-pushed the spenlep/react-native-cleanup branch from 6b62ef8 to 15b5b07 Compare May 23, 2025 19:59
@spenlep-amzn spenlep-amzn marked this pull request as ready for review May 23, 2025 22:48
@spenlep-amzn spenlep-amzn requested a review from a team as a code owner May 23, 2025 22:48
@spenlep-amzn spenlep-amzn requested review from haomingli2020 and xiajon and removed request for a team May 23, 2025 22:48
@spenlep-amzn spenlep-amzn self-assigned this May 24, 2025
@spenlep-amzn spenlep-amzn force-pushed the spenlep/react-native-cleanup branch 3 times, most recently from d1a2299 to 2eb186b Compare May 26, 2025 22:42
@spenlep-amzn spenlep-amzn marked this pull request as draft May 26, 2025 23:24
@spenlep-amzn spenlep-amzn force-pushed the spenlep/react-native-cleanup branch 3 times, most recently from 31240cf to 1862546 Compare June 5, 2025 00:08
@spenlep-amzn spenlep-amzn changed the title [connectReactNativeChat] refactor to separate the UI and state logic [connectReactNativeChat] fix broken demo app and code cleanup Jun 5, 2025
@spenlep-amzn spenlep-amzn force-pushed the spenlep/react-native-cleanup branch 2 times, most recently from 85a6613 to cdea874 Compare June 13, 2025 19:07
@spenlep-amzn spenlep-amzn marked this pull request as ready for review June 13, 2025 19:09
"@react-navigation/native": "^6.1.6",
"@react-navigation/stack": "^6.3.16",
"amazon-connect-chatjs": ">=1.5.0",
"amazon-connect-chatjs": ">=1.5.0 <=3.0.2",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the point of this? does it mean it will use 3.0.2? Lets just put 3.0.2 then

Copy link
Copy Markdown
Collaborator Author

@spenlep-amzn spenlep-amzn Jun 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's best to keep the known-good range, so it's very clear.

Technically, this installs v1.5.0, I've pushed a new commit to manually set 3.0.2 in the package-lock.json, demo app uses 3.0.2 now.

Once we release a fix (e.g. v3.1.1 or greater), then we should follow up and update this demo app to use @latest

Otherwise:

  • If we use 3.0.2, the customer has no way of knowing that >=3.0.3 is incompatible (until we make fix)
  • If we use >=1.5.0, the customer has no way of knowing that >=3.0.3 is incompatible (until we make fix)
  • If we use <=3.0.2, customer doesn't know that minimum version is 1.5.0
  • If we use * or latest, that's 3.1.0 which is incompatible

const packageJson = require('../package.json')

describe('Package Versions', () => {
test('core dependencies should match expected versions', () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the point of this file? does it mean every time we change a package, we just need to change this file? the expected versions will change right?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is odd pattern yes, but we need it. Expo is very strict about npm dependencies, so I am enforcing known-good versions with these unit tests.

React Native demo app was broken since July, 2024 from PR#218, so this will prevent that from happening. We don't have bandwidth for thorough end-to-end testing, hence why it broke earlier.

It's important to keep this demo app working.. production-ready code is not the goal here. The dependabot/CVE alerts are not a concern, I added this to README "⚠️ This demo code is for example purposes only and should not be used in production without updating dependencies.".

Purpose of the demo app is just boilerplate React Native + ChatJS code. It won't be major concern if Expo is out-dated, customer probably isn't building their mobile app from scratch, they will probably copy/paste code snippets from this app.

…eContext() hook

  - downgrade ChatJS to known-good version v3.0.2
  - ChatJS >= 3.0.3 uses AWS-SDK v3 createParticipantConnection(), which is failing in React Native, solution unknown.
  - refactor to use useContext() hook

// TODO - remove dead code
// Will raise follow-up PR

Code to keep:
```sh
App.js
src/ChatContext.js
src/ChatContext.test.js
src/ChatUI.js
src/ChatUI.test.js
src/packageJson.test.js
```

Code to delete:
```sh
src/utils
src/datamodel
src/constants
src/components
src/api
endpoints.sample.js
config.js
```
@spenlep-amzn spenlep-amzn force-pushed the spenlep/react-native-cleanup branch from cdea874 to 47466ce Compare June 13, 2025 21:31
@spenlep-amzn spenlep-amzn requested a review from xiajon June 13, 2025 21:31
}
});

// chatSession.onDeepHeartbeatSuccess(() => {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are these functions commented out?

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can enable this in follow up a PR, once we merge fix and can use chatjs@latest version.

Looks like it was added in 2.3.3 - #263, but i'll keep this disabled since it's not in 1.5.0

@spenlep-amzn spenlep-amzn merged commit 8e5a949 into master Jun 16, 2025
4 checks passed
@spenlep-amzn spenlep-amzn removed the request for review from xiajon June 16, 2025 21:12
@spenlep-amzn spenlep-amzn added the 🐛 Bug Something isn't working label Jun 16, 2025
@spenlep-amzn spenlep-amzn deleted the spenlep/react-native-cleanup branch June 16, 2025 22:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 Bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants