Browse Source

creating event location context

master
analuizaff 4 years ago
parent
commit
b0cfbe3520
  1. 11
      src/App.js
  2. 18
      src/app/components/EventLocationInput.js
  3. 5
      src/app/components/forms/FormLocationPicker.js
  4. 4
      src/app/config/globals.js
  5. 22
      src/app/context/EventLocationContext.js
  6. 22
      src/app/hooks/getAddress.js
  7. 14
      src/app/screens/MapFeedScreen.js
  8. 50
      src/app/screens/MapFormScreen.js
  9. 4
      src/app/screens/PluviometerSharingDataScreen.js

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

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

5
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>

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

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

22
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;
}

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

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

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

Loading…
Cancel
Save