|
@ -1,31 +1,42 @@ |
|
|
import React, { useContext } from "react"; |
|
|
|
|
|
|
|
|
import React, { useContext, useState } from "react"; |
|
|
import { Button, StyleSheet, View, Text } from "react-native"; |
|
|
import { Button, StyleSheet, View, Text } from "react-native"; |
|
|
import MapView, { Marker } from "react-native-maps"; |
|
|
import MapView, { Marker } from "react-native-maps"; |
|
|
|
|
|
|
|
|
import colors from "../config/colors"; |
|
|
import colors from "../config/colors"; |
|
|
import { screen_width, screen_height } from "../config/dimensions"; |
|
|
import { screen_width, screen_height } from "../config/dimensions"; |
|
|
|
|
|
|
|
|
import useLocation from "../hooks/useLocation"; |
|
|
|
|
|
import * as Location from 'expo-location'; |
|
|
import * as Location from 'expo-location'; |
|
|
import { EventLocationContext } from "../context/EventLocationContext"; |
|
|
import { EventLocationContext } from "../context/EventLocationContext"; |
|
|
|
|
|
import { TouchableOpacity } from "react-native-gesture-handler"; |
|
|
|
|
|
import { CurrentLocationContext } from "../context/CurrentLocationContext"; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
|
|
|
//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
|
|
|
|
|
|
|
|
|
const MapFormScreen = (props) => { |
|
|
const MapFormScreen = (props) => { |
|
|
// const location = useLocation({
|
|
|
|
|
|
// latitude: -23.533773,
|
|
|
|
|
|
// longitude: -46.625290,
|
|
|
|
|
|
//});
|
|
|
|
|
|
const getAddress = async(coordenadas) => { |
|
|
|
|
|
|
|
|
const context = useContext(EventLocationContext); //local do evento
|
|
|
|
|
|
const contextLocation = useContext(CurrentLocationContext) //local do usuário
|
|
|
|
|
|
const location = contextLocation.currentCoordinates; |
|
|
|
|
|
|
|
|
|
|
|
const [marker, setMarker] = useState(context.eventCoordinates); |
|
|
|
|
|
// console.log(marker);
|
|
|
|
|
|
|
|
|
|
|
|
const getAddress = async (coordenadas) => { |
|
|
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); |
|
|
Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); |
|
|
|
|
|
|
|
|
const address = await Location.reverseGeocodeAsync(coordenadas.x); |
|
|
|
|
|
// console.log(address);
|
|
|
|
|
|
context.saveNewLocation(address[0].street+", " + address[0].name +"\n" + address[0].district, coordenadas.x); |
|
|
|
|
|
|
|
|
const address = await Location.reverseGeocodeAsync(coordenadas); |
|
|
|
|
|
if (address[0] != undefined) { |
|
|
|
|
|
context.saveNewLocation(address[0].street + ", " + address[0].name + "\n" + address[0].district, coordenadas); |
|
|
|
|
|
} |
|
|
|
|
|
else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
|
|
|
|
|
|
context.saveNewLocation("Erro ao carregar endereço", coordenadas); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const context = useContext(EventLocationContext); |
|
|
|
|
|
|
|
|
const setLocation = () => { |
|
|
|
|
|
getAddress(marker); |
|
|
|
|
|
props.navigation.goBack(null); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// console.log(markers);
|
|
|
// console.log(markers);
|
|
|
const map_scale = 0.003; |
|
|
const map_scale = 0.003; |
|
@ -34,9 +45,6 @@ const MapFormScreen = (props) => { |
|
|
longitudeDelta: map_scale * (screen_width / screen_height), |
|
|
longitudeDelta: map_scale * (screen_width / screen_height), |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
//const local = useLocation();
|
|
|
|
|
|
//Deixei a localizção setada em sp só para fazer os testes
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View style={styles.container}> |
|
|
<View style={styles.container}> |
|
|
<MapView |
|
|
<MapView |
|
@ -48,26 +56,32 @@ const MapFormScreen = (props) => { |
|
|
...lat_long_delta, |
|
|
...lat_long_delta, |
|
|
}} |
|
|
}} |
|
|
region={{ |
|
|
region={{ |
|
|
latitude: -23.533773, |
|
|
|
|
|
longitude: -46.625290, |
|
|
|
|
|
|
|
|
latitude: marker.latitude, |
|
|
|
|
|
longitude: marker.longitude, |
|
|
...lat_long_delta, |
|
|
...lat_long_delta, |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
<Marker |
|
|
<Marker |
|
|
draggable={true} |
|
|
draggable={true} |
|
|
coordinate={{ |
|
|
coordinate={{ |
|
|
latitude: -23.533773, |
|
|
|
|
|
longitude: -46.625290, |
|
|
|
|
|
|
|
|
latitude: context.eventCoordinates.latitude, |
|
|
|
|
|
longitude: context.eventCoordinates.longitude, |
|
|
}} |
|
|
}} |
|
|
onDragEnd={(e) => |
|
|
onDragEnd={(e) => |
|
|
getAddress({ x: e.nativeEvent.coordinate }) |
|
|
|
|
|
|
|
|
setMarker({ x: e.nativeEvent.coordinate }.x) |
|
|
} |
|
|
} |
|
|
></Marker> |
|
|
></Marker> |
|
|
</MapView> |
|
|
</MapView> |
|
|
|
|
|
|
|
|
<Button title="Confirmar" onPress={() => props.navigation.goBack(null)} /> |
|
|
|
|
|
<Text>{context.eventLocation.toString()}</Text> |
|
|
|
|
|
|
|
|
<View style={{ flexDirection: "column", flex: 1, justifyContent: "flex-end", padding: 10 }}> |
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
|
onPress={() => setLocation()}> |
|
|
|
|
|
<View style={styles.button}> |
|
|
|
|
|
<Text style={styles.text}>Confirmar</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
|
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -83,6 +97,22 @@ const styles = StyleSheet.create({ |
|
|
right: 0, |
|
|
right: 0, |
|
|
bottom: 0, |
|
|
bottom: 0, |
|
|
}, |
|
|
}, |
|
|
|
|
|
button: { |
|
|
|
|
|
backgroundColor: "#1976D2", |
|
|
|
|
|
borderRadius: 20, |
|
|
|
|
|
justifyContent: "center", |
|
|
|
|
|
alignItems: "center", |
|
|
|
|
|
width: "100%", |
|
|
|
|
|
height: 42, |
|
|
|
|
|
marginVertical: 10, |
|
|
|
|
|
textAlign: "center", |
|
|
|
|
|
}, |
|
|
|
|
|
text: { |
|
|
|
|
|
color: colors.white, |
|
|
|
|
|
fontSize: 16, |
|
|
|
|
|
textTransform: "uppercase", |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
export default MapFormScreen; |
|
|
export default MapFormScreen; |