From b0cfbe35208546a71e7535694acdfec014bdf603 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Sun, 28 Feb 2021 14:35:14 -0300 Subject: [PATCH] creating event location context --- src/App.js | 13 +++-- src/app/components/EventLocationInput.js | 18 +++++++ .../components/forms/FormLocationPicker.js | 5 +- src/app/config/globals.js | 4 ++ src/app/context/EventLocationContext.js | 22 ++++++++ src/app/hooks/getAddress.js | 22 ++++++++ src/app/screens/MapFeedScreen.js | 14 +++++ src/app/screens/MapFormScreen.js | 52 ++++++++++++------- .../screens/PluviometerSharingDataScreen.js | 4 +- 9 files changed, 128 insertions(+), 26 deletions(-) create mode 100644 src/app/components/EventLocationInput.js create mode 100644 src/app/context/EventLocationContext.js create mode 100644 src/app/hooks/getAddress.js diff --git a/src/App.js b/src/App.js index da3adc6..ed4034d 100644 --- a/src/App.js +++ b/src/App.js @@ -9,16 +9,19 @@ 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(); initDatabase(global.userDataBase); const Stack = createStackNavigator(); - + return ( - - - - + + + + + + ); } diff --git a/src/app/components/EventLocationInput.js b/src/app/components/EventLocationInput.js new file mode 100644 index 0000000..2898815 --- /dev/null +++ b/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( + {context.eventLocation} + ); + +} + +export default EventLocationInput; \ No newline at end of file diff --git a/src/app/components/forms/FormLocationPicker.js b/src/app/components/forms/FormLocationPicker.js index a06aa1c..a9d0cbd 100644 --- a/src/app/components/forms/FormLocationPicker.js +++ b/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 ( @@ -20,7 +21,7 @@ function FormLocationPicker() { - {""} Endereço {"\n "}... + diff --git a/src/app/config/globals.js b/src/app/config/globals.js index 7bde90b..7c8886d 100644 --- a/src/app/config/globals.js +++ b/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; diff --git a/src/app/context/EventLocationContext.js b/src/app/context/EventLocationContext.js new file mode 100644 index 0000000..a3604b1 --- /dev/null +++ b/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 ( + + {children} + + ) +} +export default EventLocationProvider; \ No newline at end of file diff --git a/src/app/hooks/getAddress.js b/src/app/hooks/getAddress.js new file mode 100644 index 0000000..a88970a --- /dev/null +++ b/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; +} diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index bac6f8b..080f89b 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/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); diff --git a/src/app/screens/MapFormScreen.js b/src/app/screens/MapFormScreen.js index da2cc58..313f261 100644 --- a/src/app/screens/MapFormScreen.js +++ b/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 hasToQuery = attachFocusToQuery(); - const markers = useMarkers(hasToQuery); + 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 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, }} > - console.log({ x: e.nativeEvent.coordinate }) + getAddress({ x: e.nativeEvent.coordinate }) } > + +