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

package/src/screens/AddLocationMaps/index.js

@@ -1,18 +1,17 @@
-import React, { memo, useState, useCallback, useRef } from 'react';
-import { View, ScrollView } from 'react-native';
-import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
+import React, { memo, useState, useCallback, useRef, useEffect } from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
+import { IconOutline, IconFill } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { ViewButtonBottom } from '../../commons';
 import SearchBarLocation from '../../commons/SearchLocation';
 import RowLocation from '../../commons/SearchLocation/RowLocation';
-import Point from '../../../assets/images/AddLocationMaps/Point.svg';
 import { axiosGet } from '../../utils/Apis/axios';
-import { API } from '../../configs';
-import { SCConfig } from '../../configs';
+import { API, Colors, SCConfig } from '../../configs';
+import { TESTID } from '../../configs/Constants';
 import styles from './indexStyle';
 import Routes from '../../utils/Route';
 
@@ -25,6 +24,8 @@ const initialRegion = {
 const DEFAULT_LATITUDE = 10.7974046; // EoH center
 const DEFAULT_LONGITUDE = 106.7035663;
 
+navigator.geolocation = require('@react-native-community/geolocation');
+
 const AddLocationMaps = memo(() => {
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
@@ -87,33 +88,75 @@ const AddLocationMaps = memo(() => {
     );
   }, []);
 
-  const onPressRowLocation = useCallback(
-    async (item) => {
-      setInput(item.description);
-      setSearchData([]);
-      const body = {
-        params: {
-          place_id: item.place_id,
-          key: SCConfig.GOOGLE_MAP_API_KEY,
-        },
-      };
+  const onPressRowLocation = useCallback(async (item) => {
+    setInput(item.description);
+    setSearchData([]);
+    const body = {
+      params: {
+        place_id: item.place_id,
+        key: SCConfig.GOOGLE_MAP_API_KEY,
+      },
+    };
 
-      const { success, data } = await axiosGet(
-        API.EXTERNAL.GOOGLE_MAP.GET_LAT_LNG_BY_PLACE_ID,
-        body
-      );
-      if (success) {
-        const { location } = data.result.geometry;
-        animateToRegion(location.lat, location.lng);
-        setSearchedLocation({
-          description: item.description,
-          latitude: location.lat,
-          longitude: location.lng,
-        });
-      }
-    },
-    [animateToRegion]
-  );
+    const { success, data } = await axiosGet(
+      API.EXTERNAL.GOOGLE_MAP.GET_LAT_LNG_BY_PLACE_ID,
+      body
+    );
+    if (success) {
+      const { location } = data.result.geometry;
+      setSearchedLocation({
+        description: item.description,
+        latitude: location.lat,
+        longitude: location.lng,
+      });
+    }
+  }, []);
+
+  const getCurrentPosition = useCallback(() => {
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const currentLatitude = JSON.stringify(position.coords.latitude);
+        const currentLongitude = JSON.stringify(position.coords.longitude);
+        const { success, data } = await axiosGet(
+          API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
+          {
+            params: {
+              latlng: `${currentLatitude},${currentLongitude}`,
+              key: SCConfig.GOOGLE_MAP_API_KEY,
+            },
+          }
+        );
+        if (success && data.results.length > 0) {
+          const result = data.results[0];
+          setInput(result.formatted_address);
+          setSearchedLocation({
+            description: result.formatted_address,
+            latitude: result.geometry.location.lat,
+            longitude: result.geometry.location.lng,
+          });
+        }
+      },
+      (error) => {},
+      {}
+    );
+  }, []);
+
+  const chooseOnMap = useCallback(() => {
+    navigate(Routes.UnitStack, {
+      screen: Routes.ChooseLocation,
+      params: {
+        location: searchedLocation,
+        setAddress: setInput,
+        setLocation: setSearchedLocation,
+      },
+    });
+  }, [navigate, searchedLocation, setInput, setSearchedLocation]);
+
+  useEffect(() => {
+    if (searchedLocation) {
+      animateToRegion(searchedLocation.latitude, searchedLocation.longitude);
+    }
+  }, [animateToRegion, searchedLocation]);
 
   return (
     <View style={styles.container}>
@@ -130,6 +173,45 @@ const AddLocationMaps = memo(() => {
             {searchData.map((item) => (
               <RowLocation item={item} onPress={onPressRowLocation} />
             ))}
+            {searchData.length === 0 && (
+              <>
+                <TouchableOpacity
+                  onPress={getCurrentPosition}
+                  style={styles.button}
+                  testID={TESTID.BUTTON_YOUR_LOCATION}
+                >
+                  <IconOutline name="aim" size={27} color={Colors.Primary} />
+                  <Text
+                    type="Body"
+                    color={Colors.Gray9}
+                    style={styles.text}
+                    bold
+                  >
+                    {t('your_location')}
+                  </Text>
+                </TouchableOpacity>
+                <View style={styles.separated} />
+                <TouchableOpacity
+                  onPress={chooseOnMap}
+                  style={styles.button}
+                  testID={TESTID.BUTTON_CHOOSE_ON_MAP}
+                >
+                  <IconFill
+                    name="environment"
+                    size={27}
+                    color={Colors.Primary}
+                  />
+                  <Text
+                    type="Body"
+                    color={Colors.Gray9}
+                    style={styles.text}
+                    bold
+                  >
+                    {t('choose_on_map')}
+                  </Text>
+                </TouchableOpacity>
+              </>
+            )}
           </ScrollView>
         </View>
         <View style={styles.mapContainer}>
@@ -145,17 +227,30 @@ const AddLocationMaps = memo(() => {
             followUserLocation={true}
           >
             {searchedLocation && (
-              <Marker
-                coordinate={{
-                  latitude: searchedLocation.latitude,
-                  longitude: searchedLocation.longitude,
-                }}
-                tracksViewChanges={false}
-              >
-                <View style={styles.pointCircle}>
-                  <Point />
-                </View>
-              </Marker>
+              <>
+                <Circle
+                  center={{
+                    latitude: searchedLocation.latitude,
+                    longitude: searchedLocation.longitude,
+                  }}
+                  radius={300}
+                  fillColor={Colors.BlueTransparent5}
+                  strokeColor={Colors.Blue10}
+                />
+                <Marker
+                  coordinate={{
+                    latitude: searchedLocation.latitude,
+                    longitude: searchedLocation.longitude,
+                  }}
+                  tracksViewChanges={false}
+                >
+                  <IconFill
+                    name="environment"
+                    size={27}
+                    color={Colors.Blue10}
+                  />
+                </Marker>
+              </>
             )}
           </MapView>
         </View>

package/src/screens/AddLocationMaps/indexStyle.js

@@ -36,23 +36,25 @@ export default StyleSheet.create({
     right: 0,
     bottom: 0,
   },
-  pointCircle: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 109,
-    height: 109,
-    borderRadius: 50,
-    backgroundColor: Colors.BlueTransparent5,
-    borderWidth: 1,
-    borderColor: Colors.Blue10,
-  },
   searchLocation: {
     paddingVertical: 8,
   },
   searchData: {
     paddingHorizontal: 26,
     width: '100%',
-    maxHeight: 100,
+    maxHeight: 120,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  separated: {
+    height: 1,
+    backgroundColor: Colors.Gray3,
+    marginHorizontal: 16,
+  },
+  text: {
+    marginLeft: 12,
   },
 });

package/src/screens/AddNewAction/SelectAction.js

@@ -178,6 +178,7 @@ const SelectAction = memo(({ route }) => {
         isAutomateTab,
         isCreateNewAction,
         isMultiUnits,
+        automate,
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/screens/Automate/MultiUnits.js

@@ -24,10 +24,10 @@ const MultiUnits = () => {
   const idUser = useGetIdUser();
   const { navigate } = useNavigation();
   const { params = {} } = useRoute();
-  const { isMultiUnits = false, unitName = '', unit } = params;
+  const { isMultiUnits = false, unitName = '', unit, isOwner } = params;
   const [data, setData] = useState([]);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const tabName = useMemo(() => [t('Scenario'), t('automation')], []);
+  const tabName = useMemo(() => [t('smart'), t('automation')], []);
   const [tabActive, setTabActive] = useState(tabName[0]);
 
   const getData = useCallback(
@@ -52,14 +52,14 @@ const MultiUnits = () => {
     setTabActive(tab);
   };
 
-  const onPressItem = (item) => () => {
+  const onPressItem = (item, isOwner) => () => {
     navigate(Routes.UnitStack, {
       screen: Routes.ScriptDetail,
       params: {
         id: item?.id,
         name: item?.script?.name,
         type: item?.type,
-        havePermission: idUser === item?.user,
+        havePermission: isOwner || idUser === item?.user,
         unit,
         isMultiUnits,
         automate: item,
@@ -72,7 +72,7 @@ const MultiUnits = () => {
       screen: Routes.AddNewAutoSmart,
       params: {
         type:
-          tabActive === t('Scenario')
+          tabActive === t('smart')
             ? AUTOMATE_TYPE.ONE_TAP_ONLY
             : AUTOMATE_TYPE.VALUE_CHANGE,
         unit: { id: unit?.id },
@@ -109,7 +109,7 @@ const MultiUnits = () => {
 
   const renderContent = useMemo(() => {
     const listItems = data.filter((item) =>
-      tabActive === t('Scenario')
+      tabActive === t('smart')
         ? item?.type === AUTOMATE_TYPE.ONE_TAP
         : item?.type !== AUTOMATE_TYPE.ONE_TAP
     );
@@ -128,13 +128,13 @@ const MultiUnits = () => {
       <View style={styles.wrapItem}>
         {newListItems.map((item, index) => (
           <ItemOneTap
-            isOwner={idUser === item?.user}
+            isOwner={isOwner}
             automate={item}
             wrapSyles={[
               styles.wrapAutomateItem,
               index % 2 === 0 && styles.marginRigt8,
             ]}
-            onPressItem={onPressItem(item)}
+            onPressItem={onPressItem(item, isOwner)}
           />
         ))}
         <ItemAddNew

package/src/screens/Automate/__test__/MultiUnits.test.js

@@ -152,7 +152,7 @@ describe('Test MultiUnits', () => {
     });
   });
 
-  it('Test is multi unit and current is Scenario tab', async () => {
+  it('Test is multi unit and current is smart tab', async () => {
     const response = {
       status: 200,
       data: [
@@ -201,7 +201,7 @@ describe('Test MultiUnits', () => {
     });
     useState.mockImplementationOnce(() => [response.data, mockSetState]);
     useState.mockImplementationOnce(() => [
-      getTranslate('en', 'Scenario'),
+      getTranslate('en', 'smart'),
       mockSetState,
     ]);
     await act(() => {

package/src/screens/Automate/__test__/index.test.js

@@ -215,6 +215,7 @@ describe('Test Automate', () => {
       isMultiUnits: true,
       unitName: '',
       unit: { id: undefined },
+      isOwner: true,
     });
 
     mockedNavigate.mockClear();
@@ -226,6 +227,7 @@ describe('Test Automate', () => {
       isMultiUnits: false,
       unitName: 'La Vida',
       unit: { id: 3 },
+      isOwner: false,
     });
   });
 });

package/src/screens/Automate/index.js

@@ -87,11 +87,12 @@ const Automate = () => {
     });
   };
 
-  const onPressArrowRight = (isMultiUnits, unitName, unitId) => () => {
+  const onPressArrowRight = (isMultiUnits, unitName, unitId, isOwner) => () => {
     navigate(Routes.MultiUnits, {
       isMultiUnits,
       unitName,
       unit: { id: unitId },
+      isOwner,
     });
   };
 
@@ -128,7 +129,8 @@ const Automate = () => {
               onPress={onPressArrowRight(
                 type === UNIT_TYPES.MULTI,
                 unit_name,
-                unit_id
+                unit_id,
+                isOwner
               )}
               style={styles.arrowRightButton}
               testID={TESTID.ICON_ARROW_RIGHT}

package/src/screens/Device/__test__/detail.test.js

@@ -239,11 +239,6 @@ describe('test DeviceDetail', () => {
     );
     expect(sensorDisplayItem.length).toEqual(2);
 
-    const itemMediaPlayer = instance.find(
-      (el) => el.props.testID === TESTID.DEVICE_DETAIL_MEDIA_PLAYER
-    );
-    expect(itemMediaPlayer).toBeDefined();
-
     const itemActionGroup = instance.find(
       (el) => el.props.testID === TESTID.DEVICE_DETAIL_ACTION_GROUP
     );
@@ -817,9 +812,10 @@ describe('test DeviceDetail', () => {
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
       id: route.params.sensor.id,
       type: 'action',
+      share: route.params.unit,
       filterEnabled: {
-        date: false,
-        user: false,
+        date: true,
+        user: Boolean(route.params.unit.id),
       },
     });
   });

package/src/screens/Device/components/SensorDisplayItem.js

@@ -2,11 +2,8 @@ import React, { useCallback } from 'react';
 import { View } from 'react-native';
 import ActionGroup from '../../../commons/ActionGroup';
 import { Card } from '../../../commons/CardShadow';
-import MediaPlayer from '../../../commons/MediaPlayer';
-import { Device } from '../../../configs';
 import { TESTID } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { standardizeCameraScreenSize } from '../../../utils/Utils';
 import { DetailHistoryChart } from './DetailHistoryChart';
 import { sendRemoteCommand } from '../../../iot/RemoteControl';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
@@ -20,8 +17,11 @@ import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/Lis
 import EmergencyDetail from '../../../commons/Device/Emergency/EmergencyDetail';
 import EmergencyButton from '../../../commons/Device/Emergency/EmergencyButton';
 import FooterInfo from '../../../commons/Device/FooterInfo';
+import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
+import { standardizeCameraScreenSize } from '../../../utils/Utils';
+import { Device } from '../../../configs';
 
-const { standardizeHeight, standardizeWidth } = standardizeCameraScreenSize(
+const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
@@ -51,15 +51,15 @@ export const SensorDisplayItem = ({
       return (
         <Card title={t('camera')}>
           <View style={styles.mediaContainer}>
-            <MediaPlayer
-              testID={TESTID.DEVICE_DETAIL_MEDIA_PLAYER}
+            <MediaPlayerDetail
               uri={item.configuration.uri}
-              style={{ height: standardizeHeight }}
-              ratioWidth={standardizeWidth - 32}
               thumbnail={{
-                uri: item.configuration.preview_uri,
+                uri: background,
               }}
-              background={{ uri: background }}
+              key={`camera-device-${item.configuration.id}`}
+              cameraName={item.configuration.name}
+              width={standardizeWidth - 32}
+              height={standardizeHeight - 16}
             />
           </View>
         </Card>

package/src/screens/Device/detail.js

@@ -59,8 +59,11 @@ const DeviceDetail = ({ route }) => {
     internet: {},
   });
   // eslint-disable-next-line no-unused-vars
-  const [loading, setLoading] = useState(false);
-  const [isConnected, setConnected] = useState(true);
+  const [loading, setLoading] = useState({
+    isConnected: true,
+    displayTemplate: true,
+  });
+  const [isConnected, setConnected] = useState(false);
   const [lastUpdated, setLastUpdated] = useState(null);
   const [lastEvent, setLastEvent] = useState({ id: 0, reportedAt: 0 });
   const [maxValue, setMaxValue] = useState(60);
@@ -79,7 +82,21 @@ const DeviceDetail = ({ route }) => {
     [sensor]
   );
 
-  useDisconnectedDevice(isConnected, sensorName);
+  const isDeviceHasBle = useMemo(() => {
+    const action = display.items.filter((item) => item.type === 'action');
+    if (action.length === 0) {
+      return false;
+    }
+
+    return action.some((item) => {
+      const { configuration } = item?.configuration;
+      return JSON.stringify(configuration).includes(
+        '"command_prefer_over_bluetooth":true'
+      );
+    });
+  }, [display]);
+
+  useDisconnectedDevice(sensorName, isDeviceHasBle);
 
   const netInfo = useNetInfo();
 
@@ -148,6 +165,7 @@ const DeviceDetail = ({ route }) => {
         }
       }
     }
+    setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
     const controlResult = await axiosGet(
       API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor.id),
@@ -196,9 +214,10 @@ const DeviceDetail = ({ route }) => {
         data: {
           id: sensor.id,
           type: 'action',
+          share: unit,
           filterEnabled: {
-            date: false,
-            user: false,
+            date: true,
+            user: Boolean(unit.id),
           },
         },
         text: t('activity_log'),
@@ -219,6 +238,11 @@ const DeviceDetail = ({ route }) => {
         data: { unit, sensor },
         text: t('manage_access'),
       });
+      menuItems.push({
+        text: t('move_to_another_sub_unit'),
+        route: Routes.MoveToAnotherSubUnit,
+        data: { unit, sensor, station },
+      });
     }
     if (isShowSetupEmergencyContact) {
       menuItems.push({
@@ -255,15 +279,15 @@ const DeviceDetail = ({ route }) => {
     return [...menuItems];
   }, [
     display.items,
+    isOwner,
+    isShowSetupEmergencyContact,
     t,
     isFavourite,
-    emergencyDeviceId,
-    isShowSetupEmergencyContact,
     sensor,
-    setSensorName,
     sensorName,
-    isOwner,
     unit,
+    station,
+    emergencyDeviceId,
     addToFavorites,
     removeFromFavorites,
   ]);
@@ -339,11 +363,14 @@ const DeviceDetail = ({ route }) => {
         transformDatetime(data, ['last_updated']);
         setLastUpdated(data.last_updated);
       }
+      setLoading((preState) => ({ ...preState, isConnected: false }));
     };
     if (sensor.is_managed_by_backend && !sensor.is_other_device) {
       const updateInterval = setInterval(() => fetchValues(), 5000);
       fetchValues();
       return () => clearInterval(updateInterval);
+    } else {
+      setLoading((preState) => ({ ...preState, isConnected: false }));
     }
   }, [sensor, display]);
 
@@ -429,6 +456,7 @@ const DeviceDetail = ({ route }) => {
       `@CACHE_REQUEST_${API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor.id)}`
     );
     controlOptionData && setControlOptions(JSON.parse(controlOptionData));
+    setLoading((preState) => ({ ...preState, displayTemplate: false }));
   };
 
   const onItemMenuClicked = (item) => {
@@ -453,6 +481,10 @@ const DeviceDetail = ({ route }) => {
     showPopoverWithRef(refMenuAction);
   }, [showPopoverWithRef, refMenuAction]);
 
+  const onPressSetting = useCallback(() => {
+    navigation.navigate(Routes.EmergencySetting);
+  }, [navigation]);
+
   const HeaderRight = useMemo(
     () => (
       <View style={styles.headerRight}>
@@ -467,6 +499,13 @@ const DeviceDetail = ({ route }) => {
             <IconOutline name="star" size={25} />
           )}
         </TouchableOpacity>
+
+        {isShowSetupEmergencyContact && (
+          <TouchableOpacity style={styles.button} onPress={onPressSetting}>
+            <Icon name="setting" size={25} color={Colors.Black} />
+          </TouchableOpacity>
+        )}
+
         <TouchableOpacity
           style={styles.button}
           onPress={handleShowMenuAction}
@@ -477,7 +516,14 @@ const DeviceDetail = ({ route }) => {
         </TouchableOpacity>
       </View>
     ),
-    [isFavourite, addToFavorites, removeFromFavorites, handleShowMenuAction]
+    [
+      isFavourite,
+      removeFromFavorites,
+      addToFavorites,
+      isShowSetupEmergencyContact,
+      onPressSetting,
+      handleShowMenuAction,
+    ]
   );
 
   return (
@@ -486,17 +532,21 @@ const DeviceDetail = ({ route }) => {
         title={sensorName}
         headerAniStyle={styles.header}
         rightComponent={HeaderRight}
-        loading={loading}
         onRefresh={onRefresh}
       >
-        <View style={styles.wrapTemplate}>{renderSensorConnected()}</View>
+        <View style={styles.wrapTemplate}>
+          {loading.displayTemplate === false &&
+            loading.isConnected === false &&
+            netInfo.isConnected !== null &&
+            renderSensorConnected()}
+        </View>
         {isShowSetupEmergencyContact && canManageSubUnit && (
           <BottomButtonView
             style={styles.bottomButtonEmergencyContact}
-            mainIcon={<Icon name="phone" size={24} color={Colors.Gray9} />}
-            mainTitle={t('emergency_contacts')}
+            mainIcon={<Icon name="plus" size={16} color={Colors.Primary} />}
+            mainTitle={t('setup_my_emergency_contact')}
             onPressMain={onSetupContacts}
-            typeMain="CardShadow"
+            typeMain="primaryBorder"
             semiboldMain={false}
           />
         )}