@eohjsc/react-native-smart-city 0.2.60 → 0.2.61

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.60",
+  "version": "0.2.61",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -157,7 +157,7 @@
     "react-native-geocoder": "^0.5.0",
     "react-native-gesture-handler": "^1.7.0",
     "react-native-get-location": "^2.0.0",
-    "react-native-image-picker": "^3.1.4",
+    "react-native-image-crop-picker": "^0.37.2",
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",

package/src/commons/Device/HistoryChart.js

@@ -38,94 +38,97 @@ const HistoryChart = memo(
     configuration,
   }) => {
     const t = useTranslations();
-    const dateNow = moment().valueOf();
     const [chartOptions, setChartOptions] = useState({
       index: -1,
       showAll: true,
     });
     const [eventPicker, setEventPicker] = useState({
-      currentChangeTime: '',
       showModalEnd: false,
       showModalStart: false,
       startTime: startDate ? startDate : moment().subtract(1, 'day').valueOf(),
-      endTime: dateNow,
+      endTime: endDate ? endDate : moment().valueOf(),
     });
     const [price, setPrice] = useState(null);
 
     const onStart = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: 'start',
+      setEventPicker((state) => ({
+        ...state,
         showModalStart: true,
         showModalEnd: false,
-      });
-    }, [eventPicker]);
+      }));
+    }, []);
     const onEnd = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: 'end',
-        show: true,
+      setEventPicker((state) => ({
+        ...state,
         showModalStart: false,
         showModalEnd: true,
-      });
-    }, [eventPicker]);
-    const onConfirmStart = (date) => {
-      if (typeof date === 'number') {
-        onCancel();
-        return;
-      }
-      if (moment(date).valueOf() < eventPicker.endTime) {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalStart: false,
-          startTime: moment(date).valueOf(),
-        });
-      } else {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalStart: false,
-          startTime: moment(date).valueOf(),
-          endTime: moment(date).add(1, 'day').valueOf(),
+      }));
+    }, []);
+    const onConfirmStart = useCallback(
+      (date) => {
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          if (moment(date).valueOf() < state.endTime) {
+            setStartDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalStart: false,
+              startTime: moment(date).valueOf(),
+            };
+          } else {
+            setStartDate(moment(date).valueOf());
+            setEndDate(moment(date).add(1, 'day').valueOf());
+            return {
+              ...state,
+              showModalStart: false,
+              startTime: moment(date).valueOf(),
+              endTime: moment(date).add(1, 'day').valueOf(),
+            };
+          }
         });
-      }
-
-      setStartDate(moment(date).valueOf());
-    };
+      },
+      [onCancel, setStartDate, setEndDate]
+    );
 
