@eohjsc/react-native-smart-city 0.3.22 → 0.3.23

package/index.js

@@ -18,6 +18,7 @@ import MyPinnedSharedUnit from './src/commons/Dashboard/MyPinnedSharedUnit';
 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';
 
 export {
   AddSubUnitStack,
@@ -42,4 +43,5 @@ export {
   MyUnit,
   SCWrapper,
   Action,
+  withRemoteControl,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -140,6 +140,7 @@
     "pluralize": "^8.0.0",
     "postinstall": "^0.7.0",
     "pusher-js": "^7.0.3",
+    "pusher-js-auth": "^4.0.1",
     "querystring": "^0.2.0",
     "react-content-loader": "^6.0.3",
     "react-dom": "^17.0.1",

package/src/commons/Action/ItemQuickAction.js

@@ -2,7 +2,6 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
-import { watchMultiConfigs } from '../../iot/Monitor';
 import { useRemoteControl } from '../../hooks/IoT';
 import { useConfigGlobalState } from '../../iot/states';
 import IconComponent from '../IconComponent';
@@ -42,13 +41,6 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
     [sensor, revertActionUpdate]
   );
 
-  useEffect(() => {
-    sensor.quick_action &&
-      sensor.quick_action.config_id &&
-      sensor.device_type !== 'GOOGLE_HOME' &&
-      watchMultiConfigs([sensor.quick_action.config_id]);
-  }, [sensor.quick_action, sensor?.device_type]);
-
   useEffect(() => {
     if (!sensor.quick_action) {
       return;
@@ -57,14 +49,11 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
       return;
     }
     const configValue = configValues[sensor.quick_action.config_id];
-    statusCallback(configValue);
+    statusCallback(configValue?.value);
   }, [sensor, configValues, statusCallback]);
   const userId = useSCContextSelector((state) => state?.auth.account.user.id);
   const onActionPress = useCallback(() => {
     sendRemoteCommand(sensor, action, null, userId);
-    sensor.quick_action &&
-      sensor.device_type !== 'GOOGLE_HOME' &&
-      watchMultiConfigs([sensor.quick_action.config_id]);
     setIsSendingCommand(true);
 
     if (!sensor.quick_action) {

package/src/commons/Action/__test__/ItemQuickAction.test.js

@@ -328,7 +328,7 @@ describe('Test ItemQuickAction', () => {
 
   test('listen to config value for update action', () => {
     const globalStates = require('../../../iot/states');
-    globalStates.useConfigGlobalState = () => [{ 51: true }, null];
+    globalStates.useConfigGlobalState = () => [{ 51: { value: true } }, null];
 
     const mockSetStatus = jest.fn();
 

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -2,7 +2,6 @@ import React, { memo, useState, useEffect } from 'react';
 import { View } from 'react-native';
 import styles from './ColorPickerTemplateStyles';
 import ColorPicker from 'react-native-wheel-color-picker';
-import { watchMultiConfigs } from '../../iot/Monitor';
 import { useConfigGlobalState } from '../../iot/states';
 
 let isFirstTime = true;
@@ -41,18 +40,12 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    if (configValue && isFirstTime) {
-      setValueColorComplete(`#${configValue?.toString(16)}`);
+    if (configValue?.value && isFirstTime) {
+      setValueColorComplete(`#${configValue?.value?.toString(16)}`);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [configValues]);
 
-  useEffect(() => {
-    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
-      watchMultiConfigs([configuration.config]);
-    }
-  }, [sensor, configuration.config]);
-
   useEffect(() => {
     return () => (isFirstTime = true);
   }, []);

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -58,7 +58,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         style: styles.buttonActionCurtain,
         icon: Images.buttonLeftCurtain,
         text: text1,
-        onPress: onButtonOpenPress,
+        onPress: onButtonClosePress,
         testID: TESTID.BUTTON_TEMPLATE_1,
       },
       {
@@ -72,7 +72,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         style: styles.buttonActionCurtain,
         icon: Images.buttonRightCurtain,
         text: text3,
-        onPress: onButtonClosePress,
+        onPress: onButtonOpenPress,
         testID: TESTID.BUTTON_TEMPLATE_3,
       },
     ];
@@ -82,11 +82,12 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         {buttons.map((item, index) => (
           <TouchableOpacity
             testID={item.testID}
-            style={item.style}
+            style={item?.style}
             onPress={item.onPress}
             underlayColor={Colors.Gray2}
           >
-            <Image source={item.icon} />
+            <Image source={item?.icon} />
+            <Text style={styles.textCurtain}>{item?.text}</Text>
           </TouchableOpacity>
         ))}
       </>

package/src/commons/ActionGroup/CurtainButtonTemplateStyle.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
 
 export default StyleSheet.create({
   wrap: {
@@ -43,4 +44,8 @@ export default StyleSheet.create({
     justifyContent: 'center',
     marginTop: 15,
   },
+  textCurtain: {
+    fontSize: 16,
+    color: Colors.Gray8,
+  },
 });

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -5,6 +5,7 @@ import { Colors } from '../../configs';
 
 import Text from '../Text';
 import { useConfigGlobalState } from '../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import styles from './NumberUpDownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
@@ -25,27 +26,14 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const valueDefault = 28;
   const [value, setValue] = useState(valueDefault);
 
-  useEffect(() => {
-    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-      return;
-    }
-    if (
-      !!config &&
-      sensor?.is_managed_by_backend &&
-      sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME
-    ) {
-      watchMultiConfigs([config]);
-    }
-  }, [sensor, config]);
-
   useEffect(() => {
     if (!config) {
       return;
     }
 
     const configValue = configValues[config];
-    if (configValue !== null && configValue !== undefined) {
-      setValue(configValue);
+    if (configValue?.value !== null && configValue?.value !== undefined) {
+      setValue(configValue.value);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(configValues)]);
@@ -70,7 +58,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       }
 
       config &&
-        sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME &&
+        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
         watchMultiConfigs([config]);
     },
     [
@@ -82,6 +70,8 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     ]
   );
 
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
+
   const doActionUp = useCallback(async () => {
     const actionName = `${sensor?.name} temp up`;
     const newValue = checkMinMax(value + 1);

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -7,8 +7,9 @@ import styles from './OnOffSmartLockStyle';
 import ButtonLock from '../../../../assets/images/Device/button-lock.svg';
 import ButtonUnLock from '../../../../assets/images/Device/button-unlock.svg';
 import { useConfigGlobalState } from '../../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import { watchMultiConfigs } from '../../../iot/Monitor';
-import { TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
 
 const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();
@@ -36,7 +37,7 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
       }
       if (sensor?.is_managed_by_backend) {
         configuration.config &&
-          sensor.device_type !== 'GOOGLE_HOME' &&
+          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
           watchMultiConfigs([configuration.config]);
       }
     }
@@ -52,13 +53,15 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
     sensor?.device_type,
   ]);
 
+  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+
   useEffect(() => {
     const { is_on_value, config } = configuration;
     const configValue = configValues[config];
     if (is_on_value && is_on_value.length) {
-      setisUnlock(is_on_value.includes(configValue));
+      setisUnlock(is_on_value.includes(configValue?.value));
     } else {
-      setisUnlock(configValue);
+      setisUnlock(configValue?.value);
     }
   }, [configValues, configuration]);
 

package/src/commons/ActionGroup/OnOffTemplate/index.js

@@ -3,6 +3,7 @@ import { DEVICE_TYPE } from '../../../configs/Constants';
 
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
 
@@ -30,9 +31,9 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     const { is_on_value, config } = configuration;
     const configValue = configValues[config];
     if (is_on_value && is_on_value.length > 0) {
-      return is_on_value.includes(configValue);
+      return is_on_value.includes(configValue?.value);
     }
-    return !!configValue;
+    return !!configValue?.value;
   }, [configValues, configuration]);
 
   const [isOn, setIsOn] = useState(false);
@@ -99,7 +100,7 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     updateStatusFromPusher();
     if (sensor?.is_managed_by_backend) {
       configuration?.config &&
-        sensor?.device_type !== 'GOOGLE_HOME' &&
+        sensor?.device_type === DEVICE_TYPE.LG_THINQ &&
         watchMultiConfigs([configuration?.config]);
     }
   }, [
@@ -114,6 +115,8 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     sensor?.is_managed_by_backend,
   ]);
 
+  useUnwatchLGDeviceConfigControl(sensor, [configuration?.config]);
+
   useEffect(() => {
     setIsOn(getIsOnValue());
   }, [getIsOnValue]);
@@ -122,15 +125,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     temp = isOn;
   }, [isOn]);
 
