@eohjsc/react-native-smart-city 0.2.55 → 0.2.59

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

@@ -63,6 +63,17 @@ describe('Test ScriptDetail', () => {
         unit: { id: 2 },
         type: AUTOMATE_TYPE.ONE_TAP,
         havePermission: true,
+        automate: {
+          author: 'Le Minh Tam',
+          condition: '<',
+          config: 'PM2.5 (Mr.Son Office)',
+          config_id: 201,
+          config_name: 'PM2.5 (Mr.Son Office)',
+          id: 1009,
+          sensor_id: 73,
+          type: 'value_change',
+          value: 35,
+        },
       },
     };
     data = {
@@ -247,6 +258,7 @@ describe('Test ScriptDetail', () => {
       scriptName: route.params.name,
       title: AUTOMATE_SELECT.SELECT_DEVICES,
       type: AUTOMATE_TYPE.ONE_TAP,
+      automate: route.params.automate,
     });
   });
 
@@ -269,6 +281,7 @@ describe('Test ScriptDetail', () => {
       scriptName: route.params.name,
       title: AUTOMATE_SELECT.SELECT_DEVICES,
       type: AUTOMATE_TYPE.ONE_TAP,
+      automate: route.params.automate,
     });
   });
 

package/src/screens/ScriptDetail/index.js

@@ -6,13 +6,7 @@ import React, {
   useEffect,
   memo,
 } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Image,
-  BackHandler,
-  Platform,
-} from 'react-native';
+import { View, TouchableOpacity, Image, Platform } from 'react-native';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
 
