creating a context to get user location

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 (
+    <CurrentLocationProvider>
       <EventLocationProvider>
         <NavigationContainer theme={navigationTheme}>
           <AppNavigator />
           <FlashMessage position="top" />
         </NavigationContainer>
       </EventLocationProvider>
+    </CurrentLocationProvider>
   );
 }

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(
         <Text> {context.eventLocation} </Text>

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;

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 (
+        <CurrentLocationContext.Provider value={{
+            currentLocation,
+            currentCoordinates,
+            getCurrentLocation,
+        }}>
+            {children}
+        </CurrentLocationContext.Provider>
+    )
+}
+export default CurrentLocationProvider;

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 (
         <EventLocationContext.Provider value={{
             eventLocation,
-            saveNewLocation
+            eventCoordinates,
+            saveNewLocation,
+            defaultLocation,
         }}>
             {children}
         </EventLocationContext.Provider>

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,7 +15,7 @@ export default function useLocation(
       const {
         coords: { latitude, longitude },
       } = await Location.getCurrentPositionAsync({
-        accuracy: Location.Accuracy.Highest,
+        accuracy: Location.Accuracy.BestForNavigation,
       });
 
       setLocation({ latitude, longitude }); 

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);

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 (
         <View style={styles.container}>

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());

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 (
     <View style={styles.container}>
       <ScrollView>

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());