@eohjsc/react-native-smart-city 0.2.90 → 0.2.93

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { Switch, TouchableOpacity, View } from 'react-native';
+import { Icon } from '@ant-design/react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { IconOutline } from '@ant-design/icons-react-native';
@@ -167,18 +168,21 @@ const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
       <TouchableOpacity style={styles.timerButton} onPress={onShowTimer}>
         <View style={styles.timerTitle}>
           <Text>{title}</Text>
-          {textTimer && (
-            <Text type="Label" color={Colors.Gray7}>
-              {textTimer}
-            </Text>
+          {configuration.config_hour && configuration.config_minute && (
+            <View style={styles.wrapTimer}>
+              <Icon style={styles.iconClockCircle} name={'clock-circle'} />
+              <Text type="Label" color={Colors.Gray7}>
+                {textTimer ? textTimer : t('set_time')}
+              </Text>
+            </View>
           )}
         </View>
-        <View style={styles.timerButton}>
-          <IconOutline name="right" size={20} />
-          <Text color={Colors.Gray11} type="Label">
-            |
-          </Text>
-        </View>
+        {configuration.config_hour && !configuration.config_minute && (
+          <View style={styles.timerButton}>
+            <Text style={styles.textTimerEndLine}>{textTimer}</Text>
+            <IconOutline name="right" size={20} />
+          </View>
+        )}
       </TouchableOpacity>
       {configuration.config_hour && configuration.config_minute && (
         <Switch

package/src/commons/ActionGroup/TimerActionTemplateStyles.js

@@ -24,4 +24,16 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  wrapTimer: {
+    paddingTop: 10,
+    flexDirection: 'row',
+  },
+  iconClockCircle: {
+    fontSize: 16,
+    color: Colors.Black,
+    paddingRight: 15,
+  },
+  textTimerEndLine: {
+    paddingRight: 10,
+  },
 });

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

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    marginHorizontal: 20,
+    marginTop: 20,
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bigCircle: {
+    backgroundColor: Colors.Gray2,
+    width: 160,
+    height: 160,
+    borderRadius: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 10,
+
+    shadowColor: Colors.Gray11,
+    shadowOffset: {
+      width: 0,
+      height: 8,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 5,
+  },
+  smallCircle: {
+    backgroundColor: Colors.White,
+    width: 130,
+    height: 130,
+    borderRadius: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    shadowColor: Colors.Black,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 2,
+  },
+  textBig: {
+    marginTop: 18,
+    fontSize: 16,
+    color: Colors.Gray8,
+  },
+});

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

@@ -0,0 +1,170 @@
+import { Icon } from '@ant-design/react-native';
+import React, { memo, useState, useCallback, useEffect } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Colors } from '../../../configs';
+import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import { useConfigGlobalState } from '../../../iot/states';
+import Text from '../../Text';
+import styles from './TwoButtonTemplateStyles';
+
+const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
+  const { configuration } = actionGroup;
+  const { button1, button2 } = configuration;
+  const [isOn, setIsOn] = useState(true);
+  const [isStart, setIsStart] = useState(true);
+  // eslint-disable-next-line no-unused-vars
+  const [configValues] = useConfigGlobalState('configValues');
+  const isLight = false;
+
+  const actionName = useCallback(
+    (text) => {
+      const actionNameType = `${
+        sensor?.name
+      } ${actionGroup?.title?.toLowerCase()} ${text}`;
+      return actionNameType.replace(/\s+/g, ' ').trim();
+    },
+    [actionGroup?.title, sensor?.name]
+  );
+
+  const triggerAction1 = useCallback(() => {
+    if (button1?.action_on_data && button1?.action_off_data) {
+      if (isOn) {
+        doAction(button1?.action_off_data, null, actionName('off'));
+      } else {
+        doAction(button1?.action_on_data, null, actionName('on'));
+      }
+    }
+    if (sensor?.is_managed_by_backend) {
+      configuration.config && watchMultiConfigs([configuration.config]);
+    }
+  }, [
+    actionName,
+    button1,
+    configuration.config,
+    doAction,
+    isOn,
+    sensor?.is_managed_by_backend,
+  ]);
+
+  const triggerAction2 = useCallback(() => {
+    if (button2?.action_on_data && button2?.action_off_data) {
+      if (isStart) {
+        doAction(button2?.action_off_data, null, actionName('stop'));
+      } else {
+        doAction(button2?.action_on_data, null, actionName('start'));
+      }
+    }
+    if (sensor?.is_managed_by_backend) {
+      configuration.config && watchMultiConfigs([configuration.config]);
+    }
+  }, [
+    actionName,
+    button2?.action_off_data,
+    button2?.action_on_data,
+    configuration.config,
+    doAction,
+    isStart,
+    sensor?.is_managed_by_backend,
+  ]);
+
+  useEffect(() => {
+    const configValue1 = configValues[button1?.config];
+    const configValue2 = configValues[button2?.config];
+    if (button1?.is_on_value && button1?.is_on_value.length > 0) {
+      setIsOn(button1?.is_on_value.includes(configValue1));
+      return;
+    }
+    if (button2?.is_on_value && button2?.is_on_value.length > 0) {
+      setIsStart(button2?.is_on_value.includes(configValue2));
+      return;
+    }
+
+    setIsOn(configValue1);
+    setIsStart(configValue2);
+  }, [
+    configuration.config,
+    configValues,
+    configuration.is_on_value,
+    configuration,
+    button1?.config,
+    button1?.is_on_value,
+    button2?.config,
+    button2?.is_on_value,
+  ]);
+
+  useEffect(() => {
+    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+      return;
+    }
+    if (sensor?.is_managed_by_backend) {
+      watchMultiConfigs([configuration.config]);
+    }
+  }, [sensor, configuration.config]);
+
+  const RenderTwoButtonAction = () => {
+    const buttons = [
+      {
+        icon_on: button1?.icon_on,
+        icon_off: button1?.icon_off,
+        text_on: button1?.text_on,
+        text_off: button1?.text_off,
+        onPress: triggerAction1,
+        isCheckOnOff: isOn,
+        testID: TESTID.BUTTON_TEMPLATE_1,
+      },
+      {
+        icon_on: button2?.icon_on,
+        icon_off: button2?.icon_off,
+        text_on: button2?.text_on,
+        text_off: button2?.text_off,
+        onPress: triggerAction2,
+        isCheckOnOff: isStart,
+        testID: TESTID.BUTTON_TEMPLATE_1,
+      },
+    ];
+    return (
+      <>
+        {buttons.map((item, index) => (
+          <TouchableOpacity
+            testID={item.testID}
+            style={styles.bigCircle}
+            onPress={item.onPress}
+          >
+            <View style={styles.smallCircle}>
+              <Icon
+                name={item?.isCheckOnOff ? item?.icon_on : item?.icon_off}
+                size={44}
+                color={item?.isCheckOnOff ? Colors.Green7 : Colors.Gray6}
+              />
+              <Text
+                style={[
+                  styles.textBig,
+                  { color: item?.isCheckOnOff ? Colors.Gray8 : Colors.Gray6 },
+                ]}
+              >
+                {item?.isCheckOnOff ? item?.text_on : item?.text_off}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <View style={styles.wrap}>
+        <RenderTwoButtonAction />
+      </View>
+      {!!actionGroup.title && !isLight && (
+        <Text size={20} semibold center>
+          {actionGroup.title}
+        </Text>
+      )}
+    </>
+  );
+});
+
+export default TwoButtonTemplate;

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/__test__/TimerActionTemplate.test.js

@@ -60,7 +60,7 @@ describe('Test TimerActionTemplate success with config value', () => {
     const instance = wrapper.root;
 
     const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(8);
+    expect(texts).toHaveLength(7);
     expect(texts[0].props.children).toEqual('Timer');
     expect(texts[1].props.children).toEqual('Setting at 18:30');
 

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

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import TwoButtonTemplate from '../TwoButtonTemplate';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: jest.fn(),
+}));
+
+describe('Test TwoButtonTemplate', () => {
+  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: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
+  };
+
+  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: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
+  };
+
+  const actionGroup = {
+    configuration: {
+      button1: {
+        action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+        icon_off: 'poweroff',
+        text_off: 'OFF',
+        action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+        icon_on: 'poweroff',
+        text_on: 'ON',
+        config: 621,
+      },
+      button2: {
+        action_off: 'f49e1577-493d-4bae-a9ab-3b0f96a4ec52',
+        icon_off: 'caret-right',
+        text_off: 'STOP',
+        action_on: '94600cbe-2035-47d5-bd43-89ace5d59796',
+        icon_on: 'caret-right',
+        text_on: 'START',
+        config: 621,
+      },
+    },
+  };
+  let wrapper;
+
+  const setState = jest.fn();
+  useState.mockImplementation((init) => [init, setState]);
+
+  const assertRender = (state, text) => {
+    useState.mockImplementationOnce((init) => [state, setState]);
+    const mockDoAction = jest.fn();
+    act(() => {
+      wrapper = create(
+        <TwoButtonTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+      );
+    });
+
+    const renderJson = wrapper.toJSON();
+
+    expect(renderJson?.children[0].children[0].children[1].children).toEqual([
+      'OFF',
+    ]);
+  };
+
+  test('render state on', () => {
+    assertRender(false, 'OFF');
+  });
+
+  const assertActionCall = (state, action_data) => {
+    useState.mockImplementationOnce((init) => [state, setState]);
+    const mockDoAction = jest.fn();
+    act(() => {
+      wrapper = create(
+        <TwoButtonTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+      );
+    });
+
+    expect(mockDoAction).not.toHaveBeenCalled();
+  };
+
+  test('action state on', () => {
+    assertActionCall(true, action_off_data);
+  });
+
+  test('action state off', () => {
+    assertActionCall(false, action_on_data);
+  });
+
+  test('render TouchableOpacity TwoButtonTemplate', async () => {
+    const mockDoAction = jest.fn();
+    await act(() => {
+      wrapper = create(
+        <TwoButtonTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+      );
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities.length).toEqual(2);
+  });
+});

package/src/commons/ActionGroup/index.js

@@ -13,6 +13,7 @@ import SmartTiviActionTemplate from './SmartTiviActionTemplate/SmartTiviActionTe
 import ColorPickerTemplate from './ColorPickerTemplate';
 import SliderRangeTemplate from './SliderRangeTemplate';
 import OnOffSmartLock from './OnOffSmartLock/OnOffSmartLock';
+import TwoButtonTemplate from './TwoButtonTemplate';
 
 export const getActionComponent = (template) => {
   switch (template) {
@@ -23,7 +24,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':
@@ -44,6 +45,8 @@ export const getActionComponent = (template) => {
       return ColorPickerTemplate;
     case 'slider_range_template':
       return SliderRangeTemplate;
+    case 'two_button_action_template':
+      return TwoButtonTemplate;
     default:
       return null;
   }