@eohjsc/react-native-smart-city 0.2.46 → 0.2.50

package/src/screens/AddLocationMaps/index.js

@@ -1,14 +1,20 @@
-import React, { memo, useState, useEffect, useCallback } from 'react';
-import { View, StyleSheet } from 'react-native';
-import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
-import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import React, { memo, useState, useCallback, useRef } from 'react';
+import { View, ScrollView } from 'react-native';
+import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
 import { ViewButtonBottom } from '../../commons';
-import PinLocation from '../../../assets/images/AddLocationMaps/PinLocation.svg';
+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 styles from './indexStyle';
+import Routes from '../../utils/Route';
 
 export const initialRadius = 250;
 const initialRegion = {
@@ -16,21 +22,99 @@ const initialRegion = {
   longitudeDelta: 0.009221,
 };
 
+const DEFAULT_LATITUDE = 10.7974046; // EoH center
+const DEFAULT_LONGITUDE = 106.7035663;
+
 const AddLocationMaps = memo(() => {
   const t = useTranslations();
-  const { goBack } = useNavigation();
-  const [color, setColor] = useState(Colors.Black);
-  useEffect(() => {
-    setColor(Colors.DaybreakBlue);
-  }, [setColor]);
+  const { goBack, navigate } = useNavigation();
+  const [input, setInput] = useState('');
+  const [searchData, setSearchData] = useState([]);
+  const [searchedLocation, setSearchedLocation] = useState(null);
 
-  const selectedCoordinates = { latitude: 10.7993573, longitude: 106.7050793 };
+  const mapRef = useRef(null);
 
-  const onDone = useCallback(() => {}, []);
+  const onDone = useCallback(() => {
+    navigate(Routes.AddSubUnit, {
+      location: input,
+      isAddUnit: true,
+    });
+  }, [input, navigate]);
   const onBack = useCallback(() => {
     goBack();
   }, [goBack]);
 
+  const onTextInput = useCallback(async (input) => {
+    setInput(input);
+    if (!input) {
+      setSearchData([]);
+      setSearchedLocation(null);
+      return;
+    }
+    try {
+      const config = {
+        params: {
+          input: input,
+          key: SCConfig.GOOGLE_MAP_API_KEY,
+          sessiontoken: 123456324,
+          strictBounds: false,
+          types: ['establishment'],
+        },
+      };
+
+      const { success, data } = await axiosGet(
+        API.EXTERNAL.GOOGLE_MAP.AUTO_COMPLETE,
+        config
+      );
+      if (success) {
+        setSearchData(data.predictions);
+      }
+    } catch (error) {}
+  }, []);
+
+  const animateToRegion = useCallback((lat, lng) => {
+    if (!mapRef || !mapRef.current) {
+      return;
+    }
+
+    mapRef.current.animateToRegion(
+      {
+        latitude: lat,
+        longitude: lng,
+        ...initialRegion,
+      },
+      600
+    );
+  }, []);
+
+  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]
+  );
+
   return (
     <View style={styles.container}>
       <Text color={Colors.Gray9} size={24} semibold style={styles.textHeader}>
@@ -40,35 +124,39 @@ const AddLocationMaps = memo(() => {
         <Text color={Colors.Gray8} size={12} style={styles.textExplain}>
           {t('text_explain_add_geolocation')}
         </Text>
-        <Text color={Colors.Black} size={16} style={styles.textAddress}>
-          298/3 Điện Biên Phủ, phường 17, quận Bình Thạnh, Thành phố Hồ Chí
-          Minh, Việt Nam
-        </Text>
+        <View style={styles.searchLocation}>
+          <SearchBarLocation input={input} onTextInput={onTextInput} />
+          <ScrollView style={styles.searchData}>
+            {searchData.map((item) => (
+              <RowLocation item={item} onPress={onPressRowLocation} />
+            ))}
+          </ScrollView>
+        </View>
         <View style={styles.mapContainer}>
           <MapView
+            ref={mapRef}
             provider={PROVIDER_GOOGLE}
-            region={{
-              ...selectedCoordinates,
+            style={styles.mapView}
+            initialRegion={{
               ...initialRegion,
+              latitude: DEFAULT_LATITUDE,
+              longitude: DEFAULT_LONGITUDE,
             }}
-            style={styles.mapView}
+            followUserLocation={true}
           >
-            <Marker
-              coordinate={selectedCoordinates}
-              anchor={{ x: 0.5, y: 0.5 }}
-              calloutOffset={{ x: 1, y: 1 }}
-              tracksViewChanges={false}
-            >
-              <PinLocation />
-            </Marker>
-            <Circle
-              center={selectedCoordinates}
-              radius={initialRadius}
-              strokeColor={Colors.Blue6}
-              fillColor={color}
-              zIndex={2}
-              strokeWidth={1}
-            />
+            {searchedLocation && (
+              <Marker
+                coordinate={{
+                  latitude: searchedLocation.latitude,
+                  longitude: searchedLocation.longitude,
+                }}
+                tracksViewChanges={false}
+              >
+                <View style={styles.pointCircle}>
+                  <Point />
+                </View>
+              </Marker>
+            )}
           </MapView>
         </View>
       </View>
@@ -77,48 +165,10 @@ const AddLocationMaps = memo(() => {
         onLeftClick={onBack}
         rightTitle={t('done')}
         onRightClick={onDone}
+        rightDisabled={!input}
       />
     </View>
   );
 });
 
 export default AddLocationMaps;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-    paddingTop: getStatusBarHeight() + 16,
-  },
-  textHeader: {
-    marginHorizontal: 16,
-  },
-  content: {
-    marginTop: 16,
-    paddingTop: 16,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    flex: 1,
-  },
-  textExplain: {
-    lineHeight: 20,
-    marginHorizontal: 16,
-  },
-  textAddress: {
-    lineHeight: 24,
-    margin: 16,
-  },
-  mapContainer: {
-    flex: 1,
-  },
-  mapView: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-});

package/src/screens/AddLocationMaps/indexStyle.js

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: getStatusBarHeight() + 16,
+  },
+  textHeader: {
+    marginHorizontal: 16,
+  },
+  content: {
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    backgroundColor: Colors.White,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    flex: 1,
+  },
+  textExplain: {
+    lineHeight: 20,
+    marginHorizontal: 16,
+  },
+  mapContainer: {
+    flex: 1,
+  },
+  mapView: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    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,
+  },
+});

