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

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -8,15 +8,8 @@ import ConnectingDevice from './ConnectingDevice';
 
 const ConnectingWifiDevice = ({ route }) => {
   const t = useTranslations();
-  const {
-    unitId,
-    stationId,
-    stationName,
-    gateway,
-    selectedWifi,
-    qrData,
-    addDeviceType,
-  } = route?.params || {};
+  const { unitId, subUnit, gateway, selectedWifi, qrData, addDeviceType } =
+    route?.params || {};
   const [chipId, setChipId] = useState(null);
   const { goBack } = useNavigation();
 
@@ -33,32 +26,34 @@ const ConnectingWifiDevice = ({ route }) => {
   );
 
   const onReady = useCallback(
-    async (channelName) => {
-      const { success, problem, data } = await axiosPost(
-        API.UNIT.CHIP_SCAN(unitId),
-        {
-          imei: gateway?.imei,
-          secret: qrData?.secret,
-          name: gateway?.model,
-          station: stationId,
-          wifi_ssid: selectedWifi.ssid, // for storing
-          wifi_pass: selectedWifi.password, // for storing
-          channel_name: channelName,
+    (channelName) => {
+      const timeout = setTimeout(async () => {
+        const { success, problem, data } = await axiosPost(
+          API.UNIT.CHIP_SCAN(unitId),
+          {
+            imei: gateway?.imei,
+            secret: qrData?.secret,
+            name: gateway?.model,
+            station: subUnit?.id,
+            wifi_ssid: selectedWifi.ssid, // for storing
+            wifi_pass: selectedWifi.password, // for storing
+            channel_name: channelName,
+          }
+        );
+        if (!success) {
+          addingWifiDeviceFail(JSON.stringify(problem || data));
+          return;
         }
-      );
-
-      if (!success) {
-        addingWifiDeviceFail(JSON.stringify(problem || data));
-        return;
-      }
-      setChipId(data.id);
+        setChipId(data.id);
+        clearTimeout(timeout);
+      }, 2000);
     },
     [
       gateway,
       selectedWifi,
       unitId,
       qrData?.secret,
-      stationId,
+      subUnit,
       addingWifiDeviceFail,
     ]
   );
@@ -70,8 +65,7 @@ const ConnectingWifiDevice = ({ route }) => {
       initState={t('connecting_to_device')}
       onReady={onReady}
       unitId={unitId}
-      stationId={stationId}
-      stationName={stationName}
+      subUnit={subUnit}
       chipId={chipId}
       addDeviceType={addDeviceType}
     />

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -23,7 +23,7 @@ import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const ConnectingWifiGuide = ({ route }) => {
   const t = useTranslations();
-  const { qrData, unitId, stationId, addDeviceType } = route?.params || {};
+  const { qrData, unitId, subUnit, addDeviceType } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [wifiList, setWifiList] = useState([]);
   const [currentState, setCurrentState] = useState(0);
@@ -125,13 +125,13 @@ const ConnectingWifiGuide = ({ route }) => {
     if (wifiList.length) {
       navigate(Routes.ShareWifiPassword, {
         unitId,
-        stationId,
+        subUnit,
         wifiList,
         qrData: qrData,
         addDeviceType,
       });
     }
-  }, [addDeviceType, navigate, qrData, stationId, unitId, wifiList]);
+  }, [addDeviceType, navigate, qrData, subUnit, unitId, wifiList]);
 
   return (
     <SafeAreaView style={styles.container}>

package/src/screens/AddNewGateway/ConnectingZigbeeDevice.js

@@ -9,7 +9,7 @@ import ConnectingDevice from './ConnectingDevice';
 const ConnectingZigbeeDevice = ({ route }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
-  const { unitId, stationId, stationName, chipId } = route?.params || {};
+  const { unitId, subUnit, chipId } = route?.params || {};
   const [sensorId, setSensorId] = useState(null);
 
   const fail = useCallback(
@@ -30,7 +30,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
         API.CHIP.ZIGBEE.ACCEPT_NEW_DEVICE(chipId),
         {
           channel_name: channelName,
-          station: stationId,
+          station: subUnit?.id,
           unit: unitId,
         }
       );
@@ -41,7 +41,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
       }
       setSensorId(data.id);
     },
-    [chipId, fail, stationId, unitId]
+    [chipId, fail, subUnit, unitId]
   );
 
   return (
@@ -51,8 +51,7 @@ const ConnectingZigbeeDevice = ({ route }) => {
       initState={t('connecting_to_gateway')}
       onReady={onReady}
       unitId={unitId}
-      stationId={stationId}
-      stationName={stationName}
+      subUnit={subUnit}
       chipId={chipId}
       sensorId={sensorId}
     />

package/src/screens/AddNewGateway/PlugAndPlay/ConnectRouterGuide.js

@@ -34,14 +34,14 @@ const ConnectRouterGuide = ({ route }) => {
             {t('read_device_manual_guide')}
           </Text>
         </View>
-        <ViewButtonBottom
-          leftTitle={t('cancel')}
-          onLeftClick={goBack}
-          rightTitle={t('text_next')}
-          onRightClick={onRight}
-          styleButtonLeftText={styles.buttonLeftText}
-        />
       </View>
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={goBack}
+        rightTitle={t('text_next')}
+        onRightClick={onRight}
+        styleButtonLeftText={styles.buttonLeftText}
+      />
     </View>
   );
 };

package/src/screens/AddNewGateway/PlugAndPlay/__test__/ConnectRouterGuide.test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import renderer, { act, create } from 'react-test-renderer';
+
+import ConnectRouterGuide from '../ConnectRouterGuide';
+import { Text } from 'react-native';
+import { getTranslate } from '../../../../utils/I18n';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { ViewButtonBottom } from '../../../../commons';
+import Routes from '../../../../utils/Route';
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => ({}),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectRouterGuide route={route} />
+  </SCProvider>
+);
+
+describe('Test ConnectRouterGuide', () => {
+  let tree;
+
+  beforeEach(async () => {
+    mockedNavigate.mockClear();
+  });
+
+  it('create', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent({ params: {} }));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts).toHaveLength(8);
+    expect(texts[1].props.children).toEqual(
+      getTranslate('en', 'connect_to_router')
+    );
+    expect(texts[2].props.children).toEqual(
+      getTranslate('en', 'connect_router_content')
+    );
+  });
+
+  const rightClick = async (params) => {
+    await act(async () => {
+      tree = renderer.create(wrapComponent({ params }));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      viewButtonBottom.props.onRightClick();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  };
+
+  it('test click next', async () => {
+    await rightClick();
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectZigbeeGateway);
+  });
+});

