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

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -1,11 +1,12 @@
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import AddDeviceIcon from '../../../assets/images/Popover/Dashboard/AddDevice.svg';
+import GatewayIcon from '../../../assets/images/AddNewDevice/gateway-icon.svg';
 import _TextInput from '../../commons/Form/TextInput';
 import { useNavigation } from '@react-navigation/native';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
@@ -13,12 +14,15 @@ import Routes from '../../utils/Route';
 import styles from './RenameNewDevicesStyles';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import API from '../../configs/API';
+import { HeaderCustom } from '../../commons/Header';
+import { useMemo } from 'react';
 
 const RenameNewDevices = memo(({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
 
-  const { unitId, stationId, chipId, sensorId } = route?.params || {};
+  const { unitId, subUnit, chipId, sensorId, addDeviceType } =
+    route?.params || {};
 
   const [info, setInfo] = useState({});
 
@@ -29,32 +33,35 @@ 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 () => {
-      const { success, data } = await axiosGet(API.CHIP.RENAME_DEVICES(chipId));
+      let params = new URLSearchParams();
+      if (sensorId) {
+        params.append('sensor', sensorId);
+      }
+      const { success, data } = await axiosGet(
+        API.CHIP.RENAME_DEVICES(chipId),
+        {
+          params,
+        }
+      );
       if (success) {
         setInfo(data);
       }
     })();
-  }, [chipId, sensorId]);
+  }, [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],
@@ -68,63 +75,85 @@ const RenameNewDevices = memo(({ route }) => {
     });
   };
 
