feat: add update location

geeekgod · Apr 1, 2023 · e3c9605 · e3c9605
1 parent 718bd97
commit e3c9605
Showing 1 changed file with 57 additions and 29 deletions.
diff --git a/app/screens/MapRequestsView/index.jsx b/app/screens/MapRequestsView/index.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useState, useRef } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { heightScreen, widthScreen } from "../../utils/layout";
 import {
@@ -17,6 +17,7 @@ import { DataContext } from "../../context/DataContext";
 import * as Linking from "expo-linking";
 import { AuthContext } from "../../context/AuthContext";
 import MapView, { Marker } from "react-native-maps";
+import { MaterialIcons } from "@expo/vector-icons";
 
 const MapRequestsView = () => {
   const {
@@ -40,6 +41,8 @@ const MapRequestsView = () => {
     longitudeDelta: 0.00421,
   })
 
+  const mapRef = useRef(null);
+
   const loadRequest = async () => {
     return new Promise(async () => {
       await getLocation()
@@ -59,42 +62,67 @@ const MapRequestsView = () => {
     setLocationState({ ...locationState, latitude: e.nativeEvent.coordinate.latitude, longitude: e.nativeEvent.coordinate.longitude })
   }
 
-  useEffect(() => {
-    setLocation({ coords: { latitude: locationState.latitude, longitude: locationState.longitude } })
+  const fetchNearByRequests = () => {
     setTimeout(async () => {
       await getNearByRequests(accessToken);
     }, 1000)
+  }
+
+  useEffect(() => {
+    if (location && location.coords && location.coords.latitude != locationState.latitude && location.coords.longitude != locationState.longitude) {
+      setLocation({ coords: { latitude: locationState.latitude, longitude: locationState.longitude } })
+      fetchNearByRequests();
+    }
   }, [locationState]);
 
+  useEffect(() => {
+    if (location && location.coords && location.coords.latitude != locationState.latitude && location.coords.longitude != locationState.longitude) {
+      setLocationState({ ...locationState, latitude: location.coords.latitude, longitude: location.coords.longitude });
+      fetchNearByRequests();
+    }
+  }, [location]);
+
   return (
     <View style={styles.container}>
-      <MapView
-        initialRegion={locationState}
-        style={styles.map}
-        onRegionChangeComplete={(e) => setLocationState({...locationState, latitude: e.latitude, longitude: e.longitude})}
+        <MapView.Animated
+          region={locationState}
+          style={styles.map}
+          ref={mapRef}
         >
-
-        {locationState.latitude && locationState.longitude && (
-          <Marker coordinate={locationState}
-            title={"Your Location"} image={require('../../assets/user_marker.png')}
-            draggable
-            onDragEnd={(e) => updateCurrentLocation(e)}
-          />)}
-        {nearByRequests && nearByRequests.map((request, index) => {
-          return (
-            <Marker
-              key={index}
-              coordinate={{
-                latitude: request.location[1],
-                longitude: request.location[0],
-              }}
-              title={`Requests from ${request.name} for ${request.bloodGroup}`}
-              image={require('../../assets/requests_marker.png')}
-            // description={request.description}
-            />
-          );
-        })}
-      </MapView>
+          {locationState.latitude && locationState.longitude && (
+            <Marker coordinate={locationState}
+              title={"Your Location"} image={require('../../assets/user_marker.png')}
+              draggable
+              onDragEnd={(e) => updateCurrentLocation(e)}
+            />)}
+          {nearByRequests && nearByRequests.map((request, index) => {
+            return (
+              <Marker
+                key={index}
+                coordinate={{
+                  latitude: request.location[1],
+                  longitude: request.location[0],
+                }}
+                title={`Requests from ${request.name} for ${request.bloodGroup}`}
+                image={require('../../assets/requests_marker.png')}
+              // description={request.description}
+              />
+            );
+          })}
+        </MapView.Animated>
+        <IconButton size={"lg"} variant="solid"
+          position="absolute"
+          bottom={65}
+          right={5}
+          rounded="full"
+          _icon={{
+            as: MaterialIcons,
+            name: "location-searching"
+          }}
+          zIndex={10}
+          onPress={getLocation}
+        // onPress={() => console.log("Pressed")}
+        />
     </View>
   );
 };