package/src/screens/AddNewGateway/PlugAndPlay/__test__/ZigbeeDeviceConnectGuide.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import renderer, { act, create } from 'react-test-renderer';
+
+import ZigbeeDeviceConnectGuide from '../ZigbeeDeviceConnectGuide';
+import { Text } from 'react-native';
+import { getTranslate } from '../../../../utils/I18n';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { ViewButtonBottom } from '../../../../commons';
+import Routes from '../../../../utils/Route';
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => ({}),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ZigbeeDeviceConnectGuide route={route} />
+  </SCProvider>
+);
+
+describe('Test ZigbeeDeviceConnectGuide', () => {
+  let tree;
+
+  beforeEach(async () => {
+    mockedNavigate.mockClear();
+  });
+
+  it('create', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent({ params: {} }));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    expect(texts).toHaveLength(8);
+    expect(texts[1].props.children).toEqual(
+      getTranslate('en', 'turn_on_device_to_connect')
+    );
+    expect(texts[2].props.children).toEqual(
+      getTranslate('en', 'turn_on_zigbee_device_content')
+    );
+  });
+
+  const rightClick = async (params) => {
+    await act(async () => {
+      tree = renderer.create(wrapComponent({ params }));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      viewButtonBottom.props.onRightClick();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  };
+
+  it('test click next', async () => {
+    await rightClick();
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(
+      Routes.ConnectingZigbeeDevice
+    );
+  });
+});

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -21,7 +21,7 @@ const RenameNewDevices = memo(({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
 
-  const { unitId, stationId, stationName, chipId, sensorId, addDeviceType } =
+  const { unitId, subUnit, chipId, sensorId, addDeviceType } =
     route?.params || {};
 
   const [info, setInfo] = useState({});
@@ -33,10 +33,11 @@ const RenameNewDevices = memo(({ route }) => {
       params: {
         unitId: unitId,
         routeName: 'DashboardStack',
-        stationId: stationId,
+        stationId: subUnit?.id,
+        isSuccessfullyConnected: true,
       },
     });
-  }, [info, navigation, stationId, unitId]);
+  }, [info, navigation, subUnit, unitId]);
 
   useEffect(() => {
     (async () => {
@@ -54,20 +55,13 @@ const RenameNewDevices = memo(({ route }) => {
         setInfo(data);
       }
     })();
-  }, [chipId, sensorId, stationId]);
+  }, [chipId, sensorId, subUnit]);
 
   const updateItemName = (type, sensor_index, end_device_index) => (value) => {
     setInfo((currentInfo) => {
       if (type === 'chip') {
         return { ...currentInfo, name: value };
       }
-      if (type === 'sensor') {
-        currentInfo.sensors[sensor_index] = {
-          ...currentInfo.sensors[sensor_index],
-          name: value,
-        };
-        return { ...currentInfo };
-      }
       if (type === 'end_device') {
         currentInfo.sensors[sensor_index].end_devices[end_device_index] = {
           ...currentInfo.sensors[sensor_index].end_devices[end_device_index],
@@ -108,7 +102,7 @@ const RenameNewDevices = memo(({ route }) => {
           {t('successfully_connected')}
         </Text>
         <Text size={14} color={Colors.Gray9} style={styles.textStation}>
-          {stationName}
+          {subUnit?.name}
         </Text>
         <View style={{ ...styles.devicesWrapper, height: scrollviewHeight }}>
           <ScrollView>

package/src/screens/AddNewGateway/ScanModbusQR.js

@@ -14,7 +14,7 @@ import { Colors } from '../../configs';
 
 const ScanModbusQR = memo(({ route }) => {
   const t = useTranslations();
-  const { unitId, stationId, stationName } = route?.params || {};
+  const { unitId, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] = useBoolean();
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
@@ -37,14 +37,18 @@ const ScanModbusQR = memo(({ route }) => {
       }
       navigate(Routes.SelectModbusGateway, {
         unitId,
-        stationId,
-        stationName,
+        subUnit,
         qrData: data,
       });
     },
-    [navigate, unitId, stationId, stationName]
+    [navigate, unitId, subUnit]
   );
 
+  const handleCancel = useCallback(() => {
+    setHidePopupGuide();
+    goBack();
+  }, [goBack, setHidePopupGuide]);
+
   const onRetry = useCallback(() => {
     if (isInvalidQrCode) {
       setIsInvalidQrCode(false);
@@ -74,7 +78,7 @@ const ScanModbusQR = memo(({ route }) => {
           </View>
           <ViewButtonBottom
             leftTitle={t('cancel')}
-            onLeftClick={goBack}
+            onLeftClick={handleCancel}
             rightTitle={t('ok')}
             onRightClick={setHidePopupGuide}
           />

package/src/screens/AddNewGateway/ScanWifiDeviceQR.js

@@ -6,7 +6,7 @@ import { useNavigation } from '@react-navigation/native';
 import InvalidQRCode from '../ScanChipQR/components/InvalidQRCode';
 
 const ScanWifiDeviceQR = memo(({ route }) => {
-  const { unitId, stationId } = route?.params || {};
+  const { unitId, subUnit } = route?.params || {};
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
   const { navigate, goBack } = useNavigation();
 
@@ -27,12 +27,12 @@ const ScanWifiDeviceQR = memo(({ route }) => {
       }
       navigate(Routes.ConnectingWifiGuide, {
         unitId,
-        stationId,
+        subUnit,
         qrData: data,
       });
       setLoading(true);
     },
-    [navigate, unitId, stationId]
+    [navigate, unitId, subUnit]
   );
 
   const onRetry = useCallback(() => {

package/src/screens/AddNewGateway/SelectDeviceSubUnit.js

@@ -17,24 +17,21 @@ const SelectDeviceSubUnit = ({ route }) => {
           navigation.navigate(Routes.ScanWifiDeviceQR, {
             unitId,
             unitName,
-            stationId: subUnit?.id,
-            stationName: subUnit?.id,
+            subUnit,
           });
           break;
         case DEVICE_TYPE.MODBUS:
-          navigation.navigate(Routes.SelectModbusGateway, {
+          navigation.navigate(Routes.ScanModbusQR, {
             unitId,
             unitName,
-            stationId: subUnit?.id,
-            stationName: subUnit?.id,
+            subUnit,
           });
           break;
         case DEVICE_TYPE.ZIGBEE:
           navigation.navigate(Routes.ConnectRouterGuide, {
             unitId,
             unitName,
-            stationId: subUnit?.id,
-            stationName: subUnit?.id,
+            subUnit,
           });
           break;
       }

package/src/screens/AddNewGateway/SelectDeviceType.js

@@ -53,7 +53,7 @@ const SelectDeviceGrid = ({ options, onSelect }) => {
 
 const SelectDeviceType = ({ route }) => {
   const t = useTranslations();
-  const { unitId, unitName, stationId, stationName } = route?.params || {};
+  const { unitId, unitName, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [addType, setAddType] = useState();
   const [selectedAddType, setSelectedAddType] = useState();
@@ -73,12 +73,13 @@ const SelectDeviceType = ({ route }) => {
       {
         id: 2,
         image: <AddWifiDeviceIcon width={60} height={60} />,
-        route: stationId ? Routes.ScanWifiDeviceQR : Routes.SelectDeviceSubUnit,
+        route: subUnit?.id
+          ? Routes.ScanWifiDeviceQR
+          : Routes.SelectDeviceSubUnit,
         data: {
           unitId,
           unitName,
-          stationId,
-          stationName,
+          subUnit,
           deviceType: DEVICE_TYPE.WIFI_DEVICE,
         },
         title: t('wifi_device'),
@@ -87,12 +88,11 @@ const SelectDeviceType = ({ route }) => {
       {
         id: 3,
         image: <AddModbusDeviceIcon width={60} height={60} />,
-        route: stationId ? Routes.ScanModbusQR : Routes.SelectDeviceSubUnit,
+        route: subUnit?.id ? Routes.ScanModbusQR : Routes.SelectDeviceSubUnit,
         data: {
           unitId,
           unitName,
-          stationId,
-          stationName,
+          subUnit,
           deviceType: DEVICE_TYPE.MODBUS,
         },
         title: t('modbus'),
@@ -101,25 +101,24 @@ const SelectDeviceType = ({ route }) => {
       {
         id: 4,
         image: <AddZigbeeDeviceIcon width={60} height={60} />,
-        route: stationId
+        route: subUnit?.id
           ? Routes.ConnectRouterGuide
           : Routes.SelectDeviceSubUnit,
         data: {
           unitId,
           unitName,
-          stationId,
-          stationName,
+          subUnit,
           deviceType: DEVICE_TYPE.ZIGBEE,
         },
         title: t('zigbee'),
         subtitle: t('device_connect_remotely_to_the_gateway'),
       },
     ];
-    if (!!stationId) {
+    if (!!subUnit?.id) {
       list.shift();
     }
     return list;
-  }, [unitId, t, stationId, unitName, stationName]);
+  }, [t, unitId, unitName, subUnit]);
 
   const onRight = useCallback(() => {
     if (selectedAddType?.route && selectedAddType?.data) {
@@ -140,14 +139,14 @@ const SelectDeviceType = ({ route }) => {
       <HeaderCustom title={t('choose_type_of_device')} isShowSeparator />
       <View style={styles.contentContainer}>
         <SelectDeviceGrid options={listDeviceType} onSelect={handleOnSelect} />
-        <ViewButtonBottom
-          leftTitle={t('cancel')}
-          onLeftClick={goBack}
-          rightTitle={t('text_next')}
-          rightDisabled={!addType}
-          onRightClick={onRight}
-        />
       </View>
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={goBack}
+        rightTitle={t('text_next')}
+        rightDisabled={!addType}
+        onRightClick={onRight}
+      />
     </SafeAreaView>
   );
 };

package/src/screens/AddNewGateway/SelectModbusGateway.js

@@ -7,32 +7,29 @@ import Routes from '../../utils/Route';
 const SelectModbusGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, unitName, stationId, stationName, qrData } =
-    route?.params || {};
+  const { unitId, unitName, subUnit, qrData } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
       navigation.navigate(Routes.ConnectingModbusDevice, {
         unitId,
-        stationId,
-        stationName,
+        subUnit,
         chipId: gateway.id,
         qrData,
       });
     },
-    [navigation, unitId, stationId, stationName, qrData]
+    [navigation, unitId, subUnit, qrData]
   );
 
   const onPressOk = useCallback(
     (gateway) => {
       navigation.navigate(Routes.SelectDeviceType, {
-        stationName,
-        stationId,
         unitId,
         unitName,
+        subUnit,
       });
     },
-    [navigation, stationName, stationId, unitId, unitName]
+    [navigation, subUnit, unitId, unitName]
   );
 
   return (

package/src/screens/AddNewGateway/SelectZigbeeGateway.js

@@ -7,18 +7,17 @@ import Routes from '../../utils/Route';
 const SelectZigbeeGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, stationId, stationName } = route?.params || {};
+  const { unitId, subUnit } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
       navigation.navigate(Routes.ZigbeeDeviceConnectGuide, {
         unitId,
-        stationId,
-        stationName,
+        subUnit,
         chipId: gateway.id,
       });
     },
-    [navigation, unitId, stationId, stationName]
+    [navigation, unitId, subUnit]
   );
 
   return (

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import WifiManager from 'react-native-wifi-reborn';
 import { Alert, ScrollView, TouchableOpacity, View } from 'react-native';
 import dgram from 'react-native-udp';
@@ -42,7 +42,7 @@ const WifiItem = ({ item, setIsShowPopupPassword, setSelectedWifi }) => {
 };
 
 const ShareWifiPassword = ({ route }) => {
-  const { wifiList, unitId, stationId, qrData, addDeviceType } =
+  const { wifiList, unitId, subUnit, qrData, addDeviceType } =
     route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
@@ -79,9 +79,16 @@ const ShareWifiPassword = ({ route }) => {
     [selectedWifiPassword, selectedWifi]
   );
 
+  const isWrongPassword = useRef(true);
+
   const handleSocketOnMsg = useCallback(
     (currentSsid, msg) => {
       const data = JSON.parse(msg.toString());
+      if (isWrongPassword.current && data.status === 'error') {
+        Alert.alert('', t('wrong_wifi_password'));
+        isWrongPassword.current = false;
+        return;
+      }
       if (!Object.prototype.hasOwnProperty.call(data, 'gateway')) {
         return false;
       }
@@ -97,7 +104,7 @@ const ShareWifiPassword = ({ route }) => {
           clearInterval(checkWifiInterval);
           navigation.navigate(Routes.ConnectingWifiDevice, {
             unitId,
-            stationId: stationId,
+            subUnit,
             gateway: gatewayInfo,
             qrData: qrData,
             selectedWifi: {
@@ -117,12 +124,14 @@ const ShareWifiPassword = ({ route }) => {
       qrData,
       selectedWifi,
       selectedWifiPassword,
-      stationId,
+      subUnit,
+      t,
       unitId,
     ]
   );
 
   const onPasswordReady = useCallback(async () => {
+    isWrongPassword.current = true;
     const socket = dgram.createSocket({ type: 'udp4' });
     socket.bind(54321);
     let currentSsid;