@eohjsc/react-native-smart-city 0.3.62 → 0.3.64

package/src/screens/AllGateway/DeviceInternalDetail/__test__/index.test.js

@@ -0,0 +1,387 @@
+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 DeviceInternalDetail from '..';
+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 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);
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceInternalDetail />
+  </SCProvider>
+);
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  return Object.setPrototypeOf(
+    {
+      Alert: {
+        ...RN.Alert,
+        alert: jest.fn(),
+      },
+    },
+    RN
+  );
+});
+
+const mockPop = jest.fn();
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      pop: mockPop,
+    }),
+    useRoute: jest.fn(),
+    useIsFocused: () => true,
+  };
+});
+
+const headerCustomOnPressMore = async (instance) => {
+  const headerCustom = instance?.findAllByType(HeaderCustom);
+  const buttonMore = headerCustom[0].findByProps({
+    accessibilityLabel: AccessibilityLabel.MENU_POPPER_MORE,
+  });
+  await act(async () => {
+    buttonMore.props.onPress();
+  });
+};
+
+describe('Test DeviceInternalDetail', () => {
+  let tree;
+  const listConfigReads = [
+    {
+      id: 1,
+      config: { name: 'config1' },
+      value_type: 'boolean',
+      pin_number: 0,
+      pin_mode: 'input',
+    },
+    {
+      id: 2,
+      config: { name: 'config2' },
+      value_type: 'integer',
+      pin_number: 0,
+      pin_mode: 'input',
+    },
+  ];
+  const listConfigWrites = [
+    {
+      id: 1,
+      config: { name: 'config1' },
+      value_type: 'boolean',
+      pin_number: 0,
+      pin_mode: 'output',
+    },
+    {
+      id: 2,
+      config: { name: 'config2' },
+      value_type: 'integer',
+      pin_number: 0,
+      pin_mode: 'output',
+    },
+  ];
+  const listActions = [
+    {
+      id: 1,
+      action: { name: 'action 1' },
+      pin: 0,
+      default_value: 0,
+    },
+  ];
+  beforeEach(() => {
+    useRoute.mockReturnValue({
+      params: {
+        device: { id: 1, name: 'abc' },
+        gatewayId: 1,
+        isInternal: true,
+      },
+    });
+  });
+  afterEach(() => {
+    mock.reset();
+    mock.resetHistory();
+    mockNavigate.mockClear();
+    Toast.show.mockClear();
+  });
+
+  it('test render DeviceInternalDetail', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const headerCustom = detail.findAllByType(HeaderCustom);
+    const tabPaneCT = detail.findAllByType(TabPaneCT);
+    const menuActionMore = detail.findAllByType(MenuActionMore);
+
+    expect(headerCustom).toHaveLength(1);
+    expect(tabPaneCT).toHaveLength(1);
+    expect(menuActionMore).toHaveLength(1);
+  });
+
+  it('test render DeviceInternalDetail onPress more and onPress DeviceGatewayInfo', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    headerCustomOnPressMore(detail);
+    const menuActionMore = detail?.findAllByType(MenuActionMore);
+    expect(menuActionMore[0].props.isVisible).toEqual(true);
+    await act(async () => {
+      menuActionMore[0].props.listMenuItem[0].doAction();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.DeviceGatewayInfo, {
+      device: { id: 1, name: 'abc' },
+      isDevice: true,
+      isInternal: true,
+    });
+  });
+
+  it('test render DeviceInternalDetail onPress more and onPress Delete internal', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    headerCustomOnPressMore(detail);
+    const menuActionMore = detail?.findByType(MenuActionMore);
+    expect(menuActionMore.props.isVisible).toEqual(true);
+    await act(async () => {
+      menuActionMore.props.listMenuItem[1].doAction();
+    });
+    const modal = instance.findByType(ModalPopupCT);
+    await act(async () => {
+      await modal.props.onPressConfirm();
+    });
+    mock.onDelete(API.DEV_MODE.ARDUINO.DEVICE_DETAIL(1, 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 DeviceInternalDetail onPress TabPanel config write', async () => {
+    mock
+      .onGet(API.DEV_MODE.ARDUINO.CONFIG_PINS(1, 1))
+      .reply(200, listConfigWrites);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 0 },
+      });
+    });
+    expect(tabPaneCT.props.listTabs[0].data).toEqual(listConfigWrites);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(
+      PERMISSION_TYPE.CONFIG_WRITE
+    );
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel config read', async () => {
+    mock
+      .onGet(API.DEV_MODE.ARDUINO.CONFIG_PINS(1, 1))
+      .reply(200, listConfigReads);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 1 },
+      });
+    });
+    expect(tabPaneCT.props.listTabs[1].data).toEqual(listConfigReads);
+    expect(tabPaneCT.props.listTabs[1].title).toEqual(
+      PERMISSION_TYPE.CONFIG_READ
+    );
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel action', async () => {
+    mock.onGet(API.DEV_MODE.ARDUINO.ACTION(1, 1)).reply(200, listActions);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 2 },
+      });
+    });
+    expect(tabPaneCT.props.listTabs[2].data).toEqual([
+      {
+        id: 1,
+        action: { name: 'action 1' },
+        pin: 0,
+        default_value: 0,
+      },
+    ]);
+    expect(tabPaneCT.props.listTabs[2].title).toEqual(PERMISSION_TYPE.ACTION);
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel config write onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.ARDUINO.CONFIG_PINS(1, 1))
+      .reply(200, listConfigWrites);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 0 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DetailConfigActionInterval, {
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: false,
+      isConfigRead: false,
+      isConfigWrite: true,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel config read onPressRow', async () => {
+    mock
+      .onGet(API.DEV_MODE.ARDUINO.CONFIG_PINS(1, 1))
+      .reply(200, listConfigReads);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 1 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DetailConfigActionInterval, {
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: false,
+      isConfigRead: true,
+      isConfigWrite: false,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel action onPressRow', async () => {
+    mock.onGet(API.DEV_MODE.ARDUINO.ACTION(1, 1)).reply(200, listActions);
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 2 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onPressRow(1);
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.DetailConfigActionInterval, {
+      device: {
+        id: 1,
+        name: 'abc',
+      },
+      isAction: true,
+      isConfigRead: false,
+      isConfigWrite: false,
+      itemActionConfig: 1,
+    });
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel config write onRefresh', async () => {
+    mock
+      .onGet(API.DEV_MODE.ARDUINO.CONFIG_PINS(1, 1))
+      .reply(200, listConfigWrites);
+
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    await act(async () => {
+      await detail.props.onRefresh();
+    });
+    expect(tabPaneCT.props.listTabs[0].data).toEqual(listConfigWrites);
+    expect(tabPaneCT.props.listTabs[0].title).toEqual(
+      PERMISSION_TYPE.CONFIG_WRITE
+    );
+  });
+
+  it('test render DeviceInternalDetail onPress TabPanel action onRefresh', async () => {
+    mock.onGet(API.DEV_MODE.ARDUINO.ACTION(1, 1)).reply(200, listActions);
+
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    const tabPaneCT = detail.findByType(TabPaneCT);
+    const segmentedControl = tabPaneCT.findByType(SegmentedControl);
+    await act(async () => {
+      await segmentedControl.props.onChange({
+        nativeEvent: { selectedSegmentIndex: 2 },
+      });
+    });
+    await act(async () => {
+      await detail.props.onRefresh();
+    });
+    expect(tabPaneCT.props.listTabs[2].data).toEqual(listActions);
+    expect(tabPaneCT.props.listTabs[2].title).toEqual(PERMISSION_TYPE.ACTION);
+  });
+});

