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

package/index.js

@@ -19,8 +19,9 @@ import MyUnit from './src/commons/Dashboard/MyUnit';
 import SharedUnit from './src/commons/Unit/SharedUnit';
 import { Action } from './src/context/actionType';
 import { withRemoteControl } from './src/hoc';
-import DevModeStack from './src/navigations/Main';
+// import DevModeStack from './src/navigations/Main';
 import { SmartAccountStack } from './src/navigations/SmartAccountStack';
+import { AllGatewayStack } from './src/navigations/AllGatewayStack';
 
 export {
   AddSubUnitStack,
@@ -46,6 +47,7 @@ export {
   SCWrapper,
   Action,
   withRemoteControl,
-  DevModeStack,
+  // DevModeStack,
   SmartAccountStack,
+  AllGatewayStack,
 };

package/package.json

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

package/src/commons/Action/ItemQuickAction.js

@@ -14,6 +14,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
   const [isOn, setIsOn] = useState(false);
 
   const sendRemoteCommand = useRemoteControl();
+  const [processing, setProcessing] = useState(false);
 
   useEffect(() => {
     if (!(sensor.quick_action?.config_id in configValues)) {
@@ -38,7 +39,11 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
   }, [isOn, setStatus, sensor.quick_action]);
 
   const userId = useSCContextSelector((state) => state?.auth.account.user.id);
-  const onActionPress = useCallback(() => {
+  const onActionPress = useCallback(async () => {
+    if (processing) {
+      return;
+    }
+    setProcessing(true);
     let data = null;
     if (
       action?.allow_config_store_value_id === sensor?.quick_action?.config_id
@@ -56,7 +61,7 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
       }
       data = JSON.stringify(data);
     }
-    sendRemoteCommand(sensor, action, data, userId);
+    await sendRemoteCommand(sensor, action, data, userId);
     setIsSendingCommand(true);
 
     if (!sensor.quick_action.will_auto_update_status) {
@@ -64,7 +69,8 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
         setIsOn(action.id === sensor.quick_action.on_action.id);
       }, sensor.quick_action.interval);
     }
-  }, [sensor, action, userId, sendRemoteCommand]);
+    setProcessing(false);
+  }, [processing, action, sensor, sendRemoteCommand, userId]);
 
   if (!action) {
     return <View />;

package/src/commons/Device/PMSensor/PMSensorIndicatior.js

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
+import { roundNumber } from '../../../utils/Utils';
 
 //using for PM2.5-10, CO, UV, Rainflow Sensor
 const keyExtractor = (item) => item.id.toString();
@@ -11,7 +12,7 @@ const PMSensorIndicatior = memo(({ data = [], style }) => {
     ({ item }) => {
       const getValue = ['', null, undefined, NaN].includes(item?.value)
         ? '--'
-        : item?.value;
+        : roundNumber(item?.value);
       return (
         <QualityIndicatorItem
           key={item.id.toString()}

package/src/commons/Header/HeaderCustom.js

@@ -28,6 +28,7 @@ const HeaderCustom = ({
   isCanBack = true,
   customTitle = false,
   buttonBackStyles,
+  headerStyles,
 }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
@@ -46,7 +47,9 @@ const HeaderCustom = ({
   }, []);
 
   return (
-    <View style={[styles.wrap, isShowSeparator && styles.separator]}>
+    <View
+      style={[styles.wrap, isShowSeparator && styles.separator, headerStyles]}
+    >
       {isCanBack && (
         <TouchableOpacity
           style={[styles.buttonBack, buttonBackStyles]}

package/src/hooks/IoT/__test__/useRemoteControl.test.js

@@ -9,6 +9,7 @@ import { sendCommandOverHomeAssistant } from '../../../iot/RemoteControl/HomeAss
 import { sendCommandOverInternet } from '../../../iot/RemoteControl/Internet';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
 jest.mock('../../../iot/RemoteControl/Bluetooth');
 jest.mock('../../../iot/RemoteControl/HomeAssistant');
@@ -112,6 +113,47 @@ describe('Test useRemoteControl', () => {
     expect(sendCommandOverHomeAssistant).not.toBeCalled();
   });
 
+  const testCommandViaBluetooth = async (
+    command_prefer_over_bluetooth,
+    command_prefer_over_internet
+  ) => {
+    action.command_prefer_over_bluetooth = command_prefer_over_bluetooth;
+    action.command_prefer_over_internet = command_prefer_over_internet;
+    action.is_only_bluetooth = true;
+    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+
+    const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
+      wrapper,
+    });
+
+    sendCommandOverBluetooth.mockImplementation(() => {
+      throw SEND_COMMAND_OVER_BLUETOOTH_FAIL;
+    });
+    sendCommandOverInternet.mockImplementation(async () => true);
+    await act(async () => {
+      await sendRemoteCommand.current(sensor, action, data, userId);
+    });
+    expect(sendCommandOverBluetooth).toBeCalledWith(
+      sensor,
+      action,
+      data,
+      userId
+    );
+    expect(sendCommandOverInternet).not.toBeCalled();
+    expect(sendCommandOverHomeAssistant).not.toBeCalled();
+    expect(spyToastError).toBeCalled();
+  };
+
+  // eslint-disable-next-line max-len
+  it('test send remote command via bluetooth failed then not send via internet, action is only bluetooth, not prefer internet', async () => {
+    testCommandViaBluetooth(true, false);
+  });
+
+  // eslint-disable-next-line max-len
+  it('test send remote command via bluetooth failed then not send via internet, action is only bluetooth, prefer internet', async () => {
+    testCommandViaBluetooth(false, true);
+  });
+
   it('test send remote command via bluetooth failed throw unhandled error', async () => {
     const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
       wrapper,

package/src/hooks/IoT/useRemoteControl.js

@@ -8,6 +8,7 @@ import {
 } from '../../iot/RemoteControl/Bluetooth';
 import { ToastBottomHelper } from '../../utils/Utils';
 import { t } from 'i18n-js';
+import NetInfo from '@react-native-community/netinfo';
 
 const useRemoteControl = () => {
   const homeAssistantConnections = useSCContextSelector(
@@ -29,20 +30,38 @@ const useRemoteControl = () => {
         try {
           return await sendCommandOverBluetooth(device, action, data, userId);
         } catch (err) {
-          if (err === SEND_COMMAND_OVER_BLUETOOTH_FAIL) {
-            result = await sendCommandOverInternet(
-              device,
-              action,
-              data,
-              'bluetooth'
-            );
-            return result;
+          const netState = await NetInfo.fetch();
+          if (netState.isConnected) {
+            result = false;
+
+            if (err === SEND_COMMAND_OVER_BLUETOOTH_FAIL) {
+              // Checking only bluetooth: not force internet
+              if (!action.is_only_bluetooth) {
+                result = await sendCommandOverInternet(
+                  device,
+                  action,
+                  data,
+                  'bluetooth'
+                );
+              }
+              return result;
+            } else {
+              throw err;
+            }
           } else {
-            throw err;
+            return false;
           }
         }
       }
 
+      // Checking only bluetooth: not other options
+      if (action.is_only_bluetooth) {
+        ToastBottomHelper.error(
+          t('this_command_is_just_support_bluetooth_only')
+        );
+        return result;
+      }
+
       if (action.command_prefer_over_internet) {
         return await sendCommandOverInternet(
           device,

package/src/iot/RemoteControl/Bluetooth.js

@@ -140,7 +140,7 @@ export const sendDataOverBluetooth = async (
   let connectedDevice = null;
   let fullDataDevice = null;
   let result = true;
-  const responseTime = 2000;
+
   try {
     connectedDevice = await device.connect();
     fullDataDevice =
@@ -148,15 +148,15 @@ export const sendDataOverBluetooth = async (
     await fullDataDevice.monitorCharacteristicForService(
       BLE.BLE_REMOTE_SERVICE_UUID,
       BLE.BLE_REMOTE_CHARACTERISTIC_UUID_TX,
-      (error, characteristic) => {
+      async (error, characteristic) => {
         const notify = error ? '' : base64.decode(characteristic.value);
         if (notify === BLE.BLE_RESPONSE_OK) {
           ToastBottomHelper.success(
             t('control_device_via_bluetooth_successfully')
           );
           if (!keepConnect) {
-            bleManager.cancelTransaction(BLE.BLE_LISTER_RESPONSE_CONTROL);
-            device.cancelConnection();
+            await bleManager.cancelTransaction(BLE.BLE_LISTER_RESPONSE_CONTROL);
+            await bleManager.cancelDeviceConnection(device.id);
           }
         } else if (notify === BLE.BLE_RESPONSE_FAILED) {
           ToastBottomHelper.error(t('control_device_via_bluetooth_failed'));
@@ -179,10 +179,6 @@ export const sendDataOverBluetooth = async (
     return result;
   }
 
-  const timeout = setTimeout(() => {
-    device.cancelConnection();
-    clearTimeout(timeout);
-  }, responseTime);
   return result;
 };
 

package/src/navigations/AllGatewayStack.js

@@ -0,0 +1,58 @@
+import React, { memo } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import GatewayDetail from '../screens/Gateway/GatewayDetail';
+import GatewayInfo from '../screens/Gateway/GatewayInfo';
+import GatewayConnectionMethods from '../screens/Gateway/GatewayConnectionMethods';
+import DeviceZigbeeDetail from '../screens/Gateway/DeviceZigbeeDetail';
+import DeviceGatewayInfo from '../screens/Gateway/DeviceGatewayInfo';
+import DetailConfigActionZigbee from '../screens/Gateway/DetailConfigActionZigbee';
+import DeviceModbusDetail from '../screens/Gateway/DeviceModbusDetail';
+import DetailConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
+import DetailChildConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
+import Route from '../utils/Route'; // utils/Route
+import { screenOptions } from './utils';
+
+const Stack = createStackNavigator();
+
+export const AllGatewayStack = memo(() => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen component={GatewayDetail} name={Route.GatewayDetail} />
+      <Stack.Screen component={GatewayInfo} name={Route.GatewayInfo} />
+      <Stack.Screen
+        component={DeviceGatewayInfo}
+        name={Route.DeviceGatewayInfo}
+      />
+      <Stack.Screen
+        component={GatewayConnectionMethods}
+        name={Route.GatewayConnectionMethods}
+      />
+      <Stack.Screen
+        component={DeviceZigbeeDetail}
+        name={Route.DeviceZigbeeDetail}
+      />
+      <Stack.Screen
+        component={DeviceModbusDetail}
+        name={Route.DeviceModbusDetail}
+      />
+      <Stack.Screen
+        component={DetailConfigActionZigbee}
+        name={Route.DetailConfigActionZigbee}
+      />
+      <Stack.Screen
+        component={DetailConfigActionModbus}
+        name={Route.DetailConfigActionModbus}
+      />
+      <Stack.Screen
+        component={DetailChildConfigActionModbus}
+        name={Route.DetailChildConfigActionModbus}
+      />
+    </Stack.Navigator>
+  );
+});

package/src/navigations/Main.js

@@ -1,209 +1,209 @@
-import React, { useMemo, useRef } from 'react';
-import {
-  Animated,
-  View,
-  TouchableOpacity,
-  StyleSheet,
-  Image,
-} from 'react-native';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { createDrawerNavigator } from '@react-navigation/drawer';
-import { useNavigation } from '@react-navigation/native';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-import { createStackNavigator } from '@react-navigation/stack';
+// import React, { useMemo, useRef } from 'react';
+// import {
+//   Animated,
+//   View,
+//   TouchableOpacity,
+//   StyleSheet,
+//   Image,
+// } from 'react-native';
+// import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+// import { createDrawerNavigator } from '@react-navigation/drawer';
+// import { useNavigation } from '@react-navigation/native';
+// import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+// import { createStackNavigator } from '@react-navigation/stack';
 
-import Tabbar from '../commons/Tabbar';
-import { Colors, Constants, Images } from '../configs';
-import t from '../hooks/Common/useTranslations';
-import Routes from '../utils/Route';
-import GatewayStack from './GatewayStack';
-import SmartStack from './SmartStack';
-import TemplateStack from './TemplateStack';
-import DrawerContainer from '../screens/Drawer';
-import { AccessibilityLabel } from '../configs/Constants';
-import Text from '../commons/Text';
-import { screenOptions } from './utils';
-import TemplateDetail from '../screens/Template/detail';
-import Information from '../screens/Template/Information';
-import GatewayList from '../screens/Template/GatewayList';
-import EditTemplate from '../screens/Template/EditTemplate';
-import GatewayDetail from '../screens/Gateway/GatewayDetail';
-import GatewayInfo from '../screens/Gateway/GatewayInfo';
-import GatewayConnectionMethods from '../screens/Gateway/GatewayConnectionMethods';
-import DeviceZigbeeDetail from '../screens/Gateway/DeviceZigbeeDetail';
-import DeviceGatewayInfo from '../screens/Gateway/DeviceGatewayInfo';
-import DetailConfigActionZigbee from '../screens/Gateway/DetailConfigActionZigbee';
-import DeviceModbusDetail from '../screens/Gateway/DeviceModbusDetail';
-import DetailConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
-import DetailChildConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
-import { useBlockBackAndroid } from '../hooks/Common';
+// import Tabbar from '../commons/Tabbar';
+// import { Colors, Constants, Images } from '../configs';
+// import t from '../hooks/Common/useTranslations';
+// import Routes from '../utils/Route';
+// import GatewayStack from './GatewayStack';
+// import SmartStack from './SmartStack';
+// import TemplateStack from './TemplateStack';
+// import DrawerContainer from '../screens/Drawer';
+// import { AccessibilityLabel } from '../configs/Constants';
+// import Text from '../commons/Text';
+// import { screenOptions } from './utils';
+// import TemplateDetail from '../screens/Template/detail';
+// import Information from '../screens/Template/Information';
+// import GatewayList from '../screens/Template/GatewayList';
+// import EditTemplate from '../screens/Template/EditTemplate';
+// import GatewayDetail from '../screens/Gateway/GatewayDetail';
+// import GatewayInfo from '../screens/Gateway/GatewayInfo';
+// import GatewayConnectionMethods from '../screens/Gateway/GatewayConnectionMethods';
+// import DeviceZigbeeDetail from '../screens/Gateway/DeviceZigbeeDetail';
+// import DeviceGatewayInfo from '../screens/Gateway/DeviceGatewayInfo';
+// import DetailConfigActionZigbee from '../screens/Gateway/DetailConfigActionZigbee';
+// import DeviceModbusDetail from '../screens/Gateway/DeviceModbusDetail';
+// import DetailConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
+// import DetailChildConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
+// import { useBlockBackAndroid } from '../hooks/Common';
 
-const Tab = createBottomTabNavigator();
-const Drawer = createDrawerNavigator();
-const Stack = createStackNavigator();
+// const Tab = createBottomTabNavigator();
+// const Drawer = createDrawerNavigator();
+// const Stack = createStackNavigator();
 
-const getWidth = () => {
-  const Width = Constants.width - 12;
-  return Width / 3;
-};
+// const getWidth = () => {
+//   const Width = Constants.width - 12;
+//   return Width / 3;
+// };
 
-const MainDevMode = () => {
-  const navigation = useNavigation();
+// const MainDevMode = () => {
+//   const navigation = useNavigation();
 
-  const listTabName = useMemo(
-    () => [
-      {
-        name: Routes.TemplateStack,
-        tabBarLabel: t('dashboard'),
-        component: TemplateStack,
-      },
-      {
-        name: Routes.GatewayStack,
-        tabBarLabel: t('gateways'),
-        component: GatewayStack,
-      },
-      {
-        name: Routes.SmartStack,
-        tabBarLabel: t('smart'),
-        component: SmartStack,
-      },
-    ],
-    []
-  );
+//   const listTabName = useMemo(
+//     () => [
+//       {
+//         name: Routes.TemplateStack,
+//         tabBarLabel: t('dashboard'),
+//         component: TemplateStack,
+//       },
+//       {
+//         name: Routes.GatewayStack,
+//         tabBarLabel: t('gateways'),
+//         component: GatewayStack,
+//       },
+//       {
+//         name: Routes.SmartStack,
+//         tabBarLabel: t('smart'),
+//         component: SmartStack,
+//       },
+//     ],
+//     []
+//   );
 
-  const tabOffSetValue = useRef(new Animated.Value(0)).current;
+//   const tabOffSetValue = useRef(new Animated.Value(0)).current;
 
-  const Header = () => {
-    return (
-      <View style={styles.wrapHeader}>
-        <TouchableOpacity
-          style={styles.btnMenu}
-          onPress={() => navigation.toggleDrawer()}
-          accessibilityLabel={AccessibilityLabel.BURGER_MENU_ICON}
-        >
-          <Image source={Images.menu} style={styles.menu} />
-        </TouchableOpacity>
-        <Text style={styles.textHeader}>{t('developer_mode')}</Text>
-      </View>
-    );
-  };
+//   const Header = () => {
+//     return (
+//       <View style={styles.wrapHeader}>
+//         <TouchableOpacity
+//           style={styles.btnMenu}
+//           onPress={() => navigation.toggleDrawer()}
+//           accessibilityLabel={AccessibilityLabel.BURGER_MENU_ICON}
+//         >
+//           <Image source={Images.menu} style={styles.menu} />
+//         </TouchableOpacity>
+//         <Text style={styles.textHeader}>{t('developer_mode')}</Text>
+//       </View>
+//     );
+//   };
 
-  return (
-    <>
-      <Header />
-      <Tab.Navigator tabBar={(props) => <Tabbar {...props} />}>
-        {listTabName.map((item) => (
-          <Tab.Screen
-            name={item.name}
-            component={item.component}
-            options={{
-              tabBarLabel: item.tabBarLabel,
-              tabOffSetValue,
-            }}
-          />
-        ))}
-      </Tab.Navigator>
-      <Animated.View
-        // eslint-disable-next-line react-native/no-inline-styles
-        style={{
-          width: getWidth() - 4,
-          transform: [{ translateX: tabOffSetValue }],
-          height: 2,
-          backgroundColor: Colors.Primary,
-          position: 'absolute',
-          bottom: 70,
-          left: 8,
-          borderRadius: 1,
-        }}
-      />
-    </>
-  );
-};
+//   return (
+//     <>
+//       <Header />
+//       <Tab.Navigator tabBar={(props) => <Tabbar {...props} />}>
+//         {listTabName.map((item) => (
+//           <Tab.Screen
+//             name={item.name}
+//             component={item.component}
+//             options={{
+//               tabBarLabel: item.tabBarLabel,
+//               tabOffSetValue,
+//             }}
+//           />
+//         ))}
+//       </Tab.Navigator>
+//       <Animated.View
+//         // eslint-disable-next-line react-native/no-inline-styles
+//         style={{
+//           width: getWidth() - 4,
+//           transform: [{ translateX: tabOffSetValue }],
+//           height: 2,
+//           backgroundColor: Colors.Primary,
+//           position: 'absolute',
+//           bottom: 70,
+//           left: 8,
+//           borderRadius: 1,
+//         }}
+//       />
+//     </>
+//   );
+// };
 
-const DrawerScreen = () => {
-  useBlockBackAndroid();
-  return (
-    <Drawer.Navigator
-      backBehavior="none"
-      drawerContent={(props) => <DrawerContainer {...props} />}
-      drawerStyle={{ paddingTop: getStatusBarHeight() }}
-    >
-      <Drawer.Screen name={Routes.MainDevMode} component={MainDevMode} />
-    </Drawer.Navigator>
-  );
-};
+// const DrawerScreen = () => {
+//   useBlockBackAndroid();
+//   return (
+//     <Drawer.Navigator
+//       backBehavior="none"
+//       drawerContent={(props) => <DrawerContainer {...props} />}
+//       drawerStyle={{ paddingTop: getStatusBarHeight() }}
+//     >
+//       <Drawer.Screen name={Routes.MainDevMode} component={MainDevMode} />
+//     </Drawer.Navigator>
+//   );
+// };
 
-const DevModeStack = () => {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        ...screenOptions,
-        headerShown: false,
-      }}
-    >
-      <Stack.Screen component={DrawerScreen} name={Routes.DrawerScreen} />
-      <Stack.Screen component={TemplateDetail} name={Routes.TemplateDetail} />
-      <Stack.Screen component={GatewayDetail} name={Routes.GatewayDetail} />
-      <Stack.Screen component={GatewayInfo} name={Routes.GatewayInfo} />
-      <Stack.Screen
-        component={DeviceGatewayInfo}
-        name={Routes.DeviceGatewayInfo}
-      />
-      <Stack.Screen
-        component={GatewayConnectionMethods}
-        name={Routes.GatewayConnectionMethods}
-      />
-      <Stack.Screen
-        component={DeviceZigbeeDetail}
-        name={Routes.DeviceZigbeeDetail}
-      />
-      <Stack.Screen
-        component={DeviceModbusDetail}
-        name={Routes.DeviceModbusDetail}
-      />
-      <Stack.Screen
-        component={DetailConfigActionZigbee}
-        name={Routes.DetailConfigActionZigbee}
-      />
-      <Stack.Screen
-        component={DetailConfigActionModbus}
-        name={Routes.DetailConfigActionModbus}
-      />
-      <Stack.Screen
-        component={DetailChildConfigActionModbus}
-        name={Routes.DetailChildConfigActionModbus}
-      />
-      <Stack.Screen component={Information} name={Routes.Information} />
-      <Stack.Screen component={GatewayList} name={Routes.GatewayList} />
-      <Stack.Screen component={EditTemplate} name={Routes.EditTemplate} />
-    </Stack.Navigator>
-  );
-};
+// const DevModeStack = () => {
+//   return (
+//     <Stack.Navigator
+//       screenOptions={{
+//         ...screenOptions,
+//         headerShown: false,
+//       }}
+//     >
+//       <Stack.Screen component={DrawerScreen} name={Routes.DrawerScreen} />
+//       <Stack.Screen component={TemplateDetail} name={Routes.TemplateDetail} />
+//       <Stack.Screen component={GatewayDetail} name={Routes.GatewayDetail} />
+//       <Stack.Screen component={GatewayInfo} name={Routes.GatewayInfo} />
+//       <Stack.Screen
+//         component={DeviceGatewayInfo}
+//         name={Routes.DeviceGatewayInfo}
+//       />
+//       <Stack.Screen
+//         component={GatewayConnectionMethods}
+//         name={Routes.GatewayConnectionMethods}
+//       />
+//       <Stack.Screen
+//         component={DeviceZigbeeDetail}
+//         name={Routes.DeviceZigbeeDetail}
+//       />
+//       <Stack.Screen
+//         component={DeviceModbusDetail}
+//         name={Routes.DeviceModbusDetail}
+//       />
+//       <Stack.Screen
+//         component={DetailConfigActionZigbee}
+//         name={Routes.DetailConfigActionZigbee}
+//       />
+//       <Stack.Screen
+//         component={DetailConfigActionModbus}
+//         name={Routes.DetailConfigActionModbus}
+//       />
+//       <Stack.Screen
+//         component={DetailChildConfigActionModbus}
+//         name={Routes.DetailChildConfigActionModbus}
+//       />
+//       <Stack.Screen component={Information} name={Routes.Information} />
+//       <Stack.Screen component={GatewayList} name={Routes.GatewayList} />
+//       <Stack.Screen component={EditTemplate} name={Routes.EditTemplate} />
+//     </Stack.Navigator>
+//   );
+// };
 
-export default DevModeStack;
+// export default DevModeStack;
 
-const styles = StyleSheet.create({
-  btnMenu: {
-    width: 40,
-    height: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: 10,
-  },
-  wrapHeader: {
-    height: 100,
-    paddingTop: getStatusBarHeight(),
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: Colors.Gray2,
-  },
-  textHeader: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: Colors.Gray9,
-  },
-  menu: {
-    width: 24,
-    height: 24,
-  },
-});
+// const styles = StyleSheet.create({
+//   btnMenu: {
+//     width: 40,
+//     height: 40,
+//     justifyContent: 'center',
+//     alignItems: 'center',
+//     marginLeft: 10,
+//   },
+//   wrapHeader: {
+//     height: 100,
+//     paddingTop: getStatusBarHeight(),
+//     flexDirection: 'row',
+//     alignItems: 'center',
+//     backgroundColor: Colors.Gray2,
+//   },
+//   textHeader: {
+//     fontSize: 20,
+//     fontWeight: 'bold',
+//     color: Colors.Gray9,
+//   },
+//   menu: {
+//     width: 24,
+//     height: 24,
+//   },
+// });

package/src/navigations/UnitStack.js

@@ -53,6 +53,7 @@ import EmergencySetting from '../screens/EmergencySetting';
 import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
+import AllGateway from '../screens/Gateway';
 import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import { HanetCameraStack } from './HanetCameraStack';
 import { axiosGet, fetchWithCache } from '../utils/Apis/axios';
@@ -462,6 +463,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.AllGateway}
+        component={AllGateway}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
   );
 });

package/src/screens/Device/components/SensorDisplayItem.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
 import { CardDevMode } from '../../../commons/DevMode';
@@ -46,17 +46,23 @@ export const SensorDisplayItem = ({
   const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
 
   const sendRemoteCommand = useRemoteControl();
+  const [processing, setProcessing] = useState(false);
 
   const doAction = useCallback(
-    (action, data) => {
-      sendRemoteCommand(
+    async (action, data) => {
+      if (processing) {
+        return;
+      }
+      setProcessing(true);
+      await sendRemoteCommand(
         isEditingTemplate ? action?.end_device : sensor,
         action,
         data,
         userId
       );
+      setProcessing(false);
     },
-    [isEditingTemplate, sensor, sendRemoteCommand, userId]
+    [processing, sendRemoteCommand, isEditingTemplate, sensor, userId]
   );
 
   if (type === 'compass') {

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

@@ -65,8 +65,14 @@ describe('Test Gateway screen', () => {
     await act(async () => {
       await gatewayItems[0].props.onPress();
     });
-    expect(mockNavigate).toBeCalledWith(Routes.GatewayDetail, {
-      item: { id: 1, name: 'device 1' },
+    expect(mockNavigate).toBeCalledWith(Routes.AllGatewayStack, {
+      params: {
+        item: {
+          id: 1,
+          name: 'device 1',
+        },
+      },
+      screen: 'GatewayDetail',
     });
   });
 

package/src/screens/Gateway/index.js

@@ -9,6 +9,7 @@ import { useGateway } from './hooks/useGateway';
 import { AccessibilityLabel } from '../../configs/Constants';
 import Routes from '../../utils/Route';
 import styles from './styles';
+import { HeaderCustom } from '../../commons/Header';
 
 const Gateway = ({ route }) => {
   const t = useTranslations();
@@ -25,7 +26,10 @@ const Gateway = ({ route }) => {
 
   const goGoDetail = useCallback(
     (item) => () => {
-      navigate(Routes.GatewayDetail, { item });
+      navigate(Routes.AllGatewayStack, {
+        screen: Routes.GatewayDetail,
+        params: { item },
+      });
     },
     [navigate]
   );
@@ -66,30 +70,38 @@ const Gateway = ({ route }) => {
   }, [isFocused, fetchDataGateways]);
 
   return (
-    <View
-      style={styles.wrap}
-      accessibilityLabel={AccessibilityLabel.LIST_GATEWAY}
-    >
-      <Label name={t('gateway')} />
-      <Search onSearch={setNameSearch} />
-      <FlatList
-        onRefresh={onRefresh}
-        refreshing={refresh}
-        columnWrapperStyle={styles.spaceBetween}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={[
-          styles.contentContainerStyle,
-          gatewaysSearched?.length === 0 && styles.flex1,
-        ]}
-        keyExtractor={(item) => item?.id}
-        data={gatewaysSearched}
-        renderItem={renderItem}
-        extraData={gatewaysSearched}
-        ListEmptyComponent={renderListEmptyComponent}
-        numColumns={2}
+    <>
+      <HeaderCustom
+        title={t('all_gateway')}
+        titleStyles={styles.titleLeft}
+        buttonBackStyles={styles.buttonBackStyles}
+        headerStyles={styles.header}
       />
-    </View>
+      <View
+        style={styles.wrap}
+        accessibilityLabel={AccessibilityLabel.LIST_GATEWAY}
+      >
+        <Label name={t('gateway')} />
+        <Search onSearch={setNameSearch} />
+        <FlatList
+          onRefresh={onRefresh}
+          refreshing={refresh}
+          columnWrapperStyle={styles.spaceBetween}
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={[
+            styles.contentContainerStyle,
+            gatewaysSearched?.length === 0 && styles.flex1,
+          ]}
+          keyExtractor={(item) => item?.id}
+          data={gatewaysSearched}
+          renderItem={renderItem}
+          extraData={gatewaysSearched}
+          ListEmptyComponent={renderListEmptyComponent}
+          numColumns={2}
+        />
+      </View>
+    </>
   );
 };
 

package/src/screens/Gateway/styles.js

@@ -4,7 +4,6 @@ import { Colors } from '../../configs';
 export default StyleSheet.create({
   wrap: {
     flex: 1,
-    paddingTop: 16,
     paddingHorizontal: 16,
     backgroundColor: Colors.White,
   },
@@ -29,4 +28,13 @@ export default StyleSheet.create({
   flex1: {
     flex: 1,
   },
+  titleLeft: {
+    textAlign: 'left',
+  },
+  buttonBackStyles: {
+    marginRight: 24,
+  },
+  header: {
+    backgroundColor: Colors.White,
+  },
 });

package/src/screens/Unit/MoreMenu.js

@@ -44,8 +44,19 @@ const MoreMenu = ({
       text: t('smart_account'),
       data: { unitId: unit?.id, unit },
     };
+    const RouteAllGateway = {
+      id: 'all-gateway',
+      route: Routes.AllGateway,
+      text: t('all_gateway'),
+      data: { unitId: unit?.id, unit },
+    };
     return isOwner
-      ? [RouteManageUnit, RouteUnitMemberList, ListSmartAccount]
+      ? [
+          RouteManageUnit,
+          RouteUnitMemberList,
+          ListSmartAccount,
+          RouteAllGateway,
+        ]
       : [RouteUnitMemberList];
   }, [t, unit, isOwner]);
 

package/src/utils/Apis/axios.js

@@ -50,7 +50,7 @@ const shouldHideError = async (message) => {
     return true;
   }
 
-  if (message === 'Network Error') {
+  if (message === 'Network Error' || message === PROBLEM_CODE.NETWORK_ERROR) {
     const netState = await NetInfo.fetch();
     if (!netState.isConnected) {
       return true;

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

@@ -1106,5 +1106,7 @@
   "text_alert_modal_popup_ct": "It’s a critical action and cannot be undone.",
   "text_understand_modal_popup_ct": "I fully understand that this action is critical and will lead to data loss.",
   "cannot_find_device_wifi": "Cannot find Device's Wifi",
-  "photo_request_permission_des": "To select photo from gallery, please unlock access photo permission"
+  "this_command_is_just_support_bluetooth_only": "This command is just support bluetooth only",
+  "photo_request_permission_des": "To select photo from gallery, please unlock access photo permission",
+  "all_gateway": "All Gateway"
 }

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

@@ -1105,5 +1105,7 @@
   "text_working_hard": "Chúng tôi đang làm việc chăm chỉ để làm cho điều này hoạt động",
   "photo_request_permission": "Quyền yêu cầu ảnh",
   "cannot_find_device_wifi": "Không thể tìm thấy Wifi của thiết bị",
-  "photo_request_permission_des": "Để chọn ảnh từ thư viện, vui lòng mở khóa quyền truy cập ảnh"
+  "this_command_is_just_support_bluetooth_only": "Lệnh gửi này chỉ hỗ trợ bluetooth",
+  "photo_request_permission_des": "Để chọn ảnh từ thư viện, vui lòng mở khóa quyền truy cập ảnh",
+  "all_gateway": "Tất cả cổng kết nối"
 }

package/src/utils/Route/index.js

@@ -180,6 +180,8 @@ const Routes = {
   EditTemplate: 'EditTemplate',
   SmartAccountStack: 'SmartAccountStack',
   SuccessfullyConnected: 'SuccessfullyConnected',
+  AllGatewayStack: 'AllGatewayStack',
+  AllGateway: 'AllGateway',
 };
 
 export default Routes;

package/src/utils/Utils.js

@@ -133,6 +133,13 @@ export const notImplemented = (t) => {
   Alert.alert(t('feature_under_development'));
 };
 
+export const roundNumber = (value, round = 2) => {
+  if (!isNaN) {
+    return Math.round((value || 0) * 10 ** round) / 10 ** round;
+  }
+  return value;
+};
+
 export default {
   validateEmail,
   isObjectEmpty,