Browse Source

Failed attempt to fix app defalut location error

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

6
src/App.js

@ -15,13 +15,15 @@ import AuthNavigator from "./app/navigation/AuthNavigator";
import { AuthContext } from "./app/auth/context"; import { AuthContext } from "./app/auth/context";
import authStorage from "./app/auth/storage"; import authStorage from "./app/auth/storage";
import MapDataProvider from "./app/context/MapDataContext"; import MapDataProvider from "./app/context/MapDataContext";
import {getLocation} from "./app/hooks/useLocation";
export default function App() { export default function App() {
const [user, setUser] = useState(); const [user, setUser] = useState();
const [isReady, setIsReady] = useState(); const [isReady, setIsReady] = useState();
const restoreUser = async () => { const restoreUser = async () => {
const user = await authStorage.getUser(); const user = await authStorage.getUser();
global.location = await getLocation();
if (user) setUser(user); if (user) setUser(user);
}; };
@ -52,4 +54,4 @@ export default function App() {
</CurrentLocationProvider> </CurrentLocationProvider>
</AuthContext.Provider> </AuthContext.Provider>
); );
}
}

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

@ -8,6 +8,7 @@ import {
goToRegion, goToRegion,
} from "./LeafLetMap"; } from "./LeafLetMap";
import MapModal from "../MapModal"; import MapModal from "../MapModal";
import { useLocation, getLocation } from "../../hooks/useLocation";
function bindEventsToListeners( function bindEventsToListeners(
event, event,
@ -36,7 +37,6 @@ function notEmpy(lista) {
export default function OpenStreetMap({ export default function OpenStreetMap({
markersList, markersList,
animateToPosition,
clickListener, clickListener,
moveEndListener, moveEndListener,
}) { }) {
@ -44,12 +44,10 @@ export default function OpenStreetMap({
const [webviewContent, setWebviewContent] = useState(null); const [webviewContent, setWebviewContent] = useState(null);
const [markerListener, setMarkerListener] = 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 && markersList &&
mapRef && mapRef &&
notEmpy(markersList) && notEmpy(markersList) &&
@ -77,6 +75,7 @@ export default function OpenStreetMap({
}} }}
javaScriptEnabled={true} javaScriptEnabled={true}
source={{ html: webviewContent }} source={{ html: webviewContent }}
injectedJavaScript={viewFunction}
/> />
<View> <View>
<MapModal <MapModal
@ -85,25 +84,8 @@ export default function OpenStreetMap({
markers={markersList} markers={markersList}
/> />
</View> </View>
<View style={styles.callback}>
<Text style={styles.txt}>{markerListener}</Text>
</View>
</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 // FIXME: convert this to Context kkkkkkk
global.userDataBase = undefined; global.userDataBase = undefined;
global.location = undefined;
//Endereço do evento //Endereço do evento
//global.eventAddress = " "; //global.eventAddress = " ";
//global.eventCoordinates = undefined; //global.eventCoordinates = undefined;

27
src/app/hooks/useLocation.js

@ -1,9 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import * as Location from "expo-location"; 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 [location, setLocation] = useState(defaultLocation);
const getLocation = async () => { const getLocation = async () => {
@ -18,7 +16,7 @@ export default function useLocation(
accuracy: Location.Accuracy.BestForNavigation, accuracy: Location.Accuracy.BestForNavigation,
}); });
setLocation({ lat: latitude, long: longitude, zoom: 16.5 });
setLocation({ lat: latitude, long: longitude, zoom: 16.5 });
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -30,3 +28,24 @@ export default function useLocation(
return location; 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}> <View style={styles.container}>
<OpenStreetMap <OpenStreetMap
markersList={MapMarkerList({reload:focusChanged, renderRain:true})} markersList={MapMarkerList({reload:focusChanged, renderRain:true})}
animateToPosition={position}
// animateToPosition={position}
centerUserLocation={true}
/> />
</View> </View>

6
src/app/screens/MapFormScreen.js

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

Loading…
Cancel
Save