From 41fc14c1486d495e6e1172ec30635da98726f316 Mon Sep 17 00:00:00 2001 From: GabrielTrettel Date: Mon, 21 Jun 2021 18:09:42 -0300 Subject: [PATCH] Failed attempt to fix app defalut location error --- src/App.js | 6 +++-- src/app/components/map/OpenStreetMap.js | 30 +++++-------------------- src/app/config/globals.js | 2 +- src/app/hooks/useLocation.js | 27 ++++++++++++++++++---- src/app/screens/MapFeedScreen.js | 3 ++- src/app/screens/MapFormScreen.js | 6 ++--- 6 files changed, 38 insertions(+), 36 deletions(-) diff --git a/src/App.js b/src/App.js index 82ac777..9ade42e 100644 --- a/src/App.js +++ b/src/App.js @@ -15,13 +15,15 @@ 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 {getLocation} from "./app/hooks/useLocation"; export default function App() { const [user, setUser] = useState(); const [isReady, setIsReady] = useState(); - + const restoreUser = async () => { const user = await authStorage.getUser(); + global.location = await getLocation(); if (user) setUser(user); }; @@ -52,4 +54,4 @@ export default function App() { ); -} \ No newline at end of file +} diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index dd181de..8575e58 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -8,6 +8,7 @@ import { goToRegion, } from "./LeafLetMap"; import MapModal from "../MapModal"; +import { useLocation, getLocation } from "../../hooks/useLocation"; function bindEventsToListeners( event, @@ -36,7 +37,6 @@ function notEmpy(lista) { export default function OpenStreetMap({ markersList, - animateToPosition, clickListener, moveEndListener, }) { @@ -44,12 +44,10 @@ export default function OpenStreetMap({ const [webviewContent, setWebviewContent] = useState(null); const [markerListener, setMarkerListener] = useState(null); - useEffect(() => { - if (mapRef != null) { - goToRegion(mapRef, animateToPosition); - } - }, [mapRef, animateToPosition]); + const viewFunction = `\ + setCustomView(${global.location.lat}, ${global.location.long}, 16.5);`; + console.log(global.location) markersList && mapRef && notEmpy(markersList) && @@ -77,6 +75,7 @@ export default function OpenStreetMap({ }} javaScriptEnabled={true} source={{ html: webviewContent }} + injectedJavaScript={viewFunction} /> - - - {markerListener} - ); } -const styles = StyleSheet.create({ - callback: { - position: "absolute", - top: 30, - alignSelf: "center", - alignItems: "center", - backgroundColor: "gray", - width: "80%", - padding: 10, - }, - txt: { - color: "white", - }, -}); + diff --git a/src/app/config/globals.js b/src/app/config/globals.js index 16c4f55..fdaca6a 100644 --- a/src/app/config/globals.js +++ b/src/app/config/globals.js @@ -1,6 +1,6 @@ // FIXME: convert this to Context kkkkkkk global.userDataBase = undefined; - +global.location = undefined; //Endereço do evento //global.eventAddress = " "; //global.eventCoordinates = undefined; diff --git a/src/app/hooks/useLocation.js b/src/app/hooks/useLocation.js index 8b7633d..0b5ab15 100644 --- a/src/app/hooks/useLocation.js +++ b/src/app/hooks/useLocation.js @@ -1,9 +1,7 @@ import { useEffect, useState } from "react"; import * as Location from "expo-location"; -export default function useLocation( - defaultLocation = { longitude: 0.0, latitude: 0.0 } -) { +function useLocation(defaultLocation = { longitude: 0.0, latitude: 0.0 }) { const [location, setLocation] = useState(defaultLocation); const getLocation = async () => { @@ -18,7 +16,7 @@ export default function useLocation( accuracy: Location.Accuracy.BestForNavigation, }); - setLocation({ lat: latitude, long: longitude, zoom: 16.5 }); + setLocation({ lat: latitude, long: longitude, zoom: 16.5 }); } catch (error) { console.log(error); } @@ -30,3 +28,24 @@ export default function useLocation( return location; } + +const getLocation = async () => { + try { + const { granted } = await Location.requestPermissionsAsync(); + + if (!granted) return; + + const { + coords: { latitude, longitude }, + } = await Location.getCurrentPositionAsync({ + accuracy: Location.Accuracy.BestForNavigation, + }); + + return { lat: latitude, long: longitude, zoom: 16.5 }; + } catch (error) { + console.log(error); + } + return null; +}; + +export { useLocation, getLocation }; diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index cd31632..8980747 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -26,7 +26,8 @@ export default function MapFeedScreen() { diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index 029db84..e65ffac 100644 --- a/src/app/screens/MapFormScreen.js +++ b/src/app/screens/MapFormScreen.js @@ -7,12 +7,10 @@ import colors from "../config/colors"; import { EventLocationContext } from "../context/EventLocationContext"; import { TouchableOpacity } from "react-native-gesture-handler"; import OpenStreetMap from "../components/map/OpenStreetMap"; -import useLocation from "../hooks/useLocation"; // 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 position = useLocation({ lat: 0.0, long: 0.0, zoom: 16.5 }); const [moveEndListener, setMoveEndListener] = useState(null); const getAddress = async (coordenadas) => { @@ -45,14 +43,14 @@ const MapFormScreen = (props) => { // lat: l["latitude"], // long: l["longitude"], // zoom: 16.5, - // }); + // }) }; return ( moveLocation(e)} - animateToPosition={position} + centerUserLocation={true} />