-    const onConfirmEnd = (date) => {
-      if (typeof date === 'number') {
-        onCancel();
-        return;
-      }
-      if (moment(date).valueOf() >= eventPicker.startTime) {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalEnd: false,
-          endTime: moment(date).valueOf(),
+    const onConfirmEnd = useCallback(
+      (date) => {
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          if (moment(date).valueOf() > state.startTime) {
+            setEndDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalEnd: false,
+              endTime: moment(date).valueOf(),
+            };
+          } else {
+            setStartDate(moment(date).add(-1, 'day').valueOf());
+            setEndDate(moment(date).valueOf());
+            return {
+              ...state,
+              showModalEnd: false,
+              startTime: moment(date).add(-1, 'day').valueOf(),
+              endTime: moment(date).valueOf(),
+            };
+          }
         });
-      } else {
-        setEventPicker({
-          ...eventPicker,
-          currentChangeTime: 'start',
-          showModalEnd: false,
-          endTime: moment(date).valueOf(),
-          startTime: moment(date).subtract(1, 'day').valueOf(),
-        });
-      }
-      setEndDate(moment(date).valueOf());
-    };
+      },
+      [onCancel, setStartDate, setEndDate]
+    );
 
     const onCancel = useCallback(() => {
-      setEventPicker({
-        ...eventPicker,
-        currentChangeTime: '',
+      setEventPicker((state) => ({
+        ...state,
         showModalEnd: false,
         showModalStart: false,
-      });
-    }, [eventPicker]);
+      }));
+    }, []);
     const onShowOneChart = useCallback(
       (index) => {
         if (index === chartOptions.index) {
@@ -191,7 +194,6 @@ const HistoryChart = memo(
             onStart={onStart}
             onEnd={onEnd}
             endTime={eventPicker.endTime}
-            date={dateNow}
             formatType={formatType}
           />
         </View>

package/src/commons/ImagePicker/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Platform, PermissionsAndroid } from 'react-native';
-import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
+import ImagePickerCrop from 'react-native-image-crop-picker';
+
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import ButtonPopup from '../ButtonPopup';
@@ -54,34 +55,29 @@ const ImagePicker = ({
     }
   }, []);
 
-  // options info: check https://github.com/react-native-image-picker/react-native-image-picker
   const captureImage = useCallback(
     async (type) => {
       let options = optionsCapture
         ? optionsCapture
         : {
             mediaType: type,
-            quality: 1,
-            saveToPhotos: true,
+            compressImageMaxWidth: 1280,
+            compressImageMaxHeight: 720,
+            compressImageQuality: 0.8,
           };
 
       let isCameraPermitted = await requestCameraPermission();
       let isStoragePermitted = await requestExternalWritePermission();
       if (isCameraPermitted && isStoragePermitted) {
-        launchCamera(options, (response) => {
-          if (response.didCancel) {
-            return;
-          } else if (response.errorCode === 'camera_unavailable') {
-            return;
-          } else if (response.errorCode === 'permission') {
-            return;
-          } else if (response.errorCode === 'others') {
-            return;
-          }
-
-          setImageUrl(response);
-          setShowImagePicker(false);
-        });
+        await ImagePickerCrop.openCamera(options)
+          .then((response) => {
+            setImageUrl(response);
+            setShowImagePicker(false);
+          })
+          .catch((e) => {
+            /* eslint-disable no-console */
+            console.log('ERROR ' + e);
+          });
       }
     },
     [
@@ -94,26 +90,24 @@ const ImagePicker = ({
   );
 
   const chooseFile = useCallback(
-    (type) => {
+    async (type) => {
       let options = optionsSelect
         ? optionsSelect
         : {
             mediaType: type,
-            quality: 1,
+            compressImageMaxWidth: 1280,
+            compressImageMaxHeight: 720,
+            compressImageQuality: 0.8,
           };
-      launchImageLibrary(options, (response) => {
-        if (response.didCancel) {
-          return;
-        } else if (response.errorCode === 'camera_unavailable') {
-          return;
-        } else if (response.errorCode === 'permission') {
-          return;
-        } else if (response.errorCode === 'others') {
-          return;
-        }
-        setImageUrl(response);
-        setShowImagePicker(false);
-      });
+      await ImagePickerCrop.openPicker(options)
+        .then((response) => {
+          setImageUrl(response);
+          setShowImagePicker(false);
+        })
+        .catch((e) => {
+          /* eslint-disable no-console */
+          console.log('ERROR ' + e);
+        });
     },
     [setImageUrl, setShowImagePicker, optionsSelect]
   );

package/src/commons/UnitSummary/AirQuality/index.js

@@ -63,6 +63,14 @@ const AirQuality = memo(({ summaryDetail }) => {
     return outdoor_pm10_id || outdoor_pm2_5_id || outdoor_co_id ? true : false;
   }, [outdoor_pm10_id, outdoor_pm2_5_id, outdoor_co_id]);
 
+  const configs = useMemo(() => {
+    return [
+      { id: outdoor_pm2_5_id, title: 'PM2.5', color: 'red' },
+      { id: outdoor_pm10_id, title: 'PM10', color: 'blue' },
+      { id: outdoor_co_id, title: 'CO', color: 'orange' },
+    ];
+  }, [outdoor_pm10_id, outdoor_pm2_5_id, outdoor_co_id]);
+
   const [indexOutdoor, setIndexOutdoor] = useState(0);
   const onSelectOutdoor = useCallback((i) => {
     setIndexOutdoor(i);
@@ -154,13 +162,7 @@ const AirQuality = memo(({ summaryDetail }) => {
       )}
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: outdoor_pm2_5_id, title: 'PM2.5', color: 'red' },
-              { id: outdoor_pm10_id, title: 'PM10', color: 'blue' },
-              { id: outdoor_co_id, title: 'CO', color: 'orange' },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </View>

package/src/iot/RemoteControl/GoogleHome.js

@@ -27,7 +27,7 @@ function numberType(value) {
 
 function textType(value, entityId) {
   const textMap = textMaps[entityId];
-  return textMap[value];
+  return textMap ? textMap[value] : '';
 }
 
 function keepValue(value) {

package/src/screens/SubUnit/AddSubUnit.js

@@ -29,11 +29,11 @@ import styles from './AddSubUnitStyles';
 const MAX_FILE_SIZE_BYTES = 1.5 * 1024 * 1024; // 1.5mb
 
 const prepareImageToUpload = async (image) => {
-  if (!image || image.fileSize < MAX_FILE_SIZE_BYTES) {
+  if (!image || image.size < MAX_FILE_SIZE_BYTES) {
     return image;
   }
   const result = await ImageResizer.createResizedImage(
-    image.uri,
+    image.path,
     1280,
     1280,
     'JPEG',
@@ -214,7 +214,7 @@ const AddSubUnit = ({ route }) => {
                   </Text>
                   {wallpaper ? (
                     <Image
-                      source={{ uri: wallpaper.uri }}
+                      source={{ uri: wallpaper.uri || wallpaper.path }}
                       style={styles.wallpaper}
                     />
                   ) : (

package/src/screens/SubUnit/EditSubUnit.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors, API, Device } from '../../configs';
+import { Colors, API } from '../../configs';
 import { ToastBottomHelper } from '../../utils/Utils';
 import {
   axiosPatch,
@@ -84,9 +84,11 @@ const EditSubUnit = ({ route }) => {
     },
     [unit.id, station.id, t]
   );
+
   const updateBackground = useCallback(
     async (headers) => {
-      const formData = createFormData(imageUrl, ['background']);
+      const formData = createFormData({ background: imageUrl }, ['background']);
+
       const { success } = await axiosPatch(
         API.SUB_UNIT.MANAGE_SUB_UNIT(unit.id, station.id),
         formData,
@@ -146,9 +148,9 @@ const EditSubUnit = ({ route }) => {
   const options = {
     mediaType: 'photo',
     maxWidth: 1024,
-    quality: 0.8,
-    includeBase64: Device.isIOS,
-    saveToPhotos: true,
+    compressImageMaxWidth: 1280,
+    compressImageMaxHeight: 720,
+    compressImageQuality: 0.8,
   };
 
   const contactsName = listContacts.map((item) => item.name);
@@ -193,7 +195,7 @@ const EditSubUnit = ({ route }) => {
               <Image
                 style={styles.image}
                 source={{
-                  uri: resourcePath.uri,
+                  uri: resourcePath.uri || resourcePath.path,
                 }}
                 resizeMode="cover"
               />

package/src/screens/SubUnit/__test__/EditSubUnit.test.js

@@ -381,7 +381,7 @@ describe('Test EditSubUnit', () => {
     const imagePicker = instance.findByType(ImagePicker);
     const image = instance.findByType(Image);
     expect(image.props.source).toEqual({
-      uri: '',
+      uri: undefined,
     });
     await act(async () => {
       await imagePicker.props.setImageUrl({ uri: 'path' });
@@ -413,7 +413,7 @@ describe('Test EditSubUnit', () => {
     const imagePicker = instance.findByType(ImagePicker);
     const image = instance.findByType(Image);
     expect(image.props.source).toEqual({
-      uri: '',
+      uri: undefined,
     });
     await act(async () => {
       await imagePicker.props.setImageUrl({ uri: 'path' });

package/src/screens/Unit/ManageUnit.js

@@ -3,7 +3,7 @@ import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors, API, Device, Images } from '../../configs';
+import { Colors, API, Images } from '../../configs';
 import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
 import {
@@ -77,8 +77,8 @@ const ManageUnit = ({ route }) => {
   const [showImagePicker, setShowImagePicker] = useState(false);
 
   const updateUnit = useCallback(
-    async (bodyData, headers) => {
-      const formData = createFormData(bodyData, ['background']);
+    async (headers) => {
+      const formData = createFormData({ background: imageUrl }, ['background']);
 
       const { success, data } = await axiosPatch(
         API.UNIT.MANAGE_UNIT(unit.id),
@@ -90,7 +90,7 @@ const ManageUnit = ({ route }) => {
         ToastBottomHelper.success(t('unit_updated_successfully'));
       }
     },
-    [unit.id, t]
+    [unit.id, t, imageUrl]
   );
 
   const updateLocation = useCallback(
@@ -120,12 +120,9 @@ const ManageUnit = ({ route }) => {
 
   useEffect(() => {
     if (imageUrl) {
-      updateUnit(
-        { background: imageUrl },
-        {
-          headers: { 'Content-Type': 'multipart/form-data' },
-        }
-      );
+      updateUnit({
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
     }
   }, [imageUrl, updateUnit]);
 
@@ -158,9 +155,9 @@ const ManageUnit = ({ route }) => {
   const options = {
     mediaType: 'photo',
     maxWidth: 1024,
-    quality: 0.8,
-    includeBase64: Device.isIOS,
-    saveToPhotos: true,
+    compressImageMaxWidth: 1280,
+    compressImageMaxHeight: 720,
+    compressImageQuality: 0.8,
   };
 
   return (
@@ -202,7 +199,7 @@ const ManageUnit = ({ route }) => {
                 <View style={styles.boxImage}>
                   <Image
                     source={{
-                      uri: unit.background,
+                      uri: unitData.background,
                     }}
                     borderRadius={10}
                     style={styles.image}

package/src/screens/UnitSummary/components/3PPowerConsumption/index.js

@@ -12,7 +12,7 @@ import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import { TESTID } from '../../../../configs/Constants';
 
-const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
+const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
   const {
     volt1Value,
@@ -133,8 +133,59 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     return !!listConfigs;
   }, [listConfigs]);
 
-  const listIdsConfig = useMemo(() => {
-    return listConfigs;
+  const configs = useMemo(() => {
+    return [
+      {
+        id: listConfigs?.volt_1,
+        title: 'Volt 1',
+        color: Colors.Red6,
+      },
+      {
+        id: listConfigs?.volt_2,
+        title: 'Volt 2',
+        color: Colors.Red8,
+      },
+      {
+        id: listConfigs?.volt_3,
+        title: 'Volt 3',
+        color: Colors.Red9,
+      },
+      {
+        id: listConfigs?.current_1,
+        title: 'Current 1',
+        color: Colors.Blue10,
+      },
+      {
+        id: listConfigs?.current_2,
+        title: 'Current 2',
+        color: Colors.Blue11,
+      },
+      {
+        id: listConfigs?.current_3,
+        title: 'Current 3',
+        color: Colors.Blue12,
+      },
+      {
+        id: listConfigs?.active_power,
+        title: 'Active Power',
+        color: Colors.Orange6,
+      },
+      {
+        id: listConfigs?.power_factor_1,
+        title: 'Power Factor 1',
+        color: Colors.Green6,
+      },
+      {
+        id: listConfigs?.power_factor_2,
+        title: 'Power Factor 2',
+        color: Colors.Green9,
+      },
+      {
+        id: listConfigs?.power_factor_3,
+        title: 'Power Factor 3',
+        color: Colors.Green10,
+      },
+    ];
   }, [listConfigs]);
 
   const [startDate, setStartDate] = useState(
@@ -180,60 +231,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
         />
         {showBoxHistory && (
           <View>
-            <ConfigHistoryChart
-              configs={[
-                {
-                  id: listIdsConfig.volt_1,
-                  title: 'Volt 1',
-                  color: Colors.Red6,
-                },
-                {
-                  id: listIdsConfig.volt_2,
-                  title: 'Volt 2',
-                  color: Colors.Red8,
-                },
-                {
-                  id: listIdsConfig.volt_3,
-                  title: 'Volt 3',
-                  color: Colors.Red9,
-                },
-                {
-                  id: listIdsConfig.current_1,
-                  title: 'Current 1',
-                  color: Colors.Blue10,
-                },
-                {
-                  id: listIdsConfig.current_2,
-                  title: 'Current 2',
-                  color: Colors.Blue11,
-                },
-                {
-                  id: listIdsConfig.current_3,
-                  title: 'Current 3',
-                  color: Colors.Blue12,
-                },
-                {
-                  id: listIdsConfig.active_power,
-                  title: 'Active Power',
-                  color: Colors.Orange6,
-                },
-                {
-                  id: listIdsConfig.power_factor_1,
-                  title: 'Power Factor 1',
-                  color: Colors.Green6,
-                },
-                {
-                  id: listIdsConfig.power_factor_2,
-                  title: 'Power Factor 2',
-                  color: Colors.Green9,
-                },
-                {
-                  id: listIdsConfig.power_factor_3,
-                  title: 'Power Factor 3',
-                  color: Colors.Green10,
-                },
-              ]}
-            />
+            <ConfigHistoryChart configs={configs} />
           </View>
         )}
       </Section>

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -109,6 +109,28 @@ const PowerConsumption = memo(({ summaryDetail }) => {
       fetchData();
     }
   }, [startDate, endDate, listConfigs?.total_power, groupBy]);
+
+  const configs = useMemo(() => {
+    return [
+      { id: listIdsConfig?.volt, title: 'Volt', color: 'red' },
+      {
+        id: listIdsConfig?.current,
+        title: 'Current',
+        color: 'blue',
+      },
+      {
+        id: listIdsConfig?.active_power,
+        title: 'Active Power',
+        color: 'orange',
+      },
+      {
+        id: listIdsConfig?.power_factor,
+        title: 'Power Factor',
+        color: 'green',
+      },
+    ];
+  }, [listIdsConfig]);
+
   return (
     <>
       <Section type={'border'}>
@@ -120,26 +142,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         />
         {showBoxHistory && (
           <View>
-            <ConfigHistoryChart
-              configs={[
-                { id: listIdsConfig.volt, title: 'Volt', color: 'red' },
-                {
-                  id: listIdsConfig.active_power,
-                  title: 'Current',
-                  color: 'blue',
-                },
-                {
-                  id: listIdsConfig.current,
-                  title: 'Active Power',
-                  color: 'orange',
-                },
-                {
-                  id: listIdsConfig.power_factor,
-                  title: 'Power Factor',
-                  color: 'green',
-                },
-              ]}
-            />
+            <ConfigHistoryChart configs={configs} />
           </View>
         )}
       </Section>

package/src/screens/UnitSummary/components/Temperature/index.js

@@ -56,6 +56,20 @@ const Temperature = memo(({ summaryDetail }) => {
     [summaryDetail]
   );
 
+  const configs = useMemo(() => {
+    return [
+      {
+        id: listConfigs?.temp,
+        title: t('text_temperature'),
+        color: Colors.Blue10,
+      },
+      {
+        id: listConfigs?.humi,
+        title: t('text_humidity'),
+        color: Colors.Red6,
+      },
+    ];
+  }, [listConfigs?.humi, listConfigs?.temp, t]);
   return (
     <>
       <Section type={'border'}>
@@ -78,20 +92,7 @@ const Temperature = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              {
-                id: listConfigs.temp,
-                title: t('text_temperature'),
-                color: Colors.Blue10,
-              },
-              {
-                id: listConfigs.humi,
-                title: t('text_humidity'),
-                color: Colors.Red6,
-              },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

package/src/screens/UnitSummary/components/UvIndex/index.js

@@ -22,6 +22,11 @@ const UvIndex = memo(({ summaryDetail }) => {
   } else if (summaryDetail.uv_value > 10) {
     valueRefined = 10;
   }
+
+  const configs = useMemo(() => {
+    return [{ id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 }];
+  }, [t, uv_id]);
+
   return (
     <>
       <Section type={'border'}>
@@ -70,11 +75,7 @@ const UvIndex = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

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

@@ -12,6 +12,14 @@ const WaterQuality = memo(({ summaryDetail }) => {
   const showBoxHistory = useMemo(() => {
     return ph_id || tur_id || clo_id ? true : false;
   }, [ph_id, tur_id, clo_id]);
+
+  const configs = useMemo(() => {
+    return [
+      { id: ph_id, title: 'pH', color: 'red' },
+      { id: tur_id, title: 'Turbidity', color: 'blue' },
+      { id: clo_id, title: 'Chlorine residual', color: 'orange' },
+    ];
+  }, [ph_id, tur_id, clo_id]);
   return (
     <>
       <Section type={'border'}>
@@ -52,13 +60,7 @@ const WaterQuality = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: ph_id, title: 'pH', color: 'red' },
-              { id: tur_id, title: 'Turbidity', color: 'blue' },
-              { id: clo_id, title: 'Chlorine residual', color: 'orange' },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

package/src/screens/UnitSummary/index.js

@@ -4,6 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import moment from 'moment';
 
 import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
@@ -18,6 +19,7 @@ import Temperature from './components/Temperature';
 import UvIndex from './components/UvIndex';
 import WaterQuality from './components/WaterQuality';
 import { TESTID } from '../../configs/Constants';
+import { timeDifference } from '../../utils/Converter/time';
 
 const UnitSummary = memo(({ route }) => {
   const t = useTranslations();
@@ -25,6 +27,7 @@ const UnitSummary = memo(({ route }) => {
   const [summaryDetail, setSummaryDetail] = useState({});
 
   const [loading, setLoading] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState();
   const navigation = useNavigation();
 
   const getComponentAndGuide = useCallback(() => {
@@ -75,6 +78,7 @@ const UnitSummary = memo(({ route }) => {
     setLoading(false);
     if (success) {
       setSummaryDetail(data.data);
+      setLastUpdated(data.data.last_updated);
     }
   }, [summary.id, unit.id]);
 
@@ -84,7 +88,7 @@ const UnitSummary = memo(({ route }) => {
 
     const autoUpdate = setInterval(() => {
       fetchSummaryDetail();
-    }, 5000); // fetch each 5 second
+    }, 10000); // fetch each 10 second
 
     return () => clearInterval(autoUpdate);
   }, [fetchSummaryDetail]);
@@ -98,11 +102,15 @@ const UnitSummary = memo(({ route }) => {
   const ComponentName = UnitSummaryDetail.componentName;
   const GuideName = UnitSummaryDetail.guideName;
 
+  const lastUpdatedStr = lastUpdated
+    ? `${t('last_updated')} ${timeDifference(moment(), moment(lastUpdated))}`
+    : null;
+
   return (
     <View style={[styles.container]}>
       <WrapHeaderScrollable
         title={summary.name}
-        subTitle={t('last_updated_%{minutes}_minutes_ago', { minutes: 5 })}
+        subTitle={lastUpdatedStr}
         rightComponent={
           GuideName ? (
             <View style={styles.rightComponent}>
@@ -122,11 +130,7 @@ const UnitSummary = memo(({ route }) => {
         loading={loading}
         onRefresh={onRefresh}
       >
-        <ComponentName
-          summaryDetail={summaryDetail}
-          unit={unit}
-          summary={summary}
-        />
+        <ComponentName summaryDetail={summaryDetail} unit={unit} />
       </WrapHeaderScrollable>
     </View>
   );

package/src/utils/Apis/axios.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { deleteData, getData, storeData } from '../Storage';
 import { ToastBottomHelper } from '../Utils';
 import NetInfo from '@react-native-community/netinfo';
+import { Platform } from 'react-native';
 
 export const replaceParams = (apiURL, params) => {
   let _result = apiURL;
@@ -165,13 +166,12 @@ export function createFormData(data, list_file_field) {
       }
 
       formData.append(key, {
-        name: item.fileName,
-        type: item.type,
-        uri: item.uri,
+        uri: Platform.OS === 'ios' ? item.sourceURL : item.path,
+        type: item.mime,
+        name: item.filename || item.path?.split('/').pop(),
       });
       return;
     }
-
     formData.append(key, data[key]);
   });
 

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

@@ -744,7 +744,7 @@
   "rssi_node": "RSSI Node",
   "edit_actions_list": "Edit Actions List",
   "des_edit_actions_list": "Hold and hover to rearrange actions order",
-  "please_add_your_phone_number_and_chip_name": "Please add your phone number and chip name",
+  "please_add_your_phone_number_and_chip_name": "Please add gateway name",
   "phone_number_of_data_sim": "Phone number of data sim",
   "select_a_sub_unit": "Select a sub-unit that you want to add this gateway",
   "all_camera": "All Cameras",

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

@@ -747,7 +747,7 @@
   "request_fail": "Request fail",
   "modbus_fail": "Modbus failrate",
   "rssi_node": "RSSI Node",
-  "please_add_your_phone_number_and_chip_name": "Vui lòng thêm số điện thoại và tên chip của bạn",
+  "please_add_your_phone_number_and_chip_name": "Vui lòng thêm tên gateway",
   "phone_number_of_data_sim": "Số điện thoại của dữ liệu sim",
   "select_a_sub_unit": "Lựa chọn một khu vực mà bạn muốn thêm gateway",
   "all_camera": "All Cameras",
@@ -855,5 +855,6 @@
   "volume": "Âm lượng",
   "this_notification_will_be_updated_soon": "Thông báo này sẽ sớm được cập nhật",
   "text_submit": "Xác nhận",
-  "tap_to_add_new_schedule": "Nhấn + để thêm lịch trình mới"
+  "tap_to_add_new_schedule": "Nhấn + để thêm lịch trình mới",
+  "choose_at_least_one": "Vui lòng chọn ít nhất 1 thiết bị."
 }