@eohjsc/react-native-smart-city 0.2.91 → 0.2.92

package/package.json

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

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -1,12 +1,15 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useState, useEffect, useMemo } 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';
 
-const ColorPickerTemplate = memo(({ actionGroup, doAction }) => {
+const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
-  const [valueComplete, setValueComplete] = useState(0);
+  const [valueColorComplete, setValueColorComplete] = useState('');
   const [isFirstColor, setIsFirstColor] = useState(false);
+  const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeColor = useCallback(
     (color) => {
@@ -14,35 +17,38 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction }) => {
         setIsFirstColor(true);
         return;
       }
-      setValueComplete(color);
-      doAction(configuration?.action_color_data, `{"value":"${color}"}`);
+      doAction(
+        configuration?.action_color_data,
+        JSON.stringify({ value: color })
+      );
     },
     [configuration?.action_color_data, doAction, isFirstColor]
   );
+  const valueColor = useMemo(() => {
+    return valueColorComplete || '';
+  }, [valueColorComplete]);
 
-  const PreventColorPicker = useCallback(
-    ({ style, color, onChangeComplete, props }) => {
-      return (
-        <ColorPicker
-          style={style}
-          sliderHidden={true}
-          swatches={false}
-          color={color}
-          onColorChangeComplete={onChangeComplete}
-          thumbSize={16}
-          {...props}
-        />
-      );
-    },
-    []
-  );
+  useEffect(() => {
+    const { config } = configuration;
+    const configValue = configValues[config];
+    setValueColorComplete(configValue);
+  }, [configuration.config, configValues, configuration]);
+
+  useEffect(() => {
+    if (sensor?.is_managed_by_backend) {
+      watchMultiConfigs([configuration.config]);
+    }
+  }, [sensor, configuration.config]);
 
   return (
     <View style={styles.viewPickColor}>
-      <PreventColorPicker
+      <ColorPicker
         style={styles.colorPicker}
-        color={valueComplete}
-        onChangeComplete={(color) => onChangeColor(color)}
+        sliderHidden={true}
+        swatches={false}
+        color={valueColor}
+        onColorChangeComplete={onChangeColor}
+        thumbSize={16}
       />
     </View>
   );

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { Section } from '../../Section';
@@ -6,14 +6,58 @@ import Text from '../../Text';
 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 { watchMultiConfigs } from '../../../iot/Monitor';
+import { TESTID } from '../../../configs/Constants';
 
 const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();
-  const [active, setActive] = useState(true);
+  const { configuration } = actionGroup;
+  const { action_on_data, action_off_data } = configuration;
+  const [isUnlock, setisUnlock] = useState(true);
+  const [configValues] = useConfigGlobalState('configValues');
 
