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

package/src/screens/SubUnit/AddSubUnit.js

@@ -112,10 +112,11 @@ const AddSubUnit = ({ route }) => {
             return;
           }
           navigate(Routes.UnitStack, {
-            screen: Routes.SubUnitDetail,
+            screen: Routes.UnitDetail,
             params: {
-              unit: unit,
-              station: data,
+              unitId: unit.id,
+              unitData: data,
+              isAddSubUnit: true,
             },
           });
         } else {

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/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, routeName } = 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]);

package/src/screens/Unit/ManageUnit.js

@@ -102,7 +102,7 @@ const ManageUnit = ({ route }) => {
 
   const goSelectLocation = useCallback(() => {
     navigation.navigate(Routes.UnitStack, {
-      screen: Routes.SelectLocation,
+      screen: Routes.SelectAddress,
       params: {
         updateLocation,
       },

package/src/screens/Unit/SelectAddress.js

@@ -0,0 +1,240 @@
+/* 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 BottomButtonView from '../../commons/BottomButtonView';
+import SearchBarLocation from '../../commons/SearchLocation';
+import RowLocation from '../../commons/SearchLocation/RowLocation';
+import Text from '../../commons/Text';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+navigator.geolocation = require('@react-native-community/geolocation');
+
+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';
+
+const initialRegion = {
+  latitudeDelta: 0.0922,
+  longitudeDelta: 0.0421,
+};
+
+const DEFAULT_LATITUDE = 10.7974046; // EoH center
+const DEFAULT_LONGITUDE = 106.7035663;
+
+const SelectAddress = memo(({ route }) => {
+  const t = useTranslations();
+  const { updateLocation } = route.params;
+  const { navigate, goBack } = useNavigation();
+  const [input, setInput] = useState('');
+  const [searchData, setSearchData] = useState([]);
+  const [searchedLocation, setSearchedLocation] = useState(null);
+  const mapRef = useRef(null);
+
+  const onDone = useCallback(() => {
+    if (!searchedLocation) {
+      return;
+    }
+    updateLocation(searchedLocation.description);
+    goBack();
+  }, [goBack, updateLocation, searchedLocation]);
+
+  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;
+      setSearchedLocation({
+        description: item.description,
+        latitude: location.lat,
+        longitude: location.lng,
+      });
+    }
+  }, []);
+
+  const getCurrentPosition = useCallback(() => {
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const currentLatitude = JSON.stringify(position.coords.latitude);
+        const currentLongitude = JSON.stringify(position.coords.longitude);
+        const { success, data } = await axiosGet(
+          API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
+          {
+            params: {
+              latlng: `${currentLatitude},${currentLongitude}`,
+              key: SCConfig.GOOGLE_MAP_API_KEY,
+            },
+          }
+        );
+        if (success && data.results.length > 0) {
+          const result = data.results[0];
+          setInput(result.formatted_address);
+          setSearchedLocation({
+            description: result.formatted_address,
+            latitude: result.geometry.location.lat,
+            longitude: result.geometry.location.lng,
+          });
+        }
+      },
+      (error) => {},
+      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
+    );
+  }, []);
+
+  const chooseOnMap = useCallback(() => {
+    navigate(Routes.ChooseLocation, {
+      location: searchedLocation,
+      setAddress: setInput,
+      setLocation: setSearchedLocation,
+    });
+  }, [navigate, searchedLocation, setInput, setSearchedLocation]);
+
+  useEffect(() => {
+    if (searchedLocation) {
+      animateToRegion(searchedLocation.latitude, searchedLocation.longitude);
+    }
+  }, [animateToRegion, searchedLocation]);
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.searchLocation}>
+        <SearchBarLocation input={input} onTextInput={onTextInput} />
+        <ScrollView style={styles.searchData}>
+          {searchData.map((item, index) => (
+            <RowLocation key={index} item={item} onPress={onPressRowLocation} />
+          ))}
+        </ScrollView>
+        {searchData.length === 0 && (
+          <>
+            <TouchableOpacity
+              onPress={getCurrentPosition}
+              style={styles.button}
+              testID={TESTID.BUTTON_YOUR_LOCATION}
+            >
+              <IconOutline name="aim" size={27} color={Colors.Primary} />
+              <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
+                {t('your_location')}
+              </Text>
+            </TouchableOpacity>
+            <View style={styles.separated} />
+            <TouchableOpacity
+              onPress={chooseOnMap}
+              style={styles.button}
+              testID={TESTID.BUTTON_CHOOSE_ON_MAP}
+            >
+              <IconFill name="environment" size={27} color={Colors.Primary} />
+              <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
+                {t('choose_on_map')}
+              </Text>
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+      <MapView
+        ref={mapRef}
+        provider={PROVIDER_GOOGLE}
+        style={styles.mapView}
+        initialRegion={{
+          ...initialRegion,
+          latitude: DEFAULT_LATITUDE,
+          longitude: DEFAULT_LONGITUDE,
+        }}
+        followUserLocation={true}
+      >
+        {searchedLocation && (
+          <>
+            <Circle
+              center={{
+                latitude: searchedLocation.latitude,
+                longitude: searchedLocation.longitude,
+              }}
+              radius={1000}
+              fillColor={Colors.BlueTransparent5}
+              strokeColor={Colors.Blue10}
+            />
+            <Marker
+              coordinate={{
+                latitude: searchedLocation.latitude,
+                longitude: searchedLocation.longitude,
+              }}
+              tracksViewChanges={false}
+            >
+              <IconFill name="environment" size={27} color={Colors.Blue10} />
+            </Marker>
+          </>
+        )}
+      </MapView>
+      <BottomButtonView
+        rowButton
+        style={styles.bottomButton}
+        mainTitle={t('done')}
+        onPressMain={onDone}
+        secondaryTitle={t('cancel')}
+        onPressSecondary={goBack}
+        typeMain="primaryText"
+        typeSecondary="primaryText"
+      />
+    </View>
+  );
+});
+
+export default SelectAddress;

package/src/screens/Unit/SelectAddressStyles.js

@@ -0,0 +1,48 @@
+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,
+  },
+  searchLocation: {
+    paddingVertical: 8,
+    position: 'absolute',
+    zIndex: 1,
+    minHeight: 48,
+    top: 0,
+    left: 0,
+    right: 0,
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  searchData: {
+    paddingHorizontal: 16,
+    position: 'relative',
+    width: '100%',
+    maxHeight: 100,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  separated: {
+    height: 1,
+    backgroundColor: Colors.Gray3,
+    marginHorizontal: 16,
+  },
+  text: {
+    marginLeft: 12,
+  },
+});

package/src/screens/Unit/__test__/ChooseLocation.test.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import ChooseLocation from '../ChooseLocation';
+import axios from 'axios';
+import { API, SCConfig } from '../../../configs';
+import BottomButtonView from '../../../commons/BottomButtonView';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChooseLocation route={route} />
+  </SCProvider>
+);
+
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('react-native-maps', () => {
+  const { forwardRef } = require('react');
+  const { View } = require('react-native');
+  const MockMapView = forwardRef((props, ref) => (
+    <View refs={ref}>{props.children}</View>
+  ));
+  return {
+    __esModule: true,
+    default: MockMapView,
+    PROVIDER_GOOGLE: 'google',
+  };
+});
+
+jest.mock('axios');
+
+describe('Test ChooseLocation', () => {
+  let tree;
+  let route;
+  const mockSetAddress = jest.fn();
+  const mockSetLocation = jest.fn();
+
+  beforeAll(() => {
+    axios.get.mockClear();
+    route = {
+      params: {
+        location: {
+          latitude: 10,
+          longitude: 10,
+        },
+        setAddress: mockSetAddress,
+        setLocation: mockSetLocation,
+      },
+    };
+  });
+
+  test('test done choose location', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonBottom = instance.findByType(BottomButtonView);
+
+    const response = {
+      status: 200,
+      data: {
+        results: [
+          {
+            formatted_address: 'address',
+            geometry: {
+              location: {
+                lat: 20,
+                lng: 20,
+              },
+            },
+          },
+        ],
+      },
+    };
+    axios.get.mockImplementation(async () => response);
+    await act(async () => {
+      await buttonBottom.props.onPressMain();
+    });
+    expect(axios.get).toBeCalledWith(
+      API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG,
+      {
+        params: {
+          latlng: '10,10',
+          key: SCConfig.GOOGLE_MAP_API_KEY,
+        },
+      }
+    );
+    expect(mockSetAddress).toBeCalledWith('address');
+    expect(mockSetLocation).toBeCalledWith({
+      description: 'address',
+      latitude: 20,
+      longitude: 20,
+    });
+    expect(mockGoBack).toBeCalled();
+  });
+});