@eohjsc/react-native-smart-city 0.3.3 → 0.3.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.03",
+  "version": "0.3.06",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -146,6 +146,8 @@
     "react-hooks-global-state": "^1.0.1",
     "react-i18next": "^11.8.12",
     "react-native-alert-async": "^1.0.5",
+    "react-native-android-keyboard-adjust": "^1.2.0",
+    "react-native-android-location-enabler": "^1.2.2",
     "react-native-android-wifi": "^0.0.41",
     "react-native-appearance": "^0.3.4",
     "react-native-base64": "^0.1.0",

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -1,38 +1,51 @@
-import React, { memo, useCallback, useState, useEffect, useMemo } from 'react';
+import React, { memo, useState, useEffect } 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';
 
+let isFirstTime = true;
+
+const WheelColorPicker = ({ valueColor, onChangeColor }) => {
+  return (
+    <ColorPicker
+      style={styles.colorPicker}
+      sliderHidden={true}
+      swatches={false}
+      color={valueColor}
+      onColorChangeComplete={onChangeColor}
+      thumbSize={16}
+    />
+  );
+};
+
 const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const [valueColorComplete, setValueColorComplete] = useState('');
-  const [isFirstColor, setIsFirstColor] = useState(false);
   const [configValues] = useConfigGlobalState('configValues');
 
