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

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, stationId, stationName, chipId, sensorId, addDeviceType } =
+    route?.params || {};
 
   const [info, setInfo] = useState({});
 
@@ -36,12 +40,21 @@ const RenameNewDevices = memo(({ route }) => {
 
   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, stationId]);
 
   const updateItemName = (type, sensor_index, end_device_index) => (value) => {
     setInfo((currentInfo) => {
@@ -68,63 +81,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}>
+          {stationName}
+        </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, stationId, stationName } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [showPopupGuide, setShowPopupGuide, setHidePopupGuide] = useBoolean();
   const [isInvalidQrCode, setIsInvalidQrCode] = useState(false);
@@ -35,14 +35,14 @@ const ScanModbusQR = memo(({ route }) => {
         setLoading(false);
         return;
       }
-      navigate(Routes.ConnectingModbusDevice, {
+      navigate(Routes.SelectModbusGateway, {
         unitId,
-        stationId: stationId,
-        chipId,
+        stationId,
+        stationName,
         qrData: data,
       });
     },
-    [navigate, unitId, stationId, chipId]
+    [navigate, unitId, stationId, stationName]
   );
 
   const onRetry = useCallback(() => {

package/src/screens/AddNewGateway/SelectDeviceSubUnit.js

@@ -18,6 +18,7 @@ const SelectDeviceSubUnit = ({ route }) => {
             unitId,
             unitName,
             stationId: subUnit?.id,
+            stationName: subUnit?.id,
           });
           break;
         case DEVICE_TYPE.MODBUS:
@@ -25,6 +26,7 @@ const SelectDeviceSubUnit = ({ route }) => {
             unitId,
             unitName,
             stationId: subUnit?.id,
+            stationName: subUnit?.id,
           });
           break;
         case DEVICE_TYPE.ZIGBEE:
@@ -32,6 +34,7 @@ const SelectDeviceSubUnit = ({ route }) => {
             unitId,
             unitName,
             stationId: subUnit?.id,
+            stationName: subUnit?.id,
           });
           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, stationId, stationName } = route?.params || {};
   const { navigate, goBack } = useNavigation();
   const [addType, setAddType] = useState();
   const [selectedAddType, setSelectedAddType] = useState();
@@ -78,6 +78,7 @@ const SelectDeviceType = ({ route }) => {
           unitId,
           unitName,
           stationId,
+          stationName,
           deviceType: DEVICE_TYPE.WIFI_DEVICE,
         },
         title: t('wifi_device'),
