@eohjsc/react-native-smart-city 0.2.45 → 0.2.49

package/src/screens/AddCommon/SelectUnit.js

@@ -45,6 +45,9 @@ const AddCommonSelectUnit = ({ route }) => {
         setTitle(t('text_select_a_unit'));
         setSubTitle(t('first_select_a_unit'));
         break;
+      case 'AddHassioDevice':
+        setTitle(t('text_select_a_unit'));
+        break;
       default:
         setTitle(t('add_new_sub_unit'));
         setSubTitle(t('add_new_subunit_select_unit'));
@@ -91,6 +94,14 @@ const AddCommonSelectUnit = ({ route }) => {
           unit_id: units[selectedIndex].id,
         });
         break;
+      case 'AddHassioDevice':
+        navigation.navigate(Routes.SmartAccountConnecting, {
+          username: route.params.username,
+          password: route.params.password,
+          brand: route.params.brand,
+          unit_id: units[selectedIndex].id,
+        });
+        break;
       default:
         break;
     }

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

@@ -12,7 +12,7 @@ import OptionsDropdownActionTemplate from '../../commons/OneTapTemplate/OptionsD
 import StatesGridActionTemplate from '../../commons/OneTapTemplate/StatesGridActionTemplate';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import { API, Images } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { CONDITION_TYPES, TESTID } from '../../configs/Constants';
 import Routes from '../../utils/Route';
 import styles from './Styles/SelectActionStyles';
 import moment from 'moment';