package/src/screens/AddNewAction/SelectAction.js

@@ -100,7 +100,14 @@ const SelectAction = memo(({ route }) => {
       setIsLoading(false);
       clearTimeout(to);
     }, 1000);
-  }, [automate, device.id, isSelectSensor, t]);
+  }, [
+    automate.condition,
+    automate.config_id,
+    automate.value,
+    device.id,
+    isSelectSensor,
+    t,
+  ]);
 
   const checkConditionToContinue = useCallback(() => {
     const itemTemp = sensorData?.find((i) => i.id === checkedItem?.id);

package/src/screens/AddNewAction/__test__/SelectAction.test.js

@@ -63,7 +63,7 @@ describe('Test SelectAction', () => {
       return response;
     });
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -83,7 +83,7 @@ describe('Test SelectAction', () => {
       return response;
     });
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -99,6 +99,7 @@ describe('Test SelectAction', () => {
       visibilityTime: 1000,
     });
   });
+
   test('test fetchData', async () => {
     const response = {
       status: 200,
@@ -113,7 +114,7 @@ describe('Test SelectAction', () => {
       return response;
     });
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
     expect(axios.get).toHaveBeenCalled();
   });
@@ -219,6 +220,7 @@ describe('Test SelectAction', () => {
     expect(optionsDropdownActionTemplate).toBeDefined();
     expect(statesGridActionTemplate).toBeDefined();
   });
+
   test('test onPress handleOnSelectAction', async () => {
     const response = {
       status: 200,
@@ -247,7 +249,7 @@ describe('Test SelectAction', () => {
       return response;
     });
     await act(async () => {
-      tree = renderer.create(wrapComponent(route));
+      tree = await renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const actionTemplate = instance.findByType(ActionTemplate);

package/src/screens/AddNewDevice/ConnectingDevices.js

@@ -1,5 +1,7 @@
 import React, { memo, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+
 import { API, Colors } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
 import Text from '../../commons/Text';
@@ -44,6 +46,7 @@ const styles = StyleSheet.create({
   wrap: {
     flex: 1,
     backgroundColor: Colors.Gray2,
+    paddingTop: getStatusBarHeight(true),
   },
   txtHeader: {
     marginTop: 16,

package/src/screens/AddNewGateway/ConnectingGatewayStyles.js

@@ -1,10 +1,19 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, StatusBar, Platform } from 'react-native';
 import { Colors } from '../../configs';
 import { colorOpacity } from '../../utils/Converter/color';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 export default StyleSheet.create({
   wrap: {
     flex: 1,
+    ...Platform.select({
+      android: {
+        paddingTop: StatusBar.currentHeight,
+      },
+      ios: {
+        paddingTop: getStatusBarHeight(),
+      },
+    }),
   },
   txtHeader: {
     marginTop: 16,

package/src/screens/AddNewOneTap/index.js

@@ -13,7 +13,7 @@ import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosPost, axiosPut } from '../../utils/Apis/axios';
 import Routes from '../../utils/Route';
 import { popAction } from '../../navigations/utils';
-import { ToastBottomHelper } from '../../utils/Utils';
+import { AUTOMATE_TYPE } from '../../configs/Constants';
 
 const AddNewOneTap = memo(({ route }) => {
   const {
@@ -52,8 +52,6 @@ const AddNewOneTap = memo(({ route }) => {
         isAutomateTab: automateId ? false : isAutomateTab,
         isMultiUnits,
       });
-    } else {
-      ToastBottomHelper.error(t('error_please_try_later'));
     }
   }, [
     isMultiUnits,
@@ -65,7 +63,6 @@ const AddNewOneTap = memo(({ route }) => {
     automate,
     navigate,
     isAutomateTab,
-    t,
   ]);
 
   const onChangeName = useCallback((text) => {
@@ -92,6 +89,11 @@ const AddNewOneTap = memo(({ route }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAutomateTab]);
 
+  const textForNewTap =
+    type === AUTOMATE_TYPE.ONE_TAP
+      ? t('name_your_button')
+      : t('name_your_script');
+
   return (
     <SafeAreaView
       style={
@@ -109,10 +111,10 @@ const AddNewOneTap = memo(({ route }) => {
           color={Colors.Gray9}
           style={styles.textHeader}
         >
-          {t('name_your_button')}
+          {textForNewTap}
         </Text>
         <_TextInput
-          placeholder={t('name_your_button')}
+          placeholder={textForNewTap}
           wrapStyle={styles.noMarginTop}
           onChange={onChangeName}
           textInputStyle={styles.textInput}

package/src/screens/Automate/MultiUnits.js

@@ -114,9 +114,19 @@ const MultiUnits = () => {
         : item?.type !== AUTOMATE_TYPE.ONE_TAP
     );
 
+    const listFavorite = listItems.filter(
+      (item) => item.script?.is_star === true
+    );
+
+    const listNotFavorite = listItems.filter(
+      (item) => item.script?.is_star === false
+    );
+
+    const newListItems = listFavorite.concat(listNotFavorite);
+
     return (
       <View style={styles.wrapItem}>
-        {listItems.map((item, index) => (
+        {newListItems.map((item, index) => (
           <ItemOneTap
             isOwner={idUser === item?.user}
             automate={item}

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

@@ -70,6 +70,7 @@ describe('Test MultiUnits', () => {
             id: 1,
             name: 'Tap to up down up down coc coc coc coc coc',
             icon: null,
+            is_star: true,
             icon_kit:
               'https://eoh-gateway-backend.eoh.io/_Category_Sensors_Type_Garage_door_StyleC_olorful.png',
           },
@@ -86,6 +87,7 @@ describe('Test MultiUnits', () => {
             id: 300,
             name: 'p14',
             icon: null,
+            is_star: true,
             icon_kit: null,
           },
         },

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

@@ -43,6 +43,16 @@ jest.mock('react-redux', () => {
   };
 });
 
+jest.mock('@react-native-community/netinfo', () => {
+  return {
+    useNetInfo: () => {
+      return {
+        isConnected: true,
+      };
+    },
+  };
+});
+
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),
@@ -807,6 +817,10 @@ describe('test DeviceDetail', () => {
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
       id: route.params.sensor.id,
       type: 'action',
+      filterEnabled: {
+        date: false,
+        user: false,
+      },
     });
   });
 });

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

@@ -0,0 +1,63 @@
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import HistoryChart from '../../../commons/Device/HistoryChart';
+import { API } from '../../../configs';
+import { axiosGet } from '../../../utils/Apis/axios';
+
+export const DetailHistoryChart = ({ item, sensor }) => {
+  const [chartData, setChartData] = useState(item.configuration.configs);
+  const [startDate, setStartDate] = useState(
+    moment().subtract(1, 'days').valueOf()
+  );
+  const [endDate, setEndDate] = useState(moment().valueOf());
+  useEffect(() => {
+    const fetchData = async () => {
+      let params = new URLSearchParams();
+      item.configuration.configs.map((config) => {
+        params.append('config', config.id);
+      });
+      params.append('date_from', startDate / 1000);
+      params.append('date_to', endDate / 1000);
+      const { success, data } = await axiosGet(
+        API.SENSOR.DISPLAY_HISTORY(sensor.id),
+        { params }
+      );
+      if (success) {
+        for (let i = 0; i < data.length; i++) {
+          for (let j = 0; j < data[i].data.length; j++) {
+            data[i].data[j].x = moment(data[i].data[j].x).toDate();
+          }
+        }
+
+        const formatData = item.configuration.configs.map((config) => {
+          const dataChart = data.find((k) => k.config === config.id) || {
+            data: [],
+          };
+          return { ...config, data: dataChart.data };
+        });
+        setChartData(formatData);
+      }
+    };
+    fetchData();
+  }, [startDate, endDate, item, sensor]);
+  if (!chartData.length) {
+    return false;
+  }
+
+  return (
+    <HistoryChart
+      configuration={item.configuration}
+      datas={chartData}
+      style={styles.chartStyle}
+      setStartDate={setStartDate}
+      setEndDate={setEndDate}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  chartStyle: {
+    paddingHorizontal: 16,
+  },
+});

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

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+export const EmergencyCountdown = memo(({ countUpStr }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.countDown}>
+      <Text type="Label" center style={styles.messageCountDown}>
+        {t('time_since_the_emergency_button_was_pressed')}
+      </Text>
+      <Text type="H3" center semibold color={Colors.Red6}>
+        {countUpStr}
+      </Text>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  countDown: {
+    marginBottom: 16,
+    marginTop: 8,
+  },
+  messageCountDown: {
+    marginBottom: 8,
+  },
+});

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ConnectedViewHeader, DisconnectedView } from '../../../commons/Device';
+import { DEVICE_TYPE } from '../../../configs/Constants';
+
+export const SensorConnectStatusViewHeader = (props) => {
+  if (!!props.sensor && !props.sensor.is_other_device) {
+    if (props.connected) {
+      return (
+        <>
+          <ConnectedViewHeader
+            lastUpdated={props.lastUpdated}
+            isDisplayTime={props.isDisplayTime}
+            showWindDirection={props.showWindDirection}
+          />
+          {props.children}
+        </>
+      );
+    } else if (props.connectedBlt) {
+      return (
+        <>
+          <ConnectedViewHeader
+            lastUpdated={props.lastUpdated}
+            type={'Bluetooth'}
+            isDisplayTime={props.isDisplayTime}
+            showWindDirection={props.showWindDirection}
+          />
+          {props.children}
+        </>
+      );
+    } else {
+      return <DisconnectedView sensor={props.sensor} />;
+    }
+  } else {
+    if (props.sensor.device_type === DEVICE_TYPE.LG_THINQ) {
+      return (
+        <>
+          <ConnectedViewHeader lastUpdated={props.lastUpdated} />
+          {props.children}
+        </>
+      );
+    } else {
+      if (props.isGGHomeConnected) {
+        return (
+          <>
+            <ConnectedViewHeader
+              lastUpdated={props.lastUpdated}
+              type={'GoogleHome'}
+            />
+            {props.children}
+          </>
+        );
+      } else {
+        return <DisconnectedView sensor={props.sensor} type={'GoogleHome'} />;
+      }
+    }
+  }
+};