@eohjsc/react-native-smart-city 0.3.45 → 0.3.47

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.45",
+  "version": "0.3.47",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -65,7 +65,8 @@
   "licenseFilename": "LICENSE",
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "@react-native-community/clipboard": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useState } from 'react';
-import { SafeAreaView, View } from 'react-native';
+import { View } from 'react-native';
 import Slider from 'react-native-slider';
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
@@ -16,7 +16,7 @@ const AutoLock = memo(() => {
     setIsEnabled((previousState) => !previousState);
   }, []);
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <HeaderCustom title={t('auto_lock')} isShowSeparator />
       <View style={styles.wrap}>
         <Text style={styles.textAutoLock}>{t('auto_lock')}</Text>
@@ -50,7 +50,7 @@ const AutoLock = memo(() => {
         </View>
         <Text style={styles.textReLock}>{t('re_lock_will_lock')}</Text>
       </View>
-    </SafeAreaView>
+    </View>
   );
 });
 

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/ItemPasscode.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { SafeAreaView, View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
@@ -22,7 +22,7 @@ const ItemPasscode = memo(({ route }) => {
   const { item = {} } = route?.params || {};
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <HeaderCustom isShowSeparator title={item.code} />
       <ButtonWrapper textHeadline={t('code')} item={item.code} />
       <ButtonWrapper textHeadline={t('user')} item={item.name} />
@@ -41,7 +41,7 @@ const ItemPasscode = memo(({ route }) => {
           {t('delete_passcode')}
         </Text>
       </TouchableOpacity>
-    </SafeAreaView>
+    </View>
   );
 });
 

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useMemo } from 'react';
-import { SafeAreaView, TextInput, View, TouchableOpacity } from 'react-native';
+import { TextInput, View, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 
@@ -34,7 +34,7 @@ const PasscodeList = memo(() => {
     [navigation]
   );
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <HeaderCustom title={t('passcode_list')} />
       <View style={styles.wrap}>
         <View style={styles.searchBox}>
@@ -61,7 +61,7 @@ const PasscodeList = memo(() => {
           </TouchableOpacity>
         ))}
       </View>
-    </SafeAreaView>
+    </View>
   );
 });
 

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/index.js

@@ -1,7 +1,8 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { SafeAreaView, View, ScrollView } from 'react-native';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { View, ScrollView } from 'react-native';
+import moment from 'moment';
 
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
 import { useBoolean } from '../../../../hooks/Common';
@@ -13,7 +14,6 @@ import BottomButtonView from '../../../BottomButtonView';
 import { ACCESS_SCHEDULE } from '../../../../screens/GuestInfo/constant';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import ButtonWrapper from './ButtonWrapper';
