@eohjsc/react-native-smart-city 0.3.41 → 0.3.42

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

@@ -41,10 +41,13 @@ describe('Test connecting wifi device', () => {
   });
 
   beforeEach(() => {
+    jest.useFakeTimers();
     route = {
       params: {
         unitId: 1,
-        stationId: 2,
+        subUnit: {
+          id: 2,
+        },
         gateway: {},
         qrData: {},
         selectedWifi: {},
@@ -58,6 +61,7 @@ describe('Test connecting wifi device', () => {
     });
     const instance = tree.root;
     expect(instance.findAllByType(Processing)).toHaveLength(1);
+    jest.runAllTimers();
     expect(mock.history.post).toHaveLength(1);
   });
 });

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

@@ -177,7 +177,9 @@ describe('test share wifi password', () => {
       params: {
         qrData: { org_slug: 'eoh', prefix: 'robot' },
         unitId: 1,
-        stationId: 1,
+        subUnit: {
+          id: 1,
+        },
       },
     };
     await act(async () => {
@@ -201,7 +203,9 @@ describe('test share wifi password', () => {
 
     expect(mockedNavigate).toBeCalledWith('ShareWifiPassword', {
       unitId: 1,
-      stationId: 1,
+      subUnit: {
+        id: 1,
+      },
       wifiList: [{ ssid: 'wifi 1' }, { ssid: 'wifi.2' }],
       qrData: { org_slug: 'eoh', prefix: 'robot' },
     });

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

@@ -47,8 +47,10 @@ describe('Test connecting modbus device', () => {
     route = {
       params: {
         unitId: 1,
-        stationId: 2,
-        stationName: 'station',
+        subUnit: {
+          id: 2,
+          station: 'Station 2',
+        },
         chipId: 3,
         qrData: {},
       },
@@ -84,8 +86,10 @@ describe('Test connecting modbus device', () => {
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.RenameNewDevices, {
       addDeviceType: undefined,
       unitId: 1,
-      stationId: 2,
-      stationName: 'station',
+      subUnit: {
+        id: 2,
+        station: 'Station 2',
+      },
       chipId: 3,
       sensorId: 1,
     });

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

@@ -207,4 +207,68 @@ describe('Test rename new devices', () => {
       })
     );
   });
+
+  it('update end device name', async () => {
+    mock.onGet().reply(200, {
+      id: 1,
+      can_rename: true,
+      sensors: [
+        {
+          id: 1,
+          name: 'sensor',
+          end_devices: [
+            {
+              id: 1,
+              name: 'end_device',
+            },
+          ],
+        },
+      ],
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const chipNameField = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          `${AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE}-end_device-1` &&
+        el.type === _TextInput
+    );
+    await act(async () => {
+      chipNameField.props.onChange('new name');
+    });
+
+    const doneButton = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.BUTTON_DONE &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      doneButton.props.onPress();
+    });
+
+    expect(mock.history.post).toHaveLength(1);
+    expect(mock.history.post[0].data).toEqual(
+      JSON.stringify({
+        id: 1,
+        can_rename: true,
+        sensors: [
+          {
+            id: 1,
+            name: 'sensor',
+            end_devices: [
+              {
+                id: 1,
+                name: 'new name',
+              },
+            ],
+          },
+        ],
+      })
+    );
+  });
 });

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

@@ -68,7 +68,9 @@ describe('Test select device type', () => {
       params: {
         unitId: 1,
         unitName: 'Unit A',
-        stationId: 1,
+        subUnit: {
+          id: 1,
+        },
       },
     };
     await act(async () => {

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

@@ -43,7 +43,9 @@ describe('Test select modbus gateway', () => {
     route = {
       params: {
         unitId: 1,
-        stationId: 2,
+        subUnit: {
+          id: 2,
+        },
       },
     };
   });
@@ -70,7 +72,9 @@ describe('Test select modbus gateway', () => {
 
     expect(mockedNavigate).toBeCalledWith(Routes.ConnectingModbusDevice, {
       unitId: 1,
-      stationId: 2,
+      subUnit: {
+        id: 2,
+      },
       chipId: 3,
     });
   });

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

@@ -43,7 +43,9 @@ describe('Test select zigbee gateway', () => {
     route = {
       params: {
         unitId: 1,
-        stationId: 2,
+        subUnit: {
+          id: 2,
+        },
       },
     };
   });
@@ -70,7 +72,9 @@ describe('Test select zigbee gateway', () => {
 
     expect(mockedNavigate).toBeCalledWith(Routes.ZigbeeDeviceConnectGuide, {
       unitId: 1,
-      stationId: 2,
+      subUnit: {
+        id: 2,
+      },
       chipId: 3,
     });
   });

package/src/screens/Device/EditDevice/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useState, useCallback } from 'react';
-import { View, TouchableOpacity, Platform } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../../commons/Header';
 import { IconOutline } from '@ant-design/icons-react-native';
@@ -72,12 +72,8 @@ const EditDevice = memo(() => {
     }
   }, [stateAlertAction.isDelete, deleteSensor, renameSensor]);
 
-  const [transY] = useKeyboardAnimated(-16);
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
+  const transY = useKeyboardAnimated();
+
   return (
     <View style={styles.wrap}>
       <HeaderCustom title={t('edit_device')} isShowSeparator />
@@ -130,7 +126,7 @@ const EditDevice = memo(() => {
         leftButtonClick={hideAlertAction}
         rightButtonTitle={stateAlertAction.rightButton}
         rightButtonClick={handleRenameOrDelete}
-        animatedStyle={animatedStyle}
+        transY={transY}
       >
         {!stateAlertAction.isDelete && (
           <_TextInput

package/src/screens/Explore/index.js

@@ -5,8 +5,10 @@ import {
   StyleSheet,
   ScrollView,
   FlatList,
+  Animated,
+  Platform,
+  Easing,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
@@ -27,11 +29,8 @@ let page = 1;
 const Explore = ({ navigation }) => {
   const t = useTranslations();
   useBlockBackAndroid();
-  const [transY] = useKeyboard(80);
-
-  const animatedStyle = {
-    marginBottom: transY,
-  };
+  const transY = useKeyboard(80);
+  const [keyboardAnim] = useState(new Animated.Value(transY));
 
   useSCContextSelector((state) => state.language);
 
@@ -122,9 +121,25 @@ const Explore = ({ navigation }) => {
     }
   };
 
+  useEffect(() => {
+    Animated.timing(keyboardAnim, {
+      toValue: transY,
+      duration: 220,
+      useNativeDriver: false,
+      easing: Easing.linear,
+    });
+  }, [keyboardAnim, transY]);
+
   return (
     <SafeAreaView style={styles.container}>
-      <Animated.View style={[{ backgroundColor: Colors.White }, animatedStyle]}>
+      <Animated.View
+        style={[
+          { backgroundColor: Colors.White },
+          Platform.OS === 'ios' && {
+            marginBottom: keyboardAnim,
+          },
+        ]}
+      >
         <FlatList
           data={unitsPublic}
           ListHeaderComponent={listHeader}

package/src/screens/HanetCamera/MemberInfo.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { View, TouchableOpacity, Image, Platform } from 'react-native';
+import { View, TouchableOpacity, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { IconFill } from '@ant-design/icons-react-native';
+
 import { HeaderCustom } from '../../commons/Header';
 import { AlertAction, FullLoading } from '../../commons';
 import BottomButtonView from '../../commons/BottomButtonView';
@@ -160,12 +161,7 @@ const HanetMemberInfo = ({ route }) => {
     }
   };
 
-  const [transY] = useKeyboardAnimated(-16);
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
+  const transY = useKeyboardAnimated();
 
   return (
     <View style={styles.container}>
@@ -229,7 +225,7 @@ const HanetMemberInfo = ({ route }) => {
         rightButtonTitle={stateAlertAction.rightButton}
         rightButtonClick={handleRenameOrDelete}
         rightButtonStyle={{ color: stateAlertAction.rightColor }}
-        animatedStyle={animatedStyle}
+        transY={transY}
       >
         {!stateAlertAction.isDelete && (
           <TextInput

package/src/screens/ScriptDetail/index.js

@@ -6,7 +6,7 @@ import React, {
   useEffect,
   memo,
 } from 'react';
-import { View, TouchableOpacity, Image, Platform } from 'react-native';
+import { View, TouchableOpacity, Image } from 'react-native';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
 
@@ -83,12 +83,7 @@ const ScriptDetail = ({ route }) => {
     (state) => state.app.popoverAnimating
   );
 
-  const [transY] = useKeyboardAnimated(-16);
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
+  const transY = useKeyboardAnimated();
 
   const renameScript = useCallback(async () => {
     const { success, data: script } = await axiosPatch(
@@ -508,7 +503,7 @@ const ScriptDetail = ({ route }) => {
         rightButtonTitle={stateAlertAction.rightButton}
         rightButtonClick={handleRenameOrDelete}
         rightButtonStyle={{ color: stateAlertAction.rightColor }}
-        animatedStyle={animatedStyle}
+        transY={transY}
       >
         {!stateAlertAction.isDelete && havePermission && (
           <_TextInput

package/src/screens/SubUnit/EditSubUnit.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { View, TouchableOpacity, Image, Platform } from 'react-native';
+import { View, TouchableOpacity, Image } from 'react-native';
 import { connect } from 'react-redux';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -17,15 +17,12 @@ import useBoolean from '../../hooks/Common/useBoolean';
 import { ImagePicker, Section } from '../../commons';
 import AlertAction from '../../commons/AlertAction';
 import _TextInput from '../../commons/Form/TextInput';
-import ViewButtonBottom from '../../commons/ViewButtonBottom';
 import Text from '../../commons/Text';
 import { AccessibilityLabel } from '../../configs/Constants';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
-import Animated from 'react-native-reanimated';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 import styles from './EditSubUnitStyles';
-import { ModalCustom } from '../../commons/Modal';
 
 const EditSubUnit = ({ route }) => {
   const { unit, station } = route?.params || {};
@@ -164,12 +161,7 @@ const EditSubUnit = ({ route }) => {
     });
   }, [group, navigation, unit.id]);
 
-  const [transY] = useKeyboardAnimated(-16);
-  const animatedStyle = Platform.select({
-    ios: {
-      marginBottom: transY,
-    },
-  });
+  const transY = useKeyboardAnimated();
 
   return (
     <View style={styles.container}>
@@ -220,6 +212,7 @@ const EditSubUnit = ({ route }) => {
               <Text
                 type={'Body'}
                 color={contactsName.length > 0 ? Colors.Primary : Colors.Gray6}
+                accessibilityLabel={AccessibilityLabel.CONTACT_NAME}
               >
                 {contactsName.length > 0
                   ? contactsName.join(', ')
@@ -253,37 +246,25 @@ const EditSubUnit = ({ route }) => {
           )}
         </View>
       </View>
-      <ModalCustom
-        accessibilityLabel={AccessibilityLabel.MANAGE_SUB_UNIT_MODAL}
-        isVisible={showEdit}
-        onBackButtonPress={setHideEdit}
-        onBackdropPress={setHideEdit}
-        style={styles.modalContainer}
+      <AlertAction
+        visible={showEdit}
+        hideModal={setHideEdit}
+        title={t('rename_sub_unit')}
+        leftButtonTitle={t('cancel')}
+        leftButtonClick={setHideEdit}
+        rightButtonTitle={t('rename')}
+        rightButtonClick={goRename}
+        transY={transY}
+        accessibilityLabel={AccessibilityLabel.MANAGE_UNIT_MODAL_RENAME}
       >
-        <Animated.View style={[styles.popoverStyle, animatedStyle]}>
-          <View style={styles.modalWrapper}>
-            <View style={styles.modalHeader}>
-              <Text semibold style={styles.modalHeaderText}>
-                {t('rename_sub_unit')}
-              </Text>
-            </View>
-            <_TextInput
-              defaultValue={station.name}
-              onChange={onChangeName}
-              textInputStyle={styles.textInputStyle}
-              wrapStyle={styles.textInputWrapStyle}
-              selectionColor={Colors.Primary}
-            />
-
-            <ViewButtonBottom
-              leftTitle={t('cancel')}
-              onLeftClick={setHideEdit}
-              rightTitle={t('rename')}
-              onRightClick={goRename}
-            />
-          </View>
-        </Animated.View>
-      </ModalCustom>
+        <_TextInput
+          defaultValue={station.name}
+          onChange={onChangeName}
+          textInputStyle={styles.textInputStyle}
+          wrapStyle={styles.textInputWrapStyle}
+          selectionColor={Colors.Primary}
+        />
+      </AlertAction>
       <AlertAction
         visible={showModalRemoveSubUnit}
         hideModal={hideRemoveSubUnitModal}
@@ -293,7 +274,7 @@ const EditSubUnit = ({ route }) => {
         rightButtonTitle={t('remove')}
         leftButtonClick={hideRemoveSubUnitModal}
         rightButtonClick={onRemoveSubUnit}
-        animatedStyle={animatedStyle}
+        transY={transY}
       />
     </View>
   );

package/src/screens/SubUnit/__test__/EditSubUnit.test.js

@@ -38,6 +38,8 @@ jest.mock('react-redux', () => {
   };
 });
 
+const mockUseIsFocused = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -46,7 +48,7 @@ jest.mock('@react-navigation/native', () => {
       dangerouslyGetState: mockedDangerouslyGetState,
       pop: mockedPop,
     }),
-    useIsFocused: jest.fn(),
+    useIsFocused: () => mockUseIsFocused,
   };
 });
 
@@ -91,6 +93,7 @@ describe('Test EditSubUnit', () => {
 
   afterEach(() => {
     mockedDispatch.mockClear();
+    mock.reset();
     Toast.show.mockClear();
   });
   let tree;
@@ -100,19 +103,17 @@ describe('Test EditSubUnit', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    expect(alertAction.props.leftButtonTitle).toEqual(
+    const alertAction = instance.findAllByType(AlertAction);
+    expect(alertAction[1].props.leftButtonTitle).toEqual(
       getTranslate('en', 'cancel')
     );
-    expect(alertAction.props.rightButtonTitle).toEqual(
+    expect(alertAction[1].props.rightButtonTitle).toEqual(
       getTranslate('en', 'remove')
     );
   });
 
   it('alertAction rightButtonClick success, previous screen Routes.UnitDetail', async () => {
-    mock
-      .onDelete('https://backend.eoh.io/api/property_manager/1/sub_units/2/')
-      .reply(200);
+    mock.onDelete(API.SUB_UNIT.REMOVE_SUB_UNIT(1, 2)).reply(200);
 
     mockedDangerouslyGetState.mockImplementation(() => ({
       routes: [
@@ -127,11 +128,17 @@ describe('Test EditSubUnit', () => {
     });
 
     const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
+    const alertAction = instance.findAllByType(AlertAction);
     await act(async () => {
-      await alertAction.props.rightButtonClick();
+      await alertAction[1].props.rightButtonClick();
+    });
+    expect(alertAction[1].props.visible).toEqual(false);
+    expect(Toast.show).toBeCalledWith({
+      type: 'success',
+      position: 'bottom',
+      text1: getTranslate('en', 'text_remove_sub_unit_success'),
+      visibilityTime: 1000,
     });
-    expect(alertAction.props.visible).toEqual(false);
   });
 
   it('alertAction rightButtonClick success', async () => {
@@ -146,11 +153,11 @@ describe('Test EditSubUnit', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
+    const alertAction = instance.findAllByType(AlertAction);
     await act(async () => {
-      await alertAction.props.rightButtonClick();
+      await alertAction[1].props.rightButtonClick();
     });
-    expect(mockedPop).not.toBeCalled();
+    expect(mockedPop).toBeCalled();
   });
 
   it('alertAction rightButtonClick fail', async () => {
@@ -166,9 +173,9 @@ describe('Test EditSubUnit', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
+    const alertAction = instance.findAllByType(AlertAction);
     await act(async () => {
-      await alertAction.props.rightButtonClick();
+      await alertAction[1].props.rightButtonClick();
     });
 
     expect(Toast.show).toHaveBeenCalledWith({
@@ -184,49 +191,11 @@ describe('Test EditSubUnit', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.leftButtonClick();
-    });
-    expect(alertAction.props.visible).toEqual(false);
-  });
-
-  it('alertAction hideModal', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      await alertAction.props.hideModal();
-    });
-    expect(alertAction.props.visible).toEqual(false);
-  });
-
-  it('viewBottomButton onLeftClick', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const modal = instance.find(
-      (el) =>
-        el.props.accessibilityLabel === AccessibilityLabel.MANAGE_SUB_UNIT_MODAL
-    );
-    const viewBottomButtons = instance.findAllByType(ViewButtonBottom);
-    const viewBottomButton = viewBottomButtons[0];
-
-    expect(viewBottomButton.props.leftTitle).toEqual(
-      getTranslate('en', 'cancel')
-    );
-    expect(viewBottomButton.props.rightTitle).toEqual(
-      getTranslate('en', 'rename')
-    );
-
+    const alertAction = instance.findAllByType(AlertAction);
     await act(async () => {
-      await viewBottomButton.props.onLeftClick();
+      await alertAction[1].props.leftButtonClick();
     });
-
-    expect(modal.props.isVisible).toEqual(false);
+    expect(alertAction[1].props.visible).toEqual(false);
   });
 
   it('viewBottomButton onRightClick success', async () => {
@@ -279,14 +248,14 @@ describe('Test EditSubUnit', () => {
           AccessibilityLabel.MANAGE_SUB_UNIT_REMOVE_BUTTON &&
         el.type === TouchableOpacity
     );
-    const alertAction = instance.findByType(AlertAction);
-    expect(alertAction.props.visible).toEqual(false);
+    const alertAction = instance.findAllByType(AlertAction);
+    expect(alertAction[1].props.visible).toEqual(false);
 
     await act(async () => {
       button.props.onPress();
     });
 
-    expect(alertAction.props.visible).toEqual(true);
+    expect(alertAction[1].props.visible).toEqual(true);
   });
 
   it('onChangeName', async () => {
@@ -360,4 +329,27 @@ describe('Test EditSubUnit', () => {
       uri: 'path',
     });
   });
+
+  it('Test getContact success', async () => {
+    route = {
+      ...route,
+      params: {
+        ...route.params,
+        station: { ...route.params.station, emergency_group: { id: 1 } },
+      },
+    };
+    mock
+      .onGet(API.EMERGENCY_BUTTON.CONTACTS())
+      .reply(200, [{ id: 1, name: 'name' }]);
+    mockUseIsFocused.mockImplementationOnce(() => true);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const contactNameTexts = tree.root.findAll(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.CONTACT_NAME &&
+        el.type === Text
+    );
+    expect(contactNameTexts[0].props.children).toBe('name');
+  });
 });