@eohjsc/react-native-smart-city 0.3.0 → 0.3.3

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

@@ -59,7 +59,7 @@ describe('Test SideMenuDetail', () => {
     expect(popup.props.isVisible).toBeFalsy();
   };
 
-  const inputPasscode = async (instance) => {
+  const enterPasscode = async (instance) => {
     const inputPasscode = instance.find(
       (item) => item.props.testID === TESTID.PASSCODE_FIELD
     );
@@ -124,12 +124,12 @@ describe('Test SideMenuDetail', () => {
     };
 
     mock
-      .onGet(API.SENSOR.SIDE_MENU_DETAIL(1, 1))
+      .onGet(API.DEVICE.SIDE_MENU_DETAIL(1, 1))
       .reply(200, response_side_menu.data);
     mock
       .onGet(API.SHARE.UNITS_MEMBERS(1))
       .reply(200, response_unit_members.data);
-    mock.onPost(API.SENSOR.QUICK_ACTION(1)).reply(200, []);
+    mock.onPost(API.DEVICE.TRIGGER_ACTION(1)).reply(200, []);
 
     const route = {
       params: {
@@ -147,7 +147,7 @@ describe('Test SideMenuDetail', () => {
     await onPressSubmitData(instance);
     expect(spyToastError).toBeCalled();
 
-    await inputPasscode(instance);
+    await enterPasscode(instance);
     await onPressSubmitData(instance);
     expect(spyToastSuccess).toBeCalled();
   });

package/src/screens/SideMenuDetail/index.js

@@ -61,7 +61,6 @@ const SideMenuDetail = memo(({ route }) => {
           return null;
       }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [unit, dataForm]
   );
 
@@ -88,7 +87,7 @@ const SideMenuDetail = memo(({ route }) => {
 
     data.action_zigbee = actionZigbee;
 
-    const { success } = await axiosPost(API.SENSOR.QUICK_ACTION(sensor.id), {
+    const { success } = await axiosPost(API.DEVICE.TRIGGER_ACTION(sensor.id), {
       key: sideMenu.action,
       data,
       source: 'smart_lock',
@@ -105,7 +104,7 @@ const SideMenuDetail = memo(({ route }) => {
 
   const fetchSideMenuDetail = useCallback(async () => {
     const { success, data } = await axiosGet(
-      API.SENSOR.SIDE_MENU_DETAIL(sensor.id, side_menu.id)
+      API.DEVICE.SIDE_MENU_DETAIL(sensor.id, side_menu.id)
     );
     if (success) {
       setSideMenu(data);

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, useState, useMemo } from 'react';
-import { View, TouchableOpacity, Alert } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import WrapHeaderScrollable from '../../../../commons/Sharing/WrapHeaderScrollable';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate';
@@ -14,6 +14,7 @@ import { Remote, SmartIr, Union } from '../../../../Images/SmartIr';
 
 import styles from './GroupButtonByTypeStyles';
 import { TESTID } from '../../../../configs/Constants';
+import { notImplemented } from '../../../../utils/Utils';
 
 const GroupButtonByType = memo(({ route }) => {
   const t = useTranslations();
@@ -38,7 +39,7 @@ const GroupButtonByType = memo(({ route }) => {
         case 'reload':
         case 'more':
         case 'done':
-          return Alert.alert(t('feature_under_development'));
+          return notImplemented(t);
         default:
           return <></>;
       }

package/src/screens/SubUnit/Detail.js

@@ -16,7 +16,7 @@ import styles from './DetailStyles';
 
 const SubUnitDetail = ({ route }) => {
   const t = useTranslations();
-  const { unit, station, isGGHomeConnected } = route.params;
+  const { unit, station } = route.params;
   const language = useSCContextSelector((state) => state.language);
   const navigation = useNavigation();
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
@@ -125,7 +125,6 @@ const SubUnitDetail = ({ route }) => {
                     sensor={item}
                     unit={unit}
                     station={station}
-                    isGGHomeConnected={isGGHomeConnected}
                   />
                 );
               })}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -20,13 +20,14 @@ import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
 import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
 import useManageSubUnit from './hooks/useManageSubUnit';
+import { TESTID } from '../../configs/Constants';
 
 const ManageSubUnit = memo((props) => {
   const t = useTranslations();
   const { unit } = props.route.params;
   const navigation = useNavigation();
   const isFocused = useIsFocused();
-  const { station, isRefresh, isLoading, onRefresh } = useManageSubUnit(unit);
+  const { stations, isRefresh, isLoading, onRefresh } = useManageSubUnit(unit);
 
   const addSubUnit = useCallback(() => {
     navigation.navigate(Routes.AddSubUnitStack, {
@@ -35,7 +36,7 @@ const ManageSubUnit = memo((props) => {
     });
   }, [navigation, unit]);
 
-  const goToEditSubUnit = (station, unit) => {
+  const goToEditSubUnit = (station) => {
     navigation.navigate(Routes.UnitStack, {
       screen: Routes.EditSubUnit,
       params: {
@@ -48,7 +49,11 @@ const ManageSubUnit = memo((props) => {
   const rightComponent = useMemo(
     () => (
       <View style={styles.rightComponent}>
-        <TouchableOpacity onPress={addSubUnit} style={styles.headerButton}>
+        <TouchableOpacity
+          testID={TESTID.ADD_SUB_UNIT}
+          onPress={addSubUnit}
+          style={styles.headerButton}
+        >
           <Icon name={'plus'} size={27} color={Colors.Black} />
         </TouchableOpacity>
         <TouchableOpacity
@@ -84,8 +89,8 @@ const ManageSubUnit = memo((props) => {
             scrollIndicatorInsets={{ right: 1 }}
           >
             <View>
-              {!!station.length &&
-                station.map((item, index) => {
+              {!!stations.length &&
+                stations.map((item, index) => {
                   return (
                     <RowItem
                       type={'noneBG'}
@@ -100,7 +105,7 @@ const ManageSubUnit = memo((props) => {
                       }
                       text={item.name}
                       subtext={`${
-                        item.sensors ? item.sensors.length : '0'
+                        item.devices ? item.devices.length : '0'
                       }  devices`}
                       onPress={() => goToEditSubUnit(item, unit)}
                       rightComponent={
@@ -113,7 +118,7 @@ const ManageSubUnit = memo((props) => {
                     />
                   );
                 })}
-              {!station.length && !isRefresh && !isLoading && (
+              {!stations.length && !isRefresh && !isLoading && (
                 <View style={styles.NoSubUnit}>
                   <NoSubUnitImage />
                   <Text semibold type="H4" center>

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

@@ -138,7 +138,7 @@ describe('Test SubUnitDetail', () => {
     expect(mockedDangerouslyGetStatePop).toHaveBeenCalledWith(2);
   });
 
-  test.only('click Menu ActionMore', async () => {
+  test('click Menu ActionMore', async () => {
     mockedDangerouslyGetState.mockImplementation(() => ({
       routes: [
         { name: 'route 1' },

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native';
 import { create } from 'react-test-renderer';
 import { act } from '@testing-library/react-hooks';
 import ManageSubUnit from '../ManageSubUnit';
@@ -7,6 +7,7 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { RowItem } from '../../../commons/RowItem';
 import Routes from '../../../utils/Route';
+import { TESTID } from '../../../configs/Constants';
 
 const mockSetState = jest.fn();
 
@@ -76,4 +77,29 @@ describe('Test ManageSubUnit', () => {
       screen: 'EditSubUnit',
     });
   });
+  it('ManageSubUnit add sub unit', async () => {
+    let route = {
+      params: { unit: { id: 1, name: 'unit 1' } },
+    };
+    await act(() => {
+      tree = create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonAddSubUnit = instance.find(
+      (el) =>
+        el.props.testID === TESTID.ADD_SUB_UNIT && el.type === TouchableOpacity
+    );
+    act(() => {
+      buttonAddSubUnit.props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddSubUnitStack, {
+      params: {
+        unit: {
+          id: 1,
+          name: 'unit 1',
+        },
+      },
+      screen: Routes.AddSubUnit,
+    });
+  });
 });

package/src/screens/SubUnit/hooks/__test__/useManageSubUnit.test.js

@@ -30,7 +30,7 @@ describe('Test Manage Access', () => {
 
   it('Test init', () => {
     const { result } = renderHook(() => useManageSubUnit(unit));
-    expect(result.current.station).toEqual([]);
+    expect(result.current.stations).toEqual([]);
     expect(result.current.isLoading).toBeFalsy();
     expect(result.current.isRefreshing).toBeFalsy();
   });

package/src/screens/SubUnit/hooks/useManageSubUnit.js

@@ -3,11 +3,11 @@ import { axiosGet } from '../../../utils/Apis/axios';
 import API from '../../../configs/API';
 
 export default (unit) => {
-  const [station, setStation] = useState([]);
+  const [stations, setStations] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isRefresh, setRefresh] = useState(false);
 
-  const fetchData = useCallback(async (unit) => {
+  const fetchData = useCallback(async () => {
     setIsLoading(true);
     const { success, data } = await axiosGet(
       API.UNIT.UNIT_DETAIL(unit?.id),
@@ -15,19 +15,19 @@ export default (unit) => {
       true
     );
     if (success) {
-      setStation(data?.stations);
+      setStations(data?.stations);
     }
     setIsLoading(false);
-  }, []);
+  }, [unit]);
 
   const onRefresh = useCallback(async () => {
     setRefresh(true);
-    await fetchData(unit);
+    await fetchData();
     setRefresh(false);
-  }, [unit, fetchData]);
+  }, [fetchData]);
 
   return {
-    station,
+    stations,
     isRefresh,
     onRefresh,
     isLoading,

package/src/screens/Unit/ChooseLocation.js

@@ -1,4 +1,3 @@
-/* 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';
@@ -8,20 +7,13 @@ import BottomButtonView from '../../commons/BottomButtonView';
 import { FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
-navigator.geolocation = require('@react-native-community/geolocation');
-
 import styles from './ChooseLocationStyles';
 import { API } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 import { SCConfig } from '../../configs';
+import { MAP_INITIAL_REGION, EOH_LOCATION } from '../../configs/Constants';
 
-const initialRegion = {
-  latitudeDelta: 0.0922,
-  longitudeDelta: 0.0421,
-};
-
-const DEFAULT_LATITUDE = 10.7974046; // EoH center
-const DEFAULT_LONGITUDE = 106.7035663;
+navigator.geolocation = require('@react-native-community/geolocation');
 
 const ChooseLocation = memo(({ route }) => {
   const t = useTranslations();
@@ -76,9 +68,10 @@ const ChooseLocation = memo(({ route }) => {
         provider={PROVIDER_GOOGLE}
         style={styles.mapView}
         initialRegion={{
-          ...initialRegion,
-          latitude: location?.latitude || DEFAULT_LATITUDE,
-          longitude: location?.longitude || DEFAULT_LONGITUDE,
+          latitude: location?.latitude || EOH_LOCATION.LAT,
+          longitude: location?.longitude || EOH_LOCATION.LNG,
+          latitudeDelta: MAP_INITIAL_REGION.LAT,
+          longitudeDelta: MAP_INITIAL_REGION.LNG,
         }}
         followUserLocation={true}
         onRegionChangeComplete={onRegionChange}

package/src/screens/Unit/Detail.js

@@ -1,14 +1,15 @@
 import React, {
   useCallback,
-  useContext,
   useEffect,
   useState,
   useRef,
+  useContext,
 } from 'react';
 import { AppState, RefreshControl, View } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { VLCPlayer } from 'react-native-vlc-media-player';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './styles';
 import AddMenu from './AddMenu';
 import MoreMenu from './MoreMenu';
@@ -23,10 +24,8 @@ import {
   usePopover,
 } from '../../hooks/Common';
 import { useFavorites } from './hook/useFavorites';
-import { scanBluetoothDevices } from '../../iot/RemoteControl/Bluetooth';
-import { googleHomeConnect } from '../../iot/RemoteControl/GoogleHome';
-import { axiosPost, fetchWithCache, axiosGet } from '../../utils/Apis/axios';
-import { lgThinqConnect } from '../../iot/RemoteControl/LG';
+import { useUnitConnectRemoteDevices } from './hook/useUnitConnectRemoteDevices';
+import { fetchWithCache, axiosGet } from '../../utils/Apis/axios';
 import ShortDetailSubUnit from '../../commons/SubUnit/ShortDetail';
 import NavBar from '../../commons/NavBar';
 import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
@@ -51,6 +50,7 @@ import PreventAccess from '../../commons/PreventAccess';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
+  const { setAction } = useContext(SCContext);
 
   const {
     unitId,
@@ -63,7 +63,6 @@ const UnitDetail = ({ route }) => {
   } = route.params;
 
   const isFocused = useIsFocused();
-  const { stateData, setAction } = useContext(SCContext);
   const { navigate, goBack } = useNavigation();
   const RouterHardware = useCallback(
     (routeHardware) => () => {
@@ -76,15 +75,14 @@ const UnitDetail = ({ route }) => {
     isSuccessfullyConnected ? RouterHardware(Routes.Dashboard) : goBack
   );
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  const isLavidaSource = useSCContextSelector(
-    (state) => state.app.isLavidaSource
+  const { isLavidaSource, isFirstOpenCamera } = useSCContextSelector(
+    (state) => state.app
   );
 
   const [unit, setUnit] = useState(unitData || { id: unitId });
   const [listMenuItem, setListMenuItem] = useState([]);
   const [listStation, setListStation] = useState([]);
   const [listAutomate, setListAutomate] = useState([]);
-  const [isGGHomeConnected, setIsGGHomeConnected] = useState(false);
   const [station, setStation] = useState({});
   const [indexStation, setIndexStation] = useState(0);
   const [showAdd, setShowAdd, setHideAdd] = useBoolean();
@@ -191,61 +189,7 @@ const UnitDetail = ({ route }) => {
     };
   }, [fetchDetails]);
 
-  const handleGoogleHomeConnect = useCallback(
-    async (options) => {
-      let isConnected = await googleHomeConnect(options); // this may wrong if have multiple connection
-      setIsGGHomeConnected(isConnected);
-      let chipId = options[0].chip_id;
-      if (!isConnected) {
-        setAction(Action.LIST_DEVICE_TYPES, {
-          chipId: chipId,
-          sentEmail: true,
-        });
-        await axiosPost(API.GOOGLE_HOME.CHECK_SEND_EMAIL(), {
-          chip_id: chipId,
-          is_connected: false,
-        });
-      } else if (isConnected && stateData?.listDevice[chipId]?.sentEmail) {
-        setAction(Action.LIST_DEVICE_TYPES, {
-          chipId: chipId,
-          sentEmail: false,
-        });
-        await axiosPost(API.GOOGLE_HOME.CHECK_SEND_EMAIL(), {
-          chip_id: chipId,
-          is_connected: true,
-        });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  let isCalled = false;
-
-  const handleLgThinqConnect = useCallback(async (options) => {
-    if (isCalled) {
-      return;
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    isCalled = true;
-    await lgThinqConnect(options);
-  }, []);
-
-  useEffect(() => {
-    if (unit.remote_control_options) {
-      if (unit.remote_control_options.bluetooth) {
-        scanBluetoothDevices(unit.remote_control_options.bluetooth);
-      }
-      if (unit.remote_control_options.googlehome?.length) {
-        handleGoogleHomeConnect(unit.remote_control_options.googlehome);
-      }
-      if (unit.remote_control_options.lg_thinq) {
-        (async () => {
-          await handleLgThinqConnect(unit.remote_control_options.lg_thinq);
-        })();
-      }
-    }
-  }, [handleGoogleHomeConnect, handleLgThinqConnect, unit]);
+  useUnitConnectRemoteDevices(unit);
 
   useEffect(() => {
     if (isFocused) {
@@ -264,7 +208,7 @@ const UnitDetail = ({ route }) => {
       setListMenuItem(listMenu);
       setListStation(listMenu.concat([{ text: '' }]));
     }
-  }, [unit, indexStation, isGGHomeConnected]);
+  }, [unit, indexStation]);
 
   useEffect(() => {
     isOneTap && setIndexStation(1);
@@ -308,7 +252,6 @@ const UnitDetail = ({ route }) => {
           favoriteDevices={favoriteDevices}
           favoriteAutomates={favoriteAutomates}
           wrapItemStyle={styles.wrapItemStyle}
-          isGGHomeConnected={isGGHomeConnected}
         />
       );
     }
@@ -330,13 +273,7 @@ const UnitDetail = ({ route }) => {
         />
       );
     } else if (station) {
-      return (
-        <ShortDetailSubUnit
-          unit={unit}
-          station={station}
-          isGGHomeConnected={isGGHomeConnected}
-        />
-      );
+      return <ShortDetailSubUnit unit={unit} station={station} />;
     }
   };
 
@@ -353,6 +290,15 @@ const UnitDetail = ({ route }) => {
     return () => unwatchNotificationData(user);
   }, [user, onRefresh]);
 
+  useEffect(() => {
+    if (isFirstOpenCamera) {
+      const to = setTimeout(() => {
+        setAction(Action.IS_FIRST_OPEN_CAMERA, false);
+        clearTimeout(to);
+      }, 5000);
+    }
+  }, [isFirstOpenCamera, setAction]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
@@ -367,6 +313,16 @@ const UnitDetail = ({ route }) => {
       hideRightPlus={!isOwner}
       onBack={(isSuccessfullyConnected && Dashboard) || (routeName && onBack)}
     >
+      {/* NOTE: This is a trick to fix camera not full screen on first open app */}
+      {isFirstOpenCamera && (
+        <VLCPlayer
+          source={{
+            uri: 'rtsp://admin:Eoh@2020@101.99.33.220:30554/main',
+          }}
+          style={styles.camera}
+        />
+      )}
+
       <View style={styles.container}>
         <Summaries unit={unit} />
         <NavBar
@@ -383,7 +339,6 @@ const UnitDetail = ({ route }) => {
           </View>
         )}
       </View>
-
       <AddMenu
         unit={unit}
         afterItemClick={hidePopover}

package/src/screens/Unit/SelectAddress.js

@@ -1,9 +1,9 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, View, ScrollView } 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 { check, RESULTS } from 'react-native-permissions';
 
 import BottomButtonView from '../../commons/BottomButtonView';
 import SearchBarLocation from '../../commons/SearchLocation';
@@ -11,22 +11,23 @@ import RowLocation from '../../commons/SearchLocation/RowLocation';
 import Text from '../../commons/Text';
 import { FullLoading } from '../../commons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-
-navigator.geolocation = require('@react-native-community/geolocation');
+import {
+  GEOLOCATION_ERROR,
+  keyPermission,
+  OpenSetting,
+} from '../../utils/Permission/common';
 
 import styles from './SelectAddressStyles';
 import { API, Colors, SCConfig } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
-import { TESTID } from '../../configs/Constants';
+import {
+  TESTID,
+  MAP_INITIAL_REGION,
+  EOH_LOCATION,
+} from '../../configs/Constants';
 
-const initialRegion = {
-  latitudeDelta: 0.0922,
-  longitudeDelta: 0.0421,
-};
-
-const DEFAULT_LATITUDE = 10.7974046; // EoH center
-const DEFAULT_LONGITUDE = 106.7035663;
+navigator.geolocation = require('@react-native-community/geolocation');
 
 const SelectAddress = memo(({ route }) => {
   const t = useTranslations();
@@ -46,9 +47,9 @@ const SelectAddress = memo(({ route }) => {
     goBack();
   }, [goBack, updateLocation, searchedLocation]);
 
-  const onTextInput = useCallback(async (input) => {
-    setInput(input);
-    if (input === '') {
+  const onTextInput = useCallback(async (value) => {
+    setInput(value);
+    if (value === '') {
       setSearchData([]);
       setSearchedLocation(null);
       return;
@@ -56,7 +57,7 @@ const SelectAddress = memo(({ route }) => {
     try {
       const config = {
         params: {
-          input: input,
+          input: value,
           key: SCConfig.GOOGLE_MAP_API_KEY,
           sessiontoken: 123456324,
           strictBounds: false,
@@ -71,6 +72,7 @@ const SelectAddress = memo(({ route }) => {
       if (success) {
         setSearchData(data.predictions);
       }
+      // eslint-disable-next-line no-empty
     } catch (error) {}
   }, []);
 
@@ -83,7 +85,8 @@ const SelectAddress = memo(({ route }) => {
       {
         latitude: lat,
         longitude: lng,
-        ...initialRegion,
+        latitudeDelta: MAP_INITIAL_REGION.LAT,
+        longitudeDelta: MAP_INITIAL_REGION.LNG,
       },
       600
     );
@@ -140,10 +143,19 @@ const SelectAddress = memo(({ route }) => {
         setLoading(false);
       },
       // eslint-disable-next-line promise/prefer-await-to-callbacks
-      (error) => {}
+      async (error) => {
+        if (error.code === GEOLOCATION_ERROR.PERMISSION_DENIED) {
+          const permissionResult = await check(keyPermission.LOCATION);
+          permissionResult === RESULTS.BLOCKED &&
+            OpenSetting(
+              t('location_rationale_title'),
+              t('location_require_message')
+            );
+        }
+      }
       // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } enable on emulator
     );
-  }, []);
+  }, [t]);
 
   const chooseOnMap = useCallback(() => {
     navigate(Routes.ChooseLocation, {
@@ -202,9 +214,10 @@ const SelectAddress = memo(({ route }) => {
         provider={PROVIDER_GOOGLE}
         style={styles.mapView}
         initialRegion={{
-          ...initialRegion,
-          latitude: DEFAULT_LATITUDE,
-          longitude: DEFAULT_LONGITUDE,
+          latitude: EOH_LOCATION.LAT,
+          longitude: EOH_LOCATION.LNG,
+          latitudeDelta: MAP_INITIAL_REGION.LAT,
+          longitudeDelta: MAP_INITIAL_REGION.LNG,
         }}
         followUserLocation={true}
       >

package/src/screens/Unit/SmartAccount.js

@@ -29,13 +29,13 @@ const ListSmartAccount = ({ route }) => {
   const [loadingRemoveItem, setLoadingRemoveItem] = useState(false);
 
   const getAllSmartAccounts = useCallback(async () => {
-    const { success, data } = await axiosGet(
-      API.SMART_ACCOUNT.LIST_SMART_ACCOUNT()
+    const { success, data: accountData } = await axiosGet(
+      API.SMART_ACCOUNT.LIST_SMART_ACCOUNT(unitId)
     );
     if (success) {
-      setData(data);
+      setData(accountData);
     }
-  }, []);
+  }, [unitId]);
 
   const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
     usePopover();