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

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.02",
   "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",

package/react-native-smart-city.podspec

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

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,26 @@ 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);
+        } else {
+          ToastBottomHelper.error(JSON.stringify(data));
+          goBack();
         }
+
         break;
+      }
       case 'ROBOT': {
         const { success, data } = await axiosPost(API.UNIT.CHIP_SCAN(unit.id), {
           imei: gateway?.imei,
@@ -114,12 +115,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 +164,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/MediaPlayerDetail/index.js

@@ -68,7 +68,7 @@ const MediaPlayerDetail = ({
         newHeight = 224;
         break;
       case 4:
-        newWidth = Constants.width / 2;
+        newWidth = Constants.width / 1.5;
         newHeight = 112;
         break;
       case 6:
@@ -91,9 +91,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 +114,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/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 {
@@ -148,7 +154,7 @@ describe('test ShortDetail Subunit', () => {
     expect(itemDevice.length).toBe(1);
   });
 
-  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: {

package/src/configs/API.js

@@ -41,6 +41,10 @@ const API = {
   CHIP: {
     CHECK_FINALIZED: () => '/property_manager/stations/check_chip_finalized/',
     GET_CHIPS_FROM_UNIT: (id) => `/property_manager/get_chips/?unit_id=${id}`,
+    CHIP_DETAIL: (id) => `/chip_manager/chips/${id}/`,
+  },
+  SENSOR: {
+    SENSOR_DETAIL: (id) => `/chip_manager/sensors/${id}/`,
   },
   DEVICE: {
     SENSOR_DETAIL: (id) => `/property_manager/sensors/${id}/`,

package/src/hooks/Common/useSensorsStatus.js

@@ -12,14 +12,14 @@ const useSensorsStatus = (unit, sensors) => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const getSensorsStatus = useCallback(
-    throttle(async () => {
+    throttle(async (_unit, _sensors) => {
       const params = new URLSearchParams();
-      if (sensors?.length > 0) {
-        sensors.forEach((sensor) => {
+      if (_sensors?.length > 0) {
+        _sensors.forEach((sensor) => {
           params.append('sensors', sensor.id);
         });
         const { success, data, resp_status } = await axiosGet(
-          API.UNIT.SENSORS_STATUS(unit.id),
+          API.UNIT.SENSORS_STATUS(_unit.id),
           {
             params: params,
           }
@@ -32,19 +32,22 @@ const useSensorsStatus = (unit, sensors) => {
         }
       }
     }, 3000),
-    [unit, sensors]
+    []
   );
 
   useEffect(() => {
     if (isFocused) {
-      getSensorsStatus();
-      const updateInterval = setInterval(getSensorsStatus, 5000);
+      getSensorsStatus(unit, sensors);
+      const updateInterval = setInterval(
+        () => getSensorsStatus(unit, sensors),
+        5000
+      );
       intervalSensorStatus.current = updateInterval;
       return () => clearInterval(updateInterval);
     } else {
       clearInterval(intervalSensorStatus.current);
     }
-  }, [isFocused, getSensorsStatus]);
+  }, [isFocused, getSensorsStatus, unit, sensors]);
 
   const getStatus = (sensor) => {
     sensorsStatus.find((s) => s.id === sensor.id);

package/src/hooks/useReceiveNotifications.js

@@ -5,7 +5,7 @@ const useReceiveNotifications = () => {
   const [dataNofitication, setDataNofitication] = useState(null);
 
   const onReceived = useCallback((data) => {
-    const { additionalData } = data.payload;
+    const { additionalData } = data;
     setDataNofitication(additionalData);
   }, []);
 

package/src/screens/UnitSummary/components/WaterQuality/Item/index.js

@@ -22,11 +22,11 @@ const Item = memo((props) => {
       <View size={14} color={Colors.Gray8} style={styles.textTitleX}>
         <Text>{title}</Text>
         {waterType && (
-          <TouchableOpacity onPress={goToDetail}>
+          <TouchableOpacity onPress={goToDetail} style={styles.buttonInfo}>
             <IconOutline
               style={styles.row}
               name="info-circle"
-              size={14}
+              size={20}
               color={Colors.Black}
             />
           </TouchableOpacity>
@@ -79,4 +79,12 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  buttonInfo: {
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: -10,
+    marginRight: -10,
+  },
 });

package/src/utils/I18n/translations/en.json

@@ -987,5 +987,7 @@
   "back": "Back",
   "invaild_data": "Invaild data",
   "This {name} was removed!" : "This {name} was removed!",
+  "camera_request_permission": "Camera request permission",
+  "camera_request_permission_des": "To use camera, please unlock camera permission",
   "location_require_message": "EoH needs your location permission to get current location."
 }

package/src/utils/I18n/translations/vi.json

@@ -988,5 +988,7 @@
   "invaild_data": "Dữ liệu không hợp lệ",
   "This {name} was removed!" : "{Name} này đã bị xóa!",
   "location_perm_denied": "Ứng dụng không cho phép truy cập vị trí.",
+  "camera_request_permission": "Quyền yêu cầu máy ảnh",
+  "camera_request_permission_des": "Để sử dụng máy ảnh, vui lòng mở khóa quyền đối với máy ảnh",
   "location_require_message": "Eoh cần quyền truy cập vị trí của bạn để lấy vị trí hiện tại."
 }

package/src/utils/Permission/common.js

@@ -1,4 +1,13 @@
-import { openSettings, PERMISSIONS } from 'react-native-permissions';
+/* eslint-disable promise/prefer-await-to-then */
+/* eslint-disable promise/prefer-await-to-callbacks */
+
+import {
+  check,
+  openSettings,
+  PERMISSIONS,
+  request,
+  RESULTS,
+} from 'react-native-permissions';
 import AlertAsync from 'react-native-alert-async';
 import t from '../../hooks/Common/useTranslations';
 import { Platform } from 'react-native';
@@ -21,6 +30,25 @@ export const OpenSetting = async (alertTitle, alertMessage) => {
   ]);
 };
 
+export const permitPermissionFunction = (keyPermission, callback) => {
+  if (keyPermission) {
+    check(keyPermission).then((result) => {
+      switch (result) {
+        case RESULTS.DENIED:
+        case RESULTS.LIMITED:
+          request(keyPermission).then((res) => callback(res));
+          break;
+        case RESULTS.BLOCKED:
+        case RESULTS.GRANTED:
+          callback(result);
+          break;
+        default:
+          break;
+      }
+    });
+  }
+};
+
 export const keyPermission = {
   SMS_RECEIVE: PERMISSIONS.ANDROID.RECEIVE_SMS,
   LOCATION: isAndroid