@eohjsc/react-native-smart-city 0.2.98 → 0.3.1

package/README.md

@@ -1,19 +1,26 @@
 ## react-native-smart-city
 
 ## Getting started
+
 1. Install package dependencies:
-  - Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
+
+- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-reanimated@^1.10.1`
 
 2. Install:
-  - Using [npm](https://www.npmjs.com/#getting-started): `npm install @eohjsc/react-native-smart-city --save`
-  - Using [Yarn](https://yarnpkg.com/): `yarn add @eohjsc/react-native-smart-city`
+
+- Using [npm](https://www.npmjs.com/#getting-started): `npm install @eohjsc/react-native-smart-city --save`
+- Using [Yarn](https://yarnpkg.com/): `yarn add @eohjsc/react-native-smart-city`
 
 3. Compile application using react-native run-android
+
 ### Mostly automatic installation
+
 `$ react-native link @eohjsc/react-native-smart-city`
 
 ## Usage
+
 1. StackNavigator
+
 ```javascript
 import {
   UnitStack,
@@ -30,7 +37,7 @@ import {
 } from '@eohjsc/react-native-smart-city';
 import { createStackNavigator } from '@react-navigation/stack';
 
-// TODO: What to do with the module?   
+// TODO: What to do with the module?
 const Stack = createStackNavigator();
 
 const YourStack = () => {
@@ -84,7 +91,9 @@ const MainTab = () => {
   );
 };
 ```
+
 2. Use components
+
 ```javascript
 import React from 'react';
 import { View } from 'react-native';
@@ -93,13 +102,15 @@ import { MyPinnedSharedUnit, MyUnit } from '@eohjsc/react-native-smart-city';
 const MyScreen = () => {
   return (
     <View>
-        <MyUnit />
-        <MyPinnedSharedUnit />
+      <MyUnit />
+      <MyPinnedSharedUnit />
     </View>
   );
 };
 ```
+
 3. Trigger quick action
+
 ```javascript
 import React from 'react';
 import { View, Button } from 'react-native';
@@ -126,23 +137,33 @@ export const MyFunctionalComponent = () => {
     lg_actions: [],
     name: 'Garage Up',
   };
-  const handleQuickAction = async() => {
+  const handleQuickAction = async () => {
     const result = await sendRemoteCommand(sensor, action); // Action Garage Up
-    if (result){
-      console.log('Successful control')
-    }else {
-      console.log('Control failed')
+    if (result) {
+      console.log('Successful control');
+    } else {
+      console.log('Control failed');
     }
   };
   return (
     <View>
-      <Button onPress={handleQuickAction} title="Example trigger quick action control Garage Up" />
+      <Button
+        onPress={handleQuickAction}
+        title="Example trigger quick action control Garage Up"
+      />
     </View>
   );
 };
 ```
-- sendRemoteCommand user needs to `have permission to control the device`, you pass in the `sensor and action` to it and it will run after calling render.  
-- `sensor` is a device in your Unit and action is the `action` key of the device.. 
+
+- sendRemoteCommand user needs to `have permission to control the device`, you pass in the `sensor and action` to it and it will run after calling render.
+- `sensor` is a device in your Unit and action is the `action` key of the device..
 - You can take out the sensor and action from your Unit when calling the `API.UNIT.UNIT_DETAIL(unitId)` it will return all devices in 1 unit.
-- Or get sensor from `API.SENSOR.DISPLAY(sensor.id)` returns all actions of 1 device.
+- Or get sensor from `API.DEVICE.DISPLAY(sensor.id)` returns all actions of 1 device.
 - Refer YourProjectPath /node_modules/@eohjsc/react-native-smart-city/src/screens/Unit/Detail.js
+
+## Sync file to EoH source
+
+```
+  yarn install && yarn watch
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.98",
+  "version": "0.3.01",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -18,7 +18,7 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "yarn run lint && yarn run jest",
-    "lint": "eslint .  --ext js --ext ts --ext tsx",
+    "lint": "eslint .  --ext js --ext ts --ext tsx --max-warnings 5",
     "lint-fix": "eslint . --fix",
     "type-check": "npx tsc",
     "pod": "cd ios && pod install",
@@ -74,6 +74,7 @@
     "@types/react": "^17.0.0",
     "@types/react-native": "^0.63.43",
     "@types/react-test-renderer": "^17.0.0",
+    "axios-mock-adapter": "^1.21.1",
     "babel-jest": "^26.6.3",
     "detox": "^18.3.1",
     "eslint": "7.14.0",
@@ -124,6 +125,7 @@
     "@react-navigation/stack": "^5.7.0",
     "@sentry/react-native": "^1.7.1",
     "@testing-library/react-hooks": "^6.0.0",
+    "apisauce": "^2.1.5",
     "axios": "^0.19.2",
     "dotenv": "^8.2.0",
     "google-libphonenumber": "^3.2.10",
@@ -174,7 +176,7 @@
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-permissions": "^2.1.5",
+    "react-native-permissions": "3.0.3",
     "react-native-popover-view": "^4.0.3",
     "react-native-progress": "^5.0.0",
     "react-native-reanimated": "1.10.1",

package/src/commons/Action/ItemQuickAction.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 import { TESTID } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 import { watchMultiConfigs } from '../../iot/Monitor';
-import { sendRemoteCommand } from '../../iot/RemoteControl';
+import { useRemoteControl } from '../../hooks/IoT';
 import { useConfigGlobalState } from '../../iot/states';
 import IconComponent from '../IconComponent';
 
@@ -13,6 +13,8 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus, unit }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
 
+  const sendRemoteCommand = useRemoteControl();
+
   const revertActionUpdate = useCallback(
     (value, on_action, on_status, off_action, off_status) => {
       setIsSendingCommand(false);
@@ -81,7 +83,14 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus, unit }) => {
         statusCallback(action.id === sensor.quick_action.on_action.id);
       }, sensor.quick_action.interval);
     }