@@ -86,13 +87,12 @@ const SelectDeviceType = ({ route }) => {
       {
         id: 3,
         image: <AddModbusDeviceIcon width={60} height={60} />,
-        route: stationId
-          ? Routes.SelectModbusGateway
-          : Routes.SelectDeviceSubUnit,
+        route: stationId ? Routes.ScanModbusQR : Routes.SelectDeviceSubUnit,
         data: {
           unitId,
           unitName,
           stationId,
+          stationName,
           deviceType: DEVICE_TYPE.MODBUS,
         },
         title: t('modbus'),
@@ -108,6 +108,7 @@ const SelectDeviceType = ({ route }) => {
           unitId,
           unitName,
           stationId,
+          stationName,
           deviceType: DEVICE_TYPE.ZIGBEE,
         },
         title: t('zigbee'),
@@ -118,7 +119,7 @@ const SelectDeviceType = ({ route }) => {
       list.shift();
     }
     return list;
-  }, [unitId, t, unitName, stationId]);
+  }, [unitId, t, stationId, unitName, stationName]);
 
   const onRight = useCallback(() => {
     if (selectedAddType?.route && selectedAddType?.data) {
@@ -140,7 +141,7 @@ const SelectDeviceType = ({ route }) => {
       <View style={styles.contentContainer}>
         <SelectDeviceGrid options={listDeviceType} onSelect={handleOnSelect} />
         <ViewButtonBottom
-          leftTitle={t('previous')}
+          leftTitle={t('cancel')}
           onLeftClick={goBack}
           rightTitle={t('text_next')}
           rightDisabled={!addType}

package/src/screens/AddNewGateway/SelectModbusGateway.js

@@ -7,22 +7,38 @@ import Routes from '../../utils/Route';
 const SelectModbusGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, stationId } = route?.params || {};
+  const { unitId, unitName, stationId, stationName, qrData } =
+    route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
-      navigation.navigate(Routes.ScanModbusQR, {
+      navigation.navigate(Routes.ConnectingModbusDevice, {
         unitId,
         stationId,
+        stationName,
         chipId: gateway.id,
+        qrData,
       });
     },
-    [navigation, unitId, stationId]
+    [navigation, unitId, stationId, stationName, qrData]
+  );
+
+  const onPressOk = useCallback(
+    (gateway) => {
+      navigation.navigate(Routes.SelectDeviceType, {
+        stationName,
+        stationId,
+        unitId,
+        unitName,
+      });
+    },
+    [navigation, stationName, stationId, 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,18 @@ import Routes from '../../utils/Route';
 const SelectZigbeeGateway = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { unitId, stationId } = route?.params || {};
+  const { unitId, stationId, stationName } = route?.params || {};
 
   const onPressNext = useCallback(
     (gateway) => {
       navigation.navigate(Routes.ZigbeeDeviceConnectGuide, {
         unitId,
         stationId,
+        stationName,
         chipId: gateway.id,
       });
     },
-    [navigation, unitId, stationId]
+    [navigation, unitId, stationId, stationName]
   );
 
   return (

package/src/screens/AddNewGateway/ShareWifiPassword.js

@@ -42,7 +42,8 @@ const WifiItem = ({ item, setIsShowPopupPassword, setSelectedWifi }) => {
 };
 
 const ShareWifiPassword = ({ route }) => {
-  const { wifiList, unitId, stationId, qrData } = route?.params || {};
+  const { wifiList, unitId, stationId, qrData, addDeviceType } =
+    route?.params || {};
   const t = useTranslations();
   const navigation = useNavigation();
 
@@ -103,13 +104,22 @@ const ShareWifiPassword = ({ route }) => {
               ssid: selectedWifi,
               password: selectedWifiPassword,
             },
+            addDeviceType,
           });
         }
       }, 1000);
 
       return true;
     },
-    [navigation, qrData, selectedWifi, selectedWifiPassword, stationId, unitId]
+    [
+      addDeviceType,
+      navigation,
+      qrData,
+      selectedWifi,
+      selectedWifiPassword,
+      stationId,
+      unitId,
+    ]
   );
 
   const onPasswordReady = useCallback(async () => {

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

@@ -48,6 +48,7 @@ describe('Test connecting modbus device', () => {
       params: {
         unitId: 1,
         stationId: 2,
+        stationName: 'station',
         chipId: 3,
         qrData: {},
       },
@@ -64,6 +65,9 @@ describe('Test connecting modbus device', () => {
   });
 
   it('receive sensor-id from channel then rename sensor-id', async () => {
+    mock.onPost().reply(200, {
+      id: 1,
+    });
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -74,15 +78,14 @@ describe('Test connecting modbus device', () => {
         channel = channels[key];
       }
     }
-    await act(async () => {
-      await channel.trigger('progress', { data: { sensorId: 1 } });
-    });
     await act(async () => {
       await channel.trigger('progress', { success: 1 });
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.RenameNewDevices, {
+      addDeviceType: undefined,
       unitId: 1,
       stationId: 2,
+      stationName: 'station',
       chipId: 3,
       sensorId: 1,
     });

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

@@ -59,6 +59,15 @@ describe('Test rename new devices', () => {
   });
 
   it('rendering base', async () => {
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+        addDeviceType: 'gateway',
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -81,7 +90,7 @@ describe('Test rename new devices', () => {
     expect(mock.history.get).toHaveLength(1);
   });
 
-  it('rendering sensor', async () => {
+  it('rendering end devices', async () => {
     mock.onGet().reply(200, {
       id: 1,
       name: 'chip',
@@ -104,14 +113,6 @@ describe('Test rename new devices', () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
-    expect(
-      instance.findAll(
-        (el) =>
-          el.props.accessibilityLabel?.indexOf(
-            `${AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE}-sensor`
-          ) === 0 && el.type === _TextInput
-      )
-    ).toHaveLength(1);
     expect(
       instance.findAll(
         (el) =>
@@ -126,6 +127,15 @@ describe('Test rename new devices', () => {
     mock.onGet().reply(200, {
       can_rename: true,
     });
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+        addDeviceType: 'gateway',
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
@@ -154,6 +164,15 @@ describe('Test rename new devices', () => {
       id: 1,
       can_rename: true,
     });
+    route = {
+      params: {
+        unitId: 1,
+        stationId: 2,
+        chipId: 3,
+        qrData: {},
+        addDeviceType: 'gateway',
+      },
+    };
     await act(async () => {
       tree = await create(wrapComponent(route));
     });

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

@@ -66,8 +66,6 @@ describe('test scan modbus QR', () => {
   it('on scan correct QR code', async () => {
     await scanQRCode({ imei: 'SENSOR-xxx' }, jest.fn());
     expect(mockedNavigate).toHaveBeenCalled();
-    expect(mockedNavigate.mock.calls[0][0]).toEqual(
-      Routes.ConnectingModbusDevice
-    );
+    expect(mockedNavigate.mock.calls[0][0]).toEqual(Routes.SelectModbusGateway);
   });
 });

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

@@ -68,7 +68,7 @@ describe('Test select modbus gateway', () => {
       selectGateway.props.onPressNext({ id: 3 });
     });
 
-    expect(mockedNavigate).toBeCalledWith(Routes.ScanModbusQR, {
+    expect(mockedNavigate).toBeCalledWith(Routes.ConnectingModbusDevice, {
       unitId: 1,
       stationId: 2,
       chipId: 3,

package/src/screens/Device/detail.js

@@ -220,6 +220,15 @@ const DeviceDetail = ({ route }) => {
     }
   }, [fetchSensorDetail, sensorId, sensorData]);
 
+  const fetchRemoteControlOptions = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id),
+      {},
+      true
+    );
+    success && setControlOptions(data);
+  }, [sensor]);
+
   const fetchDataDeviceDetail = useCallback(async () => {
     if (!token) {
       return;
@@ -259,16 +268,11 @@ const DeviceDetail = ({ route }) => {
     }
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
-    const controlResult = await axiosGet(
-      API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id),
-      {},
-      true
-    );
-
-    if (controlResult.success) {
-      setControlOptions(controlResult.data);
-    }
-  }, [token, sensor, setDeviceId, setLastEvent]);
+    success &&
+      data.items.length &&
+      data.items.some((item) => item.type === 'action') &&
+      (await fetchRemoteControlOptions());
+  }, [token, sensor, setDeviceId, fetchRemoteControlOptions]);
 
   const {
     deviceId: emergencyDeviceId,