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

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.25",
   "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

@@ -9,11 +9,8 @@ import { Colors, Images } from '../../configs';
 const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const {
-    text_open,
     open_action_data,
-    text_stop,
     stop_action_data,
-    text_close,
     close_action_data,
     action_off_data,
     action_on_data,
@@ -26,31 +23,26 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const [lock, setLock] = useState(false);
 
   const onButtonOpenPress = useCallback(() => {
-    const actionName = `${sensor?.name} ${text_open?.toLowerCase()}`;
-    doAction(open_action_data, null, actionName);
-  }, [open_action_data, text_open, doAction, sensor?.name]);
+    doAction(open_action_data, null);
+  }, [open_action_data, doAction]);
 
   const onButtonStopPress = useCallback(() => {
-    const actionName = `${sensor?.name} ${text_stop?.toLowerCase()}`;
-    doAction(stop_action_data, null, actionName);
-  }, [stop_action_data, text_stop, doAction, sensor?.name]);
+    doAction(stop_action_data, null);
+  }, [stop_action_data, doAction]);
 
   const onButtonClosePress = useCallback(() => {
-    const actionName = `${sensor?.name} ${text_close?.toLowerCase()}`;
-    doAction(close_action_data, null, actionName);
-  }, [close_action_data, text_close, doAction, sensor?.name]);
+    doAction(close_action_data, null);
+  }, [close_action_data, doAction]);
 
   const onChangeSwitch = useCallback(() => {
     if (lock) {
-      const actionName = `${sensor?.name} unlock`;
       setLock(false);
-      doAction(action_off_data, null, actionName);
+      doAction(action_off_data, null);
       return;
     }
-    const actionName = `${sensor?.name} lock`;
-    doAction(action_on_data, null, actionName);
+    doAction(action_on_data, null);
     setLock(true);
-  }, [action_off_data, action_on_data, doAction, lock, sensor?.name]);
+  }, [action_off_data, action_on_data, doAction, lock]);
 
   const RenderThreeButtonActions = () => {
     const buttons = [
@@ -58,7 +50,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 +64,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 +74,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,33 +26,20 @@ 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)]);
 
   const doActionAndWatchConfig = useCallback(
-    async (actionData, actionValue, actionName) => {
+    async (actionData, actionValue) => {
       let data = actionValue;
       if (sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME) {
         data = { temperature: actionValue };
@@ -61,7 +49,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         }
         data = JSON.stringify(data);
       }
-      await doAction(actionData, data, actionName);
+      await doAction(actionData, data);
       if (!sensor?.is_managed_by_backend) {
         return;
       }
@@ -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,19 +70,19 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     ]
   );
 
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
+
   const doActionUp = useCallback(async () => {
-    const actionName = `${sensor?.name} temp up`;
     const newValue = checkMinMax(value + 1);
-    doActionAndWatchConfig(action_data, newValue, actionName);
+    doActionAndWatchConfig(action_data, newValue);
     setValue(newValue);
-  }, [sensor?.name, checkMinMax, value, doActionAndWatchConfig, action_data]);
+  }, [checkMinMax, value, doActionAndWatchConfig, action_data]);
 
   const doActionDown = useCallback(async () => {
-    const actionName = `${sensor?.name} temp down`;
     const newValue = checkMinMax(value - 1);
-    doActionAndWatchConfig(action_data, newValue, actionName);
+    doActionAndWatchConfig(action_data, newValue);
     setValue(newValue);
-  }, [sensor?.name, checkMinMax, value, doActionAndWatchConfig, action_data]);
+  }, [checkMinMax, value, doActionAndWatchConfig, action_data]);
 
   const checkMinMax = useCallback(
     (tempValue) => {

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();
@@ -20,45 +21,37 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const handleActionSmartLock = useCallback(async () => {
     if (action_on_data && action_off_data) {
       if (isUnlock) {
-        let actionName = `${
-          sensor?.name
-        } ${actionGroup?.title?.toLowerCase()} lock`;
-        actionName = actionName.replace(/\s+/g, ' ').trim();
         const dataLock = { door_lock: 0 };
-        await doAction(action_on_data, JSON.stringify(dataLock), actionName);
+        await doAction(action_on_data, JSON.stringify(dataLock));
       } else {
-        let actionName = `${
-          sensor?.name
-        } ${actionGroup?.title?.toLowerCase()} unlock`;
-        actionName = actionName.replace(/\s+/g, ' ').trim();
         const dataUnlock = { door_lock: 1 };
-        await doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
+        await doAction(action_off_data, JSON.stringify(dataUnlock));
       }
       if (sensor?.is_managed_by_backend) {
         configuration.config &&
-          sensor.device_type !== 'GOOGLE_HOME' &&
+          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
           watchMultiConfigs([configuration.config]);
       }
     }
   }, [
-    actionGroup?.title,
     action_off_data,
     action_on_data,
     doAction,
     isUnlock,
-    sensor?.name,
     configuration,
     sensor?.is_managed_by_backend,
-    sensor?.device_type,
+    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);
@@ -44,32 +45,14 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }, 2500);
   };
 