-import moment from 'moment';
 import styles from './SetupGeneratePasscodeStyles';
 
 const SetupGeneratePasscode = memo(() => {
@@ -170,7 +170,7 @@ const SetupGeneratePasscode = memo(() => {
   }, [isSelectCircle]);
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <HeaderCustom
         title={t('setup_generate_passcode')}
         titleStyle={styles.title}
@@ -247,7 +247,7 @@ const SetupGeneratePasscode = memo(() => {
         onHide={releaseLockShowing}
       />
       <BottomButtonView style={styles.viewBottomFixed} mainTitle={t('done')} />
-    </SafeAreaView>
+    </View>
   );
 });
 

package/src/commons/Auth/AccountItem.js

@@ -4,6 +4,7 @@ import { View, StyleSheet, Text } from 'react-native';
 import { Colors } from '../../configs';
 import { shortEmailName } from '../../utils/Utils';
 import Avatar from '../../../assets/images/avatar.svg';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const AccountItem = ({ account }) => {
   return (
@@ -20,7 +21,12 @@ const AccountItem = ({ account }) => {
         )}
 
         {account?.phone_number && (
-          <Text style={{ color: Colors.Gray8 }}>{account?.phone_number}</Text>
+          <Text
+            style={{ color: Colors.Gray8 }}
+            accessibilityLabel={AccessibilityLabel.TEXT_PHONE_NUMBER_ITEM}
+          >
+            {account?.phone_number}
+          </Text>
         )}
       </View>
     </View>

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -78,7 +78,7 @@ describe('Test MyUnit', () => {
     const goToDetail = instance.findAll(
       (item) =>
         item.props.accessibilityLabel ===
-        AccessibilityLabel.MY_UNIT_GO_TO_DETAIL
+        `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${item?.id}`
     );
     const textNoUnit = instance.findAll(
       (item) =>

package/src/commons/Dashboard/MyUnit/index.js

@@ -107,7 +107,7 @@ const MyUnit = () => {
             onPress={() => goToDetail(item)}
             style={styles.btnItem}
             activeOpacity={0.75}
-            accessibilityLabel={AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}
+            accessibilityLabel={`${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${index}`}
           >
             <View style={styles.overlay} />
             <Image

package/src/commons/Sharing/RowMember.js

@@ -1,11 +1,12 @@
 import React, { memo, useMemo } from 'react';
 import { StyleSheet, View, TouchableOpacity, Image } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { shortEmailName } from '../../utils/Utils';
 import { CircleView } from '../CircleView';
-import { useNavigation } from '@react-navigation/native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import Routes from '../../utils/Route';
 
 const arrColor = [
@@ -65,7 +66,11 @@ const RowMember = memo(
     };
     return (
       <View style={styles.rowContainer}>
-        <TouchableOpacity onPress={onPressInfo} disabled={type === 'disable'}>
+        <TouchableOpacity
+          onPress={onPressInfo}
+          disabled={type === 'disable'}
+          accessibilityLabel={`${AccessibilityLabel.SELECT_MEMBER_UNIT}-${member?.id}`}
+        >
           <View style={styles.Border}>
             {!!leftIcon && (
               <View style={styles.paddingLeft16}>
@@ -86,7 +91,14 @@ const RowMember = memo(
                 {member?.name || shortEmailName(member?.email) || ''}
               </Text>
               {member?.phone_number && (
-                <Text style={styles.status}> {member?.phone_number}</Text>
+                <Text
+                  style={styles.status}
+                  accessibilityLabel={
+                    AccessibilityLabel.TEXT_PHONE_NUMBER_UNIT_MEMBER
+                  }
+                >
+                  {member?.phone_number}
+                </Text>
               )}
             </View>
             {!!rightComponent && (

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -4,11 +4,10 @@ import {
   StyleSheet,
   Animated,
   View,
-  SafeAreaView,
   Platform,
 } from 'react-native';
 import { ActivityIndicator } from '@ant-design/react-native';
-import { isIphoneX } from 'react-native-iphone-x-helper';
+import { getStatusBarHeight, isIphoneX } from 'react-native-iphone-x-helper';
 
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
@@ -50,7 +49,7 @@ const WrapHeaderScrollable = ({
   );
 
   return (
-    <SafeAreaView style={[styles.container, headerAniStyle]}>
+    <View style={[styles.container, headerAniStyle]}>
       <HeaderAni
         scrollY={animatedScrollYValue}
         contentHeight={contentHeight}
@@ -104,7 +103,7 @@ const WrapHeaderScrollable = ({
           </View>
         )}
       </Animated.ScrollView>
-    </SafeAreaView>
+    </View>
   );
 };
 
@@ -113,6 +112,7 @@ export default memo(WrapHeaderScrollable);
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: getStatusBarHeight() + 10,
   },
   scrollView: {
     flex: 1,

package/src/configs/AccessibilityLabel.js

@@ -49,6 +49,9 @@ export default {
   //member list
   SHARING_MEMBER: 'SHARING_MEMBER',
   REMOVE_MEMBER: 'REMOVE_MEMBER',
+  CHECK_BOX_CUSTOM: 'CHECK_BOX_CUSTOM',
+  TEXT_PHONE_NUMBER_ITEM: 'TEXT_PHONE_NUMBER_ITEM',
+  TEXT_PHONE_NUMBER_UNIT_MEMBER: 'TEXT_PHONE_NUMBER_UNIT_MEMBER',
 
   // SmartTiviTemplate
   SMART_TIVI_TEMPLATE: {
@@ -417,6 +420,7 @@ export default {
   SELECT_UNIT_NAME: 'SELECT_UNIT_NAME',
   SELECT_UNIT_RADIO_BUTTON: 'SELECT_UNIT_RADIO_BUTTON',
   SELECT_UNIT_SELECT: 'SELECT_UNIT_SELECT',
+  SELECT_MEMBER_UNIT: 'SELECT_MEMBER_UNIT',
 
   // select wifi
   SELECT_WIFI: 'SELECT_WIFI',
@@ -434,6 +438,8 @@ export default {
     BUTTON_ADD_AUTO_SMART: 'BUTTON_ADD_AUTO_SMART',
     BUTTON_CONNECT_WIFI: 'BUTTON_CONNECT_WIFI',
     BUTTON_BOTTOM_SMART_ACCOUNT: 'BUTTON_BOTTOM_SMART_ACCOUNT',
+    BUTTON_ADD_MEMBER: 'BUTTON_ADD_MEMBER',
+    BUTTON_REMOVE_MEMBER: 'BUTTON_REMOVE_MEMBER',
   },
 
   TERM_AND_POLICY_TITLE: 'TERM_AND_POLICY_TITLE',
@@ -456,6 +462,8 @@ export default {
   // Select User
   SELECT_USER_ADD_USER_TITLE: 'SELECT_USER_ADD_USER_TITLE',
   SELECT_USER_ADD_USER_SUB_TITLE: 'SELECT_USER_ADD_USER_SUB_TITLE',
+  INPUT_PHONE_NUMBER_OR_EMAIL: 'INPUT_PHONE_NUMBER_OR_EMAIL',
+  INVITE_PHONE_NUMBER: 'INVITE_PHONE_NUMBER',
   // Connected device
   CONNECTED_DEVICE_SUCCESS: 'CONNECTED_DEVICE_SUCCESS',
   CONNECTED_DEVICE_UNIT_NAME: 'CONNECTED_DEVICE_UNIT_NAME',

package/src/screens/AQIGuide/index.js

@@ -1,17 +1,11 @@
 import React, { memo, useMemo } from 'react';
-import {
-  View,
-  ScrollView,
-  StyleSheet,
-  TouchableOpacity,
-  SafeAreaView,
-} from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { View, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors, Theme } from '../../configs';
 import useTitleHeader from '../../hooks/Common/useTitleHeader';
 import { AccessibilityLabel } from '../../configs/Constants';
-
 import Text from '../../commons/Text';
 import SvgSmile from '../../../assets/images/Feeling/smile.svg';
 import SvgMeh from '../../../assets/images/Feeling/meh.svg';
@@ -82,7 +76,7 @@ const AQIGuide = memo(() => {
   const { titles, uvIndex } = data;
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <ScrollView style={styles.container} scrollIndicatorInsets={{ right: 1 }}>
         {titles.map((item, index) => {
           const { title, des } = item;
@@ -142,7 +136,7 @@ const AQIGuide = memo(() => {
           );
         })}
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 });
 
@@ -152,6 +146,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Theme.color.backgroundColor,
+    paddingTop: getStatusBarHeight() + 10,
   },
   titles: {
     marginHorizontal: 16,

package/src/screens/AddNewDevice/index.js

@@ -1,14 +1,9 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  SafeAreaView,
-  StatusBar,
-  Platform,
-} from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { API, Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons'; //components/Common
 import Text from '../../commons/Text';
@@ -62,13 +57,7 @@ const AddNewDevice = memo(({ route }) => {
   };
 
   return (
-    <SafeAreaView
-      style={
-        Platform.OS === 'android'
-          ? styles.containerAndroid
-          : styles.containerIOS
-      }
-    >
+    <View style={styles.wrap}>
       <Text
         accessibilityLabel={AccessibilityLabel.ADD_NEW_DEVICE_ADD}
         semibold
@@ -103,22 +92,17 @@ const AddNewDevice = memo(({ route }) => {
         rightDisabled={stationId === -1}
         onRightClick={onRight}
       />
-    </SafeAreaView>
+    </View>
   );
 });
 
 export default AddNewDevice;
 
 const styles = StyleSheet.create({
-  containerAndroid: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-    paddingTop: StatusBar.currentHeight,
-  },
-  containerIOS: {
+  wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    paddingTop: 0,
+    paddingTop: getStatusBarHeight() + 10,
   },
   txtHeader: {
     marginTop: 16,

package/src/screens/AddNewGateway/AddNewGatewayStyles.js

@@ -1,15 +1,12 @@
-import { StyleSheet, StatusBar, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    ...Platform.select({
-      android: {
-        paddingTop: StatusBar.currentHeight,
-      },
-    }),
+    paddingTop: getStatusBarHeight() + 10,
   },
   textHeader: {
     marginTop: 16,

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -100,6 +100,7 @@ const ConnectingWifiGuide = ({ route }) => {
         setCurrentState(0);
         clearInterval(intervalSend);
         socket.close();
+        socket = null;
       }
     });
 

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { ViewButtonBottom } from '../../commons';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -150,6 +150,7 @@ const ShareWifiPassword = ({ route }) => {
     socket.on('message', (msg, rinfo) => {
       if (handleSocketOnMsg(currentSsid, msg)) {
         socket.close();
+        socket = null;
       }
     });
     socket.on('error', () => {

package/src/screens/AddNewGateway/__test__/SelectModbusGateway.test.js

@@ -55,8 +55,8 @@ describe('Test select modbus gateway', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const safeAreaView = instance.findAllByType(SelectGateway);
-    expect(safeAreaView).toHaveLength(1);
+    const selectGateway = instance.findAllByType(SelectGateway);
+    expect(selectGateway).toHaveLength(1);
   });
 
   it('select gateway', async () => {

package/src/screens/AddNewGateway/__test__/SelectZigbeeGateway.test.js

@@ -55,8 +55,8 @@ describe('Test select zigbee gateway', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const safeAreaView = instance.findAllByType(SelectGateway);
-    expect(safeAreaView).toHaveLength(1);
+    const selectGateway = instance.findAllByType(SelectGateway);
+    expect(selectGateway).toHaveLength(1);
   });
 
   it('select gateway', async () => {

package/src/screens/AddNewGateway/index.js

@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import { ScrollView, SafeAreaView, TextInput } from 'react-native';
+import { ScrollView, View, TextInput } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons';
 import Text from '../../commons/Text';
@@ -53,7 +53,7 @@ const AddNewGateway = memo(({ route }) => {
     : t('Please_add_gateway_name');
 
   return (
-    <SafeAreaView style={styles.wrap}>
+    <View style={styles.wrap}>
       <Text
         accessibilityLabel={AccessibilityLabel.ADD_NEW_GATEWAY_ADD}
         semibold
@@ -106,7 +106,7 @@ const AddNewGateway = memo(({ route }) => {
         rightDisabled={!isValid}
         onRightClick={onRight}
       />
-    </SafeAreaView>
+    </View>
   );
 });
 

package/src/screens/AddNewOneTap/AddNewOneTapStyles.js

@@ -1,17 +1,11 @@
-import { StatusBar, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { Colors } from '../../configs';
 
 export default StyleSheet.create({
-  containerAndroid: {
+  wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
-    paddingTop: StatusBar.currentHeight,
-  },
-  containerIOS: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-    paddingTop: 0,
   },
   textHeader: {
     marginTop: 16,

package/src/screens/AddNewOneTap/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useState } from 'react';
-import { ScrollView, SafeAreaView, Platform } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { CommonActions, useNavigation } from '@react-navigation/native';
 
 import { API, Colors } from '../../configs';
@@ -113,13 +113,7 @@ const AddNewOneTap = memo(({ route }) => {
       : t('name_your_script');
 
   return (
-    <SafeAreaView
-      style={
-        Platform.OS === 'android'
-          ? styles.containerAndroid
-          : styles.containerIOS
-      }
-    >
+    <View style={styles.wrap}>
       <HeaderCustom isShowClose onClose={onClose} />
       <ScrollView scrollIndicatorInsets={{ right: 1 }}>
         <Text
@@ -146,7 +140,7 @@ const AddNewOneTap = memo(({ route }) => {
         onPressMain={handleContinue}
         typeMain={name !== '' ? 'primary' : 'disabled'}
       />
-    </SafeAreaView>
+    </View>
   );
 });
 

package/src/screens/Drawer/Drawer.test.js

@@ -1,24 +1,67 @@
 import React from 'react';
-import { SafeAreaView } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import { SCProvider } from '../../context';
 import { mockSCStore } from '../../context/mockStore';
-import Drawer from './index';
+import Drawer, { Row } from './index';
 
-const wrapComponent = () => (
-  <SCProvider initState={mockSCStore({})}>
-    <Drawer navigation={jest.fn()} />
+const mockDispatch = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      dispatch: mockDispatch,
+    }),
+  };
+});
+
+const wrapComponent = (initState = mockSCStore({})) => (
+  <SCProvider initState={initState}>
+    <Drawer />
   </SCProvider>
 );
 
 describe('Drawer', () => {
   let tree;
-  it('drawer snapshot', async () => {
+  it('test render with user', async () => {
     await act(async () => {
       tree = await renderer.create(wrapComponent());
     });
     const instance = tree.root;
-    const safeView = instance.findAllByType(SafeAreaView);
-    expect(safeView).toHaveLength(1);
+    const rows = instance.findAllByType(Row);
+    expect(rows).toHaveLength(3);
+
+    // NOTE: Hinh will add expect when has action for them
+    await act(async () => {
+      await rows[0].props.onPress();
+    });
+
+    await act(async () => {
+      await rows[1].props.onPress();
+    });
+
+    await act(async () => {
+      await rows[2].props.onPress();
+    });
+    expect(mockDispatch).toBeCalledWith({
+      payload: { index: 0, routes: [{ name: 'Main' }] },
+      type: 'RESET',
+    });
+  });
+
+  it('test render without user', async () => {
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({
+          auth: {
+            account: {},
+          },
+        })
+      );
+    });
+    const avatar = tree.root.findByProps({
+      accessibilityLabel: AccessibilityLabel.SIDE_MENU_AVATAR_USER,
+    });
+    expect(avatar.props.source).toBe(undefined);
   });
 });