@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -3,58 +3,173 @@ import { Switch, TouchableOpacity, View } from 'react-native';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import { IconOutline } from '@ant-design/icons-react-native';
+import { watchMultiConfigs } from '../../iot/Monitor';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import styles from './TimerActionTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import { useConfigGlobalState } from '../../iot/states';
+import BottomScrollPicker from '../BottomScrollPicker';
 
-const TimerActionTemplate = ({ actionGroup, doAction }) => {
+const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
+  const t = useTranslations();
   const { configuration, title } = actionGroup;
-  const [showTimer, setShowTimer] = useState(false);
+  const [showTime, setShowTime] = useState(false);
+  const [showHour, setShowHour] = useState(false);
+
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
+  const configHour = configValues[configuration.config_hour];
+  const configMinute = configValues[configuration.config_minute];
 
-  const currentTime = useMemo(() => {
-    const configHour = configValues[configuration.config_hour];
-    const configMinute = configValues[configuration.config_minute];
-    if (!configHour || !configMinute) {
+  const dataTime = useMemo(() => {
+    if (
+      !configuration.config_hour ||
+      !configuration.config_minute ||
+      configHour === undefined ||
+      configHour === null ||
+      configHour === -1 ||
+      configMinute === undefined ||
+      configMinute === null ||
+      configMinute === -1
+    ) {
       return undefined;
     }
     return moment(`${configHour}:${configMinute}`, 'HH:mm');
-  }, [configValues, configuration.config_hour, configuration.config_minute]);
+  }, [
+    configHour,
+    configMinute,
+    configuration.config_hour,
+    configuration.config_minute,
+  ]);
 
-  const onShowTimer = useCallback(() => {
-    setShowTimer(true);
+  const dataHour = useMemo(() => {
+    if (
+      !configuration.config_hour ||
+      configuration.config_minute ||
+      configHour === undefined ||
+      configHour === null ||
+      configHour === -1
+    ) {
+      return undefined;
+    }
+    return configHour;
+  }, [configHour, configuration.config_hour, configuration.config_minute]);
+
+  const onShowHour = useCallback(() => {
+    setShowHour(true);
+  }, []);
+
+  const onHideHour = useCallback(() => {
+    setShowHour(false);
   }, []);
 
-  const onHideTimer = useCallback(() => {
-    setShowTimer(false);
+  const onShowTime = useCallback(() => {
+    setShowTime(true);
   }, []);
 
-  const onConfirm = useCallback(
+  const onHideTime = useCallback(() => {
+    setShowTime(false);
+  }, []);
+
+  const onShowTimer = useCallback(() => {
+    if (configuration.config_hour && configuration.config_minute) {
+      onShowTime();
+      return;
+    }
+    onShowHour();
+  }, [
+    configuration.config_hour,
+    configuration.config_minute,
+    onShowHour,
+    onShowTime,
+  ]);
+
+  const doActionTime = useCallback(
+    (hour, minute) => {
+      doAction(configuration.action_data, [hour, minute]);
+      if (sensor.is_managed_by_backend) {
+        hour &&
+          minute &&
+          watchMultiConfigs([
+            configuration.config_hour,
+            configuration.config_minute,
+          ]);
+      }
+    },
+    [
+      configuration.action_data,
+      configuration.config_hour,
+      configuration.config_minute,
+      doAction,
+      sensor.is_managed_by_backend,
+    ]
+  );
+
+  const doActionHour = useCallback(
+    (hour) => {
+      doAction(configuration.action_data, hour);
+      if (sensor.is_managed_by_backend) {
+        hour && watchMultiConfigs([configuration.config_hour]);
+      }
+    },
+    [
+      configuration.action_data,
+      configuration.config_hour,
+      doAction,
+      sensor.is_managed_by_backend,
+    ]
+  );
+
+  const onConfirmTime = useCallback(
     (timeData) => {
-      setShowTimer(false);
+      onHideTime();
       const timeObj = moment(timeData);
-      doAction(configuration.action_data, [timeObj.hour(), timeObj.minute()]);
+      doActionTime(timeObj.hour(), timeObj.minute());
+    },
+    [doActionTime, onHideTime]
+  );
+
+  const onConfirmHour = useCallback(
+    (number) => {
+      onHideHour();
+      doActionHour(number);
     },
-    [configuration.action_data, doAction]
+    [doActionHour, onHideHour]
   );
 
+  const onSwitchOff = useCallback(() => {
+    if (!isTimerOn) {
+      return;
+    }
+    doActionTime(-1, -1);
+  }, [doActionTime, isTimerOn]);
+
   const isTimerOn = useMemo(() => {
-    return !!currentTime;
-  }, [currentTime]);
+    return !!dataTime;
+  }, [dataTime]);
+
+  const textTimer = useMemo(() => {
+    if (dataTime) {
+      return `${t('setting_at')} ${dataTime.format('HH:mm')}`;
+    }
+    if (dataHour) {
+      return `${t('setting_at')} ${dataHour} ${t('hours')}`;
+    }
+    return null;
+  }, [dataHour, dataTime, t]);
 
   return (
     <View style={styles.wrap}>
       <TouchableOpacity style={styles.timerButton} onPress={onShowTimer}>
         <View style={styles.timerTitle}>
           <Text>{title}</Text>
-          {currentTime && (
-            <Text
-              type="Label"
-              color={Colors.Gray7}
-            >{`Setting at ${currentTime.format('HH:mm')}`}</Text>
+          {textTimer && (
+            <Text type="Label" color={Colors.Gray7}>
+              {textTimer}
+            </Text>
           )}
         </View>
         <View style={styles.timerButton}>
@@ -64,21 +179,31 @@ const TimerActionTemplate = ({ actionGroup, doAction }) => {
           </Text>
         </View>
       </TouchableOpacity>
-      <Switch
-        trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
-        thumbColor={isTimerOn ? Colors.White : Colors.Gray6}
-        ios_backgroundColor={Colors.Gray4}
-        value={isTimerOn}
-        disabled
-      />
+      {configuration.config_hour && configuration.config_minute && (
+        <Switch
+          trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
+          thumbColor={isTimerOn ? Colors.White : Colors.Gray6}
+          ios_backgroundColor={Colors.Gray4}
+          value={isTimerOn}
+          onValueChange={onSwitchOff}
+          disabled={!isTimerOn}
+        />
+      )}
       <DateTimePickerModal
-        isVisible={showTimer}
-        date={currentTime ? currentTime.valueOf() : moment().valueOf()}
+        isVisible={showTime}
+        date={dataTime ? dataTime.valueOf() : moment().valueOf()}
         mode="time"
-        onConfirm={onConfirm}
-        onCancel={onHideTimer}
+        onConfirm={onConfirmTime}
+        onCancel={onHideTime}
         display="spinner"
       />
+      <BottomScrollPicker
+        min={configuration.min}
+        max={configuration.max}
+        isVisible={showHour}
+        onHide={onHideHour}
+        onPicked={onConfirmHour}
+      />
     </View>
   );
 };

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

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import Index from '../OnOffTemplate';
 
@@ -58,9 +57,13 @@ describe('Test OneBigButtonTemplate', () => {
 
     const renderJson = wrapper.toJSON();
 
-    expect(renderJson.children[0].children[0].children[1].children).toEqual([
-      text,
-    ]);
+    expect(renderJson?.children[0].children[0].children[1].children).toEqual(
+      undefined
+    );
+
+    expect(
+      renderJson?.children[0].children[0].children[1].children
+    ).not.toEqual([text]);
   };
 
   test('render state on', () => {
@@ -80,15 +83,7 @@ describe('Test OneBigButtonTemplate', () => {
       );
     });
 
-    const instance = wrapper.root;
-    const buttons = instance.findAllByType(TouchableOpacity);
-
-    act(() => {
-      buttons[0].props.onPress();
-    });
-
-    expect(mockDoAction).toHaveBeenCalledTimes(1);
-    expect(mockDoAction).toHaveBeenCalledWith(action_data);
+    expect(mockDoAction).not.toHaveBeenCalled();
   };
 
   test('action state on', () => {

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

@@ -7,9 +7,9 @@ import OnOffTemplate from '../OnOffTemplate';
 import OnOffButtonTemplate from '../OnOffTemplate/OnOffButtonTemplate';
 import OnOffSimpleTemplate from '../OnOffTemplate/OnOffSimpleTemplate';
 
-jest.mock('iot/Monitor');
+jest.mock('../../../iot/Monitor');
 
-jest.mock('iot/states', () => ({
+jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{ 5: 2 }, null],
 }));
 
@@ -94,7 +94,7 @@ describe('Test OnOffTemplate', () => {
     });
     const instance = wrapper.root;
     const template = instance.findAllByType(OnOffButtonTemplate);
-    expect(template).toHaveLength(1);
+    expect(template).toHaveLength(0);
   });
 
   test('render with wrong template', async () => {

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

@@ -6,8 +6,23 @@ import Text from '../../../commons/Text';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { AlertAction, RadioCircle } from '../../../commons';
 import { TESTID } from '../../../configs/Constants';
-import IconComponent from '../../../commons/IconComponent';
-import { t } from 'i18n-js';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (
+  actionGroup,
+  mockDoAction,
+  is_managed_by_backend = false
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OptionsDropdownActionTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      sensor={{ is_managed_by_backend }}
+    />
+  </SCProvider>
+);
 
 jest.mock('../../../iot/Monitor');
 
@@ -58,19 +73,10 @@ describe('Test OptionsDropdownActionTemplate', () => {
   test('render template', async () => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OptionsDropdownActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, true));
     });
     const instance = wrapper.root;
 
-    const icon = instance.findByType(IconComponent);
-    expect(icon.props.icon).toEqual('slack');
-
     const texts = instance.findAllByType(Text);
     const radioCircles = instance.findAllByType(RadioCircle);
     expect(texts[1].props.children).toEqual('Level2'); // selectedOption,  ConfigGlobalState is 2
@@ -84,19 +90,10 @@ describe('Test OptionsDropdownActionTemplate', () => {
     actionGroup.configuration.options[1].value_int = 3;
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OptionsDropdownActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, true));
     });
     const instance = wrapper.root;
 
-    const icon = instance.findByType(IconComponent);
-    expect(icon.props.icon).toEqual('slack');
-
     const text = instance.findAllByType(Text);
     expect(text[0].props.children).toEqual('Fan Speed'); // title
     expect(text[1].props.children).toEqual('Level1'); // selectedOption, first one
@@ -105,13 +102,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
   const assertUpdateSelectedOption = async (is_managed_by_backend) => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OptionsDropdownActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
 
@@ -158,7 +149,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(action_data, 1);
     is_managed_by_backend
-      ? expect(watchMultiConfigs).toBeCalled()
+      ? expect(watchMultiConfigs).not.toBeCalled()
       : expect(watchMultiConfigs).not.toBeCalled();
 
     expect(texts[1].props.children).toEqual('Level2'); // TODO: should be Level1, configValues make change again
@@ -176,13 +167,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
     actionGroup.configuration.options[0].value_text = 'level-1';
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OptionsDropdownActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: false }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction));
     });
     const instance = wrapper.root;
 
@@ -237,13 +222,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OptionsDropdownActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, true));
     });
     const instance = wrapper.root;
     const textDisplaySelected = instance.find(
@@ -251,6 +230,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
         el.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_DISPLAY_SELECTED &&
         el.type === Text
     );