-  const actionName = useCallback(
-    (text) => {
-      const actionNameType = `${
-        sensor?.name
-      } ${actionGroup?.title?.toLowerCase()} ${text}`;
-      return actionNameType.replace(/\s+/g, ' ').trim();
-    },
-    [actionGroup?.title, sensor?.name]
-  );
-
   const triggerAction = useCallback(async () => {
     switch (sensor?.device_type) {
       case DEVICE_TYPE.ZIGBEE:
         if (action_on_data && action_off_data) {
           if (isOn) {
-            await doAction(
-              action_off_data,
-              JSON.stringify({ state: 0 }),
-              actionName('off')
-            );
+            await doAction(action_off_data, JSON.stringify({ state: 0 }));
           } else {
-            await doAction(
-              action_on_data,
-              JSON.stringify({ state: 1 }),
-              actionName('on')
-            );
+            await doAction(action_on_data, JSON.stringify({ state: 1 }));
           }
         }
         break;
@@ -89,9 +72,9 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
         }
         if (action_on_data && action_off_data) {
           if (isOn) {
-            await doAction(action_off_data, null, actionName('off'));
+            await doAction(action_off_data, null);
           } else {
-            await doAction(action_on_data, null, actionName('on'));
+            await doAction(action_on_data, null);
           }
         }
         break;
@@ -99,11 +82,10 @@ 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]);
     }
   }, [
-    actionName,
     action_data,
     action_off_data,
     action_on_data,
@@ -114,6 +96,8 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     sensor?.is_managed_by_backend,
   ]);
 
+  useUnwatchLGDeviceConfigControl(sensor, [configuration?.config]);
+
   useEffect(() => {
     setIsOn(getIsOnValue());
   }, [getIsOnValue]);
@@ -122,15 +106,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/OneBigButtonTemplate.js

@@ -11,9 +11,8 @@ const OneBigButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { text, action_data } = configuration || {};
 
   const onPressDoAction = useCallback(() => {
-    const actionName = `${sensor?.name} ${text?.toLowerCase()}`;
-    doAction(action_data, null, actionName);
-  }, [action_data, text, doAction, sensor?.name]);
+    doAction(action_data, null);
+  }, [action_data, doAction]);
 
   return (
     <>

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];
     }
@@ -59,18 +60,16 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
     const value = getOptionValue(newOption);
-    let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
-    actionName = actionName.replace(/\s+/g, ' ').trim();
 
     let data = JSON.stringify({ level: value, key_code: newOption?.value_int });
     if (sensor.device_type === DEVICE_TYPE.GOOGLE_HOME) {
       data = value;
     }
 
-    doAction(action_data, data, actionName);
+    doAction(action_data, data);
     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();
@@ -82,11 +81,11 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     options,
     selectedIndex,
     sensor?.is_managed_by_backend,
-    sensor?.name,
-    sensor?.device_type,
-    title,
+    sensor.device_type,
   ]);
 
+  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,12 @@ 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;
+    if (valueBrness >= 0) {
+      setValueBrightness(valueBrness);
     }
-    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';
@@ -39,28 +40,18 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
-      let actionName = `${
-        sensor?.name
-      } ${title?.toLowerCase()} ${text?.toLowerCase()}`;
-      actionName = actionName.replace(/\s+/g, ' ').trim();
-      doAction(actionData, null, actionName);
+      doAction(actionData, null);
       if (sensor?.is_managed_by_backend) {
         config &&
-          sensor.device_type !== 'GOOGLE_HOME' &&
+          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
           watchMultiConfigs([config]);
       }
     },
-    [
-      config,
-      doAction,
-      sensor?.is_managed_by_backend,
-      sensor?.name,
-      sensor?.device_type,
-      text,
-      title,
-    ]
+    [config, doAction, sensor?.is_managed_by_backend, sensor.device_type]
   );
 
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
+
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
   const iconSvg = useMemo(() => {
@@ -117,7 +108,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 +118,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/ThreeButtonTemplate.js

@@ -30,19 +30,16 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     );
   };
   const onButton1Press = useCallback(() => {
-    const actionName = `${sensor?.name} ${text1?.toLowerCase()}`;
-    doAction(action1_data, null, actionName);
-  }, [action1_data, text1, doAction, sensor?.name]);
+    doAction(action1_data, null);
+  }, [action1_data, doAction]);
 
   const onButton2Press = useCallback(() => {
-    const actionName = `${sensor?.name} ${text2?.toLowerCase()}`;
-    doAction(action2_data, null, actionName);
-  }, [action2_data, text2, doAction, sensor?.name]);
+    doAction(action2_data, null);
+  }, [action2_data, doAction]);
 
   const onButton3Press = useCallback(() => {
-    const actionName = `${sensor?.name} ${text3?.toLowerCase()}`;
-    doAction(action3_data, null, actionName);
-  }, [action3_data, text3, doAction, sensor?.name]);
+    doAction(action3_data, null);
+  }, [action3_data, doAction]);
 
   const onChangeSwitch = useCallback(() => {
     if (lock) {