Browse Source

Failed attempt to fix app defalut location error

master
GabrielTrettel 3 years ago
parent
commit
41fc14c148
  1. 2
      src/App.js
  2. 30
      src/app/components/map/OpenStreetMap.js
  3. 2
      src/app/config/globals.js
  4. 25
      src/app/hooks/useLocation.js
  5. 3
      src/app/screens/MapFeedScreen.js
  6. 6
      src/app/screens/MapFormScreen.js

2
src/App.js

@ -15,6 +15,7 @@ import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage";
import MapDataProvider from "./app/context/MapDataContext";
import {getLocation} from "./app/hooks/useLocation";
export default function App() {
const [user, setUser] = useState();
@ -22,6 +23,7 @@ export default function App() {
const restoreUser = async () => {
const user = await authStorage.getUser();
global.location = await getLocation();
if (user) setUser(user);
};

30
src/app/components/map/OpenStreetMap.js

@ -8,6 +8,7 @@ import {
goToRegion,
} from "./LeafLetMap";
import MapModal from "../MapModal";
import { useLocation, getLocation } from "../../hooks/useLocation";
function bindEventsToListeners(
event,
@ -36,7 +37,6 @@ function notEmpy(lista) {
export default function OpenStreetMap({
markersList,
animateToPosition,
clickListener,
moveEndListener,
}) {
@ -44,12 +44,10 @@ export default function OpenStreetMap({
const [webviewContent, setWebviewContent] = useState(null);
const [markerListener, setMarkerListener] = useState(null);
useEffect(() => {
if (mapRef != null) {
goToRegion(mapRef, animateToPosition);
}
}, [mapRef, animateToPosition]);
const viewFunction = `\
setCustomView(${global.location.lat}, ${global.location.long}, 16.5);`;
console.log(global.location)
markersList &&
mapRef &&
notEmpy(markersList) &&
@ -77,6 +75,7 @@ export default function OpenStreetMap({
}}
javaScriptEnabled={true}
source={{ html: webviewContent }}
injectedJavaScript={viewFunction}
/>
<View>
<MapModal
@ -85,25 +84,8 @@ export default function OpenStreetMap({
markers={markersList}
/>
</View>
<View style={styles.callback}>
<Text style={styles.txt}>{markerListener}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
callback: {
position: "absolute",
top: 30,
alignSelf: "center",
alignItems: "center",
backgroundColor: "gray",
width: "80%",
padding: 10,
},
txt: {
color: "white",
},
});

2
src/app/config/globals.js

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

25
src/app/hooks/useLocation.js

@ -1,9 +1,7 @@
import { useEffect, useState } from "react";
import * as Location from "expo-location";
export default function useLocation(
defaultLocation = { longitude: 0.0, latitude: 0.0 }
) {
function useLocation(defaultLocation = { longitude: 0.0, latitude: 0.0 }) {
const [location, setLocation] = useState(defaultLocation);
const getLocation = async () => {
@ -30,3 +28,24 @@ export default function useLocation(
return location;
}
const getLocation = async () => {
try {
const { granted } = await Location.requestPermissionsAsync();
if (!granted) return;
const {
coords: { latitude, longitude },
} = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.BestForNavigation,
});
return { lat: latitude, long: longitude, zoom: 16.5 };
} catch (error) {
console.log(error);
}
return null;
};
export { useLocation, getLocation };

3
src/app/screens/MapFeedScreen.js

@ -26,7 +26,8 @@ export default function MapFeedScreen() {
<View style={styles.container}>
<OpenStreetMap
markersList={MapMarkerList({reload:focusChanged, renderRain:true})}
animateToPosition={position}
// animateToPosition={position}
centerUserLocation={true}
/>
</View>

6
src/app/screens/MapFormScreen.js

@ -7,12 +7,10 @@ import colors from "../config/colors";
import { EventLocationContext } from "../context/EventLocationContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import OpenStreetMap from "../components/map/OpenStreetMap";
import useLocation from "../hooks/useLocation";
// NOTE: 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 context = useContext(EventLocationContext); //local do evento
const position = useLocation({ lat: 0.0, long: 0.0, zoom: 16.5 });
const [moveEndListener, setMoveEndListener] = useState(null);
const getAddress = async (coordenadas) => {
@ -45,14 +43,14 @@ const MapFormScreen = (props) => {
// lat: l["latitude"],
// long: l["longitude"],
// zoom: 16.5,
// });
// })
};
return (
<View style={styles.container}>
<OpenStreetMap
moveEndListener={(e) => moveLocation(e)}
animateToPosition={position}
centerUserLocation={true}
/>
<View style={styles.markerFixed}>
<Image

Loading…
Cancel
Save