@eohjsc/react-native-smart-city 0.3.8 → 0.3.11

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,24 +7,17 @@ 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();
-  const { location, setAddress, setLocation } = route.params;
+  const { location, setAddress, setLocation } = route.params || {};
   const { goBack } = useNavigation();
   const [currentLocation, setCurrentLocation] = useState(location);
   const [loading, setLoading] = useState(false);
@@ -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,
+  useMemo,
 } from 'react';
-import { AppState, RefreshControl, View } from 'react-native';
+import { AppState, RefreshControl, View, Platform } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
 
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import styles from './styles';
 import AddMenu from './AddMenu';
 import MoreMenu from './MoreMenu';
@@ -23,10 +24,9 @@ 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 { useValueEvaluations } from '../../hooks/IoT';
+import { fetchWithCache, axiosGet } from '../../utils/Apis/axios';
 import ShortDetailSubUnit from '../../commons/SubUnit/ShortDetail';
 import NavBar from '../../commons/NavBar';
 import WrapParallaxScrollView from '../../commons/WrapParallaxScrollView';
@@ -40,6 +40,7 @@ import SubUnitAutomate from '../../commons/SubUnit/OneTap';
 import SubUnitFavorites from '../../commons/SubUnit/Favorites';
 import {
   AUTOMATE_TYPE,
+  Constants,
   NOTIFICATION_TYPES,
   TESTID,
 } from '../../configs/Constants';
@@ -48,9 +49,12 @@ import {
   unwatchNotificationData,
 } from '../../utils/Monitor';
 import PreventAccess from '../../commons/PreventAccess';
+import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
 
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
+  const { setAction } = useContext(SCContext);
+  const isIOS = useMemo(() => Platform.OS === 'ios', []);
 
   const {
     unitId,
@@ -63,7 +67,6 @@ const UnitDetail = ({ route }) => {
   } = route.params;
 
   const isFocused = useIsFocused();
-  const { stateData, setAction } = useContext(SCContext);
   const { navigate, goBack } = useNavigation();
   const RouterHardware = useCallback(
     (routeHardware) => () => {
@@ -76,15 +79,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 +193,9 @@ 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
-    []
-  );
+  useValueEvaluations(unitId);
 
-  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 +214,7 @@ const UnitDetail = ({ route }) => {
       setListMenuItem(listMenu);
       setListStation(listMenu.concat([{ text: '' }]));
     }
-  }, [unit, indexStation, isGGHomeConnected]);
+  }, [unit, indexStation]);
 
   useEffect(() => {
     isOneTap && setIndexStation(1);
@@ -308,7 +258,6 @@ const UnitDetail = ({ route }) => {
           favoriteDevices={favoriteDevices}
           favoriteAutomates={favoriteAutomates}
           wrapItemStyle={styles.wrapItemStyle}
-          isGGHomeConnected={isGGHomeConnected}
         />
       );
     }
@@ -330,13 +279,7 @@ const UnitDetail = ({ route }) => {
         />
       );
     } else if (station) {
-      return (
-        <ShortDetailSubUnit
-          unit={unit}
-          station={station}
-          isGGHomeConnected={isGGHomeConnected}
-        />
-      );
+      return <ShortDetailSubUnit unit={unit} station={station} />;
     }
   };
 
@@ -353,6 +296,15 @@ const UnitDetail = ({ route }) => {
     return () => unwatchNotificationData(user);
   }, [user, onRefresh]);
 
+  useEffect(() => {
+    if (isFirstOpenCamera && isIOS) {
+      const to = setTimeout(() => {
+        setAction(Action.IS_FIRST_OPEN_CAMERA, false);
+        clearTimeout(to);
+      }, 3000);
+    }
+  }, [isFirstOpenCamera, isIOS, setAction]);
+
   return (
     <WrapParallaxScrollView
       uriImg={unit.background}
@@ -367,6 +319,17 @@ 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 && isIOS && (
+        <MediaPlayerDetail
+          uri={Constants.URL_STREAM_CAMERA_DEMO}
+          isPaused={false}
+          width={1}
+          height={1}
+          style={styles.fakeCamera}
+        />
+      )}
+
       <View style={styles.container}>
         <Summaries unit={unit} />
         <NavBar
