@eohjsc/react-native-smart-city 0.3.57 → 0.3.59

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

@@ -3,7 +3,6 @@ import moment from 'moment';
 
 export const useCountUp = (eventTime) => {
   const [currentTime, setCurrentTime] = useState(moment());
-
   useEffect(() => {
     const intervalId =
       eventTime &&

package/src/screens/Gateway/DetailConfigActionModbus/index.js

@@ -1,12 +1,12 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { View } from 'react-native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 
-import styles from './styles';
 import DetailConfigAction from '../components/DetailConfigAction';
-import { useRoute, useNavigation } from '@react-navigation/native';
-import { calculateLength, calculateStartAddress } from '../utils';
 import DetailActionModbus from '../components/DetailActionModbus';
+import { calculateLength, calculateStartAddress } from '../utils';
 import Routes from '../../../utils/Route';
+import styles from './styles';
 
 const DetailConfigActionModbus = () => {
   const { params = {} } = useRoute();
@@ -17,6 +17,7 @@ const DetailConfigActionModbus = () => {
     isConfigWrite,
     isAction,
     isChildAction,
+    writeConfigs,
   } = params;
 
   const sa = useMemo(() => {
@@ -93,7 +94,9 @@ const DetailConfigActionModbus = () => {
       {
         id: 1,
         title: 'config_write',
-        data: '--',
+        data:
+          writeConfigs?.find((item) => item?.id === itemActionConfig?.register)
+            ?.config?.name || '--',
       },
       {
         id: 2,
@@ -120,7 +123,9 @@ const DetailConfigActionModbus = () => {
       itemActionConfig?.delay,
       itemActionConfig?.ex,
       itemActionConfig?.index,
+      itemActionConfig?.register,
       len,
+      writeConfigs,
     ]
   );
 
@@ -146,9 +151,10 @@ const DetailConfigActionModbus = () => {
       navigate(Routes.DetailChildConfigActionModbus, {
         isChildAction: true,
         itemActionConfig: item,
+        writeConfigs: writeConfigs,
       });
     },
-    [navigate]
+    [navigate, writeConfigs]
   );
   return (
     <View style={styles.wrap}>
@@ -170,6 +176,7 @@ const DetailConfigActionModbus = () => {
             listData={listAction}
             itemAction={itemActionConfig}
             onPressRow={onPressRow}
+            buttonBackStyles={styles.buttonBack}
           />
         )
       )}

package/src/screens/Gateway/DetailConfigActionModbus/styles.js

@@ -6,4 +6,7 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.White,
   },
+  buttonBack: {
+    marginRight: 12,
+  },
 });

package/src/screens/Gateway/DetailConfigActionZigbee/__test__/index.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import { useRoute } from '@react-navigation/native';
+
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import DetailConfigActionZigbee from '..';
-import { useRoute } from '@react-navigation/native';
 import DetailConfigAction from '../../components/DetailConfigAction';
 
 const wrapComponent = () => (

package/src/screens/Gateway/DetailConfigActionZigbee/index.js

@@ -1,9 +1,9 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
+import { useRoute } from '@react-navigation/native';
 
 import styles from './styles';
 import DetailConfigAction from '../components/DetailConfigAction';
-import { useRoute } from '@react-navigation/native';
 
 const DetailConfigActionZigbee = () => {
   const { params = {} } = useRoute();
@@ -22,13 +22,18 @@ const DetailConfigActionZigbee = () => {
       {
         id: 2,
         title: (isConfig && 'key') || (isAction && 'control_payload') || '',
-        data: '--',
+        data:
+          (isConfig && itemActionConfig?.config?.key) ||
+          (isAction && itemActionConfig?.action?.control_payload) ||
+          '--',
       },
     ],
     [
       isAction,
       isConfig,
+      itemActionConfig?.action?.control_payload,
       itemActionConfig?.action?.name,
+      itemActionConfig?.config?.key,
       itemActionConfig?.config?.name,
     ]
   );

package/src/screens/Gateway/DeviceGatewayInfo/__test__/index.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import { useRoute } from '@react-navigation/native';
+
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import DeviceGatewayInfo from '..';
-import { useRoute } from '@react-navigation/native';
 import Information from '../../components/Information';
 
 const wrapComponent = () => (

package/src/screens/Gateway/DeviceGatewayInfo/index.js

@@ -1,7 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
-import t from '../../../hooks/Common/useTranslations';
 import { useRoute } from '@react-navigation/native';
+
+import t from '../../../hooks/Common/useTranslations';
 import styles from './styles';
 import Information from '../components/Information';
 
@@ -78,6 +79,7 @@ const DeviceGatewayInfo = () => {
   return (
     <View style={styles.wrap}>
       <Information
+        buttonBackStyles={styles.buttonBack}
         listInformation={
           isZigbee
             ? deviceInformationZigbee

package/src/screens/Gateway/DeviceGatewayInfo/styles.js

@@ -6,4 +6,7 @@ export default StyleSheet.create({
     flex: 1,
     backgroundColor: Colors.White,
   },
+  buttonBack: {
+    marginRight: 12,
+  },
 });

package/src/screens/Gateway/DeviceModbusDetail/__test__/index.test.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+import { useRoute } from '@react-navigation/native';
+import SegmentedControl from '@react-native-community/segmented-control';
+import Toast from 'react-native-toast-message';
+
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import DeviceModbusDetail from '..';
-import { useRoute } from '@react-navigation/native';
 import { HeaderCustom } from '../../../../commons';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import Routes from '../../../../utils/Route';
 import TabPaneCT from '../../components/TabPaneCT';
 import MenuActionMore from '../../../../commons/MenuActionMore';
-import { Alert } from 'react-native';
-import Toast from 'react-native-toast-message';
-import SegmentedControl from '@react-native-community/segmented-control';
-import MockAdapter from 'axios-mock-adapter';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import { PERMISSION_TYPE } from '../../../../configs/Constants';
 import Detail from '../../components/Detail';
+import ModalPopupCT from '../../../../commons/ModalPopupCT';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -127,13 +128,11 @@ describe('Test DeviceModbusDetail', () => {
     await act(async () => {
       menuActionMore.props.listMenuItem[1].doAction();
     });
-    expect(Alert.alert.mock.calls[0][0]).toEqual(
-      'Are you sure you want to delete device "undefined" ?'
-    );
-    mock.onDelete(API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(1, 1)).reply(200);
+    const modal = instance.findByType(ModalPopupCT);
     await act(async () => {
-      await Alert.alert.mock.calls[0][2][1].onPress();
+      await modal.props.onPressConfirm();
     });
+    mock.onDelete(API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(1, 1)).reply(200);
     expect(mockPop).toBeCalledWith(1);
     expect(Toast.show).toBeCalledWith({
       position: 'bottom',
@@ -257,6 +256,12 @@ describe('Test DeviceModbusDetail', () => {
       isConfigRead: false,
       isConfigWrite: true,
       itemActionConfig: 1,
+      writeConfigs: [
+        {
+          func: 6,
+          id: 2,
+        },
+      ],
     });
   });
 
@@ -290,6 +295,12 @@ describe('Test DeviceModbusDetail', () => {
       isConfigRead: true,
       isConfigWrite: false,
       itemActionConfig: 1,
+      writeConfigs: [
+        {
+          func: 6,
+          id: 2,
+        },
+      ],
     });
   });
 

package/src/screens/Gateway/DeviceModbusDetail/index.js

@@ -1,11 +1,12 @@
 import React, { memo, useMemo, useEffect, useCallback } from 'react';
-import { View, Alert } from 'react-native';
+import { View } from 'react-native';
 import t from '../../../hooks/Common/useTranslations';
 import {
   useRoute,
   useNavigation,
   useIsFocused,
 } from '@react-navigation/native';
+
 import { useGateway } from '../hooks/useGateway';
 import Routes from '../../../utils/Route';
 import { PERMISSION_TYPE } from '../../../configs/Constants';
@@ -21,6 +22,8 @@ const DeviceModbusDetail = () => {
   const {
     selectedIndex,
     detailDeviceModbus,
+    dataModalPopupCT,
+    setDataModalPopupCT,
     setSelectedIndex,
     deleteDeviceDetail,
     fetchRegistersModbus,
@@ -28,6 +31,7 @@ const DeviceModbusDetail = () => {
     setRefresh,
     refresh,
   } = useGateway();
+
   const listTabs = useMemo(
     () => [
       {
@@ -53,6 +57,40 @@ const DeviceModbusDetail = () => {
     ]
   );
 
+  const handleDeleteDevice = useCallback(() => {
+    setDataModalPopupCT((prev) => ({
+      ...prev,
+      title: `${t('delete_device', { name: device?.sensor?.name })}`,
+      subTitle: t('message_delete_device'),
+      type: 'device',
+      isVisible: true,
+      isShowUnderstand: false,
+      isShowAlert: false,
+      isChecked: false,
+      onPressConfirm: () => {
+        setDataModalPopupCT((prevData) => ({
+          ...prevData,
+          isVisible: false,
+          isChecked: false,
+        }));
+        deleteDeviceDetail(gatewayId, device?.id, false, isModbus);
+      },
+      onPressCancel: () =>
+        setDataModalPopupCT((prevData) => ({
+          ...prevData,
+          isVisible: false,
+          isChecked: false,
+        })),
+    }));
+  }, [
+    deleteDeviceDetail,
+    device?.id,
+    device?.sensor?.name,
+    gatewayId,
+    isModbus,
+    setDataModalPopupCT,
+  ]);
+
   const listMenuItem = useMemo(() => {
     const RouteGatewayInformation = {
       id: 1,
@@ -68,25 +106,10 @@ const DeviceModbusDetail = () => {
       id: 2,
       text: t('delete_device'),
       textStyle: styles.textColorRed,
-      doAction: () =>
-        Alert.alert(
-          t('message_delete_device', { name: device?.sensor?.name }),
-          '',
-          [
-            {
-              text: t('cancel'),
-            },
-            {
-              text: t('ok'),
-              onPress: () =>
-                deleteDeviceDetail(gatewayId, device?.id, false, isModbus),
-              style: 'destructive',
-            },
-          ]
-        ),
+      doAction: handleDeleteDevice,
     };
     return [RouteGatewayInformation, ListDeleteGateway];
-  }, [deleteDeviceDetail, gatewayId, isModbus, device, navigate]);
+  }, [handleDeleteDevice, navigate, device, isModbus]);
 
   const isConfigRead = useMemo(() => {
     return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG_READ;
@@ -131,9 +154,18 @@ const DeviceModbusDetail = () => {
         isConfigRead,
         isConfigWrite,
         isAction,
+        writeConfigs: detailDeviceModbus?.config_write,
       });
     },
-    [device, gatewayId, isAction, isConfigRead, isConfigWrite, navigate]
+    [
+      detailDeviceModbus?.config_write,
+      device,
+      gatewayId,
+      isAction,
+      isConfigRead,
+      isConfigWrite,
+      navigate,
+    ]
   );
 
   const onRefresh = useCallback(() => {
@@ -168,6 +200,7 @@ const DeviceModbusDetail = () => {
         onPressRow={onPressRow}
         onRefresh={onRefresh}
         refresh={refresh}
+        dataModalPopupCT={dataModalPopupCT}
       />
     </View>
   );

package/src/screens/Gateway/DeviceZigbeeDetail/__test__/index.test.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+import Toast from 'react-native-toast-message';
+import SegmentedControl from '@react-native-community/segmented-control';
+import { useRoute } from '@react-navigation/native';
+
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import DeviceZigbeeDetail from '..';
-import { useRoute } from '@react-navigation/native';
 import { HeaderCustom } from '../../../../commons';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import Routes from '../../../../utils/Route';
 import TabPaneCT from '../../components/TabPaneCT';
 import MenuActionMore from '../../../../commons/MenuActionMore';
-import { Alert } from 'react-native';
-import Toast from 'react-native-toast-message';
-import SegmentedControl from '@react-native-community/segmented-control';
-import MockAdapter from 'axios-mock-adapter';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import { PERMISSION_TYPE } from '../../../../configs/Constants';
 import Detail from '../../components/Detail';
+import ModalPopupCT from '../../../../commons/ModalPopupCT';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -127,13 +128,11 @@ describe('Test DeviceZigbeeDetail', () => {
     await act(async () => {
       menuActionMore.props.listMenuItem[1].doAction();
     });
-    expect(Alert.alert.mock.calls[0][0]).toEqual(
-      'Are you sure you want to delete device "undefined" ?'
-    );
-    mock.onDelete(API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(1, 1)).reply(200);
+    const modal = instance.findByType(ModalPopupCT);
     await act(async () => {
-      await Alert.alert.mock.calls[0][2][1].onPress();
+      await modal.props.onPressConfirm();
     });
+    mock.onDelete(API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(1, 1)).reply(200);
     expect(mockPop).toBeCalledWith(1);
     expect(Toast.show).toBeCalledWith({
       position: 'bottom',

package/src/screens/Gateway/DeviceZigbeeDetail/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useMemo, useEffect, useCallback } from 'react';
-import { View, Alert } from 'react-native';
+import { View } from 'react-native';
 import {
   useRoute,
   useNavigation,
@@ -22,6 +22,8 @@ const DeviceZigbeeDetail = () => {
   const {
     selectedIndex,
     setSelectedIndex,
+    setDataModalPopupCT,
+    dataModalPopupCT,
     fetchActionConfigDevice,
     deleteDeviceDetail,
     detailDeviceZigbee,
@@ -45,6 +47,40 @@ const DeviceZigbeeDetail = () => {
     [detailDeviceZigbee?.actions, detailDeviceZigbee?.configs]
   );
 
+  const handleDeleteDevice = useCallback(() => {
+    setDataModalPopupCT((prev) => ({
+      ...prev,
+      title: `${t('delete_device', { name: device?.sensor?.name })}`,
+      subTitle: t('message_delete_device'),
+      type: 'device',
+      isVisible: true,
+      isShowUnderstand: false,
+      isShowAlert: false,
+      isChecked: false,
+      onPressConfirm: () => {
+        setDataModalPopupCT((prevData) => ({
+          ...prevData,
+          isVisible: false,
+          isChecked: false,
+        }));
+        deleteDeviceDetail(gatewayId, device?.id, isZigbee, false);
+      },
+      onPressCancel: () =>
+        setDataModalPopupCT((prevData) => ({
+          ...prevData,
+          isVisible: false,
+          isChecked: false,
+        })),
+    }));
+  }, [
+    deleteDeviceDetail,
+    device?.id,
+    device?.sensor?.name,
+    gatewayId,
+    isZigbee,
+    setDataModalPopupCT,
+  ]);
+
   const listMenuItem = useMemo(() => {
     const RouteGatewayInformation = {
       id: 1,
@@ -61,25 +97,10 @@ const DeviceZigbeeDetail = () => {
       id: 2,
       text: t('delete_device'),
       textStyle: styles.textColorRed,
-      doAction: () =>
-        Alert.alert(
-          t('message_delete_device', { name: device?.sensor?.name }),
-          '',
-          [
-            {
-              text: t('cancel'),
-            },
-            {
-              text: t('ok'),
-              onPress: () =>
-                deleteDeviceDetail(gatewayId, device?.id, isZigbee, false),
-              style: 'destructive',
-            },
-          ]
-        ),
+      doAction: handleDeleteDevice,
     };
     return [RouteGatewayInformation, ListDeleteGateway];
-  }, [deleteDeviceDetail, gatewayId, isZigbee, device, navigate]);
+  }, [handleDeleteDevice, navigate, device, isZigbee]);
 
   const isConfig = useMemo(() => {
     return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG;
@@ -140,6 +161,7 @@ const DeviceZigbeeDetail = () => {
         onPressRow={onPressRow}
         refresh={refresh}
         onRefresh={onRefresh}
+        dataModalPopupCT={dataModalPopupCT}
       />
     </View>
   );

package/src/screens/Gateway/GatewayConnectionMethods/__test__/index.test.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { FlatList } from 'react-native';
 import { create, act } from 'react-test-renderer';
+
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import GatewayConnectionMethods from '..';
 import { HeaderCustom } from '../../../../commons';
-import { FlatList } from 'react-native';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 
 const wrapComponent = () => (

package/src/screens/Gateway/GatewayConnectionMethods/index.js

@@ -1,5 +1,6 @@
 import React, { useCallback, memo, useMemo } from 'react';
 import { View, FlatList } from 'react-native';
+
 import { Colors } from '../../../configs';
 import t from '../../../hooks/Common/useTranslations';
 import { Text, HeaderCustom } from '../../../commons';

package/src/screens/Gateway/GatewayDetail/__test__/index.test.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { create, act } from 'react-test-renderer';
+import Toast from 'react-native-toast-message';
+import SegmentedControl from '@react-native-community/segmented-control';
+import { useRoute } from '@react-navigation/native';
+import MockAdapter from 'axios-mock-adapter';
+
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import GatewayDetail from '..';
-import { useRoute } from '@react-navigation/native';
 import { HeaderCustom } from '../../../../commons';
 import { AccessibilityLabel } from '../../../../configs/Constants';
 import Routes from '../../../../utils/Route';
 import TabPaneCT from '../../components/TabPaneCT';
 import MenuActionMore from '../../../../commons/MenuActionMore';
-import { Alert } from 'react-native';
-import Toast from 'react-native-toast-message';
-import SegmentedControl from '@react-native-community/segmented-control';
-import MockAdapter from 'axios-mock-adapter';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
 import { DEVICE_TYPE } from '../../../../configs/Constants';
 import Detail from '../../components/Detail';
+import ModalPopupCT from '../../../../commons/ModalPopupCT';
 
 const mock = new MockAdapter(api.axiosInstance);
 
@@ -127,7 +128,12 @@ describe('Test GatewayDetail', () => {
     await act(async () => {
       menuActionMore[0].props.listMenuItem[1].doAction();
     });
-    expect(Alert.alert).toHaveBeenCalled();
+    const modal = instance.findByType(ModalPopupCT);
+    mock.onPost(API.DEV_MODE.GATEWAY.REBOOT(1)).reply(200);
+    await act(async () => {
+      await modal.props.onPressConfirm();
+    });
+    expect(mockPop).toBeCalledWith(1);
   });
 
   it('test render GatewayDetail onPress more and onPress Delete', async () => {
@@ -142,21 +148,12 @@ describe('Test GatewayDetail', () => {
     await act(async () => {
       menuActionMore.props.listMenuItem[2].doAction();
     });
-    expect(Alert.alert.mock.calls[1][0]).toEqual(
-      'Are you sure you want to delete gateway "undefined" ?'
-    );
-    mock.onDelete(API.DEV_MODE.GATEWAY.DETAIL(1)).reply(200);
+    const modal = instance.findByType(ModalPopupCT);
     await act(async () => {
-      await Alert.alert.mock.calls[1][2][1].onPress();
+      await modal.props.onPressConfirm();
     });
+    mock.onDelete(API.DEV_MODE.GATEWAY.DETAIL(1)).reply(200);
     expect(mockPop).toBeCalledWith(1);
-    expect(Toast.show).toBeCalledWith({
-      position: 'bottom',
-      text1: 'Delete successfully!',
-      text2: undefined,
-      type: 'success',
-      visibilityTime: 1000,
-    });
   });
 
   it('test render GatewayDetail onPress TabPanel zigbee', async () => {