package/src/screens/AllGateway/DeviceInternalDetail/index.js

@@ -0,0 +1,188 @@
+import React, { memo, useMemo, useEffect, useCallback } from 'react';
+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';
+import Detail from '../components/Detail';
+import styles from './styles';
+
+const DeviceInternalDetail = () => {
+  const { params = {} } = useRoute();
+  const { device = {}, gatewayId = '', isInternal } = params;
+  const { navigate } = useNavigation();
+  const isFocused = useIsFocused();
+
+  const {
+    selectedIndex,
+    detailDeviceInternal,
+    dataModalPopupCT,
+    setSelectedIndex,
+    deleteDeviceDetail,
+    fetchConfigActionInterval,
+    setRefresh,
+    refresh,
+    saveDataModalPopupCT,
+    hideModalPopupCT,
+  } = useGateway();
+
+  const listTabs = useMemo(
+    () => [
+      {
+        id: 1,
+        title: PERMISSION_TYPE.CONFIG_WRITE,
+        data: detailDeviceInternal?.config_write,
+      },
+      {
+        id: 2,
+        title: PERMISSION_TYPE.CONFIG_READ,
+        data: detailDeviceInternal?.config_read,
+      },
+      {
+        id: 3,
+        title: PERMISSION_TYPE.ACTION,
+        data: detailDeviceInternal?.actions,
+      },
+    ],
+    [
+      detailDeviceInternal?.actions,
+      detailDeviceInternal?.config_read,
+      detailDeviceInternal?.config_write,
+    ]
+  );
+
+  const handleDeleteDevice = useCallback(() => {
+    saveDataModalPopupCT({
+      title: `${t('delete_device', { name: device?.sensor?.name })}`,
+      subTitle: t('message_delete_device'),
+      type: 'device',
+      isVisible: true,
+      isShowUnderstand: false,
+      isShowAlert: false,
+      isChecked: false,
+      onPressConfirm: () => {
+        hideModalPopupCT();
+        deleteDeviceDetail(gatewayId, device?.id, isInternal);
+      },
+      onPressCancel: () => hideModalPopupCT(),
+    });
+  }, [
+    deleteDeviceDetail,
+    device?.id,
+    device?.sensor?.name,
+    gatewayId,
+    hideModalPopupCT,
+    isInternal,
+    saveDataModalPopupCT,
+  ]);
+
+  const listMenuItem = useMemo(() => {
+    const RouteGatewayInformation = {
+      id: 1,
+      text: t('device_information'),
+      doAction: () =>
+        navigate(Routes.DeviceGatewayInfo, {
+          device,
+          isDevice: true,
+          isInternal,
+        }),
+    };
+    const ListDeleteGateway = {
+      id: 2,
+      text: t('delete_device'),
+      textStyle: styles.textColorRed,
+      doAction: handleDeleteDevice,
+    };
+    return [RouteGatewayInformation, ListDeleteGateway];
+  }, [handleDeleteDevice, navigate, device, isInternal]);
+
+  const isConfigRead = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG_READ;
+  }, [listTabs, selectedIndex]);
+
+  const isConfigWrite = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.CONFIG_WRITE;
+  }, [listTabs, selectedIndex]);
+
+  const isAction = useMemo(() => {
+    return listTabs[selectedIndex]?.title === PERMISSION_TYPE.ACTION;
+  }, [listTabs, selectedIndex]);
+
+  useEffect(() => {
+    if (isFocused) {
+      if (isConfigRead || isConfigWrite) {
+        fetchConfigActionInterval(gatewayId, device?.id);
+        return;
+      }
+      if (isAction) {
+        fetchConfigActionInterval(gatewayId, device?.id, 'action');
+        return;
+      }
+    }
+  }, [
+    fetchConfigActionInterval,
+    gatewayId,
+    isFocused,
+    device?.id,
+    isConfigRead,
+    isConfigWrite,
+    isAction,
+  ]);
+
+  const onPressRow = useCallback(
+    (item) => {
+      navigate(Routes.DetailConfigActionInterval, {
+        itemActionConfig: item,
+        device: device,
+        isConfigRead,
+        isConfigWrite,
+        isAction,
+      });
+    },
+    [device, isAction, isConfigRead, isConfigWrite, navigate]
+  );
+
+  const onRefresh = useCallback(() => {
+    setRefresh(true);
+    if (isConfigRead || isConfigWrite) {
+      fetchConfigActionInterval(gatewayId, device?.id);
+    }
+    if (isAction) {
+      fetchConfigActionInterval(gatewayId, device?.id, 'action');
+    }
+    setRefresh(false);
+  }, [
+    device?.id,
+    fetchConfigActionInterval,
+    gatewayId,
+    isAction,
+    isConfigRead,
+    isConfigWrite,
+    setRefresh,
+  ]);
+
+  return (
+    <View style={styles.wrap}>
+      <Detail
+        title={device?.sensor?.name || ''}
+        listMenuItem={listMenuItem}
+        listTabs={listTabs}
+        selectedIndex={selectedIndex}
+        setSelectedIndex={setSelectedIndex}
+        isDevice
+        onPressRow={onPressRow}
+        onRefresh={onRefresh}
+        refresh={refresh}
+        dataModalPopupCT={dataModalPopupCT}
+      />
+    </View>
+  );
+};
+
+export default memo(DeviceInternalDetail);

