@eohjsc/react-native-smart-city 0.3.32 → 0.3.33

package/package.json

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

package/src/commons/Action/ItemQuickAction.js

@@ -53,7 +53,24 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus }) => {
   }, [sensor, configValues, statusCallback]);
   const userId = useSCContextSelector((state) => state?.auth.account.user.id);
   const onActionPress = useCallback(() => {
-    sendRemoteCommand(sensor, action, null, userId);
+    let data = null;
+    if (
+      action?.allow_config_store_value_id === sensor?.quick_action?.config_id
+    ) {
+      if (action?.name?.toLowerCase().includes('off')) {
+        data = {
+          config_id: action?.allow_config_store_value_id,
+          config_value: 0,
+        };
+      } else {
+        data = {
+          config_id: action?.allow_config_store_value_id,
+          config_value: 1,
+        };
+      }
+      data = JSON.stringify(data);
+    }
+    sendRemoteCommand(sensor, action, data, userId);
     setIsSendingCommand(true);
 
     if (!sensor.quick_action) {

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

@@ -41,10 +41,12 @@ describe('Test ItemQuickAction', () => {
 
   const sensor = {
     action: {
+      name: 'off',
       color: '#00979D',
       command_prefer_over_bluetooth: true,
       command_prefer_over_googlehome: false,
       command_prefer_over_internet: false,
+      allow_config_store_value_id: 51,
       id: 9,
     },
     quick_action: {
@@ -73,6 +75,7 @@ describe('Test ItemQuickAction', () => {
       command_prefer_over_bluetooth: true,
       command_prefer_over_googlehome: false,
       command_prefer_over_internet: false,
+      allow_config_store_value_id: 51,
       id: 10,
     },
     status: 'OFF',
@@ -136,7 +139,7 @@ describe('Test ItemQuickAction', () => {
     expect(mockSetState).toBeCalledWith(sensor.quick_action.off_action);
   });
 
-  test('render with icon_outlined poweroff', () => {
+  test('render with icon_outlined poweroff and action have allow_config_store_value_id', () => {
     const mockSetStatus = jest.fn();
     sensor.action.icon = null;
     act(() => {
@@ -162,7 +165,12 @@ describe('Test ItemQuickAction', () => {
     act(() => {
       buttonOnActionPress.props.onPress();
     });
-    expect(mockSendRemoteControl).toBeCalled();
+    expect(mockSendRemoteControl).toBeCalledWith(
+      sensor,
+      sensor.action,
+      JSON.stringify({ config_id: 51, config_value: 0 }),
+      undefined
+    );
     expect(mockSetState).toBeCalledTimes(1);
 
     jest.runAllTimers();
@@ -249,10 +257,12 @@ describe('Test ItemQuickAction', () => {
   test('trigger action with quick action no auto update', () => {
     const noAutoUpdateSensor = {
       action: {
+        name: 'on',
         color: '#00979D',
         command_prefer_over_bluetooth: true,
         command_prefer_over_googlehome: false,
         command_prefer_over_internet: false,
+        allow_config_store_value_id: 51,
         id: 9,
         icon: 'caret-up',
       },
@@ -297,6 +307,12 @@ describe('Test ItemQuickAction', () => {
     act(() => {
       buttonOnActionPress.props.onPress();
     });
+    expect(mockSendRemoteControl).toBeCalledWith(
+      noAutoUpdateSensor,
+      noAutoUpdateSensor.action,
+      JSON.stringify({ config_id: 51, config_value: 1 }),
+      undefined
+    );
     expect(mockSetState).toBeCalledTimes(1);
 
     jest.runAllTimers();

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -29,16 +29,19 @@ const NumberUpDownActionTemplate = ({
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const valueDefault = 28;
-  const [value, setValue] = useState(valueDefault);
+  const [value, setValue] = useState();
 
   useEffect(() => {
     if (!config) {
+      setValue(valueDefault);
       return;
     }
 
     const configValue = configValues[config];
     if (configValue?.value !== null && configValue?.value !== undefined) {
       setValue(configValue.value);
+    } else {
+      setValue(valueDefault);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(configValues)]);
@@ -50,7 +53,7 @@ const NumberUpDownActionTemplate = ({
         data = { temperature: actionValue };
         if (allow_config_store_value && config) {
           data.config_id = config;
-          data.value = actionValue;
+          data.config_value = actionValue;
         }
         data = JSON.stringify(data);
       }

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

@@ -22,19 +22,25 @@ const getComponent = (template) => {
 
 const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   const { configuration = {} } = actionGroup;
-  const { action_data, action_on_data, action_off_data } = configuration;
+  const {
+    action_data,
+    action_on_data,
+    action_off_data,
+    is_on_value,
+    config,
+    allow_config_store_value,
+  } = configuration;
 
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
 
   const getIsOnValue = useCallback(() => {
-    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?.value);
     }
     return !!configValue?.value;
-  }, [configValues, configuration]);
+  }, [config, configValues, is_on_value]);
 
   const [isOn, setIsOn] = useState(false);
   const [tempIsOn, setTempIsOn] = useState(getIsOnValue());
@@ -49,10 +55,21 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
     switch (sensor?.device_type) {
       case DEVICE_TYPE.ZIGBEE:
         if (action_on_data && action_off_data) {
+          let data;
           if (isOn) {
-            await doAction(action_off_data, JSON.stringify({ state: 0 }));
+            data = { state: 0 };
+            if (allow_config_store_value && config) {
+              data.config_id = config;
+              data.config_value = 0;
+            }
+            await doAction(action_off_data, JSON.stringify(data));
           } else {
-            await doAction(action_on_data, JSON.stringify({ state: 1 }));
+            data = { state: 1 };
+            if (allow_config_store_value && config) {
+              data.config_id = config;
+              data.config_value = 1;
+            }
+            await doAction(action_on_data, JSON.stringify(data));
           }
         }
         break;
@@ -81,22 +98,23 @@ const OnOffTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
     }
     updateStatusFromPusher();
     if (sensor?.is_managed_by_backend) {
-      configuration?.config &&
-        sensor?.device_type === DEVICE_TYPE.LG_THINQ &&
-        watchMultiConfigs([configuration?.config]);
+      if (config && sensor.device_type === DEVICE_TYPE.LG_THINQ) {
+        watchMultiConfigs([config]);
+      }
     }
   }, [
+    allow_config_store_value,
+    config,
     action_data,
     action_off_data,
     action_on_data,
-    configuration?.config,
     doAction,
     isOn,
     sensor?.device_type,
     sensor?.is_managed_by_backend,
   ]);
 
-  useUnwatchLGDeviceConfigControl(sensor, [configuration?.config]);
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
 
   useEffect(() => {
     setIsOn(getIsOnValue());

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -17,8 +17,8 @@ import SvgDoorState from '../../../assets/images/Device/door-state.svg';
 import SvgCurrentState from '../../../assets/images/Device/current-state.svg';
 import SvgWindStrength from '../../../assets/images/Device/wind-strength.svg';
 
-function getOptionValue(option) {
-  if (option.value_text) {
+function getOptionValue(option, allow_config_store_value) {
+  if (option.value_text && !allow_config_store_value) {
     return option.value_text;
   }
   return option.value_int;
@@ -38,6 +38,7 @@ const OptionsDropdownActionTemplate = ({
     icon,
     icon_outlined,
     config,
+    allow_config_store_value,
   } = configuration;
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
@@ -50,13 +51,13 @@ const OptionsDropdownActionTemplate = ({
 
     for (let i = 0; i < options.length; i++) {
       const option = options[i];
-      const value = getOptionValue(option);
+      const value = getOptionValue(option, allow_config_store_value);
       if (value === currentValue) {
         return option;
       }
     }
     return options[0];
-  }, [configValues, config, options]);
+  }, [configValues, config, options, allow_config_store_value]);
 
   const { stateAlert, hideAlertAction, onShowAlert } = useDropdownAction();
   const [selectedIndex, setSelectedIndex] = useState(
@@ -69,13 +70,18 @@ const OptionsDropdownActionTemplate = ({
 
   const onDone = useCallback(() => {
     const newOption = options[selectedIndex];
-    const value = getOptionValue(newOption);
+    const value = getOptionValue(newOption, allow_config_store_value);
+
+    let data = { level: value, key_code: newOption?.value_int };
+    if (allow_config_store_value && config) {
+      data.config_id = config;
+      data.config_value = newOption?.value_int;
+    }
+    data = JSON.stringify(data);
 
-    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);
     if (sensor?.is_managed_by_backend) {
       config &&
@@ -84,8 +90,9 @@ const OptionsDropdownActionTemplate = ({
     }
     hideAlertAction();
   }, [
-    action_data,
     config,
+    allow_config_store_value,
+    action_data,
     doAction,
     hideAlertAction,
     options,

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -34,20 +34,34 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
     icon_outlined,
     action_data,
     config,
+    is_on_value,
+    allow_config_store_value,
   } = item;
   const buttonOnOffStyle = active ? buttonStyle.ON : buttonStyle.OFF;
   const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
-
   const doActionAndWatchConfig = useCallback(
     (actionData) => {
-      doAction(actionData, null);
+      let data = {};
+      if (allow_config_store_value && config) {
+        data = JSON.stringify({ config_id: config, config_value: is_on_value });
+      } else {
+        data = null;
+      }
+      doAction(actionData, data);
       if (sensor?.is_managed_by_backend) {
-        config &&
-          sensor.device_type === DEVICE_TYPE.LG_THINQ &&
+        if (config && sensor.device_type === DEVICE_TYPE.LG_THINQ) {
           watchMultiConfigs([config]);
+        }
       }
     },
-    [config, doAction, sensor?.is_managed_by_backend, sensor.device_type]
+    [
+      allow_config_store_value,
+      config,
+      doAction,
+      sensor?.is_managed_by_backend,
+      sensor.device_type,
+      is_on_value,
+    ]
   );
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);

package/src/commons/ActionTemplate/OnOffButtonAction.js

@@ -1,9 +1,10 @@
 import React, { memo, useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import Text from '../Text';
 import styles from './OnOffButtonActionStyles';
 
-const OnOffButtonAction = ({ configuration, onPress, template }) => {
+const OnOffButtonAction = ({ title, configuration, onPress, template }) => {
   const { text_on, text_off, action_on, action_off } = configuration;
   const onPressActionOn = useCallback(() => {
     onPress &&
@@ -26,13 +27,21 @@ const OnOffButtonAction = ({ configuration, onPress, template }) => {
   return (
     <>
       <TouchableOpacity onPress={onPressActionOn}>
-        <Text type="H4" style={styles.textwithline}>
-          {text_on}
+        <Text
+          type="H4"
+          style={styles.textwithline}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {title} {text_on}
         </Text>
       </TouchableOpacity>
       <TouchableOpacity onPress={onPressActionOff}>
-        <Text type="H4" style={styles.textwithline}>
-          {text_off}
+        <Text
+          type="H4"
+          style={styles.textwithline}
+          accessibilityLabel={AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE}
+        >
+          {title} {text_off}
         </Text>
       </TouchableOpacity>
     </>

package/src/commons/ActionTemplate/__test__/OnOffButtonAction.test.js

@@ -5,10 +5,17 @@ import { TouchableOpacity } from 'react-native';
 import OnOffButtonAction from '../OnOffButtonAction';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import Text from '../../Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 
 const wrapComponent = (configuration, onPress) => (
   <SCProvider initState={mockSCStore({})}>
-    <OnOffButtonAction configuration={configuration} onPress={onPress} />
+    <OnOffButtonAction
+      configuration={configuration}
+      onPress={onPress}
+      title={'Cong tac 1'}
+      template={'on_off_button_action_template'}
+    />
   </SCProvider>
 );
 
@@ -16,7 +23,12 @@ describe('Test OnOffButtonAction', () => {
   let tree;
 
   test('test onPress', () => {
-    const configuration = {};
+    const configuration = {
+      text_on: 'On',
+      text_off: 'Off',
+      action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+      action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+    };
     const mockFuntion = jest.fn();
     act(() => {
       tree = renderer.create(wrapComponent(configuration, mockFuntion));
@@ -30,5 +42,14 @@ describe('Test OnOffButtonAction', () => {
       touchOpacity[1].props.onPress();
     });
     expect(mockFuntion).toHaveBeenCalled();
+
+    const textTitle = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_OFF_BUTTON_ACTION_TITLE && el.type === Text
+    );
+    expect(textTitle).toHaveLength(2);
+    expect(textTitle[0].props.children).toEqual(['Cong tac 1', ' ', 'On']);
+    expect(textTitle[1].props.children).toEqual(['Cong tac 1', ' ', 'Off']);
   });
 });

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -93,12 +93,14 @@ describe('Test ActionTemplate', () => {
     act(() => {
       threeButtonAction.props.onPress({
         name: 'OPEN',
+        action_name: 'OPEN',
         action: '94ae262d-46e3-42ff-9d10-516831ecc830',
         template: 'three_button_action_template',
       });
     });
     expect(mockOnSelectAction).toBeCalledWith({
       action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+      action_name: 'OPEN',
       data: null,
       template: 'three_button_action_template',
     });

package/src/commons/ActionTemplate/index.js

@@ -25,6 +25,7 @@ const ActionTemplate = memo(({ data, onSelectAction }) => {
       setActionName(action?.name);
       onSelectAction &&
         onSelectAction({
+          action_name: action?.name,
           action: action?.action,
           data: null,
           template: action?.template,

package/src/commons/Automate/ItemAutomate.js

@@ -13,6 +13,7 @@ const ItemAutomate = ({
   textCondition,
   index,
   setSelectedIndex,
+  onPress,
 }) => {
   const t = useTranslations();
   const item = AUTOMATES[type];
@@ -30,13 +31,21 @@ const ItemAutomate = ({
   }, [isItemOneTap, isSelected, item?.explanation, t, textCondition]);
 
   const handleSelectIndex = useCallback(() => {
+    if (onPress) {
+      onPress();
+      return;
+    }
+    if (!setSelectedIndex) {
+      return;
+    }
+
     setSelectedIndex((currentIndex) => {
       if (currentIndex !== index) {
         return index;
       }
       return -1;
     });
-  }, [index, setSelectedIndex]);
+  }, [index, setSelectedIndex, onPress]);
 
   return (
     <TouchableOpacity

package/src/commons/OneTapTemplate/NumberUpDownActionTemplate.js

@@ -28,7 +28,7 @@ const NumberUpDownActionTemplate = memo(({ data, onSelectAction }) => {
       setValue(valueDefault);
       return;
     }
-    const configValue = configValues[config];
+    const configValue = configValues[config]?.value;
     if (configValue !== null && configValue !== undefined) {
       setValue(configValue);
     } else {

package/src/commons/Tabbar/__test__/index.test.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import Tabbar from '..';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Tabbar {...props} />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+describe('Test HanetCameraDetail', () => {
+  Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
+  let tree, props;
+
+  beforeEach(() => {
+    props = {
+      state: {
+        index: 100,
+        routes: [
+          {
+            key: 'key1',
+            name: 'route1',
+          },
+          {
+            key: 'key2',
+            name: 'route2',
+          },
+          {
+            key: 'key3',
+            name: 'route3',
+          },
+        ],
+      },
+      descriptors: {
+        key1: {
+          options: {
+            tabBarLabel: 'label',
+            title: 'title',
+            isMainSource: true,
+            tabOffSetValue: 100,
+          },
+        },
+        key2: {
+          options: {
+            tabBarLabel: undefined,
+            title: 'title',
+            isMainSource: true,
+            tabOffSetValue: 100,
+          },
+        },
+        key3: {
+          options: {
+            tabBarLabel: undefined,
+            title: undefined,
+            isMainSource: true,
+            tabOffSetValue: 100,
+          },
+        },
+      },
+      navigation: {
+        navigate: jest.fn(),
+        emit: jest.fn(),
+      },
+    };
+  });
+
+  test('Test render HanetCameraDetail', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(3);
+  });
+});

package/src/configs/AccessibilityLabel.js

@@ -520,6 +520,9 @@ export default {
   NUMBER_ACTION_UP: 'NUMBER_ACTION_UP',
   NUMBER_ACTION_DOWN: 'NUMBER_ACTION_DOWN',
 
+  // OnOffButtonAction
+  ON_OFF_BUTTON_ACTION_TITLE: 'ON_OFF_BUTTON_ACTION_TITLE',
+
   // Add New Device LG
   ADD_NEW_DEVICE_LG_ADD: 'ADD_NEW_DEVICE_LG_ADD',
   ADD_NEW_DEVICE_LG_THEN_SELECT: 'ADD_NEW_DEVICE_LG_THEN_SELECT',

package/src/hoc/__test__/withRemoteControl.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { withRemoteControl } from '../index';
+import { SCProvider } from '../../context';
+import { mockSCStore } from '../../context/mockStore';
+
+describe('Test withRemoteControl', () => {
+  let tree;
+
+  it('test send remote command action null', async () => {
+    const Component = () => <></>;
+    const WrappedComponent = withRemoteControl(Component);
+    await act(async () => {
+      tree = renderer.create(
+        <SCProvider initState={mockSCStore({})}>
+          <WrappedComponent />
+        </SCProvider>
+      );
+    });
+    const instance = tree.root;
+    const _Component = instance.findByType(Component);
+    expect(_Component.props.sendRemoteCommand).toBeDefined();
+  });
+});

package/src/hooks/Common/__test__/useAndroidTranslucentStatusBar.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { renderHook } from '@testing-library/react-hooks';
+import { useAndroidTranslucentStatusBar } from '../index';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const mockedSetAction = jest.fn();
+
+const wrapper = ({ children }) => <SCProvider>{children}</SCProvider>;
+
+const mockUseContext = jest.fn().mockImplementation(() => ({
+  stateData: mockSCStore({}),
+  setAction: mockedSetAction,
+}));
+
+React.useContext = mockUseContext;
+
+const mockAddListener = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      addListener: mockAddListener,
+    }),
+  };
+});
+
+describe('test useAndroidTranslucentStatusBar', () => {
+  beforeEach(() => {
+    mockAddListener.mockClear();
+  });
+
+  test('test useAndroidTranslucentStatusBar android', () => {
+    Platform.OS = 'android';
+    renderHook(
+      () => useAndroidTranslucentStatusBar({ background: '#ffffff' }),
+      {
+        wrapper,
+      }
+    );
+    expect(mockAddListener).not.toBeCalled();
+  });
+
+  test('test useAndroidTranslucentStatusBar ios', () => {
+    Platform.OS = 'ios';
+    renderHook(
+      () => useAndroidTranslucentStatusBar({ background: '#ffffff' }),
+      {
+        wrapper,
+      }
+    );
+    expect(mockAddListener).not.toBeCalled();
+  });
+});