@@ -106,8 +100,23 @@ const ScriptDetail = ({ route }) => {
   const deleteScript = useCallback(async () => {
     hideAlertAction();
     const { success } = await axiosDelete(API.AUTOMATE.SCRIPT(id));
-    success && goBack();
-  }, [id, goBack, hideAlertAction]);
+    if (success) {
+      if (isCreateScriptSuccess || isCreateNewAction) {
+        dispatch(popAction(5));
+        isAutomateTab && goBack();
+      } else {
+        goBack();
+      }
+    }
+  }, [
+    hideAlertAction,
+    id,
+    isCreateScriptSuccess,
+    isCreateNewAction,
+    dispatch,
+    isAutomateTab,
+    goBack,
+  ]);
 
   const handleRenameOrDelete = useCallback(async () => {
     if (stateAlertAction.isDelete) {
@@ -196,12 +205,13 @@ const ScriptDetail = ({ route }) => {
       type,
       isCreateNewAction: true,
       title: AUTOMATE_SELECT.SELECT_DEVICES,
+      automate,
     };
     navigate(
       isMultiUnits ? Routes.SelectUnit : Routes.SelectSensorDevices,
       params
     );
-  }, [unit, scriptName, id, type, navigate, isMultiUnits]);
+  }, [unit, scriptName, id, type, navigate, isMultiUnits, automate]);
 
   const handleScriptAction = useCallback(async () => {
     const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
@@ -344,13 +354,6 @@ const ScriptDetail = ({ route }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, saveAt]);
 
-  useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => isCreateScriptSuccess
-    );
-    return () => backHandler.remove();
-  }, [isCreateScriptSuccess]);
   const isHaveScriptActions = data?.length > 0;
 
   const textCondition = useMemo(() => {

package/src/screens/SelectUnit/index.js

@@ -28,6 +28,7 @@ const SelectUnit = () => {
     isCreateNewAction,
     unit,
     title,
+    automate,
   } = params;
   const [data, setData] = useState([]);
   const [selectedItem, setSelectedItem] = useState(data[0]);
@@ -66,6 +67,7 @@ const SelectUnit = () => {
       isCreateNewAction || !routeName ? Routes.SelectSensorDevices : routeName,
       {
         ...params,
+        automate,
         title,
         selectedItem,
         type,

package/src/screens/Sharing/MemberList.js

@@ -1,12 +1,7 @@
 import React, { useCallback } from 'react';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
-import {
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ActivityIndicator,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -91,9 +86,7 @@ const MemberList = ({ route }) => {
         loading={isRefresh}
         onRefresh={onRefresh}
       >
-        {loading ? (
-          <ActivityIndicator />
-        ) : (
+        {!loading && (
           <SharingMembers
             dataMember={dataMembers}
             ownerId={unit.user_id}

package/src/screens/SubUnit/AddSubUnit.js

@@ -1,4 +1,10 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   View,
   Image,
@@ -42,80 +48,94 @@ const prepareImageToUpload = async (image) => {
 
 const AddSubUnit = ({ route }) => {
   const t = useTranslations();
-  const navigation = useNavigation();
+  const { navigate, goBack } = useNavigation();
   const { unit, addType, isAddUnit, location = '' } = route?.params;
   const [roomName, setRoomName] = useState('');
   const [wallpaper, setWallpaper] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
+  let awaitCreate = useRef(false);
 
   const goDone = useCallback(async () => {
     if (isAddUnit) {
-      const dataObj = {
-        name: roomName,
-        address: location,
-        background: wallpaper,
-      };
-      dataObj.background = await prepareImageToUpload(dataObj.background);
-      const formData = createFormData(dataObj, ['background']);
-      const { success, data } = await axiosPost(
-        API.UNIT.CREATE_UNIT(),
-        formData,
-        {
-          headers: { 'Content-Type': 'multipart/form-data' },
+      if (!awaitCreate.current) {
+        awaitCreate.current = true;
+        const dataObj = {
+          name: roomName,
+          address: location,
+          background: wallpaper,
+        };
+        dataObj.background = await prepareImageToUpload(dataObj.background);
+        const formData = createFormData(dataObj, ['background']);
+        const { success, data } = await axiosPost(
+          API.UNIT.CREATE_UNIT(),
+          formData,
+          {
+            headers: { 'Content-Type': 'multipart/form-data' },
+          }
+        );
+        if (success) {
+          navigate(Routes.UnitStack, {
+            screen: Routes.UnitDetail,
+            params: {
+              unitId: data?.id,
+              routeName: Routes.DashboardStack,
+            },
+          });
+        } else {
+          awaitCreate.current = false;
+          ToastBottomHelper.error(t('text_create_unit_fail'));
         }
-      );
-      if (success) {
-        navigation.navigate(Routes.UnitStack, {
-          screen: Routes.UnitDetail,
-          params: {
-            unitId: data?.id,
-          },
-        });
-      } else {
-        ToastBottomHelper.error(t('text_create_unit_fail'));
       }
     } else {
-      const dataObj = { name: roomName, background: wallpaper };
-      dataObj.background = await prepareImageToUpload(dataObj.background);
-      const formData = createFormData(dataObj, ['background']);
-      const { success, data } = await axiosPost(
-        API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
-        formData,
-        {
-          headers: { 'Content-Type': 'multipart/form-data' },
-        }
-      );
-      if (success) {
-        ToastBottomHelper.success(t('text_create_sub_unit_success'));
-
-        if (addType === 'AddNewGateway') {
-          navigation.navigate(Routes.AddCommonSelectSubUnit, {
-            ...route.params,
+      if (!awaitCreate.current) {
+        awaitCreate.current = true;
+        const dataObj = { name: roomName, background: wallpaper };
+        dataObj.background = await prepareImageToUpload(dataObj.background);
+        const formData = createFormData(dataObj, ['background']);
+        const { success, data } = await axiosPost(
+          API.SUB_UNIT.CREATE_SUB_UNIT(unit.id),
+          formData,
+          {
+            headers: { 'Content-Type': 'multipart/form-data' },
+          }
+        );
+        if (success) {
+          ToastBottomHelper.success(t('text_create_sub_unit_success'));
+          if (addType === 'AddHassiDevice') {
+            goBack();
+            return;
+          } else if (addType === 'AddNewGateway') {
+            navigate(Routes.AddCommonSelectSubUnit, {
+              ...route.params,
+            });
+            return;
+          }
+          navigate(Routes.UnitStack, {
+            screen: Routes.UnitDetail,
+            params: {
+              unitId: unit.id,
+              unitData: data,
+              isAddSubUnit: true,
+            },
           });
-          return;
+        } else {
+          awaitCreate.current = false;
+          ToastBottomHelper.error(t('text_create_sub_unit_fail'));
         }
-        navigation.navigate(Routes.UnitStack, {
-          screen: Routes.SubUnitDetail,
-          params: {
-            unit: unit,
-            station: data,
-          },
-        });
-      } else {
-        ToastBottomHelper.error(t('text_create_sub_unit_fail'));
       }
     }
   }, [
-    addType,
-    navigation,
+    isAddUnit,
     roomName,
-    route.params,
+    location,
+    wallpaper,
+    navigate,
     t,
     unit,
-    wallpaper,
-    isAddUnit,
-    location,
+    addType,
+    goBack,
+    route.params,
   ]);
 
   const onChoosePhoto = useCallback(() => {
@@ -144,8 +164,8 @@ const AddSubUnit = ({ route }) => {
   }, [roomName, wallpaper, location, isAddUnit]);
 
   const onChooseLocation = useCallback(() => {
-    navigation.navigate(Routes.AddLocationMaps);
-  }, [navigation]);
+    navigate(Routes.AddLocationMaps);
+  }, [navigate]);
 
   return (
     <SafeAreaView style={styles.wrap}>
@@ -211,7 +231,7 @@ const AddSubUnit = ({ route }) => {
           </View>
           <ViewButtonBottom
             leftTitle={t('cancel')}
-            onLeftClick={() => navigation.goBack()}
+            onLeftClick={() => goBack()}
             rightTitle={t('done')}
             rightDisabled={validateData}
             onRightClick={goDone}

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

@@ -158,10 +158,11 @@ describe('Test AddSubUnit', () => {
     });
     expect(axios.post).toHaveBeenCalled();
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
-      screen: Routes.SubUnitDetail,
+      screen: Routes.UnitDetail,
       params: {
-        unit: route.params.unit,
-        station: response.data,
+        unitId: route.params.unit.id,
+        unitData: response.data,
+        isAddSubUnit: true,
       },
     });
     expect(Toast.show).toHaveBeenCalledWith({

package/src/screens/TDSGuide/index.js

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { StyleSheet, SafeAreaView, ScrollView } from 'react-native';
+import { StyleSheet, View, ScrollView } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { TESTID } from '../../configs/Constants';
 
@@ -12,8 +12,8 @@ const TDSGuide = memo(() => {
   useTitleHeader(t('tds_infomation'));
 
   return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView>
+    <View style={styles.container}>
+      <ScrollView style={styles.paddingHorizontal16}>
         <Text
           type="H3"
           semibold
@@ -38,7 +38,7 @@ const TDSGuide = memo(() => {
           </Text>
         </>
       </ScrollView>
-    </SafeAreaView>
+    </View>
   );
 });
 
@@ -48,6 +48,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Theme.color.backgroundColor,
+  },
+  paddingHorizontal16: {
     paddingHorizontal: 16,
   },
   titlePadding: {

package/src/screens/Unit/ChooseLocation.js

@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { memo, useCallback, useRef, useState } from 'react';
+import { View } from 'react-native';
+import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
+import { useNavigation } from '@react-navigation/native';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+
+import BottomButtonView from '../../commons/BottomButtonView';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+navigator.geolocation = require('@react-native-community/geolocation');
+
+import styles from './ChooseLocationStyles';
+import { API, Colors } from '../../configs';
+import { axiosGet } from '../../utils/Apis/axios';
+import { SCConfig } from '../../configs';
+
+const initialRegion = {
+  latitudeDelta: 0.0922,
+  longitudeDelta: 0.0421,
+};
+
+const DEFAULT_LATITUDE = 10.7974046; // EoH center
+const DEFAULT_LONGITUDE = 106.7035663;
+
+const ChooseLocation = memo(({ route }) => {
+  const t = useTranslations();
+  const { location, setAddress, setLocation } = route.params;
+  const { goBack } = useNavigation();
+  const [currentLocation, setCurrentLocation] = useState(location);
+  const mapRef = useRef(null);
+
+  const onDone = useCallback(async () => {
+    if (!currentLocation) {
+      return;
+    }
+    const { latitude, longitude } = currentLocation;
+    const { success, data } = await axiosGet(
+      API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
+      {
+        params: {
+          latlng: `${latitude},${longitude}`,
+          key: SCConfig.GOOGLE_MAP_API_KEY,
+        },
+      }
+    );
+    if (success && data.results.length > 0) {
+      const result = data.results[0];
+      setAddress(result.formatted_address);
+      setLocation({
+        description: result.formatted_address,
+        latitude: result.geometry.location.lat,
+        longitude: result.geometry.location.lng,
+      });
+      goBack();
+    }
+  }, [currentLocation, setAddress, setLocation, goBack]);
+
+  const onRegionChange = useCallback(
+    (region) => {
+      setCurrentLocation({
+        latitude: region.latitude,
+        longitude: region.longitude,
+      });
+    },
+    [setCurrentLocation]
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <MapView
+        ref={mapRef}
+        provider={PROVIDER_GOOGLE}
+        style={styles.mapView}
+        initialRegion={{
+          ...initialRegion,
+          latitude: location?.latitude || DEFAULT_LATITUDE,
+          longitude: location?.longitude || DEFAULT_LONGITUDE,
+        }}
+        followUserLocation={true}
+        onRegionChangeComplete={onRegionChange}
+      />
+      <View style={styles.wrapMarker}>
+        <>
+          <IconFill name="environment" size={27} color={Colors.Blue10} />
+          <IconOutline name="close" size={14} color={Colors.Gray9} />
+        </>
+      </View>
+      <BottomButtonView
+        rowButton
+        style={styles.bottomButton}
+        mainTitle={t('done')}
+        onPressMain={onDone}
+        typeMain="primaryText"
+      />
+    </View>
+  );
+});
+
+export default ChooseLocation;

package/src/screens/Unit/ChooseLocationStyles.js

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+  },
+  mapView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  bottomButton: {
+    backgroundColor: Colors.White,
+  },
+  wrapMarker: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: 24,
+  },
+});

package/src/screens/Unit/Detail.js

@@ -30,7 +30,7 @@ import { AUTOMATE_TYPE } from '../../configs/Constants';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
-  const { unitId, unitData, isOneTap } = route.params;
+  const { unitId, unitData, isOneTap, routeName, isAddSubUnit } = route.params;
   const isFocused = useIsFocused();
   const { stateData, setAction } = useContext(SCContext);
   const { navigate } = useNavigation();
@@ -69,7 +69,7 @@ const UnitDetail = ({ route }) => {
     (rawUnitData) => {
       rawUnitData.stations.unshift({
         isOneTap: true,
-        name: t('Scenario'),
+        name: t('smart'),
       });
       rawUnitData.stations.unshift({
         isFavorites: true,
@@ -222,6 +222,12 @@ const UnitDetail = ({ route }) => {
     isOneTap && setIndexStation(1);
   }, [isOneTap]);
 
+  useEffect(() => {
+    if (listMenuItem.length && isAddSubUnit) {
+      setIndexStation(listMenuItem.length - 1);
+    }
+  }, [listMenuItem.length, isAddSubUnit]);
+
   const onSnapToItem = useCallback(
     (item, index) => {
       setStation(unit.stations[index]);
@@ -274,6 +280,11 @@ const UnitDetail = ({ route }) => {
       );
     }
   };
+
+  const onBack = useCallback(() => {
+    navigate(routeName);
+  }, [navigate, routeName]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
@@ -286,6 +297,7 @@ const UnitDetail = ({ route }) => {
       onAdd={setShowAdd}
       onMore={showPopoverWithRef}
       hideRightPlus={!isOwner}
+      onBack={routeName && onBack}
     >
       <View style={styles.container}>
         <Summaries unit={unit} />

package/src/screens/Unit/ManageUnit.js

@@ -11,7 +11,6 @@ import {
   axiosPatch,
   axiosDelete,
 } from '../../utils/Apis/axios';
-import { navigate } from '../../navigations/utils';
 import useBoolean from '../../hooks/Common/useBoolean';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
 
@@ -103,7 +102,7 @@ const ManageUnit = ({ route }) => {
 
   const goSelectLocation = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {
-      screen: Routes.SelectLocation,
+      screen: Routes.SelectAddress,
       params: {
         updateLocation,
       },
@@ -134,11 +133,11 @@ const ManageUnit = ({ route }) => {
   const goRemove = useCallback(async () => {
     const { success } = await axiosDelete(API.UNIT.MANAGE_UNIT(unit.id));
     if (success) {
-      setHideEdit(true);
+      setHideRemove(true);
       ToastBottomHelper.success(t('unit_deleted_successfully'));
-      navigate(Routes.Dashboard);
+      navigation.navigate(Routes.Dashboard);
     }
-  }, [unit.id, setHideEdit, t]);
+  }, [unit.id, setHideRemove, t, navigation]);
 
   const goToManageSubUnit = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {