@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

package/src/commons/ActionGroup/ThreeButtonTemplate.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useState } from 'react';
 import { TouchableOpacity, View, Switch } from 'react-native';
 import { Icon } from '@ant-design/react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './ThreeButtonTemplateStyle';
 import Text from '../Text';
 import { TESTID } from '../../configs/Constants';
@@ -9,10 +9,15 @@ import { Colors } from '../../configs';
 import { Card } from '../../commons/CardShadow';
 
 const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
+  const t = useTranslations();
   const { configuration } = actionGroup;
   const [lock, setLock] = useState(false);
-  const iconSquareStop = () => {
-    return <View style={styles.squareStop} />;
+  const iconCustom = (icon) => {
+    return icon === 'stop' ? (
+      <View style={styles.squareStop} />
+    ) : (
+      <Icon name={icon} size={30} color={Colors.Primary} />
+    );
   };
   const onButton1Press = useCallback(
     () => doAction(configuration.action1_data),
@@ -72,7 +77,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
             onPress={onButton1Press}
             underlayColor={Colors.Gray2}
           >
-            <View style={styles.imageBtn}>
+            <View style={styles.imageButton}>
               <Icon
                 name={configuration.icon1}
                 size={30}
@@ -88,7 +93,9 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
             onPress={onButton2Press}
             underlayColor={Colors.Gray2}
           >
-            <View style={styles.imageBtn}>{iconSquareStop()}</View>
+            <View style={styles.imageButton}>
+              {iconCustom(configuration.icon2)}
+            </View>
             <Text style={styles.text}>{configuration.text2}</Text>
           </TouchableOpacity>
 
@@ -98,7 +105,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
             onPress={onButton3Press}
             underlayColor={Colors.Gray2}
           >
-            <View style={styles.imageBtn}>
+            <View style={styles.imageButton}>
               <Icon
                 name={configuration.icon3}
                 size={30}

package/src/commons/ActionGroup/ThreeButtonTemplateStyle.js

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     justifyContent: 'space-around',
     paddingVertical: 16,
   },
-  imageBtn: {
+  imageButton: {
     height: 28,
     marginBottom: 7,
   },

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__/NumberUpDownTemplate.test.js

@@ -0,0 +1,294 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import Text from '../../../commons/Text';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
+
+jest.mock('../../../iot/Monitor');
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{ 5: 25 }, null],
+}));
+
+describe('Test NumberUpDownActionTemplate', () => {
+  const action_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',
+  };
+
+  let actionGroup;
+  let wrapper;
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    actionGroup = {
+      configuration: {
+        keep_track_config: false,
+        config: 5,
+        action_data,
+        min_value: 16,
+        max_value: 30,
+        text_format: '{number} *C',
+      },
+    };
+  });
+
+  test('render template', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('25 *C');
+
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+  });
+
+  test('do action call watchConfigs', async () => {
+    actionGroup.configuration.keep_track_config = true;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    expect(watchMultiConfigs).toBeCalled();
+  });
+
+  test('do action not call watchConfigs cause is_managed_by_backend false', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: false }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    expect(watchMultiConfigs).not.toBeCalled();
+  });
+
+  test('do action not call watchConfigs cause keep track config false', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    expect(watchMultiConfigs).not.toBeCalled();
+  });
+
+  test('action down without config', async () => {
+    actionGroup.configuration.keep_track_config = true;
+    actionGroup.configuration.config = undefined;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    expect(watchMultiConfigs).not.toBeCalled();
+  });
+
+  test('action down without keep track config', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('24 *C');
+  });
+
+  test('action up without keep track config', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[1].props.onPress();
+    });
+
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('26 *C');
+  });
+
+  test('action down with keep track config', async () => {
+    actionGroup.configuration.keep_track_config = true;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('25 *C'); // TODO should 24, configValues make changes again
+  });
+
+  test('action up with keep track config', async () => {
+    actionGroup.configuration.keep_track_config = true;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[1].props.onPress();
+    });
+
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('25 *C'); // TODO should 26, configValues make changes again
+  });
+
+  test('action down limit ', async () => {
+    actionGroup.configuration.min_value = 25;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[0].props.onPress();
+    });
+
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('25 *C');
+  });
+
+  test('action up limit ', async () => {
+    actionGroup.configuration.max_value = 25;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+
+    await act(async () => {
+      await touchs[1].props.onPress();
+    });
+
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('25 *C');
+  });
+});

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { act, create } from 'react-test-renderer';
+import Text from '../../../commons/Text';
+import { watchMultiConfigs } from '../../../iot/Monitor';
+import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
+
+jest.mock('../../../iot/Monitor');
+
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{ 5: null }, null],
+}));
+
+describe('Test NumberUpDownActionTemplate', () => {
+  const action_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',
+  };
+
+  let actionGroup;
+  let wrapper;
+
+  beforeEach(() => {
+    watchMultiConfigs.mockClear();
+    actionGroup = {
+      configuration: {
+        config: 5,
+        action_data,
+        min_value: 16,
+        max_value: 30,
+        text_format: '{number} *C',
+      },
+    };
+  });
+
+  test('render template', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{ is_managed_by_backend: true }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const text = instance.findByType(Text);
+    expect(text.props.children).toEqual('28 *C');
+
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(2);
+  });
+});

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', () => {