[connectReactNativeChat] refactor to separate the UI and state logic

Author: spenlep-amzn

mobileChatExamples/connectReactNativeChat/App.js

@@ -1,67 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: MIT-0
 
-import React from "react";
-import { View, Image } from "react-native";
-import { createStackNavigator } from "@react-navigation/stack";
-import { NavigationContainer } from "@react-navigation/native";
+import React from 'react';
+import ChatUI from "./src/ChatUI";
 
-import ChatWrapper from "./src/components/ChatWrapper";
-import GiftedChatWidget from "./src/components/ChatWidget";
-import DebuggerWidget from "./src/components/DebuggerWidget";
-import ChatForm from "./src/components/ChatForm";
-
-import { LogBox } from "react-native";
-import { ENABLE_REACTNATIVE_LOGBOX } from "./config";
-if (!ENABLE_REACTNATIVE_LOGBOX) {
-  LogBox.ignoreAllLogs();
+export default function App() {
+  return <ChatUI />;
 }
 
-const ChatScreen = ({ navigation }) => {
-  return (
-    <ChatWrapper
-      navigation={navigation}
-      ChatWidgetComponent={GiftedChatWidget}
-    />
-  );
-};
-
-const HomeScreen = ({ navigation }) => (
-  <View
-    style={{
-      flex: 1,
-      alignItems: "center",
-      padding: 10,
-      marginTop: 100,
-    }}
-  >
-    <Image
-      source={require("./assets/connect.png")}
-      style={{
-        height: 90,
-        width: 100,
-        padding: 10,
-      }}
-      alt="Connect logo"
-    />
-
-    <ChatForm openChatScreen={() => navigation.navigate("Chat")} />
-
-    <DebuggerWidget />
-  </View>
-);
-
-const Stack = createStackNavigator();
-
-const App = () => {
-  return (
-    <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home">
-        <Stack.Screen name="Home" component={HomeScreen} />
-        <Stack.Screen name="Chat" component={ChatScreen} />
-      </Stack.Navigator>
-    </NavigationContainer>
-  );
-};
-
-export default App;
+// import { LogBox } from "react-native";
+// LogBox.ignoreAllLogs(); // DISABLE_REACTNATIVE_LOGBOX

mobileChatExamples/connectReactNativeChat/jest.config.js

@@ -2,4 +2,5 @@ module.exports = {
   testEnvironment: "jsdom",
   preset: "react-native",
   transformIgnorePatterns: ["node_modules/(?!react-native-url-polyfill)/"],
+  setupFiles: ['./jest.setup.js']
 };

mobileChatExamples/connectReactNativeChat/jest.setup.js

@@ -0,0 +1,25 @@
+process.env.TZ = 'UTC';
+
+jest.mock('@react-native-community/netinfo', () => ({
+  getCurrentConnectivity: jest.fn(),
+  isConnectionMetered: jest.fn(),
+  addListener: jest.fn(),
+  removeListeners: jest.fn(),
+  isConnected: {
+    fetch: () => Promise.resolve(true),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+  },
+}));
+
+jest.mock('@react-native-async-storage/async-storage', () => ({
+  setItem: jest.fn(() => Promise.resolve()),
+  getItem: jest.fn(() => Promise.resolve()),
+  removeItem: jest.fn(() => Promise.resolve()),
+  clear: jest.fn(() => Promise.resolve()),
+  getAllKeys: jest.fn(() => Promise.resolve([])),
+  multiGet: jest.fn(() => Promise.resolve([])),
+  multiSet: jest.fn(() => Promise.resolve()),
+  multiRemove: jest.fn(() => Promise.resolve()),
+  mergeItem: jest.fn(() => Promise.resolve()),
+}));