package/src/screens/{Gateway → AllGateway}/DeviceModbusDetail/index.js

@@ -23,13 +23,14 @@ const DeviceModbusDetail = () => {
     selectedIndex,
     detailDeviceModbus,
     dataModalPopupCT,
-    setDataModalPopupCT,
     setSelectedIndex,
     deleteDeviceDetail,
     fetchRegistersModbus,
     fetchActionsModbus,
     setRefresh,
     refresh,
+    saveDataModalPopupCT,
+    hideModalPopupCT,
   } = useGateway();
 
   const listTabs = useMemo(
@@ -58,8 +59,7 @@ const DeviceModbusDetail = () => {
   );
 
   const handleDeleteDevice = useCallback(() => {
-    setDataModalPopupCT((prev) => ({
-      ...prev,
+    saveDataModalPopupCT({
       title: `${t('delete_device', { name: device?.sensor?.name })}`,
       subTitle: t('message_delete_device'),
       type: 'device',
@@ -68,27 +68,19 @@ const DeviceModbusDetail = () => {
       isShowAlert: false,
       isChecked: false,
       onPressConfirm: () => {
-        setDataModalPopupCT((prevData) => ({
-          ...prevData,
-          isVisible: false,
-          isChecked: false,
-        }));
-        deleteDeviceDetail(gatewayId, device?.id, false, isModbus);
+        hideModalPopupCT();
+        deleteDeviceDetail(gatewayId, device?.id, false, false, isModbus);
       },
-      onPressCancel: () =>
-        setDataModalPopupCT((prevData) => ({
-          ...prevData,
-          isVisible: false,
-          isChecked: false,
-        })),
-    }));
+      onPressCancel: () => hideModalPopupCT(),
+    });
   }, [
     deleteDeviceDetail,
     device?.id,
     device?.sensor?.name,
     gatewayId,
+    hideModalPopupCT,
     isModbus,
-    setDataModalPopupCT,
+    saveDataModalPopupCT,
   ]);
 
   const listMenuItem = useMemo(() => {

package/src/screens/{Gateway → AllGateway}/DeviceZigbeeDetail/index.js

@@ -22,13 +22,14 @@ const DeviceZigbeeDetail = () => {
   const {
     selectedIndex,
     setSelectedIndex,
-    setDataModalPopupCT,
     dataModalPopupCT,
     fetchActionConfigDevice,
     deleteDeviceDetail,
     detailDeviceZigbee,
     setRefresh,
     refresh,
+    saveDataModalPopupCT,
+    hideModalPopupCT,
   } = useGateway();
 
   const listTabs = useMemo(
@@ -48,8 +49,7 @@ const DeviceZigbeeDetail = () => {
   );
 
   const handleDeleteDevice = useCallback(() => {
-    setDataModalPopupCT((prev) => ({
-      ...prev,
+    saveDataModalPopupCT({
       title: `${t('delete_device', { name: device?.sensor?.name })}`,
       subTitle: t('message_delete_device'),
       type: 'device',
@@ -58,27 +58,19 @@ const DeviceZigbeeDetail = () => {
       isShowAlert: false,
       isChecked: false,
       onPressConfirm: () => {
-        setDataModalPopupCT((prevData) => ({
-          ...prevData,
-          isVisible: false,
-          isChecked: false,
-        }));
-        deleteDeviceDetail(gatewayId, device?.id, isZigbee, false);
+        hideModalPopupCT();
+        deleteDeviceDetail(gatewayId, device?.id, false, isZigbee, false);
       },
-      onPressCancel: () =>
-        setDataModalPopupCT((prevData) => ({
-          ...prevData,
-          isVisible: false,
-          isChecked: false,
-        })),
-    }));
+      onPressCancel: () => hideModalPopupCT(),
+    });
   }, [
     deleteDeviceDetail,
     device?.id,
     device?.sensor?.name,
     gatewayId,
     isZigbee,
-    setDataModalPopupCT,
+    saveDataModalPopupCT,
+    hideModalPopupCT,
   ]);
 
   const listMenuItem = useMemo(() => {