@eohjsc/react-native-smart-city 0.3.36 → 0.3.37

package/package.json

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

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

@@ -90,10 +90,10 @@ describe('Test ItemQuickAction', () => {
     alignItems: 'center',
   };
 
-  test('render with no action', async () => {
+  it('render with no action', async () => {
     const newSensor = await factory.build('Sensor');
-    act(() => {
-      tree = create(<ItemQuickAction sensor={newSensor} />);
+    await act(async () => {
+      tree = await create(<ItemQuickAction sensor={newSensor} />);
     });
     const instance = tree.root;
     const buttonOnActionPress = instance.findAll(
@@ -105,11 +105,11 @@ describe('Test ItemQuickAction', () => {
     expect(buttonOnActionPress).toHaveLength(0);
   });
 
-  test('render with full action data case on and icon up', () => {
+  it('render with full action data case on and icon up', async () => {
     const mockSetStatus = jest.fn();
     sensor.action.icon = 'up';
-    act(() => {
-      tree = create(
+    await act(async () => {
+      tree = await create(
         <ItemQuickAction
           sensor={sensor}
           wrapperStyle={style}
@@ -128,7 +128,7 @@ describe('Test ItemQuickAction', () => {
     expect(buttonOnActionPress).toBeDefined();
 
     mockSetState.mockClear();
-    act(() => {
+    await act(async () => {
       buttonOnActionPress.props.onPress();
     });
     expect(mockSendRemoteControl).toBeCalled();
@@ -139,11 +139,11 @@ describe('Test ItemQuickAction', () => {
     expect(mockSetState).toBeCalledWith(sensor.quick_action.off_action);
   });
 
-  test('render with icon_outlined poweroff and action have allow_config_store_value_id', () => {
+  it('render with icon_outlined poweroff and action have allow_config_store_value_id', async () => {
     const mockSetStatus = jest.fn();
     sensor.action.icon = null;
-    act(() => {
-      tree = create(
+    await act(async () => {
+      tree = await create(
         <ItemQuickAction
           sensor={sensor}
           wrapperStyle={style}
@@ -162,7 +162,7 @@ describe('Test ItemQuickAction', () => {
     expect(buttonOnActionPress).toBeDefined();
 
     mockSetState.mockClear();
-    act(() => {
+    await act(async () => {
       buttonOnActionPress.props.onPress();
     });
     expect(mockSendRemoteControl).toBeCalledWith(
@@ -178,7 +178,7 @@ describe('Test ItemQuickAction', () => {
     expect(mockSetState).toBeCalledWith(sensor.quick_action.off_action);
   });
 
-  test('render case old version config', () => {
+  it('render case old version config', async () => {
     const oldSensor = {
       action: {
         color: '#00979D',
@@ -198,8 +198,8 @@ describe('Test ItemQuickAction', () => {
       status: 'OFF',
       status2: 'ON',
     };
-    act(() => {
-      tree = create(
+    await act(async () => {
+      tree = await create(
         <ItemQuickAction sensor={oldSensor} wrapperStyle={style} />
       );
     });
@@ -213,7 +213,7 @@ describe('Test ItemQuickAction', () => {
     );
 
     mockSetState.mockClear();
-    act(() => {
+    await act(async () => {
       buttonOnActionPress.props.onPress();
     });
     expect(mockSetState).toBeCalledTimes(1);
@@ -222,10 +222,12 @@ describe('Test ItemQuickAction', () => {
     expect(mockSetState).toBeCalledTimes(3);
   });
 
-  test('when sending command, button is disabled', () => {
+  it('when sending command, button is disabled', async () => {
     useState.mockImplementationOnce((init) => [true, mockSetState]);
-    act(() => {
-      tree = create(<ItemQuickAction sensor={sensor} wrapperStyle={style} />);
+    await act(async () => {
+      tree = await create(
+        <ItemQuickAction sensor={sensor} wrapperStyle={style} />
+      );
     });
 
     const instance = tree.root;
@@ -238,11 +240,13 @@ describe('Test ItemQuickAction', () => {
     expect(buttonOnActionPress).toBeDefined();
   });
 
-  test('click quick action icon down , isSendingCommand = true', () => {
+  it('click quick action icon down , isSendingCommand = true', async () => {
     sensor.action.icon = 'down';
     useState.mockImplementationOnce((init) => [true, mockSetState]);
-    act(() => {
-      tree = create(<ItemQuickAction sensor={sensor} wrapperStyle={style} />);
+    await act(async () => {
+      tree = await create(
+        <ItemQuickAction sensor={sensor} wrapperStyle={style} />
+      );
     });
 
     const instance = tree.root;
@@ -254,7 +258,7 @@ describe('Test ItemQuickAction', () => {
     );
     expect(buttonOnActionPress).toBeDefined();
   });
-  test('trigger action with quick action no auto update', () => {
+  it('trigger action with quick action no auto update', async () => {
     const noAutoUpdateSensor = {
       action: {
         name: 'on',
@@ -289,8 +293,8 @@ describe('Test ItemQuickAction', () => {
       },
     };
 
-    act(() => {
-      tree = create(
+    await act(async () => {
+      tree = await create(
         <ItemQuickAction sensor={noAutoUpdateSensor} wrapperStyle={style} />
       );
     });
@@ -304,7 +308,7 @@ describe('Test ItemQuickAction', () => {
     );
 
     mockSetState.mockClear();
-    act(() => {
+    await act(async () => {
       buttonOnActionPress.props.onPress();
     });
     expect(mockSendRemoteControl).toBeCalledWith(
@@ -319,12 +323,12 @@ describe('Test ItemQuickAction', () => {
     expect(mockSetState).toBeCalledTimes(1);
   });
 
-  test('render with full action data case off', () => {
+  it('render with full action data case off', async () => {
     sensor.action.id = 10; // off action
     const mockSetStatus = jest.fn();
 
-    act(() => {
-      tree = create(
+    await act(async () => {
+      tree = await create(
         <ItemQuickAction
           sensor={sensor}
           wrapperStyle={style}
@@ -342,7 +346,7 @@ describe('Test ItemQuickAction', () => {
     );
 
     mockSetState.mockClear();
-    act(() => {
+    await act(async () => {
       buttonOnActionPress.props.onPress();
     });
 
@@ -350,14 +354,14 @@ describe('Test ItemQuickAction', () => {
     expect(mockSetState).toBeCalledWith(sensor.quick_action.on_action);
   });
 
-  test('listen to config value for update action', () => {
+  it('listen to config value for update action', async () => {
     const globalStates = require('../../../iot/states');
     globalStates.useConfigGlobalState = () => [{ 51: { value: true } }, null];
 
     const mockSetStatus = jest.fn();
 
-    act(() => {
-      tree = create(
+    await act(async () => {
+      tree = await create(
         <ItemQuickAction
           sensor={sensor}
           wrapperStyle={style}

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -11,68 +11,106 @@ import ColorPicker from 'react-native-wheel-color-picker';
 import { useConfigGlobalState } from '../../iot/states';
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
+import { DEVICE_TYPE } from '../../configs/Constants';
 
-const WheelColorPicker = ({ valueColor, onChangeColor, onStart }) => {
+const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
+  const regex = /^#([0-9a-f]{3}){1,2}$/i;
+  const isCheckHex = regex.test(color);
+  // check crash if valueColor value wrong
+  if (!isCheckHex) {
+    return (
+      <ColorPicker
+        style={styles.colorPicker}
+        sliderHidden={true}
+        swatches={false}
+        onInteractionStart={onStart}
+        onColorChangeComplete={onChangeColorComplete}
+        thumbSize={16}
+      />
+    );
+  }
   return (
     <ColorPicker
       style={styles.colorPicker}
       sliderHidden={true}
       swatches={false}
-      color={valueColor}
+      color={color}
       onInteractionStart={onStart}
-      onColorChangeComplete={onChangeColor}
+      onColorChangeComplete={onChangeColorComplete}
       thumbSize={16}
     />
   );
 };
 
-let isFirstTime = true;
+let hexColorTemp = '#fff';
 const ColorPickerTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   const { configuration = {} } = actionGroup;
-  const [valueColorComplete, setValueColorComplete] = useState('');
+  const { config = undefined } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
+
+  const getColor = useCallback(() => {
+    if (config) {
+      const configValue = configValues[config] || {};
+      const { value = 0 } = configValue;
+      if (value) {
+        return `#${value?.toString(16)}`;
+      }
+    }
+    return '#fff';
+  }, [config, configValues]);
+
+  const [valueColorComplete, setValueColorComplete] = useState(getColor());
+  const [isChangeColor, setIsChangeColor] = useState(false);
+  const [isFirstTime, setIsFirstTime] = useState(true);
+
   const { setAction } = useContext(SCContext);
 
-  const onChangeColor = useCallback(
+  const onChangeColorComplete = useCallback(
     (color) => {
       setAction(Action.SET_LOCK_VIEW_PICK_COLOR, false);
-      const to = setTimeout(() => {
-        isFirstTime = false;
-        clearTimeout(to);
-      }, 1000);
-
-      !isFirstTime &&
+      if (isChangeColor) {
         doAction(
           configuration?.action_color_data,
           JSON.stringify({ value: color })
         );
+        setIsChangeColor(false);
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [configuration?.action_color_data, doAction]
+    [configuration?.action_color_data, doAction, isChangeColor]
   );
 
   useEffect(() => {
-    const { config } = configuration;
-    const configValue = configValues[config];
-    if (configValue?.value && isFirstTime) {
-      setValueColorComplete(`#${configValue?.value?.toString(16)}`);
+    hexColorTemp = valueColorComplete;
+  }, [valueColorComplete]);
+
+  useEffect(() => {
+    const configValue = configValues[config] || {};
+    const { value = 0 } = configValue;
+    const hexColor = `#${value?.toString(16)}`;
+    if (value && isFirstTime) {
+      setValueColorComplete(hexColor);
+      setIsFirstTime(false);
+      return;
+    }
+    if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
+      if (hexColorTemp !== hexColor) {
+        setValueColorComplete(hexColor);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [configValues]);
 
-  useEffect(() => {
-    return () => (isFirstTime = true);
-  }, []);
-
   const onStartPickColor = useCallback(() => {
+    setIsChangeColor(true);
     setAction(Action.SET_LOCK_VIEW_PICK_COLOR, true);
   }, [setAction]);
 
   return (
     <View style={styles.viewPickColor}>
       <WheelColorPicker
-        valueColor={valueColorComplete}
-        onChangeColor={onChangeColor}
+        color={valueColorComplete}
+        onChangeColorComplete={onChangeColorComplete}
         onStart={onStartPickColor}
       />
     </View>

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

@@ -39,9 +39,9 @@ describe('Test AutoLock', () => {
     };
   };
 
-  test('render AutoLock', async () => {
+  it('render AutoLock', async () => {
     await act(async () => {
-      tree = create(wrapComponent());
+      tree = await create(wrapComponent());
     });
 
     const instance = tree.root;

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

@@ -13,7 +13,7 @@ const wrapComponent = (route = {}) => (
 
 describe('Test ItemPasscode', () => {
   let tree;
-  test('test render without params', async () => {
+  it('test render without params', async () => {
     await act(async () => {
       tree = await create(wrapComponent());
     });

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

@@ -30,7 +30,7 @@ describe('Test SetupGeneratePasscode', () => {
     mockNavigate.mockClear();
   });
 
-  test('render PasscodeList', async () => {
+  it('render PasscodeList', async () => {
     await act(async () => {
       tree = await create(wrapComponent());
     });

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

@@ -54,9 +54,9 @@ describe('Test SetupGeneratePasscode', () => {
     };
   };
 
-  test('render SetupGeneratePasscode', async () => {
+  it('render SetupGeneratePasscode', async () => {
     await act(async () => {
-      tree = create(wrapComponent());
+      tree = await create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -7,15 +7,28 @@ import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
 import SliderRange from 'react-native-slider';
 import { useConfigGlobalState } from '../../iot/states';
+import { DEVICE_TYPE } from '../../configs/Constants';
 
-const SliderRangeTemplate = memo(({ actionGroup = {}, doAction }) => {
+let percentTemp = 0;
+const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   const t = useTranslations();
   const { configuration = {} } = actionGroup;
-  const [valueBrightness, setValueBrightness] = useState(0);
-  const [valueBrightnessTemp, setValueBrightnessTemp] = useState(0);
-  const [isFirstTime, setIsFirstTime] = useState(true);
-
   const [configValues] = useConfigGlobalState('configValues');
+  const { config = undefined } = configuration;
+
+  const getPercent = useCallback(() => {
+    if (config) {
+      const configValue = configValues[config] || {};
+      const { value = 0 } = configValue;
+      if (value) {
+        return value;
+      }
+    }
+    return 0;
+  }, [config, configValues]);
+
+  const [valueBrightness, setValueBrightness] = useState(getPercent());
+  const [isFirstTime, setIsFirstTime] = useState(true);
 
   const onChangeBrightness = useCallback(
     async (value) => {
@@ -23,28 +36,30 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction }) => {
         configuration?.action_brightness_data,
         JSON.stringify({ value_brness: value })
       );
-      await setValueBrightness(value);
-      await setValueBrightnessTemp(value);
     },
     [configuration?.action_brightness_data, doAction]
   );
 
   useEffect(() => {
-    const { config } = configuration;
-    const configValue = configValues[config];
-    if (configValue?.value >= 0 && isFirstTime) {
-      setValueBrightness(configValue?.value);
+    percentTemp = valueBrightness;
+  }, [valueBrightness]);
+
+  useEffect(() => {
+    const configValue = configValues[config] || {};
+    const { value = 0 } = configValue;
+    if (value && isFirstTime) {
+      setValueBrightness(value);
       setIsFirstTime(false);
-    } else if (configValue?.value === valueBrightnessTemp) {
-      setValueBrightness(valueBrightnessTemp);
+      return;
+    }
+    if (sensor?.device_type !== DEVICE_TYPE.LG_THINQ) {
+      if (percentTemp !== value) {
+        setValueBrightness(value);
+      }
+      percentTemp = value;
     }
-  }, [
-    configuration.config,
-    configValues,
-    configuration,
-    isFirstTime,
-    valueBrightnessTemp,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configValues]);
 
   return (
     <View style={styles.viewBrightness}>

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/CircleButton.test.js

@@ -32,7 +32,7 @@ const wrapComponent = (
 describe('Test CircleButton', () => {
   let wrapper;
   let type;
-  test('render CircleButton small', async () => {
+  it('render CircleButton small', async () => {
     type = 'small';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -43,7 +43,7 @@ describe('Test CircleButton', () => {
     const smallButton = instance.findAllByType(TouchableOpacity);
     expect(smallButton).toHaveLength(1);
   });
-  test('render CircleButton icon null', async () => {
+  it('render CircleButton icon null', async () => {
     type = 'small';
     const icon = <></>;
     const mockOnPress = jest.fn();
@@ -55,7 +55,7 @@ describe('Test CircleButton', () => {
     const smallButton = instance.findAllByType(TouchableOpacity);
     expect(smallButton).toHaveLength(1);
   });
-  test('onPress CircleButton small', async () => {
+  it('onPress CircleButton small', async () => {
     type = 'small';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -65,11 +65,11 @@ describe('Test CircleButton', () => {
 
     const smallButton = instance.findAllByType(TouchableOpacity);
     expect(smallButton).toHaveLength(1);
-    act(() => {
+    await act(async () => {
       smallButton[0].props.onPress();
     });
   });
-  test('render CircleButton big', async () => {
+  it('render CircleButton big', async () => {
     type = 'big';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -80,7 +80,7 @@ describe('Test CircleButton', () => {
     const touchableOpacity = instance.findAllByType(TouchableOpacity);
     expect(touchableOpacity).toHaveLength(5);
   });
-  test('render CircleButton return null', async () => {
+  it('render CircleButton return null', async () => {
     type = null;
     await act(async () => {
       wrapper = await create(wrapComponent(type));
@@ -90,7 +90,7 @@ describe('Test CircleButton', () => {
     const touchableOpacity = instance.findAllByType(TouchableOpacity);
     expect(touchableOpacity).toHaveLength(0);
   });
-  test('onPress CircleButton big', async () => {
+  it('onPress CircleButton big', async () => {
     type = 'big';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -110,19 +110,19 @@ describe('Test CircleButton', () => {
 
     const touchableOpacity = instance.findAllByType(TouchableOpacity);
     expect(touchableOpacity).toHaveLength(5);
-    act(() => {
+    await act(async () => {
       touchableOpacity[0].props.onPress();
     });
-    act(() => {
+    await act(async () => {
       touchableOpacity[1].props.onPress();
     });
-    act(() => {
+    await act(async () => {
       touchableOpacity[2].props.onPress();
     });
-    act(() => {
+    await act(async () => {
       touchableOpacity[3].props.onPress();
     });
-    act(() => {
+    await act(async () => {
       touchableOpacity[4].props.onPress();
     });
   });

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/ControlPlay.test.js

@@ -18,7 +18,7 @@ const wrapComponent = (onPressPrev, onPressStop, onPressNext) => (
 
 describe('Test ControlPlay', () => {
   let wrapper;
-  test('render ControlPlay', async () => {
+  it('render ControlPlay', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -30,7 +30,7 @@ describe('Test ControlPlay', () => {
     const prevButton = instance.findAllByType(TouchableOpacity);
     expect(prevButton).toHaveLength(3);
   });
-  test('render ControlPlay Prev', async () => {
+  it('render ControlPlay Prev', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -47,7 +47,7 @@ describe('Test ControlPlay', () => {
     );
     expect(PrevButton).toBeDefined();
   });
-  test('OnPress ControlPlay Prev', async () => {
+  it('OnPress ControlPlay Prev', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -63,11 +63,11 @@ describe('Test ControlPlay', () => {
         el.type === TouchableOpacity
     );
     expect(PrevButton).toBeDefined();
-    act(() => {
+    await act(async () => {
       PrevButton.props.onPress();
     });
   });
-  test('render ControlPlay Stop', async () => {
+  it('render ControlPlay Stop', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -84,7 +84,7 @@ describe('Test ControlPlay', () => {
     );
     expect(StopButton).toBeDefined();
   });
-  test('OnPress ControlPlay Stop', async () => {
+  it('OnPress ControlPlay Stop', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -100,11 +100,11 @@ describe('Test ControlPlay', () => {
         el.type === TouchableOpacity
     );
     expect(StopButton).toBeDefined();
-    act(() => {
+    await act(async () => {
       StopButton.props.onPress();
     });
   });
-  test('render ControlPlay Next', async () => {
+  it('render ControlPlay Next', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -121,7 +121,7 @@ describe('Test ControlPlay', () => {
     );
     expect(NextButton).toBeDefined();
   });
-  test('OnPress ControlPlay Next', async () => {
+  it('OnPress ControlPlay Next', async () => {
     const mockOnPress = jest.fn();
     await act(async () => {
       wrapper = await create(
@@ -137,7 +137,7 @@ describe('Test ControlPlay', () => {
         el.type === TouchableOpacity
     );
     expect(NextButton).toBeDefined();
-    act(() => {
+    await act(async () => {
       NextButton.props.onPress();
     });
   });

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/RectangleButton.test.js

@@ -21,7 +21,7 @@ const wrapComponent = (type, onPress, onPressUp, onPressDown, icon) => (
 describe('Test RectangleButton', () => {
   let wrapper;
   let type;
-  test('render all RectangleButton column', async () => {
+  it('render all RectangleButton column', async () => {
     type = 'column';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -33,7 +33,7 @@ describe('Test RectangleButton', () => {
     const touchableOpacity = instance.findAllByType(TouchableOpacity);
     expect(touchableOpacity).toHaveLength(2);
   });
-  test('render RectangleButtonUp column', async () => {
+  it('render RectangleButtonUp column', async () => {
     type = 'column';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -51,7 +51,7 @@ describe('Test RectangleButton', () => {
     );
     expect(RectangleButtonUp).toBeDefined();
   });
-  test('onPress RectangleButtonUp column', async () => {
+  it('onPress RectangleButtonUp column', async () => {
     type = 'column';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -68,11 +68,11 @@ describe('Test RectangleButton', () => {
         el.type === TouchableOpacity
     );
     expect(RectangleButtonUp).toBeDefined();
-    act(() => {
+    await act(async () => {
       RectangleButtonUp.props.onPress();
     });
   });
-  test('render RectangleButtonDown column', async () => {
+  it('render RectangleButtonDown column', async () => {
     type = 'column';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -90,7 +90,7 @@ describe('Test RectangleButton', () => {
     );
     expect(RectangleButtonDown).toBeDefined();
   });
-  test('onPress RectangleButtonDown column', async () => {
+  it('onPress RectangleButtonDown column', async () => {
     type = 'column';
     const mockOnPress = jest.fn();
     await act(async () => {
@@ -107,7 +107,7 @@ describe('Test RectangleButton', () => {
         el.type === TouchableOpacity
     );
     expect(RectangleButtonDown).toBeDefined();
-    act(() => {
+    await act(async () => {
       RectangleButtonDown.props.onPress();
     });
   });