Kaynağa Gözat

fix: user location marker color not updating after login

Replace userPosRef + userRef with userPos state so the marker
effect reruns when either userPos or user changes.
Previously: effect watched [user] but read userPosRef on run;
if geolocation fired after login, effect never re-ran.
Now: [userPos, user] guarantees marker is always up to date.
neyrogovnarik 1 ay önce
ebeveyn
işleme
39ee18843d
1 değiştirilmiş dosya ile 6 ekleme ve 15 silme
  1. 6 15
      frontend/src/components/MapView.tsx

+ 6 - 15
frontend/src/components/MapView.tsx

@@ -20,9 +20,7 @@ export default function MapView() {
   const [places, setPlaces] = useState<Place[]>([])
   const [selectedPlace, setSelectedPlace] = useState<Place | null>(null)
   const [mapError, setMapError] = useState(false)
-  const userRef = useRef(user)
-  userRef.current = user
-  const userPosRef = useRef<{ lat: number; lng: number } | null>(null)
+  const [userPos, setUserPos] = useState<{ lat: number; lng: number } | null>(null)
 
   const fetchPlaces = useCallback(async (bounds?: MapBounds) => {
     try {
@@ -55,14 +53,8 @@ export default function MapView() {
       if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(
           (pos) => {
-            const lat = pos.coords.latitude
-            const lng = pos.coords.longitude
-            userPosRef.current = { lat, lng }
-            provider.setCenter(lat, lng)
-            provider.addMarker('_user_location', lat, lng, {
-              type: 'location',
-              color: userRef.current ? '#FF4B4B' : '#FFF82A',
-            })
+            setUserPos({ lat: pos.coords.latitude, lng: pos.coords.longitude })
+            provider.setCenter(pos.coords.latitude, pos.coords.longitude)
           },
           () => {},
         )
@@ -85,16 +77,15 @@ export default function MapView() {
   }, [])
 
   useEffect(() => {
-    const pos = userPosRef.current
     const provider = mapRef.current
-    if (!pos || !provider || !provider.isReady()) return
+    if (!userPos || !provider || !provider.isReady()) return
 
     provider.removeMarker('_user_location')
-    provider.addMarker('_user_location', pos.lat, pos.lng, {
+    provider.addMarker('_user_location', userPos.lat, userPos.lng, {
       type: 'location',
       color: user ? '#FF4B4B' : '#FFF82A',
     })
-  }, [user])
+  }, [userPos, user])
 
   useEffect(() => {
     const provider = mapRef.current