-  useEffect(() => {
-    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-      return;
-    }
-    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
-      watchMultiConfigs([configuration.config]);
-    }
-  }, [sensor, configuration.config, getIsOnValue]);
-
   useEffect(() => {
     if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
       setTempIsOn(getIsOnValue());

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -7,6 +7,7 @@ import Text from '../../commons/Text';
 import { AlertAction, RadioCircle } from '../../commons';
 import { useDropdownAction } from './hooks/useDropdownAction';
 import { useConfigGlobalState } from '../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import styles from './OptionsDropdownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
@@ -32,7 +33,7 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
   const selectedOption = useMemo(() => {
-    const currentValue = configValues[configuration.config];
+    const currentValue = configValues[configuration.config]?.value;
     if (currentValue === null || currentValue === undefined) {
       return configuration.options[0];
     }
@@ -70,7 +71,7 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     doAction(action_data, data, actionName);
     if (sensor?.is_managed_by_backend) {
       configuration.config &&
-        sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME &&
+        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
         watchMultiConfigs([configuration.config]);
     }
     hideAlertAction();
@@ -87,6 +88,8 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     title,
   ]);
 
+  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const displaySelected = useMemo(() => {

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -6,7 +6,6 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
 import SliderRange from 'react-native-slider';
-import { watchMultiConfigs } from '../../iot/Monitor';
 import { useConfigGlobalState } from '../../iot/states';
 
 const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
@@ -33,18 +32,14 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    let valueTemp = configValue;
-    if (configValue > 0) {
-      valueTemp = Math.round((configValue / 254) * 100);
+    let valueBrness = configValue?.value;
+    let valueTemp = valueBrness;
+    if (valueBrness > 0) {
+      valueTemp = Math.round((valueBrness / 254) * 100);
     }
     setValueBrightness(valueTemp);
   }, [configuration.config, configValues, configuration]);
 
-  useEffect(() => {
-    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
-      watchMultiConfigs([configuration.config]);
-    }
-  }, [sensor, configuration.config]);
   return (
     <View style={styles.viewBrightness}>
       <View style={styles.LeftBrightness}>

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -1,13 +1,14 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { Colors } from '../../configs';
 
 import Text from '../Text';
 import { useConfigGlobalState } from '../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import { watchMultiConfigs } from '../../iot/Monitor';
 import IconComponent from '../IconComponent';
 import styles from './StatesGridActionTemplateStyle';
-import { TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 import SvgClean from '../../../assets/images/Device/clean.svg';
 import SvgCirculator from '../../../assets/images/Device/circulator.svg';
 import SvgAuo from '../../../assets/images/Device/auto.svg';
@@ -46,7 +47,7 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
       doAction(actionData, null, actionName);
       if (sensor?.is_managed_by_backend) {
         config &&
-          sensor.device_type !== 'GOOGLE_HOME' &&
+          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
           watchMultiConfigs([config]);
       }
     },
@@ -61,6 +62,8 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
     ]
   );
 
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
+
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const iconSvg = useMemo(() => {
@@ -117,7 +120,7 @@ const StatesGridActionTemplate = ({
 
   const options = useMemo(() => {
     return (configuration?.options || []).map((option) => {
-      if (configValues[option?.config] === option?.is_on_value) {
+      if (configValues[option?.config]?.value === option?.is_on_value) {
         return {
           ...option,
           active: true,
@@ -127,12 +130,6 @@ const StatesGridActionTemplate = ({
     });
   }, [configuration, configValues]);
 
-  useEffect(() => {
-    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
-      watchMultiConfigs(configuration.options.map((option) => option.config));
-    }
-  }, [sensor.is_managed_by_backend, sensor.device_type, configuration.options]);
-
   return (
     <View style={styles.wrap}>
       <Text type="H4" style={styles.textModeMargin}>

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -12,7 +12,9 @@ import styles from './TimerActionTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import { useConfigGlobalState } from '../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../hooks/IoT';
 import BottomScrollPicker from '../BottomScrollPicker';
+import { DEVICE_TYPE } from '../../configs/Constants';
 
 const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
   const t = useTranslations();
@@ -22,8 +24,8 @@ const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
-  const configHour = configValues[configuration.config_hour];
-  const configMinute = configValues[configuration.config_minute];
+  const configHour = configValues[configuration.config_hour]?.value;
+  const configMinute = configValues[configuration.config_minute]?.value;
 
   const dataTime = useMemo(() => {
     if (
@@ -94,7 +96,7 @@ const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
       if (sensor.is_managed_by_backend) {
         hour !== undefined &&
           minute !== undefined &&
-          sensor.device_type !== 'GOOGLE_HOME' &&
+          sensor.device_type !== DEVICE_TYPE.LG_THINQ &&
           watchMultiConfigs([
             configuration.config_hour,
             configuration.config_minute,
@@ -116,7 +118,7 @@ const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
       doAction(configuration.action_data, JSON.stringify({ hour }));
       if (
         sensor.is_managed_by_backend &&
-        sensor.device_type !== 'GOOGLE_HOME'
+        sensor.device_type !== DEVICE_TYPE.LG_THINQ
       ) {
         hour && watchMultiConfigs([configuration.config_hour]);
       }
@@ -130,6 +132,11 @@ const TimerActionTemplate = ({ actionGroup = {}, doAction, sensor = {} }) => {
     ]
   );
 
+  useUnwatchLGDeviceConfigControl(sensor, [
+    configuration.config_minute,
+    configuration.config_hour,
+  ]);
+
   const onConfirmTime = useCallback(
     (timeData) => {
       onHideTime();

package/src/commons/ActionGroup/TwoButtonTemplate/index.js

@@ -6,6 +6,7 @@ import { Colors } from '../../../configs';
 import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
+import { useUnwatchLGDeviceConfigControl } from '../../../hooks/IoT';
 import Text from '../../Text';
 import styles from './TwoButtonTemplateStyles';
 
@@ -37,7 +38,7 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
     if (sensor?.is_managed_by_backend) {
       configuration.config &&
-        sensor.device_type !== 'GOOGLE_HOME' &&
+        sensor.device_type === DEVICE_TYPE.LG_THINQ &&
         watchMultiConfigs([configuration.config]);
     }
   }, [
@@ -58,7 +59,10 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         await doAction(button2?.action_on_data, null, actionName('start'));
       }
     }
-    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
+    if (
+      sensor?.is_managed_by_backend &&
+      sensor.device_type === DEVICE_TYPE.LG_THINQ
+    ) {
       configuration.config && watchMultiConfigs([configuration.config]);
     }
   }, [
@@ -72,20 +76,22 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     sensor?.device_type,
   ]);
 
+  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+
   useEffect(() => {
     const configValue1 = configValues[button1?.config];
     const configValue2 = configValues[button2?.config];
     if (button1?.is_on_value && button1?.is_on_value.length > 0) {
-      setIsOn(button1?.is_on_value.includes(configValue1));
+      setIsOn(button1?.is_on_value.includes(configValue1?.value));
       return;
     }
     if (button2?.is_on_value && button2?.is_on_value.length > 0) {
-      setIsStart(button2?.is_on_value.includes(configValue2));
+      setIsStart(button2?.is_on_value.includes(configValue2?.value));
       return;
     }
 
-    setIsOn(configValue1);
-    setIsStart(configValue2);
+    setIsOn(configValue1?.value);
+    setIsStart(configValue2?.value);
   }, [
     configuration.config,
     configValues,
@@ -97,15 +103,6 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     button2?.is_on_value,
   ]);
 
-  useEffect(() => {
-    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
-      return;
-    }
-    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
-      watchMultiConfigs([configuration.config]);
-    }
-  }, [sensor, configuration.config]);
-
   const RenderTwoButtonAction = () => {
     const buttons = [
       {

package/src/commons/ActionGroup/__test__/NumberUpDownTemplate.test.js

@@ -9,9 +9,16 @@ import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
 jest.mock('../../../iot/Monitor');
 
 jest.mock('../../../iot/states', () => ({
-  useConfigGlobalState: () => [{ 5: 25 }, null],
+  useConfigGlobalState: () => [{ 5: { value: 25 } }, null],
 }));
 
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useFocusEffect: jest.fn(),
+  };
+});
+
 describe('Test NumberUpDownActionTemplate', () => {
   const action_data = {
     color: '#00979D',
@@ -90,6 +97,31 @@ describe('Test NumberUpDownActionTemplate', () => {
     expect(watchMultiConfigs).not.toBeCalled();
   });
 
+  test('do action not call watchConfigs cause device_type not lq_thinq', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.ZIGBEE,
+          }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    expect(watchMultiConfigs).not.toBeCalled();
+  });
+
   test('do action watchConfigs cause allow_config_store_value true', async () => {
     const mockDoAction = jest.fn();
     actionGroup.configuration.allow_config_store_value = true;
@@ -98,7 +130,10 @@ describe('Test NumberUpDownActionTemplate', () => {
         <NumberUpDownActionTemplate
           actionGroup={actionGroup}
           doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
         />
       );
     });

package/src/commons/ActionGroup/__test__/OnOffButtonTemplate.test.js

@@ -15,6 +15,13 @@ jest.mock('react', () => ({
   useState: jest.fn(),
 }));
 
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useFocusEffect: jest.fn(),
+  };
+});
+
 describe('Test OneBigButtonTemplate', () => {
   const action_on_data = {
     color: '#00979D',