+  const scrollviewHeight = useMemo(() => {
+    const baseHeight = 40;
+    let contentItems = 1;
+
+    if (addDeviceType !== 'gateway') {
+      info?.sensors?.map(
+        (sensor) => (contentItems += sensor?.end_devices?.length)
+      );
+    }
+    return baseHeight + contentItems * 43;
+  }, [addDeviceType, info.sensors]);
+
   const renameLabel = AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE;
 
   return (
     <View style={styles.container}>
+      <HeaderCustom
+        title={t('connect_device')}
+        isShowSeparator
+        isCanBack={false}
+      />
       <View style={styles.content}>
         <IconOutline name="check-circle" size={28} color={Colors.Green6} />
         <Text semibold color={Colors.Black} size={20} style={styles.textStatus}>
           {t('successfully_connected')}
         </Text>
-        {info.can_rename ? (
-          <_TextInput
-            accessibilityLabel={`${renameLabel}-chip`}
-            value={info.name}
-            textInputStyle={styles.textItem}
-            onChange={updateItemName('chip')}
-          />
-        ) : (
-          <Text
-            size={14}
-            color={Colors.Gray9}
-            style={styles.textStation}
-            accessibilityLabel={`${renameLabel}-chip-name`}
-          >
-            {info.name}
-          </Text>
-        )}
-        {info.sensors?.length &&
-          info.sensors.map((sensor, sensor_index) => (
-            <>
-              <View style={styles.device} key={`${sensor.id}`}>
-                <AddDeviceIcon width={43} height={43} />
-                <_TextInput
-                  accessibilityLabel={`${renameLabel}-sensor-${sensor.id}`}
-                  value={sensor.name}
-                  textInputStyle={styles.textItem}
-                  onChange={updateItemName('sensor', sensor_index)}
-                />
+        <Text size={14} color={Colors.Gray9} style={styles.textStation}>
+          {subUnit?.name}
+        </Text>
+        <View style={{ ...styles.devicesWrapper, height: scrollviewHeight }}>
+          <ScrollView>
+            {addDeviceType === 'gateway' ? (
+              <View style={styles.boxDevice}>
+                <GatewayIcon width={43} height={43} />
+                {info.can_rename ? (
+                  <_TextInput
+                    accessibilityLabel={`${renameLabel}-chip`}
+                    value={info.name}
+                    textInputStyle={styles.textItem}
+                    onChange={updateItemName('chip')}
+                  />
+                ) : (
+                  <Text
+                    size={14}
+                    color={Colors.Gray9}
+                    style={styles.textStation}
+                    accessibilityLabel={`${renameLabel}-chip-name`}
+                  >
+                    {info.name}
+                  </Text>
+                )}
               </View>
-              {(sensor?.end_devices || []).map(
-                (end_device, end_device_index) => (
-                  <View style={styles.device} key={`${end_device?.id}`}>
-                    <AddDeviceIcon width={43} height={43} />
-                    <_TextInput
-                      accessibilityLabel={`${renameLabel}-end_device-${end_device?.id}`}
-                      value={end_device?.name}
-                      textInputStyle={styles.textItem}
-                      onChange={updateItemName(
-                        'end_device',
-                        sensor_index,
-                        end_device_index
-                      )}
-                    />
-                  </View>
+            ) : (
+              !!info?.sensors?.length &&
+              info.sensors.map((sensor, sensor_index) =>
+                (sensor?.end_devices || []).map(
+                  (end_device, end_device_index) => (
+                    <View style={styles.boxDevice} key={`${end_device?.id}`}>
+                      <AddDeviceIcon width={43} height={43} />
+                      <_TextInput
+                        accessibilityLabel={`${renameLabel}-end_device-${end_device?.id}`}
+                        value={end_device?.name}
+                        textInputStyle={styles.textItem}
+                        onChange={updateItemName(
+                          'end_device',
+                          sensor_index,
+                          end_device_index
+                        )}
+                      />
+                    </View>
+                  )
                 )
-              )}
-            </>
-          ))}
+              )
+            )}
+          </ScrollView>
+        </View>
+        <Text size={16} color={Colors.Gray8} style={styles.textRename}>
+          {t('click_on_box_to_rename_device')}
+        </Text>
       </View>
       <TouchableOpacity
         style={styles.btnDone}

package/src/screens/AddNewGateway/RenameNewDevicesStyles.js

@@ -4,12 +4,14 @@ import { Colors } from '../../configs';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.Gray19,
-    justifyContent: 'center',
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
     alignItems: 'center',
   },
   boxDevice: {
-    padding: 16,
+    width: 250,
+    flexDirection: 'row',
+    paddingLeft: 16,
     borderWidth: 1,
     borderRadius: 10,
     borderColor: Colors.Gray4,
@@ -23,16 +25,25 @@ const styles = StyleSheet.create({
     shadowOpacity: 1,
     shadowRadius: 12,
     elevation: 2,
+    marginBottom: 16,
   },
   device: {
     flexDirection: 'row',
     alignItems: 'center',
   },
+  textItem: {
+    borderWidth: 0,
+    textAlign: 'center',
+    marginTop: -20,
+    fontSize: 16,
+    lineHeight: 24,
+    maxWidth: 170,
+  },
   content: {
     flex: 1,
-    backgroundColor: Colors.Gray19,
     justifyContent: 'center',
     alignItems: 'center',
+    marginBottom: 24,
   },
   btnDone: {
     height: 48,
@@ -57,19 +68,12 @@ const styles = StyleSheet.create({
   textInput: {
     marginTop: 0,
   },
-  roomName: {
-    borderWidth: 0,
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.Primary,
-    paddingLeft: 0,
-    fontSize: 16,
-    lineHeight: 24,
-    margin: 0,
-    padding: 0,
-  },
   wrapRename: {
     marginHorizontal: 16,
   },
+  devicesWrapper: {
+    paddingHorizontal: 16,
+  },
 });
 
 export default styles;

package/src/screens/AddNewGateway/ScanGatewayQR.js

@@ -13,7 +13,7 @@ const ScanGatewayQR = memo(({ route }) => {
   const { navigate, goBack } = useNavigation();
 
   const onScan = useCallback(
-    (body, setLoading) => {
+    async (body, setLoading) => {
       let data;
       try {
         data = JSON.parse(body);
@@ -31,6 +31,7 @@ const ScanGatewayQR = memo(({ route }) => {
         unitId,
         stationId,
         qrData: data,
+        addDeviceType: 'gateway',
       });
       setLoading(true);
     },

package/src/screens/AddNewGateway/ScanModbusQR.js

@@ -14,7 +14,7 @@ import { Colors } from '../../configs';
 
 const ScanModbusQR = memo(({ route }) => {
   const t = useTranslations();
-  const { unitId, stationId, chipId } = route?.params || {};
+  const { unitId, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] = useBoolean();
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
@@ -35,16 +35,20 @@ const ScanModbusQR = memo(({ route }) => {
         setLoading(false);
         return;
       }
-      navigate(Routes.ConnectingModbusDevice, {
+      navigate(Routes.SelectModbusGateway, {
         unitId,
-        stationId: stationId,
-        chipId,
+        subUnit,
         qrData: data,
       });
     },
-    [navigate, unitId, stationId, chipId]
+    [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,21 +17,21 @@ const SelectDeviceSubUnit = ({ route }) => {
           navigation.navigate(Routes.ScanWifiDeviceQR, {
             unitId,
             unitName,
-            stationId: subUnit?.id,
+            subUnit,
           });
           break;
         case DEVICE_TYPE.MODBUS:
-          navigation.navigate(Routes.SelectModbusGateway, {
+          navigation.navigate(Routes.ScanModbusQR, {
             unitId,
             unitName,
-            stationId: subUnit?.id,
+            subUnit,
           });
           break;
         case DEVICE_TYPE.ZIGBEE:
           navigation.navigate(Routes.ConnectRouterGuide, {
             unitId,
             unitName,
-            stationId: 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 } = route?.params || {};
+  const { unitId, unitName, subUnit } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [addType, setAddType] = useState();
   const [selectedAddType, setSelectedAddType] = useState();
@@ -73,11 +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,
+          subUnit,
           deviceType: DEVICE_TYPE.WIFI_DEVICE,
         },
         title: t('wifi_device'),
@@ -86,13 +88,11 @@ const SelectDeviceType = ({ route }) => {
       {
         id: 3,
         image: <AddModbusDeviceIcon width={60} height={60} />,
-        route: stationId
-          ? Routes.SelectModbusGateway
-          : Routes.SelectDeviceSubUnit,
+        route: subUnit?.id ? Routes.ScanModbusQR : Routes.SelectDeviceSubUnit,
         data: {
           unitId,
           unitName,
-          stationId,
+          subUnit,
           deviceType: DEVICE_TYPE.MODBUS,
         },
         title: t('modbus'),
@@ -101,24 +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,
+          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, unitName, stationId]);
+  }, [t, unitId, unitName, subUnit]);
 
   const onRight = useCallback(() => {
     if (selectedAddType?.route && selectedAddType?.data) {
@@ -139,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('previous')}
-          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,22 +7,35 @@ import Routes from '../../utils/Route';
 const SelectModbusGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, stationId } = route?.params || {};
+  const { unitId, unitName, subUnit, qrData } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
-      navigation.navigate(Routes.ScanModbusQR, {
+      navigation.navigate(Routes.ConnectingModbusDevice, {
         unitId,
-        stationId,
+        subUnit,
         chipId: gateway.id,
+        qrData,
       });
     },
-    [navigation, unitId, stationId]
+    [navigation, unitId, subUnit, qrData]
+  );
+
+  const onPressOk = useCallback(
+    (gateway) => {
+      navigation.navigate(Routes.SelectDeviceType, {
+        unitId,
+        unitName,
+        subUnit,
+      });
+    },
+    [navigation, subUnit, unitId, unitName]
   );
 
   return (
     <SelectGateway
       onPressNext={onPressNext}
+      onPressOk={onPressOk}
       title={t('text_select_a_gateway')}
       subTitle={t('text_select_a_gateway')}
       unitId={unitId}

package/src/screens/AddNewGateway/SelectZigbeeGateway.js

@@ -7,17 +7,17 @@ import Routes from '../../utils/Route';
 const SelectZigbeeGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, stationId } = route?.params || {};
+  const { unitId, subUnit } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
       navigation.navigate(Routes.ZigbeeDeviceConnectGuide, {
         unitId,
-        stationId,
+        subUnit,
         chipId: gateway.id,
       });
     },
-    [navigation, unitId, stationId]
+    [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,8 @@ const WifiItem = ({ item, setIsShowPopupPassword, setSelectedWifi }) => {
 };
 
 const ShareWifiPassword = ({ route }) => {
-  const { wifiList, unitId, stationId, qrData } = route?.params || {};
+  const { wifiList, unitId, subUnit, qrData, addDeviceType } =
+    route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
 
@@ -78,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;
       }
@@ -96,23 +104,34 @@ const ShareWifiPassword = ({ route }) => {
           clearInterval(checkWifiInterval);
           navigation.navigate(Routes.ConnectingWifiDevice, {
             unitId,
-            stationId: stationId,
+            subUnit,
             gateway: gatewayInfo,
             qrData: qrData,
             selectedWifi: {
               ssid: selectedWifi,
               password: selectedWifiPassword,
             },
+            addDeviceType,
           });
         }
       }, 1000);
 
       return true;
     },
-    [navigation, qrData, selectedWifi, selectedWifiPassword, stationId, unitId]
+    [
+      addDeviceType,
+      navigation,
+      qrData,
+      selectedWifi,
+      selectedWifiPassword,
+      subUnit,
+      t,
+      unitId,
+    ]
   );
 
   const onPasswordReady = useCallback(async () => {
+    isWrongPassword.current = true;
     const socket = dgram.createSocket({ type: 'udp4' });
     socket.bind(54321);
     let currentSsid;

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

@@ -41,10 +41,13 @@ describe('Test connecting wifi device', () => {
   });
 
   beforeEach(() => {
+    jest.useFakeTimers();
     route = {
       params: {
         unitId: 1,
-        stationId: 2,
+        subUnit: {
+          id: 2,
+        },
         gateway: {},
         qrData: {},
         selectedWifi: {},
@@ -58,6 +61,7 @@ describe('Test connecting wifi device', () => {
     });
     const instance = tree.root;
     expect(instance.findAllByType(Processing)).toHaveLength(1);
+    jest.runAllTimers();
     expect(mock.history.post).toHaveLength(1);
   });
 });

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

@@ -177,7 +177,9 @@ describe('test share wifi password', () => {
       params: {
         qrData: { org_slug: 'eoh', prefix: 'robot' },
         unitId: 1,
-        stationId: 1,
+        subUnit: {
+          id: 1,
+        },
       },
     };
     await act(async () => {
@@ -201,7 +203,9 @@ describe('test share wifi password', () => {
 
     expect(mockedNavigate).toBeCalledWith('ShareWifiPassword', {
       unitId: 1,
-      stationId: 1,
+      subUnit: {
+        id: 1,
+      },
       wifiList: [{ ssid: 'wifi 1' }, { ssid: 'wifi.2' }],
       qrData: { org_slug: 'eoh', prefix: 'robot' },
     });