@eohjsc/react-native-smart-city 0.3.29 → 0.3.32

package/src/screens/Device/detail.js

@@ -4,8 +4,9 @@ import React, {
   useMemo,
   useState,
   useRef,
+  useContext,
 } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, Platform } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import moment from 'moment';
 import { get } from 'lodash';
@@ -33,7 +34,9 @@ import { useFavoriteDevice } from './hooks/useFavoriteDevice';
 import BottomButtonView from '../../commons/BottomButtonView';
 import Text from '../../commons/Text';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../commons';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, AccessibilityLabel } from '../../configs/Constants';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
 
 import { usePopover } from '../../hooks/Common';
 import { useConfigGlobalState } from '../../iot/states';
@@ -42,9 +45,12 @@ import styles from './styles';
 import {
   useIsOwnerOfUnit,
   useBoolean,
-  useGGHomeDeviceConnected,
+  useHomeAssistantDeviceConnected,
 } from '../../hooks/Common';
-import { useGGHomeConnection, useValueEvaluations } from '../../hooks/IoT';
+import {
+  useHomeAssistantConnection,
+  useValueEvaluations,
+} from '../../hooks/IoT';
 import { SensorDisplayItem } from './components/SensorDisplayItem';
 import { useSCContextSelector } from '../../context';
 import { EmergencyCountdown } from './components/EmergencyCountdown';
@@ -60,20 +66,24 @@ const DeviceDetail = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
   const token = useSCContextSelector((state) => state.auth.account.token);
+  const { isLockWhenPickColor } = useSCContextSelector((state) => state.app);
+  const { setAction } = useContext(SCContext);
   const [offsetTitle, setOffsetTitle] = useState(1);
   const [display, setDisplay] = useState({ items: [] });
-  const [displayValues, setDisplayValues] = useState([]);
+  const [displayValuesData, setDisplayValuesData] = useState({
+    configs: [],
+    isConnected: false,
+    lastUpdated: null,
+  });
   const [controlOptions, setControlOptions] = useState({
     internet: {},
   });
-  const [isConnected, setConnected] = useState(false);
-  const [lastUpdated, setLastUpdated] = useState(null);
   const [lastEvent, setLastEvent] = useState({ id: 0, reportedAt: 0 });
   const [maxValue, setMaxValue] = useState(60);
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
 
-  const { unitData, unitId, sensorData, sensorId } = route.params;
+  const { unitData, unitId, sensorData, sensorId } = route?.params || {};
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [sensor, setSensor] = useState(sensorData || { id: sensorId });
   const [station, setStation] = useState(sensor?.station);
@@ -95,8 +105,10 @@ const DeviceDetail = ({ route }) => {
   const isBluetoothEnabled = useSCContextSelector((state) => {
     return state.app.isBluetoothEnabled;
   });
-  const { isConnected: isGGHomeConnected, isConnecting: isGGHomeConnecting } =
-    useGGHomeDeviceConnected(sensor);
+  const {
+    isConnected: isHomeAssistantConnected,
+    isConnecting: isHomeAssistantConnecting,
+  } = useHomeAssistantDeviceConnected(sensor);
 
   const isDeviceConnectedViaBle = useMemo(
     () =>
@@ -169,7 +181,7 @@ const DeviceDetail = ({ route }) => {
     }
   }, [fetchUnitDetail, unitId, unitData]);
 
