Fix jwt-token

client/src/pages/MapView.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import { MapContainer, TileLayer, Marker, Popup, Circle, useMap } from 'react-leaflet';
 import { Icon } from 'leaflet';
 import L from 'leaflet'; // For divIcon and other Leaflet utilities
@@ -109,6 +110,7 @@ const createDroneIcon = (rssi, droneType) => {
 const MapView = () => {
   console.log('MapView: Component render started');
   
+  const location = useLocation();
   const [devices, setDevices] = useState([]);
   const [selectedDevice, setSelectedDevice] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -172,6 +174,28 @@ const MapView = () => {
     return () => clearInterval(cleanup);
   }, []);
 
+  // Handle device focusing when navigated from Devices page
+  useEffect(() => {
+    const focusDevice = location.state?.focusDevice;
+    if (focusDevice && focusDevice.lat && focusDevice.lon) {
+      console.log('MapView: Focusing on device:', focusDevice);
+      
+      // Set map center and zoom to the device location
+      setMapCenter([focusDevice.lat, focusDevice.lon]);
+      setMapZoom(16); // Close zoom for individual device
+      setShouldFitBounds(false); // Don't fit all devices, focus on this one
+      
+      // Find and select the device if it exists in the devices list
+      // This will happen after devices are loaded
+      if (devices.length > 0) {
+        const device = devices.find(d => d.id === focusDevice.id);
+        if (device) {
+          setSelectedDevice(device);
+        }
+      }
+    }
+  }, [location.state, devices]);
+
   const fetchDevices = async () => {
     try {
       // Debug: Check if token exists before making request