diff --git a/src/App.js b/src/App.js index db01386..a5471be 100644 --- a/src/App.js +++ b/src/App.js @@ -15,6 +15,7 @@ import AuthNavigator from "./app/navigation/AuthNavigator"; import { AuthContext } from "./app/auth/context"; import authStorage from "./app/auth/storage"; import MapDataProvider from "./app/context/MapDataContext"; +import MapRefProvider from "./app/context/MapRefContext"; export default function App() { const [user, setUser] = useState(); @@ -33,7 +34,7 @@ export default function App() { global.userDataBase = openDatabase(); initDatabase(global.userDataBase); - return ( + return ( - - - {user ? : } - - - + + + + {user ? : } + + + + diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index 56e239e..4fcab72 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -22,7 +22,9 @@ const loadHTMLFile = async () => { }; function goToRegion(mapRef, { lat, long, zoom }) { - mapRef.injectJavaScript(`map.setView([${lat}, ${long}], ${zoom});`); + + mapRef.injectJavaScript(` + map.setView([${lat}, ${long}], ${zoom}); moveend=false`); } const code_to_function = { diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html index fa2cbd1..3d25d53 100644 --- a/src/app/components/map/Map.html +++ b/src/app/components/map/Map.html @@ -61,6 +61,8 @@ } ).addTo(map); + var moveend = true; + function onMapClick(e) { var payload = { code: 1, @@ -91,6 +93,7 @@ longitude: map.getCenter().lng, }, }; + // map.setView([e.latlng.lat, e.latlng.lng]); window.ReactNativeWebView.postMessage(JSON.stringify(payload)); } diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 2937eea..13d59ee 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -1,6 +1,7 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useContext } from "react"; import { View, StyleSheet, Text } from "react-native"; import WebView from "react-native-webview"; +import { MapRefContext } from "../../context/MapRefContext"; import { loadHTMLFile, handleEvent, @@ -43,6 +44,7 @@ export default function OpenStreetMap({ const [mapRef, setMapRef] = useState(null); const [webviewContent, setWebviewContent] = useState(null); const [markerListener, setMarkerListener] = useState(null); + const refContext = useContext(MapRefContext); if (mapRef != null) { animateToPosition != null && goToRegion(mapRef, animateToPosition); @@ -62,7 +64,7 @@ export default function OpenStreetMap({ { - setMapRef(webViewRef); + refContext.setMapRef(webViewRef); }} onMessage={(event) => { bindEventsToListeners( diff --git a/src/app/context/MapRefContext.js b/src/app/context/MapRefContext.js new file mode 100644 index 0000000..34fa73f --- /dev/null +++ b/src/app/context/MapRefContext.js @@ -0,0 +1,19 @@ +import React, { useState, createContext, useContext, useEffect } from "react" + +export const MapRefContext = createContext(); + +const MapRefProvider = ({ children }) => { + + //problema: as vzs renderiza antes de carregar a localização correta do usuário + const [mapRef, setMapRef] = useState(); + + return ( + + {children} + + ) +} +export default MapRefProvider; \ No newline at end of file diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index c66c645..5c49753 100644 --- a/src/app/screens/MapFormScreen.js +++ b/src/app/screens/MapFormScreen.js @@ -1,4 +1,4 @@ -import React, { useContext, useState, useEffect } from "react"; +import React, { useContext, useState, useEffect, memo } from "react"; import { StyleSheet, View, Text, Image } from "react-native"; import colors from "../config/colors"; @@ -9,14 +9,15 @@ import { EventLocationContext } from "../context/EventLocationContext"; import { TouchableOpacity } from "react-native-gesture-handler"; import { CurrentLocationContext } from "../context/CurrentLocationContext"; import OpenStreetMap from "../components/map/OpenStreetMap"; +import { MapRefContext } from "../context/MapRefContext"; // NOTE: 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 context = useContext(EventLocationContext); //local do evento + const context = useContext(EventLocationContext); //local do evento const [position, setPosition] = useState(null); - const location = useContext(CurrentLocationContext).currentCoordinates; - + const location = useContext(EventLocationContext).eventCoordinates; + useEffect(() => { setPosition({ lat: location["latitude"], @@ -25,8 +26,8 @@ const MapFormScreen = (props) => { }); }, [location]); - const [moveEndListener, setMoveEndListener] = useState(""); - console.log(moveEndListener); + const [moveEndListener, setMoveEndListener] = useState(null); + //console.log("=====POSIÇÃO: " +position.lat); const getAddress = async (coordenadas) => { Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); @@ -42,19 +43,42 @@ const MapFormScreen = (props) => { context.saveNewLocation("Erro ao carregar endereço", coordenadas); } }; + const refContext = useContext(MapRefContext); const setLocation = () => { getAddress(moveEndListener); props.navigation.goBack(null); }; + + //leva o mapa pra localização escolhida pelo usuário + const aplyLocation = (p) => { + //setPosition(position); + setMoveEndListener(p); + if (refContext.mapRef) { + refContext.mapRef.injectJavaScript(` + if(moveend == true){ + map.setView([${p.latitude}, ${p.longitude}], ${16.5}); moveend=false + }`); + } + }; + + //inicia o mapa na região do usuário ou no ultimo valor do marker + if (refContext.mapRef && moveEndListener==null ) { + console.log("IIIIIIIIIIIIIIIIIIIIF "+ location.latitude) + refContext.mapRef.injectJavaScript(` + map.setView([${position.lat}, ${position.long}], ${16.5}); moveend=false + `); + } + + return ( aplyLocation(e)} + /> { resizeMode="contain" source={require("../assets/map-marker.png")} /> - + setLocation()}> @@ -90,7 +114,7 @@ const styles = StyleSheet.create({ }, mapStyle: { position: "absolute", - alignSelf:"center", + alignSelf: "center", top: 0, left: 0, right: 0, @@ -113,8 +137,8 @@ const styles = StyleSheet.create({ alignSelf: "center", justifyContent: "center", position: "absolute", - flexDirection:"row", - alignItems:"flex-start", + flexDirection: "row", + alignItems: "flex-start", // bottom: "50%", // top: "50%", height: "13%", @@ -129,7 +153,7 @@ const styles = StyleSheet.create({ }, marker: { height: "50%", - // alignSelf:"flex-end", + // alignSelf:"flex-end", width: 40, }, callback: {