-  const handleClickButton = useCallback(() => {
-    setActive(!active);
-  }, [active]);
+  const handleActionSmartLock = useCallback(() => {
+    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 };
+        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);
+      }
+      if (sensor?.is_managed_by_backend) {
+        configuration.config && watchMultiConfigs([configuration.config]);
+      }
+    }
+  }, [
+    actionGroup?.title,
+    action_off_data,
+    action_on_data,
+    doAction,
+    isUnlock,
+    sensor?.name,
+    configuration,
+    sensor?.is_managed_by_backend,
+  ]);
+
+  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));
+    } else {
+      setisUnlock(configValue);
+    }
+  }, [configValues, configuration]);
 
   return (
     <SafeAreaView style={styles.container}>
@@ -22,21 +66,25 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
           <View style={styles.wrapController}>
             <Text style={styles.textController}>{t('controller')}</Text>
           </View>
-          <View style={styles.wrapButtonSmartLock}>
-            <TouchableOpacity onPress={handleClickButton}>
-              {active ? (
+          <View>
+            <TouchableOpacity
+              onPress={handleActionSmartLock}
+              testID={TESTID.BUTTON_ON_OFF}
+              style={styles.wrapButtonSmartLock}
+            >
+              {isUnlock ? (
                 <ButtonLock style={styles.buttonSmartLock} />
               ) : (
                 <ButtonUnLock style={styles.buttonSmartLock} />
               )}
+              <Text style={styles.textSmartLock}>
+                {t(isUnlock ? 'lock' : 'unlock')}
+              </Text>
             </TouchableOpacity>
-            <Text style={styles.textSmartLock}>
-              {active ? t('lock') : t('unlock')}
-            </Text>
           </View>
           <View style={styles.wrapStatus}>
             <Text style={styles.textStatus}>
-              {active ? t('door_is_open') : t('door_is_close')}
+              {t(isUnlock ? 'door_is_open' : 'door_is_close')}
             </Text>
           </View>
         </Section>

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+
+import { mockSCStore } from '../../../../../context/mockStore';
+import { TESTID } from '../../../../../configs/Constants';
+import { SCProvider } from '../../../../../context';
+import PasscodeList from '../index';
+import { TouchableOpacity } from 'react-native';
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <PasscodeList />
+  </SCProvider>
+);
+
+describe('Test SetupGeneratePasscode', () => {
+  let tree;
+
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
+  test('render PasscodeList', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const passcode_list = instance.findAll(
+      (item) =>
+        item.props.testID === TESTID.PASSCODE_LIST &&
+        item.type === TouchableOpacity
+    );
+
+    expect(passcode_list).toHaveLength(3);
+  });
+});

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

@@ -9,6 +9,7 @@ import t from '../../../../hooks/Common/useTranslations';
 import { Colors } from '../../../../configs';
 import Routes from '../../../../utils/Route';
 import styles from './PasscodeListStyles';
+import { TESTID } from '../../../../configs/Constants';
 
 const PasscodeList = memo(() => {
   const navigation = useNavigation();
@@ -50,6 +51,7 @@ const PasscodeList = memo(() => {
           <TouchableOpacity
             onPress={handleClickButton(item)}
             style={styles.buttonWrapper}
+            testID={TESTID.PASSCODE_LIST}
           >
             <View>
               <Text style={styles.textCode}>{item.code}</Text>

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

@@ -24,48 +24,69 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
 
+  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(() => {
-    if (action_data) {
-      if (isOn) {
-        doAction(action_data, false);
-      } else {
-        doAction(action_data, true);
-      }
-    }
-    if (action_on_data && action_off_data) {
-      if (isOn) {
-        let actionName = `${
-          sensor?.name
-        } ${actionGroup?.title?.toLowerCase()} off`;
-        actionName = actionName.replace(/\s+/g, ' ').trim();
-        doAction(action_off_data, null, actionName);
-      } else {
-        let actionName = `${
-          sensor?.name
-        } ${actionGroup?.title?.toLowerCase()} on`;
-        actionName = actionName.replace(/\s+/g, ' ').trim();
-        doAction(action_on_data, null, actionName);
-      }
-    }
-    if (sensor?.is_managed_by_backend) {
-      configuration.config && watchMultiConfigs([configuration.config]);
+    switch (sensor?.device_type) {
+      case DEVICE_TYPE.ZIGBEE:
+        if (action_on_data && action_off_data) {
+          if (isOn) {
+            doAction(
+              action_off_data,
+              JSON.stringify({ state: 0 }),
+              actionName('off')
+            );
+          } else {
+            doAction(
+              action_on_data,
+              JSON.stringify({ state: 1 }),
+              actionName('on')
+            );
+          }
+        }
+        return;
+      default:
+        if (action_data) {
+          if (isOn) {
+            doAction(action_data, false);
+          } else {
+            doAction(action_data, true);
+          }
+        }
+        if (action_on_data && action_off_data) {
+          if (isOn) {
+            doAction(action_off_data, null, actionName('off'));
+          } else {
+            doAction(action_on_data, null, actionName('on'));
+          }
+        }
+        if (sensor?.is_managed_by_backend) {
+          configuration.config && watchMultiConfigs([configuration.config]);
+        }
+        return;
     }
   }, [
-    actionGroup?.title,
+    actionName,
     action_data,
     action_off_data,
     action_on_data,
     configuration.config,
     doAction,
     isOn,
+    sensor?.device_type,
     sensor?.is_managed_by_backend,
-    sensor?.name,
   ]);
 
   useEffect(() => {
     const { is_on_value, config } = configuration;
     const configValue = configValues[config];
-
     if (is_on_value && is_on_value.length > 0) {
       setIsOn(is_on_value.includes(configValue));
       return;
@@ -82,7 +103,6 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return;
     }
-
     if (sensor?.is_managed_by_backend) {
       watchMultiConfigs([configuration.config]);
     }

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -1,23 +1,26 @@
-import React, { memo, useCallback, useState, useMemo } from 'react';
+import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
 import { View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './SliderRangeTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
-import Slider from 'react-native-slider';
+import SliderRange from 'react-native-slider';
+import { watchMultiConfigs } from '../../iot/Monitor';
+import { useConfigGlobalState } from '../../iot/states';
 
-const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
+const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const t = useTranslations();
   const { configuration } = actionGroup;
   const [valueBrightness, setValueBrightness] = useState(0);
+  const [configValues] = useConfigGlobalState('configValues');
 
   const onChangeBrightness = useCallback(
     (value) => {
       setValueBrightness(value);
       doAction(
         configuration?.action_brightness_data,
-        `{"value_brness":${value}}`
+        JSON.stringify({ value_brness: value })
       );
     },
     [configuration?.action_brightness_data, doAction]
@@ -27,6 +30,17 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
     return valueBrightness || 0;
   }, [valueBrightness]);
 
+  useEffect(() => {
+    const { config } = configuration;
+    const configValue = configValues[config];
+    setValueBrightness(configValue);
+  }, [configuration.config, configValues, configuration]);
+
+  useEffect(() => {
+    if (sensor?.is_managed_by_backend) {
+      watchMultiConfigs([configuration.config]);
+    }
+  }, [sensor, configuration.config]);
   return (
     <View style={styles.viewBrightness}>
       <View style={styles.LeftBrightness}>
@@ -37,7 +51,7 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction }) => {
       </View>
       <View style={styles.RightBrightness}>
         <View style={styles.slider}>
-          <Slider
+          <SliderRange
             value={valueBrightness}
             onSlidingComplete={onChangeBrightness}
             onValueChange={setValueBrightness}

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

@@ -0,0 +1,74 @@
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import ColorPickerTemplate from '../ColorPickerTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { useConfigGlobalState } from '../../../iot/states';
+import ColorPicker from 'react-native-wheel-color-picker';
+
+jest.mock('../../../iot/Monitor');
+const mockDoAction = jest.fn();
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn((init) => [init, mockSetState]),
+    memo: (x) => x,
+  };
+});
+const wrapComponent = (actionGroup, doAction, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ColorPickerTemplate
+      actionGroup={actionGroup}
+      doAction={doAction}
+      sensor={sensor}
+    />
+  </SCProvider>
+);
+
+describe('Test ColorPickerTemplate', () => {
+  let wrapper;
+  let actionGroup;
+
+  const action_color_data = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: false,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: true,
+    googlehome_actions: [],
+  };
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    mockDoAction.mockClear();
+    actionGroup = {
+      template: 'ColorPickerTemplate',
+      configuration: {
+        config: 5,
+        action_color_data: action_color_data,
+      },
+      title: '',
+    };
+  });
+
+  test('render template ColorPickerTemplate', async () => {
+    useConfigGlobalState.mockImplementation(() => [{}, jest.fn()]);
+    const sensor = {
+      is_managed_by_backend: true,
+      name: 'Sensor',
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const picker = instance.findAllByType(ColorPicker);
+    expect(picker).toHaveLength(1);
+    await act(async () => {
+      await picker[0].props.onColorChangeComplete();
+    });
+  });
+});

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

@@ -0,0 +1,107 @@
+import { TESTID } from '../../../configs/Constants';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import OnOffSmartLock from '../OnOffSmartLock/OnOffSmartLock';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { useConfigGlobalState } from '../../../iot/states';
+
+jest.mock('../../../iot/Monitor');
+const mockDoAction = jest.fn();
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
+
+const wrapComponent = (actionGroup, doAction, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OnOffSmartLock
+      actionGroup={actionGroup}
+      doAction={doAction}
+      sensor={sensor}
+    />
+  </SCProvider>
+);
+
+describe('Test OnOffTemplate', () => {
+  let wrapper;
+  let actionGroup;
+
+  const action_on_data = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: true,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: false,
+    googlehome_actions: [],
+    icon: 'caret-up',
+    id: 20,
+    key: 'key-2',
+  };
+  const action_off_data = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: true,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: false,
+    googlehome_actions: [],
+    icon: 'caret-up',
+    id: 20,
+    key: 'key-3',
+  };
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    mockDoAction.mockClear();
+    actionGroup = {
+      template: 'OnOffSmartLockActionTemplate',
+      configuration: {
+        config: 5,
+        action_on_data: action_on_data,
+        action_off_data: action_off_data,
+        icon: 'up',
+        is_on_value: '2',
+      },
+      title: 'smartlock',
+    };
+  });
+
+  test('render with template OnOffSmartLockActionTemplate doAction lock', async () => {
+    useConfigGlobalState.mockImplementation(() => [{ 5: 2 }, jest.fn()]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_ON_OFF
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(mockDoAction).toBeCalledWith(
+      action_on_data,
+      '{"door_lock":0}',
+      'Sensor smartlock lock'
+    );
+  });
+
+  test('render with template OnOffSmartLockActionTemplate doAction unlock', async () => {
+    actionGroup.configuration.is_on_value = null;
+    const sensor = { is_managed_by_backend: false, name: 'Sensor' };
+    useConfigGlobalState.mockImplementation(() => [{ 5: 0 }, jest.fn()]);
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_ON_OFF
+    );
+    await act(async () => {
+      await button.props.onPress();
+    });
+    expect(mockDoAction).toBeCalledWith(
+      action_off_data,
+      '{"door_lock":1}',
+      'Sensor smartlock unlock'
+    );
+  });
+});

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