-  const onChangeColor = useCallback(
-    (color) => {
-      if (!isFirstColor) {
-        setIsFirstColor(true);
-        return;
-      }
+  const onChangeColor = (color) => {
+    const to = setTimeout(() => {
+      isFirstTime = false;
+      clearTimeout(to);
+    }, 1000);
+
+    !isFirstTime &&
       doAction(
         configuration?.action_color_data,
         JSON.stringify({ value: color })
       );
-    },
-    [configuration?.action_color_data, doAction, isFirstColor]
-  );
-  const valueColor = useMemo(() => {
-    return valueColorComplete || '';
-  }, [valueColorComplete]);
+  };
 
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    setValueColorComplete(configValue);
-  }, [configuration.config, configValues, configuration]);
+    if (configValue && isFirstTime) {
+      setValueColorComplete(`#${configValue?.toString(16)}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configValues]);
 
   useEffect(() => {
     if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
@@ -40,15 +53,15 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
     }
   }, [sensor, configuration.config]);
 
+  useEffect(() => {
+    return () => (isFirstTime = true);
+  }, []);
+
   return (
     <View style={styles.viewPickColor}>
-      <ColorPicker
-        style={styles.colorPicker}
-        sliderHidden={true}
-        swatches={false}
-        color={valueColor}
-        onColorChangeComplete={onChangeColor}
-        thumbSize={16}
+      <WheelColorPicker
+        valueColor={valueColorComplete}
+        onChangeColor={onChangeColor}
       />
     </View>
   );

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { Colors } from '../../configs';
 
@@ -7,7 +7,7 @@ import Text from '../Text';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './NumberUpDownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
-import { TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 
 const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const { configuration, title } = actionGroup;
@@ -25,6 +25,19 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
   const [value, setValue] = useState();
   const valueDefault = 28;
 
+  useEffect(() => {
+    if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
+      return;
+    }
+    if (
+      !!config &&
+      sensor?.is_managed_by_backend &&
+      sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME
+    ) {
+      watchMultiConfigs([config]);
+    }
+  }, [sensor, config]);
+
   useEffect(() => {
     if (!config) {
       setValue(valueDefault);
@@ -34,20 +47,22 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     const configValue = configValues[config];
     if (configValue !== null && configValue !== undefined) {
       setValue(configValue);
-    } else {
-      setValue(valueDefault);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [JSON.stringify(configValues)]);
 
   const doActionAndWatchConfig = useCallback(
     async (actionData, actionValue, actionName) => {
-      const data = { temperature: actionValue };
-      if (allow_config_store_value && config) {
-        data.config_id = config;
-        data.value = actionValue;
+      let data = actionValue;
+      if (sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME) {
+        data = { temperature: actionValue };
+        if (allow_config_store_value && config) {
+          data.config_id = config;
+          data.value = actionValue;
+        }
+        data = JSON.stringify(data);
       }
-      await doAction(actionData, JSON.stringify(data), actionName);
+      await doAction(actionData, data, actionName);
       if (!sensor?.is_managed_by_backend) {
         return;
       }
@@ -56,7 +71,7 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
       }
 
       config &&
-        sensor.device_type !== 'GOOGLE_HOME' &&
+        sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME &&
         watchMultiConfigs([config]);
     },
     [
@@ -113,7 +128,11 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         </TouchableOpacity>
 
         <Text testID={'abcd'} type="H2">
-          {text_format.replace('{number}', value)}
+          {value !== undefined ? (
+            text_format.replace('{number}', value)
+          ) : (
+            <ActivityIndicator />
+          )}
         </Text>
 
         <TouchableOpacity

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

@@ -5,15 +5,20 @@ import React, { memo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Colors } from '../../../configs';
 import styles from './OnOffButtonTemplateStyle';
+import { TESTID } from '../../../configs/Constants';
 
 const OnOffButtonTemplate = memo(
   ({ isOn, triggerAction, actionGroup, isLight = false }) => {
-    const { configuration } = actionGroup;
+    const { configuration, id } = actionGroup;
 
     return (
       <>
         <View style={styles.barrierControlContainer}>
-          <TouchableOpacity style={styles.bigCircle} onPress={triggerAction}>
+          <TouchableOpacity
+            style={styles.bigCircle}
+            onPress={triggerAction}
+            testID={`${TESTID.ON_OFF_BUTTON}-${id}`}
+          >
             <View style={styles.smallCircle}>
               <Icon
                 name={isOn ? configuration.icon_on : configuration.icon_off}
@@ -25,6 +30,7 @@ const OnOffButtonTemplate = memo(
                   styles.textBig,
                   { color: isOn ? Colors.Gray8 : Colors.Gray6 },
                 ]}
+                testID={`${TESTID.SENSOR_STATUS}-${id}`}
               >
                 {isOn ? configuration.text_on : configuration.text_off}
               </Text>

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -9,7 +9,7 @@ import { useDropdownAction } from './hooks/useDropdownAction';
 import { useConfigGlobalState } from '../../iot/states';
 import styles from './OptionsDropdownActionTemplateStyle';
 import { watchMultiConfigs } from '../../iot/Monitor';
-import { TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 import IconComponent from '../../commons/IconComponent';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import SvgDoorState from '../../../assets/images/Device/door-state.svg';
@@ -61,14 +61,16 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     const value = getOptionValue(newOption);
     let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
     actionName = actionName.replace(/\s+/g, ' ').trim();
-    doAction(
-      action_data,
-      JSON.stringify({ level: value, key_code: newOption?.value_int }),
-      actionName
-    );
+
+    let data = JSON.stringify({ level: value, key_code: newOption?.value_int });
+    if (sensor.device_type === DEVICE_TYPE.GOOGLE_HOME) {
+      data = value;
+    }
+
+    doAction(action_data, data, actionName);
     if (sensor?.is_managed_by_backend) {
       configuration.config &&
-        sensor.device_type !== 'GOOGLE_HOME' &&
+        sensor.device_type !== DEVICE_TYPE.GOOGLE_HOME &&
         watchMultiConfigs([configuration.config]);
     }
     hideAlertAction();

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -33,7 +33,11 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   useEffect(() => {
     const { config } = configuration;
     const configValue = configValues[config];
-    setValueBrightness(configValue);
+    let valueTemp = configValue;
+    if (configValue > 0) {
+      valueTemp = Math.round((configValue / 254) * 100);
+    }
+    setValueBrightness(valueTemp);
   }, [configuration.config, configValues, configuration]);
 
   useEffect(() => {

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { ActivityIndicator, TouchableOpacity } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import Text from '../../../commons/Text';
-import { TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import NumberUpDownActionTemplate from '../NumberUpDownActionTemplate';
 
@@ -48,7 +48,10 @@ describe('Test NumberUpDownActionTemplate', () => {
         <NumberUpDownActionTemplate
           actionGroup={actionGroup}
           doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
         />
       );
     });
@@ -288,4 +291,81 @@ describe('Test NumberUpDownActionTemplate', () => {
     const text = instance.findByType(Text);
     expect(text.props.children).toEqual('25 *C');
   });
+  test('render template have title', async () => {
+    const mockDoAction = jest.fn();
+    actionGroup.title = 'title';
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.LG_THINQ,
+          }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const text = instance.findAllByType(Text);
+    expect(text).toHaveLength(2);
+  });
+  test('render template watch config not exits', async () => {
+    const mockDoAction = jest.fn();
+    actionGroup.configuration.config = 100;
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+          }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const text = instance.findAllByType(ActivityIndicator);
+    expect(text).toHaveLength(1);
+  });
+  test('action up sensor device type is GOOGLE_HOME', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        <NumberUpDownActionTemplate
+          actionGroup={actionGroup}
+          doAction={mockDoAction}
+          sensor={{
+            is_managed_by_backend: true,
+            device_type: DEVICE_TYPE.GOOGLE_HOME,
+            name: 'Device',
+          }}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchs = instance.find(
+      (el) =>
+        el.props.testID === TESTID.NUMBER_ACTION_UP &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await touchs.props.onPress();
+    });
+    expect(mockDoAction).toBeCalledWith(
+      {
+        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',
+      },
+      26,
+      'Device temp up'
+    );
+  });
 });

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

@@ -5,7 +5,7 @@ import { act, create } from 'react-test-renderer';
 import Text from '../../../commons/Text';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { AlertAction, RadioCircle } from '../../../commons';
-import { TESTID } from '../../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../../configs/Constants';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -246,4 +246,60 @@ describe('Test OptionsDropdownActionTemplate', () => {
       getTranslate('en', 'not_available')
     );
   });
+  test('doAction sensor device type is GOOGLE_HOME', async () => {
+    actionGroup.configuration.options[0].value_text = 'level-1';
+    sensor.device_type = DEVICE_TYPE.GOOGLE_HOME;
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+
+    const touchs = instance.findAllByType(TouchableOpacity);
+    expect(touchs).toHaveLength(5);
+    const showListOption = touchs[0];
+
+    const texts = instance.findAllByType(Text);
+    expect(texts[1].props.children).toEqual('Level2');
+
+    const radioCircles = instance.findAllByType(RadioCircle);
+    expect(radioCircles[0].props.active).toBeFalsy();
+    expect(radioCircles[1].props.active).toBeTruthy();
+
+    const listChoosingOption = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.OPTIONS_DROPDOWN_ACTION_CHOOSING_ITEM &&
+        el.type === TouchableOpacity
+    );
+    expect(listChoosingOption).toHaveLength(2);
+
+    const alertAction = instance.findByType(AlertAction);
+    expect(alertAction.props.visible).toBeFalsy();
+
+    // show option
+    await act(async () => {
+      await showListOption.props.onPress();
+    });
+    expect(alertAction.props.visible).toBeTruthy();
+
+    // Choosed Level1 option
+    await act(async () => {
+      await listChoosingOption[0].props.onPress();
+    });
+
+    expect(radioCircles[0].props.active).toBeTruthy();
+    expect(radioCircles[1].props.active).toBeFalsy();
+
+    // doAction then update selectedOption
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+    expect(alertAction.props.visible).toBeFalsy();
+
+    expect(mockDoAction).toHaveBeenCalledWith(
+      action_data,
+      'level-1',
+      'Sensor name fan speed level-1'
+    ); // doAction with text instead of int
+  });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacity, Switch } from 'react-native';
+import { TouchableOpacity, Switch, ActivityIndicator } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import moment from 'moment';
@@ -344,7 +344,7 @@ describe('Test ActionGroup', () => {
     expect(mockDoAction).toHaveBeenCalledTimes(1);
   });
 
-  test('render ActionGroup NumberUpDownActionTemplate', async () => {
+  test('render ActionGroup NumberUpDownActionTemplate watch config value null', async () => {
     const mockDoAction = jest.fn();
     const actionGroup = {
       template: 'NumberUpDownActionTemplate',
@@ -362,11 +362,8 @@ describe('Test ActionGroup', () => {
       );
     });
     const instance = wrapper.root;
-    const text = instance.findAllByType(Text);
-    expect(text[0].props.children).toEqual('28 *C');
-
-    const touchs = instance.findAllByType(TouchableOpacity);
-    expect(touchs).toHaveLength(2);
+    const activity = instance.findAllByType(ActivityIndicator);
+    expect(activity.length).toEqual(1);
   });
 
   test('render ActionGroup StatesGridActionTemplate', async () => {

package/src/commons/ConnectingProcess/index.js

@@ -45,6 +45,7 @@ const ConnectingProcess = ({ route }) => {
         );
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -64,6 +65,7 @@ const ConnectingProcess = ({ route }) => {
         });
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -79,7 +81,8 @@ const ConnectingProcess = ({ route }) => {
           }
         );
         if (success) {
-          setSensor({ name: gateway?.model });
+          setSensor(data);
+          setNewName(data?.name || gateway?.model);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();

package/src/commons/Device/ItemDevice.js

@@ -72,7 +72,10 @@ const ItemDevice = memo(
     const textConnected = isConnected ? t('connected') : t('disconnected');
 
     return (
-      <TouchableWithoutFeedback onPress={goToSensorDisplay}>
+      <TouchableWithoutFeedback
+        onPress={goToSensorDisplay}
+        testID={`${TESTID.SENSOR_NAME}-${sensor?.id}`}
+      >
         <View
           style={[styles.container, wrapStyle, { borderColor }]}
           testID={TESTID.SUB_UNIT_DEVICES}

package/src/commons/Device/WaterQualitySensor/QualityIndicatorsItem.js

@@ -37,7 +37,7 @@ const QualityIndicatorItem = memo(
             >
               <IconOutline
                 name={'info-circle'}
-                size={16}
+                size={18}
                 color={Colors.Gray8}
               />
             </TouchableOpacity>
@@ -92,6 +92,11 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
   iconInfo: {
-    top: 10,
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -10,
+    marginTop: -2,
   },
 });

package/src/commons/Form/CurrencyInput.js

@@ -1,4 +1,10 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+  useEffect,
+} from 'react';
 import {
   View,
   TextInput,
@@ -6,6 +12,7 @@ import {
   TouchableWithoutFeedback,
   Platform,
 } from 'react-native';
+import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -125,6 +132,13 @@ const CurrencyInput = ({
     return textInputValue.toString().length < 2 ? -12 : 0;
   }, [textInputValue]);
 
+  useEffect(() => {
+    const isAndroid = Platform.OS === 'android';
+    isAndroid && AndroidKeyboardAdjust.setAdjustResize();
+
+    return () => isAndroid && AndroidKeyboardAdjust.setAdjustPan();
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={focusInput}>
       <View style={styles.wrap}>

package/src/commons/Form/TextInputPassword.js

@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     paddingTop: 12,
     paddingBottom: 12,
-    paddingHorizontal: 20,
+    paddingRight: 20,
     backgroundColor: Colors.White,
     // ...Theme.shadow,
     shadowColor: Colors.Gray13,

package/src/commons/HeaderAni/index.js

@@ -6,6 +6,7 @@ import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import Text from '../../commons/Text';
 import { Colors, Constants } from '../../configs';
+import { TESTID } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
 const default_height = 44;
@@ -89,7 +90,11 @@ const HeaderAni = memo(
             },
           ]}
         >
-          <TouchableOpacity style={styles.btnBack} onPress={onPressLeft}>
+          <TouchableOpacity
+            style={styles.btnBack}
+            onPress={onPressLeft}
+            testID={TESTID.ICON_BACK}
+          >
             <Icon name={'left'} size={27} color={Colors.Gray9} />
           </TouchableOpacity>
           <View styles={styles.wrapRightComponent}>{rightComponent}</View>

package/src/commons/MediaPlayerDetail/index.js

@@ -6,7 +6,14 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Image, View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import {
+  Image,
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
 import { VLCPlayer } from 'react-native-vlc-media-player';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -68,7 +75,9 @@ const MediaPlayerDetail = ({
         newHeight = 224;
         break;
       case 4:
-        newWidth = Constants.width / 1.5;
+        newWidth =
+          Constants.width /
+          (Platform.OS === 'ios' && Constants.width < 400 ? 1.5 : 2);
         newHeight = 112;
         break;
       case 6:

package/src/commons/Sharing/MemberList.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors } from '../../configs';
+import { Colors, Constants } from '../../configs';
 import Text from '../../commons/Text';
 import RowMember from './RowMember';
 
@@ -26,7 +26,9 @@ const MemberList = ({
           />
         ))}
       {!dataMember.length && (
-        <Text style={styles.textCenter}>{t('no_member')}</Text>
+        <View style={styles.viewEmpty}>
+          <Text style={styles.textCenter}>{t('no_member')}</Text>
+        </View>
       )}
     </View>
   );
@@ -37,4 +39,10 @@ const styles = StyleSheet.create({
   box: {
     backgroundColor: Colors.White,
   },
+  viewEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: Constants.height - 200,
+    backgroundColor: Colors.White,
+  },
 });