@@ -30,6 +30,7 @@ const SelectAction = memo(({ route }) => {
     unit,
     device,
     automateId,
+    automate = {},
     scriptName,
     isSelectSensor = false,
     type,
@@ -42,9 +43,11 @@ const SelectAction = memo(({ route }) => {
   const [sensorData, setSensorData] = useState([]);
   const [checkedItem, setCheckedItem] = useState({});
   const [isLoading, setIsLoading] = useState(false);
+  const [isfetched, setIsfetched] = useState(true);
 
   const fetchData = useCallback(async () => {
     isSelectSensor && setIsLoading(true);
+    setIsfetched(true);
     const { success, data } = await axiosGet(
       isSelectSensor
         ? API.AUTOMATE.GET_SENSOR_CONFIG(device.id)
@@ -53,13 +56,58 @@ const SelectAction = memo(({ route }) => {
       isSelectSensor && true
     );
     if (success) {
-      isSelectSensor ? setSensorData(data) : setData(data);
+      if (isSelectSensor) {
+        if (automate?.config_id) {
+          const conditionType = [
+            {
+              title: `${t('is_below')} (<)`,
+              type: CONDITION_TYPES.IS_BELOW,
+              conditionValue: '<',
+            },
+            {
+              title: `${t('is')} (=)`,
+              type: CONDITION_TYPES.IS,
+              conditionValue: '=',
+            },
+            {
+              title: `${t('is_above')} (>)`,
+              type: CONDITION_TYPES.IS_ABOVE,
+              conditionValue: '>',
+            },
+          ];
+          const condition = conditionType.find((item) => {
+            return item.conditionValue === automate.condition;
+          });
+          const updateSensorData = data.map((obj) =>
+            obj.id === automate.config_id
+              ? { ...obj, value: automate.value, ...condition }
+              : obj
+          );
+          let selectSensor = data.find((config) => {
+            return config.id === automate.config_id;
+          });
+          setSensorData(updateSensorData);
+          setCheckedItem(selectSensor);
+        } else {
+          setSensorData(data);
+        }
+      } else {
+        setData(data);
+      }
     }
+    setIsfetched(false);
     const to = setTimeout(() => {
       setIsLoading(false);
       clearTimeout(to);
     }, 1000);
-  }, [device.id, isSelectSensor]);
+  }, [
+    automate.condition,
+    automate.config_id,
+    automate.value,
+    device.id,
+    isSelectSensor,
+    t,
+  ]);
 
   const checkConditionToContinue = useCallback(() => {
     const itemTemp = sensorData?.find((i) => i.id === checkedItem?.id);
@@ -76,6 +124,13 @@ const SelectAction = memo(({ route }) => {
         isSelectSensor,
         isMultiUnits,
         automateId,
+        automate: {
+          ...automate,
+          condition: itemTemp?.conditionValue || '<',
+          value: itemTemp?.value,
+          config_id: itemTemp?.id,
+          config_name: itemTemp?.name,
+        },
         scriptName,
       });
     } else {
@@ -302,7 +357,7 @@ const SelectAction = memo(({ route }) => {
             testID={TESTID.ACTION_ITEM}
           />
         )}
-        {data?.length === 0 && (
+        {data?.length === 0 && sensorData?.length === 0 && !isfetched && (
           <View style={styles.noneData}>
             <Text center>
               {t('you_do_not_have_the_device_or_have_share_control_device')}

package/src/screens/AddNewAction/SelectSensorDevices.js

@@ -21,6 +21,7 @@ const SelectSensorDevices = memo(({ route }) => {
   const {
     unit,
     automateId,
+    automate = {},
     title = AUTOMATE_SELECT.SELECT_DEVICE,
     type,
     scriptName,
@@ -59,13 +60,29 @@ const SelectSensorDevices = memo(({ route }) => {
             station: item,
             index: index,
           }));
+          if (isSelectSensor) {
+            if (automate.sensor_id) {
+              let selectSensor = {};
+              data.map((item) => {
+                item.sensors.map((sensor) => {
+                  if (sensor.id === automate.sensor_id) {
+                    selectSensor = sensor;
+                    return;
+                  } else if (selectSensor) {
+                    return;
+                  }
+                });
+              });
+              setSelectedDevice(selectSensor);
+            }
+          }
           setStation(data);
           setListMenuItem(listMenu);
           setListStation(listMenu.concat([{ text: '' }]));
         }
       }
     );
-  }, [isSelectSensor, unit.id]);
+  }, [automate.sensor_id, isSelectSensor, unit]);
 
   useEffect(() => {
     fetchDetails();
@@ -84,6 +101,10 @@ const SelectSensorDevices = memo(({ route }) => {
       unit,
       device: selectedDevice,
       automateId: automateId,
+      automate: {
+        ...automate,
+        sensor_id: selectedDevice?.id ? selectedDevice.id : automate.sensor_id,
+      },
       stationName: station[indexStation]?.name,
       isSelectSensor,
       type,
@@ -93,18 +114,19 @@ const SelectSensorDevices = memo(({ route }) => {
       isMultiUnits,
     });
   }, [
+    navigate,
+    unit,
     selectedDevice,
     automateId,
+    automate,
     station,
     indexStation,
-    navigate,
-    unit,
-    type,
     isSelectSensor,
+    type,
     scriptName,
-    isMultiUnits,
     isAutomateTab,
     isCreateNewAction,
+    isMultiUnits,
   ]);
 
   const onPressClose = useCallback(() => {

package/src/screens/AddNewAction/SetupSensor.js

@@ -13,12 +13,7 @@ import BottomButtonView from '../../commons/BottomButtonView';
 import { HorizontalPicker } from '../../commons';
 import { popAction } from '../../navigations/utils';
 import { useStatusBarPreview } from '../../hooks/Common/useStatusBar';
-
-const CONDITION_TYPES = {
-  IS: 'IS',
-  IS_BELOW: 'IS_BELOW',
-  IS_ABOVE: 'IS_ABOVE',
-};
+import { CONDITION_TYPES } from '../../configs/Constants';
 
 const SetUpSensor = () => {
   const t = useTranslations();

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/AddNewAutoSmart/__test__/AddNewAutoSmart.test.js

@@ -39,6 +39,10 @@ describe('test AddNewAutoSmart', () => {
     },
   };
 
+  beforeEach(() => {
+    mockNavigate.mockClear();
+  });
+
   test('AddNewAutoSmart select sensor device', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -62,8 +66,11 @@ describe('test AddNewAutoSmart', () => {
     });
 
     expect(mockNavigate).toBeCalledWith(Routes.SelectSensorDevices, {
+      automate: {},
+      automateId: undefined,
       title: 'select_sensor',
       type: 'value_change',
+      scriptName: undefined,
       unit: { id: 1 },
       isAutomateTab: undefined,
       isMultiUnits: undefined,
@@ -92,11 +99,14 @@ describe('test AddNewAutoSmart', () => {
       await bottomButton.props.onPress();
     });
     expect(mockNavigate).toHaveBeenCalledWith(Routes.SetSchedule, {
+      automate: {},
+      automateId: undefined,
       type: 'schedule',
+      routeName: 'SetSchedule',
+      scriptName: undefined,
       unit: route.params.unit,
       isAutomateTab: undefined,
       isMultiUnits: undefined,
-      routeName: 'SetSchedule',
     });
   });
 });

package/src/screens/AddNewAutoSmart/index.js

@@ -17,8 +17,14 @@ import Routes from '../../utils/Route';
 const AddNewAutoSmart = memo(({ route }) => {
   const t = useTranslations();
   const { navigate, goBack } = useNavigation();
-  const { type, unit, isAutomateTab, isMultiUnits, automateId, scriptName } =
-    route.params;
+  const {
+    type,
+    unit,
+    isAutomateTab,
+    isMultiUnits,
+    automate = {},
+    scriptName,
+  } = route.params;
   const typeAutoSmart = {
     [AUTOMATE_TYPE.AUTOMATE]: [
       {
@@ -57,26 +63,31 @@ const AddNewAutoSmart = memo(({ route }) => {
       },
     ],
   };
-  const [data] = useState(typeAutoSmart[type]);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [data] = useState(
+    automate?.id ? typeAutoSmart[AUTOMATE_TYPE.AUTOMATE] : typeAutoSmart[type]
+  );
+  const [selectedIndex, setSelectedIndex] = useState(
+    automate?.id ? data.findIndex((obj) => obj.type === type) : -1
+  );
 
   const handleOnContinue = useCallback(() => {
-    const automate = data[selectedIndex];
+    const dataAutomate = data[selectedIndex];
     const params = {
-      type: automate?.type,
+      type: dataAutomate?.type,
       unit: unit,
-      ...(automate?.data || {}),
+      ...(dataAutomate?.data || {}),
       isAutomateTab,
       isMultiUnits,
-      routeName: automate?.route,
-      automateId,
+      automateId: automate?.id,
+      routeName: dataAutomate?.route,
+      automate,
       scriptName,
     };
 
-    if (automate.type === AUTOMATE_TYPE.VALUE_CHANGE && isMultiUnits) {
+    if (dataAutomate.type === AUTOMATE_TYPE.VALUE_CHANGE && isMultiUnits) {
       navigate(Routes.SelectUnit, params);
     } else {
-      navigate(automate.route, params);
+      navigate(dataAutomate.route, params);
     }
   }, [
     navigate,
@@ -85,7 +96,7 @@ const AddNewAutoSmart = memo(({ route }) => {
     unit,
     isAutomateTab,
     isMultiUnits,
-    automateId,
+    automate,
     scriptName,
   ]);
 
@@ -107,7 +118,7 @@ const AddNewAutoSmart = memo(({ route }) => {
       <HeaderCustom isShowClose onClose={onClose} />
       <View style={styles.container}>
         <Text semibold type={'H2'} style={styles.titleCreate}>
-          {automateId ? t('update_smart') : t('create_smart')}
+          {automate?.id ? t('update_smart') : t('create_smart')}
         </Text>
         <Text type={'Body'} style={styles.titleChoose}>
           {t('choose_the_automation_method_you_want')}