@eohjsc/react-native-smart-city 0.3.1 → 0.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.01",
+  "version": "0.3.04",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -100,7 +100,7 @@
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
     "@babel/helper-environment-visitor": "^7.16.7",
-    "@eohjsc/highcharts": "^1.0.8",
+    "@eohjsc/highcharts": "^1.0.9",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",
@@ -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/react-native-smart-city.podspec

@@ -22,6 +22,7 @@ Pod::Spec.new do |s|
   s.requires_arc = true
 
   s.dependency "React"
+  s.dependency "RNPermissions"
   # ...
   # s.dependency "..."
 end

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/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/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/ConnectingProcess/DeviceItem/DeviceItem.js

@@ -2,13 +2,17 @@ import React, { memo } from 'react';
 import { View } from 'react-native';
 import styles from './DeviceItemStyles';
 import FImage from '../../FImage';
-import Text from '../../Text';
+import _TextInput from '../../Form/TextInput';
 
-const DeviceItem = memo(({ icon, name }) => {
+const DeviceItem = memo(({ icon, name, setNewName }) => {
   return (
     <View style={styles.container}>
       {!!icon && <FImage source={{ uri: icon }} style={styles.iconSensor} />}
-      <Text style={styles.textItem}>{name}</Text>
+      <_TextInput
+        value={name}
+        textInputStyle={styles.textItem}
+        onChange={setNewName}
+      />
     </View>
   );
 });

package/src/commons/ConnectingProcess/DeviceItem/DeviceItemStyles.js

@@ -1,23 +1,14 @@
 import { StyleSheet } from 'react-native';
-import { Constants, Colors } from '../../../configs';
-
-const marginItem = 12;
-const marginHorizontal = 5;
-const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
-const heightItem = (widthItem / 166) * 60;
+import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   container: {
-    paddingHorizontal: 15,
     borderRadius: 10,
     width: 250,
-    height: heightItem,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     backgroundColor: Colors.White,
     justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 16,
     flexDirection: 'row',
     shadowColor: Colors.Shadow,
     shadowOffset: {
@@ -36,7 +27,13 @@ export default StyleSheet.create({
     resizeMode: 'contain',
   },
   textItem: {
-    marginLeft: 15,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+    textAlign: 'center',
+    marginTop: -10,
+    padding: 5,
     fontSize: 16,
+    height: 50,
   },
 });

package/src/commons/ConnectingProcess/__test__/DeviceItem.test.js

@@ -2,7 +2,8 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import DeviceItem from '../DeviceItem/DeviceItem';
 import FImage from '../../FImage';
-import Text from '../../Text';
+import _TextInput from '../../Form/TextInput';
+
 describe('Test DeviceItem button', () => {
   let tree;
   test('create DeviceItem button', () => {
@@ -11,7 +12,7 @@ describe('Test DeviceItem button', () => {
     });
     const instance = tree.root;
     const image = instance.findAllByType(FImage);
-    const text = instance.findAllByType(Text);
+    const text = instance.findAllByType(_TextInput);
     expect(image).toHaveLength(0);
     expect(text).toHaveLength(1);
   });

package/src/commons/ConnectingProcess/index.js

@@ -6,7 +6,7 @@ import { useNavigation } from '@react-navigation/native';
 import ImageSuccessfully from '../../Images/Common/SuccessfullyConnected.svg';
 
 import Text from '../Text';
-import { axiosPost } from '../../utils/Apis/axios';
+import { axiosPatch, axiosPost } from '../../utils/Apis/axios';
 import { API, Colors } from '../../configs';
 import styles from './styles';
 import DeviceItem from './DeviceItem/DeviceItem';
@@ -32,25 +32,27 @@ const ConnectingProcess = ({ route }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [sensor, setSensor] = useState(null);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
+  const [newName, setNewName] = useState('');
 
   const ConnectingDevice = useCallback(async () => {
     setIsLoading(true);
     switch (devicePrefixName) {
-      case 'SENSOR':
-        {
-          const body = { imei: scan_sensor_data?.imei, chip: gateway?.id };
-          const { success, data } = await axiosPost(
-            API.SUB_UNIT.SENSOR_SCAN(station.id),
-            body
-          );
-          if (success) {
-            setSensor(data);
-          } else {
-            ToastBottomHelper.error(JSON.stringify(data));
-            goBack();
-          }
+      case 'SENSOR': {
+        const body = { imei: scan_sensor_data?.imei, chip: gateway?.id };
+        const { success, data } = await axiosPost(
+          API.SUB_UNIT.SENSOR_SCAN(station.id),
+          body
+        );
+        if (success) {
+          setSensor(data);
+          setNewName(data?.name);
+        } else {
+          ToastBottomHelper.error(JSON.stringify(data));
+          goBack();
         }
+
         break;
+      }
       case 'ROBOT': {
         const { success, data } = await axiosPost(API.UNIT.CHIP_SCAN(unit.id), {
           imei: gateway?.imei,
@@ -63,6 +65,7 @@ const ConnectingProcess = ({ route }) => {
         });
         if (success) {
           setSensor(data);
+          setNewName(data?.name);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -79,6 +82,7 @@ const ConnectingProcess = ({ route }) => {
         );
         if (success) {
           setSensor({ name: gateway?.model });
+          setNewName(gateway?.model);
         } else {
           ToastBottomHelper.error(JSON.stringify(data));
           goBack();
@@ -114,12 +118,46 @@ const ConnectingProcess = ({ route }) => {
             station?.name !== undefined ? '- ' + station?.name : ''
           }`}
         </Text>
-        <DeviceItem icon={sensor?.icon_kit} name={sensor?.name} />
+        <DeviceItem
+          icon={sensor?.icon_kit}
+          name={newName}
+          setNewName={setNewName}
+        />
       </View>
     );
-  }, [sensor?.icon_kit, sensor?.name, station?.name, t, unit?.name, unit_name]);
+  }, [newName, sensor?.icon_kit, station?.name, t, unit?.name, unit_name]);
+
+  const handleDone = useCallback(async () => {
+    let result, message;
+    switch (devicePrefixName) {
+      case 'SENSOR': {
+        const { success, data } = await axiosPatch(
+          API.SENSOR.SENSOR_DETAIL(sensor?.id),
+          {
+            name: newName,
+          }
+        );
+        result = success;
+        message = data;
+        break;
+      }
+      case 'ROBOT':
+      case 'LITE': {
+        const { success, data } = await axiosPatch(
+          API.CHIP.CHIP_DETAIL(sensor?.id),
+          {
+            name: newName,
+          }
+        );
+        result = success;
+        message = data;
+        break;
+      }
+    }
 
-  const handleDone = useCallback(() => {
+    if (!result) {
+      ToastBottomHelper.error(JSON.stringify(message));
+    }
     navigate(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
@@ -129,7 +167,15 @@ const ConnectingProcess = ({ route }) => {
         stationId: station?.id,
       },
     });
-  }, [navigate, station?.id, unit, unit_id]);
+  }, [
+    devicePrefixName,
+    navigate,
+    newName,
+    sensor?.id,
+    station?.id,
+    unit,
+    unit_id,
+  ]);
 
   useEffect(() => {
     ConnectingDevice();

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 / 2;
+        newWidth =
+          Constants.width /
+          (Platform.OS === 'ios' && Constants.width < 400 ? 1.5 : 2);
         newHeight = 112;
         break;
       case 6:
@@ -91,9 +100,9 @@ const MediaPlayerDetail = ({
       <VLCPlayer
         autoAspectRatio={true}
         videoAspectRatio={
-          width && height
-            ? `${width}:${height}`
-            : `${getWidthHeight().width}:${getWidthHeight().height}`
+          amount
+            ? `${getWidthHeight().width}:${getWidthHeight().height}`
+            : `${width}:${height}`
         }
         source={{
           initType: 2,
@@ -114,8 +123,8 @@ const MediaPlayerDetail = ({
           styles.player,
           style,
           {
-            width: width || getWidthHeight().width,
-            height: height || getWidthHeight().height,
+            width: amount ? getWidthHeight().width : width,
+            height: amount ? getWidthHeight().height : height,
           },
         ]}
         isLive={true}

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,
+  },
 });

package/src/commons/Sharing/WrapHeaderScrollable.js

@@ -13,6 +13,7 @@ import { isIphoneX } from 'react-native-iphone-x-helper';
 import { Colors, Theme } from '../../configs';
 import HeaderAni, { heightHeader } from '../../commons/HeaderAni';
 import Text from '../../commons/Text';
+import { TESTID } from '../../configs/Constants';
 
 const WrapHeaderScrollable = ({
   children,
@@ -59,6 +60,7 @@ const WrapHeaderScrollable = ({
         onLeft={onGoBack}
       />
       <Animated.ScrollView
+        testID={TESTID.ANIMATED_SCROLL}
         scrollEventThrottle={16}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: animatedScrollYValue } } }],

package/src/commons/SubUnit/ShortDetail.js

@@ -15,6 +15,12 @@ import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
 import MediaPlayerDetail from '../MediaPlayerDetail';
+import {
+  keyPermission,
+  OpenSetting,
+  permitPermissionFunction,
+} from '../../utils/Permission/common';
+import { RESULTS } from 'react-native-permissions';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -71,13 +77,24 @@ const ShortDetailSubUnit = ({ unit, station }) => {
   };
 
   const handleOnAddNew = () => {
-    navigate(Routes.AddDeviceStack, {
-      screen: Routes.ScanSensorQR,
-      params: {
-        station_id: station?.id,
-        unit_id: unit.id,
-        unit_name: unit.name,
-      },
+    permitPermissionFunction(keyPermission.CAMERA, (res) => {
+      if (res === RESULTS.GRANTED) {
+        navigate(Routes.AddDeviceStack, {
+          screen: Routes.ScanSensorQR,
+          params: {
+            station_id: station?.id,
+            unit_id: unit.id,
+            unit_name: unit.name,
+          },
+        });
+        return;
+      }
+      if (res === RESULTS.BLOCKED) {
+        OpenSetting(
+          t('camera_request_permission'),
+          t('camera_request_permission_des')
+        );
+      }
     });
   };
 

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Image, View } from 'react-native';
 import { act, create } from 'react-test-renderer';
+import mock from 'react-native-permissions/mock';
 import { TESTID } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import ShortDetailSubUnit from '../ShortDetail';
 import ItemAddNew from '../../Device/ItemAddNew';
 import Routes from '../../../utils/Route';
+import { keyPermission } from '../../../utils/Permission/common';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
@@ -21,6 +23,10 @@ jest.mock('react', () => {
   };
 });
 
+jest.mock('react-native-permissions', () => {
+  return mock;
+});
+
 const mockedNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
@@ -145,10 +151,10 @@ describe('test ShortDetail Subunit', () => {
       (item) =>
         item.props.testID === TESTID.SUB_UNIT_DEVICES && item.type === View
     );
-    expect(itemDevice.length).toBe(1);
+    expect(itemDevice.length).toBe(0);
   });
 
-  test('render ShortDetail add new device', () => {
+  test('render ShortDetail add new device', async () => {
     act(() => {
       tree = create(wrapComponent(props));
     });
@@ -157,6 +163,7 @@ describe('test ShortDetail Subunit', () => {
     act(() => {
       buttonAddNew.props.onAddNew();
     });
+    await mock.request(keyPermission.CAMERA);
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddDeviceStack, {
       screen: Routes.ScanSensorQR,
       params: {