-  const { connectGoogleHome } = useGGHomeConnection();
+  const { connectHomeAssistant } = useHomeAssistantConnection();
 
   useEffect(() => {
     if (
@@ -178,7 +190,7 @@ const DeviceDetail = ({ route }) => {
       isNetworkConnected
     ) {
       (async () => {
-        await connectGoogleHome(unit.remote_control_options.googlehome);
+        await connectHomeAssistant(unit.remote_control_options.googlehome);
       })();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -186,7 +198,7 @@ const DeviceDetail = ({ route }) => {
 
   const fetchSensorDetail = useCallback(async () => {
     const { success, data, resp_status } = await axiosGet(
-      API.DEVICE.SENSOR_DETAIL(sensorId)
+      API.DEVICE.SENSOR_DETAIL(sensorId || sensor?.id)
     );
     if (success) {
       setSensor(data);
@@ -195,7 +207,7 @@ const DeviceDetail = ({ route }) => {
     } else if (resp_status === 404) {
       setShowPreventAccess();
     }
-  }, [sensorId, setShowPreventAccess]);
+  }, [sensor, sensorId, setShowPreventAccess]);
 
   useEffect(() => {
     if (sensorId && !sensorData) {
@@ -424,6 +436,7 @@ const DeviceDetail = ({ route }) => {
   }, [sensor, fetchDataDeviceDetail]);
 
   const onRefresh = useCallback(() => {
+    fetchSensorDetail();
     fetchDataDeviceDetail();
     if (
       unit.remote_control_options &&
@@ -431,7 +444,7 @@ const DeviceDetail = ({ route }) => {
       isNetworkConnected
     ) {
       (async () => {
-        await connectGoogleHome(unit.remote_control_options.googlehome);
+        await connectHomeAssistant(unit.remote_control_options.googlehome);
       })();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -447,7 +460,9 @@ const DeviceDetail = ({ route }) => {
 
       const data = item.configuration.configs.map((config) => {
         const configValue = configValues[config.id]?.value;
-        const displayValue = displayValues.find((k) => k.id === config.id);
+        const displayValue = (displayValuesData.configs || []).find(
+          (k) => k.id === config.id
+        );
         if (
           (configValue === null || configValue === undefined) &&
           !displayValue
@@ -466,7 +481,7 @@ const DeviceDetail = ({ route }) => {
       });
       return data.filter((value) => value);
     },
-    [configValues, displayValues, evaluateValue]
+    [configValues, displayValuesData, evaluateValue]
   );
 
   useEffect(() => {
@@ -501,17 +516,23 @@ const DeviceDetail = ({ route }) => {
         }
       );
       if (success) {
-        setDisplayValues(data.configs);
-        setConnected(data.is_connected);
-        data.last_updated = data.last_updated
+        data.isConnected = data.is_connected;
+        data.lastUpdated = data.last_updated
           ? moment(data.last_updated)
           : data.last_updated;
-
-        setLastUpdated(data.last_updated);
+        setDisplayValuesData((prevState) => {
+          if (prevState.isConnected !== data.isConnected) {
+            setAction(Action.SET_DEVICES_STATUS, [
+              { id: sensor?.id, is_connected: data.is_connected },
+            ]);
+          }
+          return data;
+        });
       } else if (resp_status >= 500) {
         setServerDown(true);
       }
-      setLoading((preState) => ({ ...preState, isConnected: false }));
+      loading.isConnected &&
+        setLoading((preState) => ({ ...preState, isConnected: false }));
     };
     if (
       sensor?.is_managed_by_backend &&
@@ -524,7 +545,8 @@ const DeviceDetail = ({ route }) => {
       Object.keys(sensor).length > 1 &&
         setLoading((preState) => ({ ...preState, isConnected: false }));
     }
-  }, [sensor, display]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sensor, display, loading.isConnected]);
 
   const isShowEmergencyResolve =
     display.items.filter(
@@ -563,17 +585,19 @@ const DeviceDetail = ({ route }) => {
     return (
       <SensorConnectStatusViewHeader
         sensor={sensor}
-        connectedViaNetwork={isNetworkConnected && isConnected}
+        connectedViaNetwork={
+          isNetworkConnected && displayValuesData.isConnected
+        }
         connectedViaBle={
-          (!isNetworkConnected || (isNetworkConnected && !isConnected)) &&
+          (!isNetworkConnected ||
+            (isNetworkConnected && !displayValuesData.isConnected)) &&
           isDeviceConnectedViaBle
         }
-        connectedViaGGHome={isGGHomeConnected}
-        isGGHomeConnecting={isGGHomeConnecting}
-        lastUpdated={lastUpdated}
+        connectedViaHomeAssistant={isHomeAssistantConnected}
+        isHomeAssistantConnecting={isHomeAssistantConnecting}
+        lastUpdated={displayValuesData.lastUpdated}
         isDisplayTime={isShowSetupEmergencyContact ? false : isDisplayTime}
         showWindDirection={showWindDirection}
-        isGGHomeConnected={isGGHomeConnected}
         isDeviceHasBle={isDeviceHasBle}
       >
         {display.items.map((item) => {
@@ -584,7 +608,7 @@ const DeviceDetail = ({ route }) => {
             default:
               return (
                 <SensorDisplayItem
-                  testID={TESTID.SENSOR_DISPLAY_ITEM}
+                  accessibilityLabel={AccessibilityLabel.SENSOR_DISPLAY_ITEM}
                   key={item.id.toString()}
                   item={item}
                   emergency={onEmergencyButtonPress}
@@ -607,7 +631,9 @@ const DeviceDetail = ({ route }) => {
                 case 'slider_range_template':
                   return (
                     <SensorDisplayItem
-                      testID={TESTID.SENSOR_DISPLAY_ITEM}
+                      accessibilityLabel={
+                        AccessibilityLabel.SENSOR_DISPLAY_ITEM
+                      }
                       key={item.id.toString()}
                       item={item}
                       emergency={onEmergencyButtonPress}
@@ -675,7 +701,7 @@ const DeviceDetail = ({ route }) => {
         <TouchableOpacity
           style={styles.buttonStar}
           onPress={isFavorite ? removeFromFavorites : addToFavorites}
-          testID={TESTID.HEADER_DEVICE_BUTTON_STAR}
+          accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR}
         >
           {isFavorite ? (
             <IconFill name="star" size={25} color={Colors.Yellow6} />
@@ -694,7 +720,7 @@ const DeviceDetail = ({ route }) => {
           style={styles.button}
           onPress={handleShowMenuAction}
           ref={refMenuAction}
-          testID={TESTID.HEADER_DEVICE_BUTTON_MORE}
+          accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
           <Icon name={'more'} size={27} color={Colors.Black} />
         </TouchableOpacity>
@@ -717,6 +743,7 @@ const DeviceDetail = ({ route }) => {
         headerAniStyle={styles.header}
         rightComponent={HeaderRight}
         onRefresh={onRefresh}
+        scrollEnabled={!(Platform.OS === 'ios' && isLockWhenPickColor)}
       >
         <View style={styles.wrapTemplate}>
           {loading.displayTemplate === false &&
@@ -725,7 +752,7 @@ const DeviceDetail = ({ route }) => {
             renderSensorConnected()}
         </View>
         {isNetworkConnected &&
-          isConnected &&
+          displayValuesData?.isConnected &&
           isShowSetupEmergencyContact &&
           canManageSubUnit && (
             <BottomButtonView
@@ -783,7 +810,7 @@ const DeviceDetail = ({ route }) => {
         onHide={releaseLockShowing}
       />
       <ButtonPopup
-        testID={TESTID.BUTTON_POPUP_RESOLVED}
+        accessibilityLabel={AccessibilityLabel.BUTTON_POPUP_RESOLVED}
         visible={showPopupResolveSuccess && !lockShowing}
         mainTitle={t('ok')}
         onPressMain={onCloseShowPopupResolveSuccess}
@@ -793,14 +820,14 @@ const DeviceDetail = ({ route }) => {
       >
         <View style={styles.locationName}>
           <Text
-            testID={TESTID.BUTTON_POPUP_RESOLVED_TITLE}
+            accessibilityLabel={AccessibilityLabel.BUTTON_POPUP_RESOLVED_TITLE}
             type="H4"
             style={styles.textName}
           >
             {unit?.name} - {sensor?.station?.name}
           </Text>
           <IconFill
-            testID={TESTID.BUTTON_POPUP_RESOLVED_ICON}
+            accessibilityLabel={AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON}
             name="check-circle"
             size={42}
             color={Colors.Green6}

package/src/screens/Device/hooks/useEvaluateValue.js

@@ -11,7 +11,6 @@ const evaluateRange = (value, configuration) => {
   }
  */
   if (!value) {
-    // eslint-disable-next-line no-param-reassign
     value = 0;
   }
 
@@ -46,7 +45,6 @@ const evaluateBoolean = (value, configuration) => {
   }
  */
   if (!value) {
-    // eslint-disable-next-line no-param-reassign
     value = 0;
   }
   if (value === configuration.on?.value) {

package/src/screens/Device/hooks/useFavoriteDevice.js

@@ -17,14 +17,16 @@ export const useFavoriteDevice = (device) => {
       API.DEVICE.ADD_TO_FAVOURITES(device?.id)
     );
     success && setAction(Action.ADD_DEVICES_TO_FAVORITES, [device.id]);
-  }, [device, setAction]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [device]);
 
   const removeFromFavorites = useCallback(async () => {
     const { success } = await axiosPost(
       API.DEVICE.REMOVE_FROM_FAVOURITES(device?.id)
     );
     success && setAction(Action.REMOVE_DEVICES_FROM_FAVORITES, [device.id]);
-  }, [device, setAction]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [device]);
 
   return {
     isFavorite,

package/src/screens/DeviceInfo/__test__/index.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
 import { act } from '@testing-library/react-hooks';
-import { TESTID } from '../../../configs/Constants';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import DeviceInfo from '../';
 import { View } from 'react-native';
 import { SCProvider } from '../../../context';
@@ -48,19 +48,23 @@ describe('Test DeviceInfo', () => {
     });
     const instance = tree.root;
     const battety = instance.findAll(
-      (el) => el.props.testID === TESTID.DEVICE_INFO_BATTERY && el.type === View
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.DEVICE_INFO_BATTERY && el.type === View
     );
     expect(battety.length).toEqual(1);
 
     const rssiNode = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.DEVICE_INFO_RSSI_NODE && el.type === View
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.DEVICE_INFO_RSSI_NODE && el.type === View
     );
     expect(rssiNode.length).toEqual(1);
 
     const chip = instance.findAll(
       (el) =>
-        el.props.testID === TESTID.DEVICE_INFO_CHIP_INFO && el.type === View
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.DEVICE_INFO_CHIP_INFO && el.type === View
     );
     expect(chip.length).toEqual(5);
   });

package/src/screens/DeviceInfo/index.js

@@ -5,7 +5,7 @@ import { HeaderCustom } from '../../commons/Header';
 import { useRoute } from '@react-navigation/native';
 import Text from '../../commons/Text';
 import styles from './DeviceInfoStyles';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 const DeviceInfo = () => {
   const t = useTranslations();
@@ -13,10 +13,10 @@ const DeviceInfo = () => {
   const { deviceInfo } = params;
   const configuration = deviceInfo[0] ? deviceInfo[0].configuration : {};
 
-  const renderRow = (testID, textLeft, textRight) => {
+  const renderRow = (accessibilityLabel, textLeft, textRight) => {
     return (
       <>
-        <View style={styles.row} testID={testID}>
+        <View style={styles.row} accessibilityLabel={accessibilityLabel}>
           <Text style={styles.textLeft}>{t(textLeft)}</Text>
           <Text style={styles.textRight}>{textRight}</Text>
         </View>
@@ -31,21 +31,25 @@ const DeviceInfo = () => {
       <View style={styles.content}>
         {!!configuration.battery &&
           renderRow(
-            TESTID.DEVICE_INFO_BATTERY,
+            AccessibilityLabel.DEVICE_INFO_BATTERY,
             'battery',
             configuration.battery
           )}
 
         {!!configuration.rssi_node &&
           renderRow(
-            TESTID.DEVICE_INFO_RSSI_NODE,
+            AccessibilityLabel.DEVICE_INFO_RSSI_NODE,
             'rssi_node',
             configuration.rssi_node
           )}
 
         {configuration.chip_info &&
           Object.entries(configuration.chip_info).map((item) => {
-            return renderRow(TESTID.DEVICE_INFO_CHIP_INFO, item[0], item[1]);
+            return renderRow(
+              AccessibilityLabel.DEVICE_INFO_CHIP_INFO,
+              item[0],
+              item[1]
+            );
           })}
       </View>
     </View>

package/src/screens/Drawer/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import {
   View,
   Image,
@@ -14,20 +14,25 @@ import t from '../../hooks/Common/useTranslations';
 import { Images, Colors } from '../../configs';
 import Text from '../../commons/Text';
 import Routes from '../../utils/Route';
-import { TESTID } from '../../configs/Constants';
-import { useSCContextSelector } from '../../context';
+import { AccessibilityLabel } from '../../configs/Constants';
+import { SCContext, useSCContextSelector } from '../../context';
 import { CommonActions, useNavigation } from '@react-navigation/native';
+import { Action } from '../../context/actionType';
 
 const DrawerContainer = ({ navigation }) => {
   const user = useSCContextSelector((state) => state.auth.account.user);
   const { dispatch } = useNavigation();
-  const doLogout = () => {
+  const { setAction } = useContext(SCContext);
+
+  const doLogout = useCallback(() => {
     const resetAction = CommonActions.reset({
       index: 0,
       routes: [{ name: Routes.Main }],
     });
     dispatch(resetAction);
-  };
+    setAction(Action.SET_IS_EDITING_TEMPLATE);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const goToHelp = () => {};
 
@@ -40,7 +45,7 @@ const DrawerContainer = ({ navigation }) => {
           <Image
             source={Images.logo}
             style={styles.logo}
-            testID={TESTID.SIDE_MENU_LOGO}
+            accessibilityLabel={AccessibilityLabel.SIDE_MENU_LOGO}
           />
 
           <View style={styles.avatarBackground}>
@@ -48,21 +53,27 @@ const DrawerContainer = ({ navigation }) => {
               <Image
                 source={{ uri: user.avatar }}
                 style={styles.avatar}
-                testID={TESTID.SIDE_MENU_AVATAR_USER}
+                accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
               />
             ) : (
-              <View style={styles.avatar} testID={TESTID.SIDE_MENU_AVATAR_USER}>
+              <View
+                style={styles.avatar}
+                accessibilityLabel={AccessibilityLabel.SIDE_MENU_AVATAR_USER}
+              >
                 <Icon name={'user'} size={27} />
               </View>
             )}
             <View style={styles.textContainer}>
               <Text
                 style={[styles.fullName]}
-                testID={TESTID.SIDE_MENU_USER_NAME}
+                accessibilityLabel={AccessibilityLabel.SIDE_MENU_USER_NAME}
               >
                 {user?.name || ''}
               </Text>
-              <Text style={[styles.email]} testID={TESTID.SIDE_MENU_USER_PHONE}>
+              <Text
+                style={[styles.email]}
+                accessibilityLabel={AccessibilityLabel.SIDE_MENU_USER_PHONE}
+              >
                 {user ? user.phone_number : ''}
               </Text>
             </View>
@@ -75,7 +86,7 @@ const DrawerContainer = ({ navigation }) => {
               onPress={goToAbloutUs}
               image={'mail'}
               name={t('about_us')}
-              testID={TESTID.SIDE_MENU_POLICY_ITEM}
+              accessibilityLabel={AccessibilityLabel.SIDE_MENU_POLICY_ITEM}
             />
             <Row
               onPress={doLogout}
@@ -89,7 +100,13 @@ const DrawerContainer = ({ navigation }) => {
   );
 };
 
-export const Row = ({ name, onPress, image, borderBottom, testID }) => {
+export const Row = ({
+  name,
+  onPress,
+  image,
+  borderBottom,
+  accessibilityLabel,
+}) => {
   return (
     <TouchableOpacity
       onPress={onPress}
@@ -98,7 +115,7 @@ export const Row = ({ name, onPress, image, borderBottom, testID }) => {
         styles.optionWrap,
         borderBottom && styles.borderBottom,
       ]}
-      testID={testID}
+      accessibilityLabel={accessibilityLabel}
     >
       <IconOutline name={image} size={24} />
 

package/src/screens/EmergencyContacts/EmergencyContactsAddNew.js

@@ -1,18 +1,18 @@
 import React, { useCallback, useState } from 'react';
-import { SafeAreaView, StyleSheet, TextInput, View } from 'react-native';
+import { StyleSheet, TextInput, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 import { axiosPost } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { isValidPhoneNumber } from '../../utils/Validation';
 
 export const EmergencyContactsAddNew = ({ route }) => {
   const t = useTranslations();
-  const { group } = route.params;
+  const { group } = route?.params || {};
   const { goBack } = useNavigation();
   const [textName, setTextName] = useState('');
   const [textPhone, setTextPhone] = useState('');
@@ -53,11 +53,13 @@ export const EmergencyContactsAddNew = ({ route }) => {
   }, [goBack, group.id, t, textName, textPhone]);
 
   return (
-    <SafeAreaView style={styles.wrap}>
+    <View style={styles.wrap}>
       <WrapHeaderScrollable title={t('create_contact')}>
         <Section type={'border'}>
           <TextInput
-            testID={TESTID.ON_CHANGE_NAME_EMERGENCY_CONTACT}
+            accessibilityLabel={
+              AccessibilityLabel.ON_CHANGE_NAME_EMERGENCY_CONTACT
+            }
             value={textName}
             style={styles.textInput}
             placeholder={t('text_name')}
@@ -66,7 +68,9 @@ export const EmergencyContactsAddNew = ({ route }) => {
             maxLength={64}
           />
           <TextInput
-            testID={TESTID.ON_CHANGE_PHONE_EMERGENCY_CONTACT}
+            accessibilityLabel={
+              AccessibilityLabel.ON_CHANGE_PHONE_EMERGENCY_CONTACT
+            }
             value={textPhone}
             style={styles.textInput}
             placeholder={t('phone_number')}
@@ -87,7 +91,7 @@ export const EmergencyContactsAddNew = ({ route }) => {
           onRightClick={onSave}
         />
       </View>
-    </SafeAreaView>
+    </View>
   );
 };
 

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -18,7 +18,7 @@ const MAX_EMERGENCY_CONTACTS = 5;
 
 export const EmergencyContactsList = ({ route }) => {
   const t = useTranslations();
-  const { unitId, group } = route.params;
+  const { unitId, group } = route?.params || {};
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
   const [showingAddnewModal, setShowAddnewModal, setHideAddnewModal] =

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { SafeAreaView, StyleSheet, View, Platform } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -7,7 +7,7 @@ import { Section, ViewButtonBottom } from '../../commons';
 import { RowUser } from '../../commons/RowUser';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors, Theme } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { AccessibilityLabel } from '../../configs/Constants';
 
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
@@ -17,7 +17,7 @@ const MAX_EMERGENCY_CONTACTS = 5;
 export const EmergencyContactsSelectContacts = ({ route }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
-  const { unitId, group, lengthListContacts } = route.params;
+  const { unitId, group, lengthListContacts } = route?.params || {};
   const [dataContact, setDataContact] = useState([]);
   const [currentContacts, setCurrentContact] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -70,13 +70,15 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
     loadMembers(unitId);
   }, [loadMembers, unitId]);
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <WrapHeaderScrollable title={t('select_contacts')} loading={loading}>
-        <Section type={'border'} style={styles.section}>
+        <Section type={'border'}>
           {dataContact.map((contact, index) => (
             <RowUser
               key={contact.id.toString()}
-              testID={TESTID.EMERGENCY_SELECT_CONTACT + index}
+              accessibilityLabel={
+                AccessibilityLabel.EMERGENCY_SELECT_CONTACT + index
+              }
               index={index}
               leftIcon={
                 <IconOutline name={'user'} size={20} color={Colors.White} />
@@ -108,7 +110,7 @@ export const EmergencyContactsSelectContacts = ({ route }) => {
         onRightClick={goSave}
         rightDisabled={false}
       />
-    </SafeAreaView>
+    </View>
   );
 };
 
@@ -117,9 +119,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.Gray2,
   },
-  section: {
-    marginTop: Platform.OS === 'ios' ? 40 : 0,
-  },
   buttonRemove: {
     height: 40,
     width: 40,