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

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

@@ -47,7 +47,10 @@ describe('Test connecting modbus device', () => {
     route = {
       params: {
         unitId: 1,
-        stationId: 2,
+        subUnit: {
+          id: 2,
+          station: 'Station 2',
+        },
         chipId: 3,
         qrData: {},
       },
@@ -64,6 +67,9 @@ describe('Test connecting modbus device', () => {
   });
 
   it('receive sensor-id from channel then rename sensor-id', async () => {
+    mock.onPost().reply(200, {
+      id: 1,
+    });
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -74,15 +80,16 @@ describe('Test connecting modbus device', () => {
         channel = channels[key];
       }
     }
-    await act(async () => {
-      await channel.trigger('progress', { data: { sensorId: 1 } });
-    });
     await act(async () => {
       await channel.trigger('progress', { success: 1 });
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.RenameNewDevices, {
+      addDeviceType: undefined,
       unitId: 1,
-      stationId: 2,
+      subUnit: {
+        id: 2,
+        station: 'Station 2',
+      },
       chipId: 3,
       sensorId: 1,
     });

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

@@ -59,6 +59,15 @@ describe('Test rename new devices', () => {
   });
 
   it('rendering base', async () => {
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+        addDeviceType: 'gateway',
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -81,7 +90,7 @@ describe('Test rename new devices', () => {
     expect(mock.history.get).toHaveLength(1);
   });
 
-  it('rendering sensor', async () => {
+  it('rendering end devices', async () => {
     mock.onGet().reply(200, {
       id: 1,
       name: 'chip',
@@ -104,14 +113,6 @@ describe('Test rename new devices', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    expect(
-      instance.findAll(
-        (el) =>
-          el.props.accessibilityLabel?.indexOf(
-            `${AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE}-sensor`
-          ) === 0 && el.type === _TextInput
-      )
-    ).toHaveLength(1);
     expect(
       instance.findAll(
         (el) =>
@@ -126,6 +127,15 @@ describe('Test rename new devices', () => {
     mock.onGet().reply(200, {
       can_rename: true,
     });
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+        addDeviceType: 'gateway',
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -154,6 +164,15 @@ describe('Test rename new devices', () => {
       id: 1,
       can_rename: true,
     });
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+        addDeviceType: 'gateway',
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -188,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__/ScanModbusQR.test.js

@@ -66,8 +66,6 @@ describe('test scan modbus QR', () => {
   it('on scan correct QR code', async () => {
     await scanQRCode({ imei: 'SENSOR-xxx' }, jest.fn());
     expect(mockedNavigate).toHaveBeenCalled();
-    expect(mockedNavigate.mock.calls[0][0]).toEqual(
-      Routes.ConnectingModbusDevice
-    );
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectModbusGateway);
   });
 });

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,
+        },
       },
     };
   });
@@ -68,9 +70,11 @@ describe('Test select modbus gateway', () => {
       selectGateway.props.onPressNext({ id: 3 });
     });
 
-    expect(mockedNavigate).toBeCalledWith(Routes.ScanModbusQR, {
+    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/Detail.js

@@ -74,8 +74,9 @@ const SubUnitDetail = ({ route }) => {
 
   const onAdd = useCallback(() => {
     navigation.navigate(Routes.AddGatewayStack, {
-      screen: Routes.FirstWarning,
+      screen: Routes.SelectDeviceType,
       params: {
+        stationName: station.name,
         stationId: station.id,
         unitId: unit.id,
         unitName: unit.name,

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>
   );