From a700a720607648da59daa4ac960445169a00d0ab Mon Sep 17 00:00:00 2001 From: analuizaff Date: Tue, 2 Mar 2021 14:40:17 -0300 Subject: [PATCH] creating a context to get user location --- src/App.js | 15 +++-- src/app/components/EventLocationInput.js | 3 - src/app/config/globals.js | 4 +- src/app/context/CurrentLocationContext.js | 67 +++++++++++++++++++ src/app/context/EventLocationContext.js | 29 ++++++-- src/app/hooks/useLocation.js | 6 +- src/app/screens/MapFeedScreen.js | 25 ++----- src/app/screens/MapFormScreen.js | 25 +++---- .../screens/RiverFloodSharingDataScreen.js | 2 +- src/app/screens/SharingDataScreen.js | 6 +- src/app/screens/SharingFloodZonesScreen.js | 2 +- 11 files changed, 127 insertions(+), 57 deletions(-) create mode 100644 src/app/context/CurrentLocationContext.js diff --git a/src/App.js b/src/App.js index ed4034d..284b512 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ import FlashMessage from "react-native-flash-message"; import { createStackNavigator } from '@react-navigation/stack'; import AppNavigator from "./app/navigation/AppNavigator"; import EventLocationProvider from "./app/context/EventLocationContext"; +import CurrentLocationProvider from "./app/context/CurrentLocationContext"; export default function App() { global.userDataBase = openDatabase(); @@ -17,11 +18,13 @@ export default function App() { const Stack = createStackNavigator(); return ( - - - - - - + + + + + + + + ); } diff --git a/src/app/components/EventLocationInput.js b/src/app/components/EventLocationInput.js index 2898815..e63aad5 100644 --- a/src/app/components/EventLocationInput.js +++ b/src/app/components/EventLocationInput.js @@ -5,9 +5,6 @@ import { Text } from "react-native"; const EventLocationInput = () => { const context = useContext(EventLocationContext); - console.log("CONTEXTO: " + context.eventLocation); - - const data = context.eventLocation; return( {context.eventLocation} diff --git a/src/app/config/globals.js b/src/app/config/globals.js index 7c8886d..16c4f55 100644 --- a/src/app/config/globals.js +++ b/src/app/config/globals.js @@ -2,5 +2,5 @@ global.userDataBase = undefined; //Endereço do evento -global.eventAddress = " "; -global.eventCoordinates = undefined; +//global.eventAddress = " "; +//global.eventCoordinates = undefined; diff --git a/src/app/context/CurrentLocationContext.js b/src/app/context/CurrentLocationContext.js new file mode 100644 index 0000000..bb95420 --- /dev/null +++ b/src/app/context/CurrentLocationContext.js @@ -0,0 +1,67 @@ +import React, { useState, createContext, useEffect } from "react" +import * as Location from "expo-location"; + + +export const CurrentLocationContext = createContext(); + +const CurrentLocationProvider = ({ children }) => { + const [currentLocation, setCurrentLocation] = useState("endereço usuário"); + const [currentCoordinates, setCurrentCoordinates] = useState({ longitude: 0.0, latitude: 0.0 }); + + //get user current location coordinates + const getCoordinates = async () => { + try { + const { granted } = await Location.requestPermissionsAsync(); + + if (!granted) return; + + const { + coords: { latitude, longitude }, + } = await Location.getCurrentPositionAsync({ + accuracy: Location.Accuracy.Highest, + }); + + setCurrentCoordinates({ latitude, longitude }); + //console.log({ latitude, longitude }); + // console.log(currentCoordinates); + + getAddress({ latitude, longitude }); + + } catch (error) { + console.log(error); + } + }; + + //get user current location address + const getAddress = async (coordenadas) => { + // console.log("PEGANDO ENDEREÇO"); + Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); + + const address = await Location.reverseGeocodeAsync(coordenadas); + setCurrentLocation(address[0].street + ", " + address[0].name + "\n" + address[0].district, coordenadas.x); + //console.log(currentLocation); + }; + + + + + useEffect(() => { + getCoordinates(); + //console.log(currentCoordinates.latitude); + }, []); + const getCurrentLocation = (coordenadas) => { + setCurrentCoordinates(coordenadas); + } + + + return ( + + {children} + + ) +} +export default CurrentLocationProvider; \ No newline at end of file diff --git a/src/app/context/EventLocationContext.js b/src/app/context/EventLocationContext.js index a3604b1..adcd984 100644 --- a/src/app/context/EventLocationContext.js +++ b/src/app/context/EventLocationContext.js @@ -1,19 +1,38 @@ -import React, { useState, createContext } from "react" +import React, { useState, createContext, useContext, useEffect } from "react" +import { CurrentLocationContext } from "./CurrentLocationContext"; export const EventLocationContext = createContext(); const EventLocationProvider = ({ children }) => { - const [eventLocation, setEventLocation] = useState("endereço"); - const saveNewLocation = (local) => { + const context = useContext(CurrentLocationContext); + + //problema: as vzs renderiza antes de carregar a localização correta do usuário + const [eventLocation, setEventLocation] = useState(context.currentLocation); + const [eventCoordinates, setEventCoordinates] = useState(context.currentCoordinates); + + console.log(context.currentLocation); + + //Função chamada em MapFormScreen após o usuário definir a nova localização + const saveNewLocation = (local, coordinates) => { setEventLocation(local); - console.log("NOVO LOCAL: " + local); + setEventCoordinates(coordinates); + // console.log("NOVO LOCAL: " + local); + // console.log("NOVa coordenada: " + coordinates.latitude); + } + + + const defaultLocation = () =>{ + setEventCoordinates(context.currentCoordinates); + setEventLocation(context.currentLocation); } return ( {children} diff --git a/src/app/hooks/useLocation.js b/src/app/hooks/useLocation.js index 0e1d288..f536872 100644 --- a/src/app/hooks/useLocation.js +++ b/src/app/hooks/useLocation.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import * as Location from "expo-location"; export default function useLocation( @@ -15,10 +15,10 @@ export default function useLocation( const { coords: { latitude, longitude }, } = await Location.getCurrentPositionAsync({ - accuracy: Location.Accuracy.Highest, + accuracy: Location.Accuracy.BestForNavigation, }); - setLocation({ latitude, longitude }); + setLocation({ latitude, longitude }); } catch (error) { console.log(error); } diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 080f89b..ce8e42d 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/src/app/screens/MapFeedScreen.js @@ -1,34 +1,21 @@ -import React, { useEffect, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { StyleSheet, View } from "react-native"; import MapView from "react-native-maps"; import colors from "../config/colors"; import { screen_width, screen_height } from "../config/dimensions"; -import useLocation from "../hooks/useLocation"; import useMarkers from "../hooks/selectFromDB"; import MapMarker from "../components/MapMarker"; import attachFocusToQuery from "../hooks/useFocus"; -import * as Location from 'expo-location'; - -//1/3: tirar essa função daqui depois - poderia ser um componente -async function getAddress(coordenadas) { - Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); - - global.eventAddress = await Location.reverseGeocodeAsync(coordenadas); - - console.log(global.eventAddress); - - global.eventCoordinates = coordenadas; -} +import { CurrentLocationContext } from "../context/CurrentLocationContext"; function MapFeedScreen(props) { - const location = useLocation({ - latitude: -22.1070263, - longitude: -51.3948396, - }); - getAddress(location); + const context = useContext(CurrentLocationContext); + const location = context.currentCoordinates; + //const context = useContext(CurrentLocationContext) + const hasToQuery = attachFocusToQuery(); const markers = useMarkers(hasToQuery); diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index 313f261..9beb2f5 100644 --- a/src/app/screens/MapFormScreen.js +++ b/src/app/screens/MapFormScreen.js @@ -8,30 +8,24 @@ import { screen_width, screen_height } from "../config/dimensions"; import useLocation from "../hooks/useLocation"; import * as Location from 'expo-location'; import { EventLocationContext } from "../context/EventLocationContext"; -// import SearchBox from "../components/maps/SearchBox"; -//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga) -var address; +//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 location = useLocation({ - latitude: -23.533773, - longitude: -46.625290, - }); + // const location = useLocation({ + // latitude: -23.533773, + // longitude: -46.625290, + //}); const getAddress = async(coordenadas) => { Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc"); - address = await Location.reverseGeocodeAsync(coordenadas.x); - console.log(address); - // address[0].street+", " + address[0].name} - // {address[0].district} - global.eventCoordinates = coordenadas.x; - context.saveNewLocation(address[0].street+", " + address[0].name); + 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 context = useContext(EventLocationContext); - //console.log(context.eventLocation); // console.log(markers); const map_scale = 0.003; @@ -40,7 +34,8 @@ const MapFormScreen = (props) => { longitudeDelta: map_scale * (screen_width / screen_height), }; - const local = useLocation(); + //const local = useLocation(); + //Deixei a localizção setada em sp só para fazer os testes return ( diff --git a/src/app/screens/RiverFloodSharingDataScreen.js b/src/app/screens/RiverFloodSharingDataScreen.js index fcc93fc..e901873 100644 --- a/src/app/screens/RiverFloodSharingDataScreen.js +++ b/src/app/screens/RiverFloodSharingDataScreen.js @@ -32,7 +32,7 @@ const borderWidth = 4; function RiverFloodSharingDataScreen(props) { const [riverScale, setRiverScale] = useState(-1); - const location = useLocation(); + const location = "useLocation()"; const [error, setError] = useState(false); const [date, setDate] = useState(moment()); diff --git a/src/app/screens/SharingDataScreen.js b/src/app/screens/SharingDataScreen.js index 00b398e..81eb99a 100644 --- a/src/app/screens/SharingDataScreen.js +++ b/src/app/screens/SharingDataScreen.js @@ -1,17 +1,19 @@ -import React from "react"; +import React, { useContext, useEffect, useState } from "react"; import { StyleSheet, View } from "react-native"; import { Image, Text, TouchableOpacity, ScrollView } from "react-native"; import assets from "../config/assets"; import { scaleDimsFromWidth, dimensions } from "../config/dimensions"; import { Svg, Image as ImageSvg, SvgXml } from "react-native-svg"; -import Pluviometer from "../assets/pluviometer-logo.svg"; + //1/3 function SharingDataScreen({ navigation }) { const dims = scaleDimsFromWidth(93, 106, 35); // const dims = { width: "100%", height: "100%" }; + + return ( diff --git a/src/app/screens/SharingFloodZonesScreen.js b/src/app/screens/SharingFloodZonesScreen.js index 70a0709..9dec50a 100644 --- a/src/app/screens/SharingFloodZonesScreen.js +++ b/src/app/screens/SharingFloodZonesScreen.js @@ -33,7 +33,7 @@ const validationSchema = Yup.object().shape({ function SharingFloodZonesScreen(props) { const [passable, setPassable] = useState(-1); const [error, setError] = useState(false); - const location = useLocation(); + const location = "useLocation()"; const [date, setDate] = useState(moment()); const [time, setTime] = useState(moment());