-  }, [sensor, action, userId, revertActionUpdate, statusCallback]);
+  }, [
+    sensor,
+    action,
+    userId,
+    revertActionUpdate,
+    statusCallback,
+    sendRemoteCommand,
+  ]);
 
   if (!action) {
     return <View />;

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

@@ -5,7 +5,6 @@ import ItemQuickAction from '../ItemQuickAction';
 import { Colors } from '../../../configs';
 import { TESTID } from '../../../configs/Constants';
 import { factory } from 'factory-girl';
-import { sendRemoteCommand } from '../../../iot/RemoteControl';
 
 class Sensor {}
 
@@ -21,7 +20,13 @@ jest.mock('react', () => {
 
 useState.mockImplementation((init) => [init, mockSetState]);
 
-jest.mock('../../../iot/RemoteControl');
+const mockSendRemoteControl = jest.fn();
+jest.mock('../../../hooks/IoT', () => {
+  return {
+    ...jest.requireActual('../../../hooks/IoT'),
+    useRemoteControl: () => mockSendRemoteControl,
+  };
+});
 
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
@@ -83,9 +88,9 @@ describe('Test ItemQuickAction', () => {
   };
 
   test('render with no action', async () => {
-    const sensor = await factory.build('Sensor');
+    const newSensor = await factory.build('Sensor');
     act(() => {
-      tree = create(<ItemQuickAction sensor={sensor} />);
+      tree = create(<ItemQuickAction sensor={newSensor} />);
     });
     const instance = tree.root;
     const buttonOnActionPress = instance.findAll(
@@ -121,7 +126,7 @@ describe('Test ItemQuickAction', () => {
     act(() => {
       buttonOnActionPress.props.onPress();
     });
-    expect(sendRemoteCommand).toBeCalled();
+    expect(mockSendRemoteControl).toBeCalled();
     expect(mockSetState).toBeCalledTimes(1);
 
     jest.runAllTimers();
@@ -154,7 +159,7 @@ describe('Test ItemQuickAction', () => {
     act(() => {
       buttonOnActionPress.props.onPress();
     });
-    expect(sendRemoteCommand).toBeCalled();
+    expect(mockSendRemoteControl).toBeCalled();
     expect(mockSetState).toBeCalledTimes(1);
 
     jest.runAllTimers();

package/src/commons/ActionGroup/CurtainButtonTemplate.js

@@ -17,6 +17,11 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     close_action_data,
     action_off_data,
     action_on_data,
+    is_display_lock,
+    text1,
+    text2,
+    text3,
+    text_door_lock,
   } = configuration || {};
   const [lock, setLock] = useState(false);
 
@@ -52,21 +57,21 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       {
         style: styles.buttonActionCurtain,
         icon: Images.buttonLeftCurtain,
-        text: configuration.text1,
+        text: text1,
         onPress: onButtonOpenPress,
         testID: TESTID.BUTTON_TEMPLATE_1,
       },
       {
         style: styles.buttonActionCurtainCenter,
         icon: Images.buttonPauseCurtain,
-        text: configuration.text2,
+        text: text2,
         onPress: onButtonStopPress,
         testID: TESTID.BUTTON_TEMPLATE_2,
       },
       {
         style: styles.buttonActionCurtain,
         icon: Images.buttonRightCurtain,
-        text: configuration.text3,
+        text: text3,
         onPress: onButtonClosePress,
         testID: TESTID.BUTTON_TEMPLATE_3,
       },
@@ -96,7 +101,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
             style={styles.textLockDoor}
             testID={TESTID.TEXT_DOOR_LOOK_ON_OFF}
           >
-            {configuration.text_door_lock}{' '}
+            {text_door_lock}{' '}
           </Text>
         </View>
         <Switch
@@ -115,7 +120,7 @@ const CurtainButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         <RenderThreeButtonActions />
       </View>
       <View style={styles.lockSwitch}>
-        {configuration.is_display_lock &&
+        {is_display_lock &&
           itemLock(
             lock ? 'lock' : 'unlock',
             lock ? Colors.Primary : Colors.Gray6

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -7,6 +7,7 @@ import Text from '../Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './NumberUpDownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
+import { TESTID } from '../../configs/Constants';
 
 const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const { configuration, title } = actionGroup;
@@ -15,39 +16,39 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     max_value,
     min_value,
     text_format,
-    keep_track_config,
     config,
+    allow_config_store_value,
   } = configuration;
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
-  const [value, setValue] = useState((config && configValues[config]) || 28);
+  const [value, setValue] = useState();
+  const valueDefault = 28;
 
   useEffect(() => {
-    if (!keep_track_config) {
-      return;
-    }
     if (!config) {
+      setValue(valueDefault);
       return;
     }
 
     const configValue = configValues[config];
     if (configValue !== null && configValue !== undefined) {
       setValue(configValue);
+    } else {
+      setValue(valueDefault);
     }
-  }, [configValues, config, keep_track_config]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const doActionAndWatchConfig = useCallback(
-    (actionData, actionValue, actionName) => {
-      doAction(
-        actionData,
-        JSON.stringify({ temperature: actionValue }),
-        actionName
-      );
-      if (!sensor?.is_managed_by_backend) {
-        return;
+    async (actionData, actionValue, actionName) => {
+      const data = { temperature: actionValue };
+      if (allow_config_store_value && config) {
+        data.config_id = config;
+        data.value = actionValue;
       }
-      if (!keep_track_config) {
+      await doAction(actionData, JSON.stringify(data), actionName);
+      if (!sensor?.is_managed_by_backend) {
         return;
       }
       if (!config) {
@@ -59,11 +60,11 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         watchMultiConfigs([config]);
     },
     [
-      config,
       doAction,
-      keep_track_config,
-      sensor.is_managed_by_backend,
+      sensor?.is_managed_by_backend,
       sensor.device_type,
+      allow_config_store_value,
+      config,
     ]
   );
 
@@ -103,13 +104,23 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       )}
 
       <View style={styles.controlPannel}>
-        <TouchableOpacity style={styles.downButton} onPress={doActionDown}>
+        <TouchableOpacity
+          style={styles.downButton}
+          onPress={doActionDown}
+          testID={TESTID.NUMBER_ACTION_DOWN}
+        >
           <IconOutline name="down" size={32} color={Colors.Primary} />
         </TouchableOpacity>
 
-        <Text type="H2">{text_format.replace('{number}', value)}</Text>
+        <Text testID={'abcd'} type="H2">
+          {text_format.replace('{number}', value)}
+        </Text>
 
-        <TouchableOpacity style={styles.upButton} onPress={doActionUp}>
+        <TouchableOpacity
+          style={styles.upButton}
+          onPress={doActionUp}
+          testID={TESTID.NUMBER_ACTION_UP}
+        >
           <IconOutline name="up" size={32} color={Colors.Primary} />
         </TouchableOpacity>
       </View>

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/__test__/index.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import { Switch } from 'react-native';
 
 import AutoLock from '../index';
 import { mockSCStore } from '../../../../../context/mockStore';
@@ -38,6 +39,9 @@ describe('Test AutoLock', () => {
     });
 
     const instance = tree.root;
+    const switchs = instance.findByType(Switch);
+    await switchs.props.onValueChange();
+
     const { buttonEnable, buttonInstant, buttonRelockTiming } =
       getElement(instance);
 

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

@@ -17,7 +17,7 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const [isUnlock, setisUnlock] = useState(true);
   const [configValues] = useConfigGlobalState('configValues');
 
-  const handleActionSmartLock = useCallback(() => {
+  const handleActionSmartLock = useCallback(async () => {
     if (action_on_data && action_off_data) {
       if (isUnlock) {
         let actionName = `${
@@ -25,14 +25,14 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
         } ${actionGroup?.title?.toLowerCase()} lock`;
         actionName = actionName.replace(/\s+/g, ' ').trim();
         const dataLock = { door_lock: 0 };
-        doAction(action_on_data, JSON.stringify(dataLock), actionName);
+        await doAction(action_on_data, JSON.stringify(dataLock), actionName);
       } else {
         let actionName = `${
           sensor?.name
         } ${actionGroup?.title?.toLowerCase()} unlock`;
         actionName = actionName.replace(/\s+/g, ' ').trim();
         const dataUnlock = { door_lock: 1 };
-        doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
+        await doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
       }
       if (sensor?.is_managed_by_backend) {
         configuration.config &&

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

@@ -19,7 +19,7 @@ const ButtonWrapper = ({ item, textHeadline }) => {
 };
 
 const ItemPasscode = memo(({ route }) => {
-  const { item } = route.params;
+  const { item = {} } = route.params || {};
 
   return (
     <SafeAreaView style={styles.container}>

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/ItemPasscode.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+import ItemPasscode from '../ItemPasscode';
+
+const wrapComponent = (route = {}) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ItemPasscode route={route} />
+  </SCProvider>
+);
+
+describe('Test ItemPasscode', () => {
+  let tree;
+  test('test render without params', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(TouchableOpacities).toHaveLength(2);
+  });
+});

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/__test__/index.test.js

@@ -40,6 +40,7 @@ describe('Test SetupGeneratePasscode', () => {
     const changeDuration = instance.findAll(
       (item) => item.props.testID === TESTID.GENERATE_PASSCODE_SET_DURATION
     );
+
     return {
       changeName,
       changeTime,
@@ -58,5 +59,18 @@ describe('Test SetupGeneratePasscode', () => {
     expect(changeName[0]).toBeDefined();
     expect(changeTime[0]).toBeDefined();
     expect(changeDuration[0]).toBeDefined();
+
+    await changeDuration[0].props.onPressSetMinute();
+    await changeDuration[0].props.onPressSelectCircle();
+    await changeTime[0].props.onPressSetTime();
+
+    const wheelDateTimePicker = instance.findAll(
+      (item) =>
+        item.props.testID ===
+        `${TESTID.WHEEL_DATE_TIME_PICKER_BUTTON}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+    );
+    await wheelDateTimePicker[5].props.onClick();
+    await wheelDateTimePicker[11].props.onClick();
+    await wheelDateTimePicker[17].props.onClick();
   });
 });

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

@@ -11,8 +11,6 @@ const OnOffSimpleTemplate = ({
   triggerAction,
   actionGroup,
   disabled,
-  valueOfSwitch,
-  checkValueOfSwitch,
 }) => {
   return (
     <View style={styles.wrap}>
@@ -26,7 +24,7 @@ const OnOffSimpleTemplate = ({
           thumbColor={isOn ? Colors.White : Colors.Gray6}
           ios_backgroundColor={Colors.Gray4}
           onValueChange={triggerAction}
-          value={checkValueOfSwitch ? !!isOn : valueOfSwitch}
+          value={!!isOn}
           disabled={disabled}
         />
       )}

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

@@ -1,19 +1,10 @@
-import React, {
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
 import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
-import { SCContext } from '../../../context';
-import { Action } from '../../../context/actionType';
 
 const getComponent = (template) => {
   switch (template) {
@@ -30,13 +21,9 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const { action_data, action_on_data, action_off_data } = configuration;
   const [isOn, setIsOn] = useState(null);
-  const [valueOfSwitch, setValueOfSwitch] = useState(false);
-  const [checkValueOfSwitch, setCheckValueOfSwitch] = useState(true);
-  //checkValueOfSwitch to check the value real-time of Switch when re-entering the screen
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
-  const { setAction } = useContext(SCContext);
 
   const actionName = useCallback(
     (text) => {
@@ -47,62 +34,48 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     },
     [actionGroup?.title, sensor?.name]
   );
-  const triggerAction = useCallback(() => {
-    if (actionGroup?.template === 'OnOffSimpleActionTemplate') {
-      setAction(Action.IS_FULL_LOADING, true);
-    }
-    setCheckValueOfSwitch(false);
+  const triggerAction = useCallback(async () => {
     switch (sensor?.device_type) {
       case DEVICE_TYPE.ZIGBEE:
         if (action_on_data && action_off_data) {
           if (isOn) {
-            doAction(
+            await doAction(
               action_off_data,
               JSON.stringify({ state: 0 }),
               actionName('off')
             );
           } else {
-            doAction(
+            await doAction(
               action_on_data,
               JSON.stringify({ state: 1 }),
               actionName('on')
             );
           }
         }
-        return;
+        break;
       default:
         if (action_data) {
           if (isOn) {
-            doAction(action_data, false);
+            await doAction(action_data, false);
           } else {
-            doAction(action_data, true);
+            await doAction(action_data, true);
           }
         }
         if (action_on_data && action_off_data) {
-          setValueOfSwitch(!isOn);
           if (isOn) {
-            doAction(action_off_data, null, actionName('off'));
+            await doAction(action_off_data, null, actionName('off'));
           } else {
-            doAction(action_on_data, null, actionName('on'));
-          }
-        }
-        if (sensor?.is_managed_by_backend) {
-          configuration?.config &&
-            sensor?.device_type !== 'GOOGLE_HOME' &&
-            watchMultiConfigs([configuration?.config]);
-          if (actionGroup?.template === 'OnOffSimpleActionTemplate') {
-            const cleanTimeout = setTimeout(() => {
-              setAction(Action.IS_FULL_LOADING, false);
-              clearTimeout(cleanTimeout);
-            }, 2000);
+            await doAction(action_on_data, null, actionName('on'));
           }
-        } else {
-          setValueOfSwitch(isOn);
         }
-        return;
+        break;
+    }
+    if (sensor?.is_managed_by_backend) {
+      configuration?.config &&
+        sensor?.device_type !== 'GOOGLE_HOME' &&
+        watchMultiConfigs([configuration?.config]);
     }
   }, [
-    actionGroup.template,
     actionName,
     action_data,
     action_off_data,
@@ -112,7 +85,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     isOn,
     sensor?.device_type,
     sensor?.is_managed_by_backend,
-    setAction,
   ]);
 
   useEffect(() => {
@@ -150,8 +122,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
         triggerAction={triggerAction}
         actionGroup={actionGroup}
         disabled={!action_data && !action_on_data && !action_off_data}
-        valueOfSwitch={valueOfSwitch}
-        checkValueOfSwitch={checkValueOfSwitch}
       />
     </>
   );

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -92,7 +92,7 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       return t('not_available');
     }
     return selectedOption.text;
-  }, [configuration.config, selectedOption.text, t]);
+  }, [configuration?.config, selectedOption?.text, t]);
 
   const iconSvg = useMemo(() => {
     switch (icon) {