@@ -0,0 +1,71 @@
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import SliderRangeTemplate from '../SliderRangeTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { useConfigGlobalState } from '../../../iot/states';
+import SliderRange from 'react-native-slider';
+
+jest.mock('../../../iot/Monitor');
+const mockDoAction = jest.fn();
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: jest.fn(),
+}));
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn((init) => [init, mockSetState]),
+    memo: (x) => x,
+  };
+});
+const wrapComponent = (actionGroup, doAction, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SliderRangeTemplate
+      actionGroup={actionGroup}
+      doAction={doAction}
+      sensor={sensor}
+    />
+  </SCProvider>
+);
+
+describe('Test SliderRangeTemplate', () => {
+  let wrapper;
+  let actionGroup;
+
+  const action_brightness_data = {
+    color: '#00979D',
+    command_prefer_over_bluetooth: false,
+    command_prefer_over_googlehome: false,
+    command_prefer_over_internet: true,
+    googlehome_actions: [],
+  };
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    mockDoAction.mockClear();
+    actionGroup = {
+      template: 'ColorPickerTemplate',
+      configuration: {
+        config: 5,
+        action_brightness_data: action_brightness_data,
+      },
+      title: '',
+    };
+  });
+
+  test('render template SliderRangeTemplate', async () => {
+    useConfigGlobalState.mockImplementation(() => [{}, jest.fn()]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const silderRange = instance.findAllByType(SliderRange);
+    expect(silderRange).toHaveLength(1);
+    await act(async () => {
+      await silderRange[0].props.onSlidingComplete();
+    });
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -23,7 +23,7 @@ export const getActionComponent = (template) => {
     case 'OnOffButtonActionTemplate':
     case 'OnOffSimpleActionTemplate':
       return OnOffTemplate;
-    case 'OnOffButtonActionSmartLock':
+    case 'OnOffSmartLockActionTemplate':
       return OnOffSmartLock;
     case 'one_button_action_template': // todo refactor later with backend
     case 'OneBigButtonActionTemplate':