@@ -383,7 +346,6 @@ const UnitDetail = ({ route }) => {
           </View>
         )}
       </View>
-
       <AddMenu
         unit={unit}
         afterItemClick={hidePopover}

package/src/screens/Unit/ManageUnit.js

@@ -105,6 +105,7 @@ const ManageUnit = ({ route }) => {
         formData,
         headers
       );
+
       if (success) {
         setUnitData({ ...data });
         ToastBottomHelper.success(t('unit_updated_successfully'));

package/src/screens/Unit/SelectAddress.js

@@ -1,9 +1,10 @@
-/* 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 { openPromptEnableLocation } from '../../utils/Setting/Location';
 
 import BottomButtonView from '../../commons/BottomButtonView';
 import SearchBarLocation from '../../commons/SearchLocation';
@@ -11,22 +12,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 +48,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 +58,7 @@ const SelectAddress = memo(({ route }) => {
     try {
       const config = {
         params: {
-          input: input,
+          input: value,
           key: SCConfig.GOOGLE_MAP_API_KEY,
           sessiontoken: 123456324,
           strictBounds: false,
@@ -68,9 +70,8 @@ const SelectAddress = memo(({ route }) => {
         API.EXTERNAL.GOOGLE_MAP.AUTO_COMPLETE,
         config
       );
-      if (success) {
-        setSearchData(data.predictions);
-      }
+      success && setSearchData(data.predictions);
+      // eslint-disable-next-line no-empty
     } catch (error) {}
   }, []);
 
@@ -83,7 +84,8 @@ const SelectAddress = memo(({ route }) => {
       {
         latitude: lat,
         longitude: lng,
-        ...initialRegion,
+        latitudeDelta: MAP_INITIAL_REGION.LAT,
+        longitudeDelta: MAP_INITIAL_REGION.LNG,
       },
       600
     );
@@ -140,10 +142,24 @@ const SelectAddress = memo(({ route }) => {
         setLoading(false);
       },
       // eslint-disable-next-line promise/prefer-await-to-callbacks
-      (error) => {}
-      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } enable on emulator
+      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')
+            );
+        } else if (error.code === GEOLOCATION_ERROR.POSITION_UNAVAILABLE) {
+          const locationEnabaled = await openPromptEnableLocation();
+          process.env.NODE_ENV !== 'test' &&
+            locationEnabaled &&
+            getCurrentPosition();
+        }
+      }
+      // { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 } // enable on emulator
     );
-  }, []);
+  }, [t]);
 
   const chooseOnMap = useCallback(() => {
     navigate(Routes.ChooseLocation, {
@@ -163,7 +179,10 @@ const SelectAddress = memo(({ route }) => {
     <View style={styles.wrap}>
       <View style={styles.searchLocation}>
         <SearchBarLocation input={input} onTextInput={onTextInput} />
-        <ScrollView style={styles.searchData}>
+        <ScrollView
+          style={styles.searchData}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
           {searchData.map((item, index) => (
             <RowLocation key={index} item={item} onPress={onPressRowLocation} />
           ))}
@@ -199,9 +218,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/SelectDevices.js

@@ -0,0 +1,158 @@
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useContext,
+} from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
+import { HeaderCustom } from '../../commons/Header';
+import Text from '../../commons/Text';
+import NavBar from '../../commons/NavBar';
+import BottomButtonView from '../../commons/BottomButtonView';
+import { FullLoading } from '../../commons';
+import Device from '../AddNewAction/Device';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API, Colors } from '../../configs';
+import styles from './SelectDevicesStyles';
+
+const SelectDevices = memo(({ route }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const { unitId } = route.params;
+  const { setAction } = useContext(SCContext);
+  const [listStation, setListStation] = useState([]);
+  const [listMenuItem, setListMenuItem] = useState([]);
+  const [indexStation, setIndexStation] = useState(0);
+  const [stations, setStations] = useState([]);
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    const { success, data } = await axiosGet(API.UNIT.DEVICES(unitId));
+    if (success) {
+      const newData = data.filter((item) => item.devices.length > 0);
+      const listMenu = newData.map((item, index) => ({
+        text: item.name,
+        station: item,
+        index: index,
+      }));
+      setStations(newData);
+      setListMenuItem(listMenu);
+      setListStation(listMenu);
+    }
+    setLoading(false);
+  }, [unitId]);
+
+  const addDevicesToFavorites = useCallback(async () => {
+    if (selectedIds.length === 0) {
+      return;
+    }
+    setLoading(true);
+    const { success } = await axiosPost(
+      API.UNIT.ADD_DEVICES_TO_FAVORITES(unitId),
+      {
+        devices: selectedIds,
+      }
+    );
+    if (success) {
+      setAction(Action.ADD_DEVICES_TO_FAVORITES, selectedIds);
+      goBack();
+    }
+    setLoading(false);
+  }, [unitId, selectedIds, setAction, goBack]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const onSnapToItem = useCallback(
+    (item, index) => {
+      setIndexStation(index);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unitId, indexStation]
+  );
+
+  const onSelectDevice = useCallback(
+    (device) => {
+      setSelectedIds((ids) => {
+        const index = ids.indexOf(device.id);
+        if (index !== -1) {
+          return ids.filter((id) => id !== device.id);
+        }
+        return [...ids, device.id];
+      });
+    },
+    [setSelectedIds]
+  );
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity style={styles.buttonClose} onPress={goBack}>
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom rightComponent={rightComponent} />
+      <ScrollView
+        style={styles.wrap}
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      >
+        <Text bold type="H2" style={styles.title}>
+          {t('select_device')}
+        </Text>
+
+        {listStation.length ? (
+          <NavBar
+            listStation={listStation}
+            listMenuItem={listMenuItem}
+            onSnapToItem={onSnapToItem}
+            indexStation={indexStation}
+            style={styles.navbar}
+          />
+        ) : (
+          <View style={styles.noneData}>
+            <Text center>{t('text_unit_add_to_favorites_no_devices')}</Text>
+          </View>
+        )}
+
+        <View style={styles.boxDevices}>
+          {stations[indexStation]?.devices &&
+            stations[indexStation].devices.map((device) => (
+              <Device
+                svgMain={device.icon || 'sensor'}
+                title={device.name}
+                sensor={device}
+                isSelectDevice={selectedIds.includes(device.id)}
+                onPress={onSelectDevice}
+              />
+            ))}
+        </View>
+      </ScrollView>
+
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('done')}
+        onPressMain={addDevicesToFavorites}
+        typeMain={selectedIds.length === 0 ? 'disabled' : 'primary'}
+      />
+      {loading && <FullLoading />}
+    </View>
+  );
+});
+
+export default SelectDevices;

package/src/screens/Unit/SelectDevicesStyles.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors, Constants } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  contentContainerStyle: {
+    paddingBottom: getBottomSpace() + 100,
+  },
+  navbar: {
+    paddingTop: 16,
+  },
+  title: {
+    marginHorizontal: 16,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginTop: 22,
+    justifyContent: 'space-between',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+  noneData: {
+    paddingHorizontal: 16,
+    marginTop: Constants.height * 0.3,
+  },
+});

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();

package/src/screens/Unit/Station/index.js

@@ -1,5 +1,6 @@
 import React, { memo, useEffect, useRef, useState } from 'react';
 import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
 import styles from './StationStyles';
 
 const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
@@ -23,6 +24,7 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         key={index}
         style={styles.wrapTitle}
         onPress={handleOnSnapToItem(item, index)}
+        testID={`${TESTID.SUB_UNIT_NAME}-${item?.station?.id}`}
       >
         <Text
           style={[styles.title, index === indexStation && styles.titleActive]}
@@ -70,6 +72,8 @@ const Station = ({ listStation = [], onSnapToItem, indexStation }) => {
         extraData={data}
         renderItem={renderItem}
         showsHorizontalScrollIndicator={false}
+        scrollIndicatorInsets={{ right: 1 }}
+        testID={TESTID.NAV_LIST}
       />
     </View>
   );