creating event location context

src/App.js

@@ -9,6 +9,7 @@ import initDatabase from "./app/database/database-init";
 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";
 
 export default function App() {
   global.userDataBase = openDatabase();
@@ -16,9 +17,11 @@ export default function App() {
   const Stack = createStackNavigator();
 
   return (
-    <NavigationContainer theme={navigationTheme}>
-        <AppNavigator/>
-      <FlashMessage position="top"/>  
-    </NavigationContainer>
+    <EventLocationProvider>
+      <NavigationContainer theme={navigationTheme}>
+        <AppNavigator />
+        <FlashMessage position="top" />
+      </NavigationContainer>
+    </EventLocationProvider>
   );
 }

src/app/components/EventLocationInput.js

@@ -0,0 +1,18 @@
+import React, { useContext } from "react";
+import { EventLocationContext } from "../context/EventLocationContext";
+
+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>
+    );
+
+}
+
+export default EventLocationInput;

src/app/components/forms/FormLocationPicker.js

@@ -3,9 +3,10 @@ import { StyleSheet, Text, View } from "react-native";
 
 import { MaterialIcons } from "@expo/vector-icons";
 import colors from "../../config/colors";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import EventLocationInput from "../EventLocationInput";
 
 function FormLocationPicker() {
+
     return (
         <View>
             <View style={styles.location}>
@@ -20,7 +21,7 @@ function FormLocationPicker() {
                 </View>
                 <View style={styles.adressText}>
                     <Text>
-                        {""} Endereço {"\n "}...
+                            <EventLocationInput/>
                     </Text>
                 </View>
             </View>

src/app/config/globals.js

@@ -1,2 +1,6 @@
 // FIXME: convert this to Context kkkkkkk
 global.userDataBase = undefined;
+
+//Endereço do evento
+global.eventAddress =  " ";
+global.eventCoordinates = undefined;

src/app/context/EventLocationContext.js

@@ -0,0 +1,22 @@
+import React, { useState, createContext } from "react"
+
+export const EventLocationContext = createContext();
+
+const EventLocationProvider = ({ children }) => {
+    const [eventLocation, setEventLocation] = useState("endereço");
+
+    const saveNewLocation = (local) => {
+        setEventLocation(local);
+        console.log("NOVO LOCAL: " + local);
+    }
+
+    return (
+        <EventLocationContext.Provider value={{
+            eventLocation,
+            saveNewLocation
+        }}>
+            {children}
+        </EventLocationContext.Provider>
+    )
+}
+export default EventLocationProvider;

src/app/hooks/getAddress.js

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from "react";
+import * as Location from 'expo-location';
+
+export default function getAddress(coordenadas) {
+    const [location, setLocation] = useState(coordenadas.x);
+
+    const convert = async () => {
+
+        Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
+
+        global.eventAddress = await Location.reverseGeocodeAsync(location);
+        console.log(global.eventAddress);
+
+        global.eventCoordinates = coordenadas.x;
+    };
+
+    useEffect(() => {
+        convert();
+    }, []);
+
+    return location;
+}

src/app/screens/MapFeedScreen.js

@@ -9,6 +9,18 @@ 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;
+}
 
 function MapFeedScreen(props) {
   const location = useLocation({
@@ -16,6 +28,8 @@ function MapFeedScreen(props) {
     longitude: -51.3948396,
   });
 
+  getAddress(location);
+
   const hasToQuery = attachFocusToQuery();
   const markers = useMarkers(hasToQuery);
 

src/app/screens/MapFormScreen.js

@@ -1,24 +1,37 @@
-import React, { useEffect, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import React, { useContext } from "react";
+import { Button, StyleSheet, View, Text } from "react-native";
 import MapView, { Marker } 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';
+import { EventLocationContext } from "../context/EventLocationContext";
 // import SearchBox from "../components/maps/SearchBox";
 
-function MapFormScreen(props) {
+//Implementação posterior: É interessante adcionar um searchBox para que o usuário busque um endereço (google places autocomplete é uma api paga)
+var address;
+
+
+const MapFormScreen = (props) => {
     const location = useLocation({
-        latitude: -22.1070263,
-        longitude: -51.3948396,
+        latitude: -23.533773,
+        longitude:  -46.625290,
     });
+    const getAddress = async(coordenadas) => {
+        Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
     
-    const hasToQuery = attachFocusToQuery();
-    const markers = useMarkers(hasToQuery);
+        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 context = useContext(EventLocationContext);
+    //console.log(context.eventLocation);
 
     // console.log(markers);
     const map_scale = 0.003;
@@ -35,27 +48,30 @@ function MapFormScreen(props) {
                 style={styles.mapStyle}
                 showsUserLocation={true}
                 initialRegion={{
-                    latitude: local.latitude,
-                    longitude: local.longitude,
+                    latitude: -23.533773,
+                    longitude: -46.625290,
                     ...lat_long_delta,
                 }}
                 region={{
-                    latitude: local.latitude,
-                    longitude: local.longitude,
+                    latitude: -23.533773,
+                    longitude:  -46.625290,
                     ...lat_long_delta,
                 }}
             >
                 <Marker
                     draggable={true}
                     coordinate={{
-                        latitude: local.latitude,
-                        longitude: local.longitude,
+                        latitude: -23.533773,
+                        longitude:  -46.625290,
                     }}
                     onDragEnd={(e) =>
-                        console.log({ x: e.nativeEvent.coordinate })
+                        getAddress({ x: e.nativeEvent.coordinate })
                     }
                 ></Marker>
             </MapView>
+
+            <Button title="Confirmar" onPress={() => props.navigation.goBack(null)} />
+            <Text>{context.eventLocation.toString()}</Text>
         </View>
     );
 }

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StyleSheet, Text, View, Image, ScrollView } from "react-native";
+import { StyleSheet, Text, View, ScrollView } from "react-native";
 import * as Yup from "yup";
 import {
   Form,
@@ -33,6 +33,8 @@ const validationSchema = Yup.object().shape({
 
 function PluviometerSharingDataScreen(props) {
   const location = useLocation();
+  global.eventCoordinates = useLocation();
+
 
   const [dateTime, setDateTime] = useState(moment());
   const [time, setTime] = useState(moment());