@eohjsc/react-native-smart-city 0.7.19 → 0.7.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.19",
+  "version": "0.7.20",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/screens/AddNewGateway/ScanDeviceLocal.js

@@ -30,12 +30,18 @@ import styles from './ScanDeviceLocalStyles';
 
 let zeroconf;
 
-const DeviceItem = ({ item, setSelectedDevice, selectedDevice }) => {
+const DeviceItem = ({
+  item,
+  selectedDevice,
+  setSelectedDevice,
+  fetchDeviceInfo,
+}) => {
   const handleSelectDevice = useCallback(
     (device) => {
       setSelectedDevice(device);
+      fetchDeviceInfo(device?.host);
     },
-    [setSelectedDevice]
+    [setSelectedDevice, fetchDeviceInfo]
   );
 
   return (
@@ -69,9 +75,8 @@ const ScanDeviceLocal = ({ route }) => {
   const [selectedDevice, setSelectedDevice] = useState();
   const [isShowLoading, setIsShowLoading] = useState(false);
 
-  const { deviceInfo, fetchDeviceInfo, sendConfigToDevice } = useConnectDevice(
-    selectedDevice?.host
-  );
+  const { deviceInfo, fetchDeviceInfo, sendConfigToDevice } =
+    useConnectDevice();
 
   const code = useMemo(() => {
     return uuidv4();
@@ -107,7 +112,7 @@ const ScanDeviceLocal = ({ route }) => {
 
   const onConnectingDevice = useCallback(async () => {
     setIsShowLoading(true);
-    const success = await sendConfigToDevice({
+    const success = await sendConfigToDevice(selectedDevice?.host, {
       token: code,
       host: detailChipQr?.host,
       port: detailChipQr?.port,
@@ -126,6 +131,7 @@ const ScanDeviceLocal = ({ route }) => {
     code,
     subUnit,
     deviceInfo?.type,
+    selectedDevice?.host,
     detailChipQr,
     t,
     sendConfigToDevice,
@@ -138,12 +144,13 @@ const ScanDeviceLocal = ({ route }) => {
       return (
         <DeviceItem
           item={item}
-          setSelectedDevice={setSelectedDevice}
           selectedDevice={selectedDevice}
+          setSelectedDevice={setSelectedDevice}
+          fetchDeviceInfo={fetchDeviceInfo}
         />
       );
     },
-    [selectedDevice, setSelectedDevice]
+    [selectedDevice, setSelectedDevice, fetchDeviceInfo]
   );
 
   const handleGoBack = useCallback(() => {
@@ -202,12 +209,6 @@ const ScanDeviceLocal = ({ route }) => {
     };
   }, []);
 
-  useEffect(() => {
-    if (selectedDevice) {
-      fetchDeviceInfo();
-    }
-  }, [selectedDevice, fetchDeviceInfo]);
-
   useEffect(() => {
     if (deviceInfo) {
       fetchChipQrDetail(deviceInfo?.secret);

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

@@ -93,7 +93,7 @@ describe('test ScanDeviceLocal', () => {
       await viewButtonBottom.props.onRightClick();
     });
 
-    expect(deviceApi.baseURL).toBe(`http://${resolvedDevice.host}/api`);
+    expect(deviceApi.getBaseURL()).toBe(`http://${resolvedDevice.host}/api`);
 
     expect(zeroconfMock.on).toHaveBeenCalledWith(
       'resolved',
@@ -259,6 +259,56 @@ describe('test ScanDeviceLocal', () => {
 
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'cannot_fetch_data_from_device')
+    );
+  });
+
+  it('test disable connect button when fetch chip qr info error', async () => {
+    const resolvedDevice = {
+      host: 'host-1.lan',
+      name: 'Device 1',
+      type: 'end_device',
+    };
+
+    mock.onGet(API.DEV_MODE.CHIP_QR_CODE.DETAIL_BY_SECRET()).reply(400);
+    mockDeviceApi.onGet(DEVICEAPI.BOARD.DETAIL()).reply(200, {
+      name: resolvedDevice.name,
+      type: resolvedDevice.type,
+      secret: '123456',
+    });
+
+    const route = { params: { unit: 1 } };
+    await act(async () => {
+      tree = await renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const resolvedCallback = zeroconfMock.on.mock.calls.find(
+      (call) => call[0] === 'resolved'
+    )[1];
+    await act(async () => {
+      await resolvedCallback(resolvedDevice);
+    });
+
+    const flatList = instance.findByType(FlatList);
+    expect(flatList.props.data).toEqual([resolvedDevice]);
+    await act(async () => {
+      await flatList.props.renderItem({ item: resolvedDevice });
+    });
+
+    // Select first device
+    const touchable = flatList.findAllByType(TouchableOpacity);
+    expect(touchable).toHaveLength(1);
+    await act(async () => {
+      await touchable[0].props.onPress();
+    });
+
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
+    expect(spyToastError).toHaveBeenCalledWith(
+      getTranslate('en', 'chip_qr_not_found')
+    );
   });
 
   it('test handle connecting device error', async () => {

package/src/screens/AddNewGateway/hooks/useConnectDevice.js

@@ -1,7 +1,9 @@
 import { create } from 'apisauce';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 
 import { API } from '../configs/API';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import t from '../../../hooks/Common/useTranslations';
 
 export const api = create({
   timeout: 10000,
@@ -10,15 +12,11 @@ export const api = create({
   },
 });
 
-export const useConnectDevice = (host) => {
+export const useConnectDevice = () => {
   const [deviceInfo, setDeviceInfo] = useState();
   const [listWiFiDevice, setListWiFiDevice] = useState([]);
   const [lastError, setLastError] = useState();
 
-  useEffect(() => {
-    api.baseURL = `http://${host}/api`;
-  }, [host]);
-
   const parseResponse = (response, setInfo) => {
     if (response.data?.status === 'error') {
       setLastError(response.data?.message);
@@ -26,23 +24,27 @@ export const useConnectDevice = (host) => {
     }
     if (!response.ok) {
       setLastError(response.problem);
+      setInfo && ToastBottomHelper.error(t('cannot_fetch_data_from_device'));
       return false;
     }
     setInfo && setInfo(response.data);
     return true;
   };
 
-  const fetchDeviceInfo = useCallback(async () => {
+  const fetchDeviceInfo = useCallback(async (host) => {
+    api.setBaseURL(`http://${host}/api`);
     const response = await api.get(API.BOARD.DETAIL());
     return parseResponse(response, setDeviceInfo);
   }, []);
 
-  const fetchListWiFiDevice = useCallback(async () => {
+  const fetchListWiFiDevice = useCallback(async (host) => {
+    api.setBaseURL(`http://${host}/api`);
     const response = await api.get(API.BOARD.SCAN_WIFI());
     return parseResponse(response, setListWiFiDevice);
   }, []);
 
-  const sendConfigToDevice = useCallback(async (config) => {
+  const sendConfigToDevice = useCallback(async (host, config) => {
+    api.setBaseURL(`http://${host}/api`);
     const response = await api.post(API.BOARD.CONFIG(), config);
     return parseResponse(response);
   }, []);

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

@@ -179,6 +179,34 @@ describe('Test DeviceInternalDetail', () => {
     });
   });
 
+  it('test render DeviceInternalDetail onPress more and onPress Delete internal failure', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detail = instance?.findByType(Detail);
+    await 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);
+
+    mock.onDelete(API.DEV_MODE.ARDUINO.DEVICE_DETAIL(1, 1)).reply(400);
+    await act(async () => {
+      await modal.props.onPressConfirm();
+    });
+    expect(global.mockedPop).not.toHaveBeenCalled();
+    expect(Toast.show).toHaveBeenCalledWith({
+      position: 'bottom',
+      text1: 'CLIENT_ERROR',
+      text2: undefined,
+      type: 'error',
+      visibilityTime: 1000,
+    });
+  });
+
   it('test render DeviceInternalDetail onPress TabPanel config write', async () => {
     mock
       .onGet(API.DEV_MODE.ARDUINO.CONFIG_PINS(1, 1))

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

@@ -137,7 +137,7 @@ describe('Test DeviceModbusDetail', () => {
     await flushPromises();
 
     const modal = instance.findByType(ModalPopupCT);
-    mock.onDelete(API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(1, 1)).reply(200);
+    mock.onDelete(API.DEV_MODE.MODBUS.DEVICE_DETAIL(1, 1)).reply(200);
     await act(async () => {
       await modal.props.onPressConfirm();
     });

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

@@ -85,6 +85,25 @@ describe('Test Gateway screen', () => {
     expect(flatList.props.data).toEqual([{ id: 1, name: 'device 1' }]);
   });
 
+  it('render Gateway onLoadMore', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const flatList = instance.findByType(FlatList);
+    expect(flatList.props.data).toEqual([]);
+    mock
+      .onGet(API.DEV_MODE.GATEWAY.LIST())
+      .reply(200, { results: [{ id: 1, name: 'device 1' }] });
+    await act(async () => {
+      await flatList.props.onMomentumScrollBegin();
+    });
+    await act(async () => {
+      await flatList.props.onEndReached();
+    });
+    expect(flatList.props.data).toEqual([{ id: 1, name: 'device 1' }]);
+  });
+
   it('Test render empty', async () => {
     await act(async () => {
       tree = await create(wrapComponent());

package/src/screens/AllGateway/hooks/useGateway.js

@@ -146,26 +146,29 @@ export const useGateway = () => {
       isModbus,
       numberGoBack = 1
     ) => {
-      let success;
+      let response;
       if (isInternal) {
-        success = await axiosDelete(
+        response = await axiosDelete(
           API.DEV_MODE.ARDUINO.DEVICE_DETAIL(gatewayId, deviceId)
         );
-        success && setGatewayDevices((prev) => ({ ...prev, internal: [] }));
+        response.success &&
+          setGatewayDevices((prev) => ({ ...prev, internal: [] }));
       }
       if (isZigbee) {
-        success = await axiosDelete(
+        response = await axiosDelete(
           API.DEV_MODE.ZIGBEE.DEVICE_DETAIL(gatewayId, deviceId)
         );
-        success && setGatewayDevices((prev) => ({ ...prev, zigbee: [] }));
+        response.success &&
+          setGatewayDevices((prev) => ({ ...prev, zigbee: [] }));
       }
       if (isModbus) {
-        success = await axiosDelete(
+        response = await axiosDelete(
           API.DEV_MODE.MODBUS.DEVICE_DETAIL(gatewayId, deviceId)
         );
-        success && setGatewayDevices((prev) => ({ ...prev, modbus: [] }));
+        response.success &&
+          setGatewayDevices((prev) => ({ ...prev, modbus: [] }));
       }
-      if (success) {
+      if (response.success) {
         ToastBottomHelper.success(t('delete_successfully'));
         navigation.pop(numberGoBack);
       }
@@ -259,7 +262,11 @@ export const useGateway = () => {
         params: { secret },
       }
     );
-    success && setDetailChipQr(data);
+    if (success) {
+      setDetailChipQr(data);
+    } else {
+      ToastBottomHelper.error(t('chip_qr_not_found'));
+    }
   }, []);
 
   return {

package/src/screens/Automate/ScriptDetail/Styles/indexStyles.js

@@ -190,6 +190,7 @@ export default StyleSheet.create({
     width: '100%',
     backgroundColor: Colors.White,
     borderRadius: 5,
+    maxHeight: 500,
   },
   localControl: {
     flexDirection: 'row',

package/src/screens/Automate/ScriptDetail/index.js

@@ -5,7 +5,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Image, Platform, Switch, TouchableOpacity, View } from 'react-native';
+import {
+  Image,
+  Platform,
+  ScrollView,
+  Switch,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
@@ -550,46 +557,48 @@ const ScriptDetail = ({ route }) => {
         onBackdropPress={onCloseLocalControl}
       >
         <View key={'localControl'} style={styles.popoverStyle}>
-          <TouchableOpacity
-            style={styles.textDisable}
-            key={'listChip'}
-            onPress={() => {
-              onPressSelectChip(false, {
-                id: local_control.chip_id_local_control,
-                name: local_control.chip_local_control,
-              });
-            }}
-            accessibilityLabel={
-              AccessibilityLabel.AUTOMATE_DISABLE_LOCAL_CONTROL
-            }
-          >
-            <Text>{t('disable')}</Text>
-            {!local_control.is_local_control && (
-              <IconOutline style={styles.checked} name={'check'} size={20} />
-            )}
-          </TouchableOpacity>
-          {listChipShared.map((item, index) => (
+          <ScrollView>
             <TouchableOpacity
-              key={'listChip' + index} // Add key fix warning
-              style={styles.listChip}
+              style={styles.textDisable}
+              key={'listChip'}
               onPress={() => {
-                onPressSelectChip(true, item);
+                onPressSelectChip(false, {
+                  id: local_control.chip_id_local_control,
+                  name: local_control.chip_local_control,
+                });
               }}
               accessibilityLabel={
-                AccessibilityLabel.AUTOMATE_ENABLE_LOCAL_CONTROL
+                AccessibilityLabel.AUTOMATE_DISABLE_LOCAL_CONTROL
               }
             >
-              <Text>{item.name}</Text>
-              {local_control.chip_id_local_control === item.id &&
-                local_control.is_local_control && (
-                  <IconOutline
-                    style={styles.checked}
-                    name={'check'}
-                    size={20}
-                  />
-                )}
+              <Text>{t('disable')}</Text>
+              {!local_control.is_local_control && (
+                <IconOutline style={styles.checked} name={'check'} size={20} />
+              )}
             </TouchableOpacity>
-          ))}
+            {listChipShared.map((item, index) => (
+              <TouchableOpacity
+                key={'listChip' + index} // Add key fix warning
+                style={styles.listChip}
+                onPress={() => {
+                  onPressSelectChip(true, item);
+                }}
+                accessibilityLabel={
+                  AccessibilityLabel.AUTOMATE_ENABLE_LOCAL_CONTROL
+                }
+              >
+                <Text>{item.name}</Text>
+                {local_control.chip_id_local_control === item.id &&
+                  local_control.is_local_control && (
+                    <IconOutline
+                      style={styles.checked}
+                      name={'check'}
+                      size={20}
+                    />
+                  )}
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
         </View>
       </ModalCustom>
     </View>

package/src/utils/I18n/translations/en.js

@@ -1536,4 +1536,7 @@ export default {
     'Press and hold the number and drag to rearrange the order of the Sub-Units',
   rearrange_sub_unit: 'Rearrange Sub-Unit',
   updated_sub_unit_order: 'Updated Sub-Units order successfully!',
+  cannot_fetch_data_from_device:
+    'Cannot fetch data from device, Please try again',
+  chip_qr_not_found: 'Chip not found in the system',
 };

package/src/utils/I18n/translations/vi.js

@@ -1542,4 +1542,7 @@ export default {
     'Nhấn giữ vào số thứ tự và di chuyển để sắp xếp lại thứ tự các khu vực',
   rearrange_sub_unit: 'Sắp xếp lại các khu vực',
   updated_sub_unit_order: 'Đã cập nhật thứ tự các khu vực thành công!',
+  cannot_fetch_data_from_device:
+    'Không thể lấy dữ liệu từ thiết bị, Vui lòng thử lại',
+  chip_qr_not_found: 'Không tìm thấy chip trong hệ thống',
 };