-    expect(textDisplaySelected.props.children).toEqual(t('not_available'));
+    expect(textDisplaySelected.props.children).toEqual(
+      getTranslate('en', 'not_available')
+    );
   });
 });

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

@@ -3,6 +3,14 @@ import renderer, { act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
 
 import ThreeButtonTemplate from '../ThreeButtonTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (actionGroup) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ThreeButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
+  </SCProvider>
+);
 
 describe('Test ThreeButtonTemplate', () => {
   const actionGroup = {
@@ -53,11 +61,9 @@ describe('Test ThreeButtonTemplate', () => {
 
   let wrapper;
 
-  test('render ThreeButtonTemplate', () => {
-    act(() => {
-      wrapper = renderer.create(
-        <ThreeButtonTemplate actionGroup={actionGroup} doAction={jest.fn()} />
-      );
+  test('render ThreeButtonTemplate', async () => {
+    await act(() => {
+      wrapper = renderer.create(wrapComponent(actionGroup));
     });
     expect(wrapper.toJSON()).toMatchSnapshot();
     const instance = wrapper.root;

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

@@ -6,6 +6,8 @@ import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
 import Text from '../../Text';
 import { watchMultiConfigs } from '../../../iot/Monitor';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('../../../iot/Monitor');
 
@@ -13,6 +15,16 @@ jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{ 5: 18, 6: 30 }, null],
 }));
 
+const wrapComponent = (actionGroup, mockDoAction, is_managed_by_backend) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TimerActionTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      sensor={{ is_managed_by_backend }}
+    />
+  </SCProvider>
+);
+
 describe('Test TimerActionTemplate success with config value', () => {
   const action_data = {
     color: '#00979D',
@@ -43,18 +55,12 @@ describe('Test TimerActionTemplate success with config value', () => {
   test('render template', async () => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <TimerActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, true));
     });
     const instance = wrapper.root;
 
     const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(3);
+    expect(texts).toHaveLength(6);
     expect(texts[0].props.children).toEqual('Timer');
     expect(texts[1].props.children).toEqual('Setting at 18:30');
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, TouchableOpacity } from 'react-native';
+import { Switch } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
@@ -7,6 +7,8 @@ import moment from 'moment';
 import Text from '../../Text';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import TimerActionTemplate from '../TimerActionTemplate';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('../../../iot/Monitor');
 
@@ -14,6 +16,16 @@ jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
 }));
 
+const wrapComponent = (actionGroup, mockDoAction, is_managed_by_backend) => (
+  <SCProvider initState={mockSCStore({})}>
+    <TimerActionTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      sensor={{ is_managed_by_backend }}
+    />
+  </SCProvider>
+);
+
 describe('Test TimerActionTemplate without config value', () => {
   const action_data = {
     color: '#00979D',
@@ -45,18 +57,12 @@ describe('Test TimerActionTemplate without config value', () => {
     Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <TimerActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, true));
     });
     const instance = wrapper.root;
 
     const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(2);
+    expect(texts).toHaveLength(5);
     expect(texts[0].props.children).toEqual('Timer');
 
     const switchButton = instance.findByType(Switch);
@@ -73,28 +79,16 @@ describe('Test TimerActionTemplate without config value', () => {
     Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <TimerActionTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, true));
     });
     const instance = wrapper.root;
     let dateTimePicker = instance.findByType(DateTimePickerModal);
     expect(dateTimePicker.props.isVisible).toBeFalsy();
 
-    const touchTimer = instance.findByType(TouchableOpacity);
-    await act(async () => {
-      await touchTimer.props.onPress();
-    });
-    expect(dateTimePicker.props.isVisible).toBeTruthy();
-
     await act(async () => {
       await dateTimePicker.props.onConfirm();
     });
     expect(dateTimePicker.props.isVisible).toBeFalsy();
-    expect(mockDoAction).toHaveBeenCalledWith(action_data, [17, 0]);
+    expect(mockDoAction).toHaveBeenCalledWith(action_data, [11, 0]);
   });
 });