Fix jwt-token

client/src/pages/MapView.jsx

@@ -121,19 +121,39 @@ const MapView = () => {
   const [isInitialLoad, setIsInitialLoad] = useState(true); // Track if this is the first load
   const [showDroneDetections, setShowDroneDetections] = useState(true);
   const [droneDetectionHistory, setDroneDetectionHistory] = useState([]);
+  const [droneTypes, setDroneTypes] = useState({});
   const { recentDetections, deviceStatus } = useSocket();
 
-  // Drone types mapping
-  const droneTypes = {
-    1: "DJI Mavic",
-    2: "Racing Drone", 
-    3: "DJI Phantom",
-    4: "Fixed Wing",
-    5: "Surveillance",
-    0: "Unknown"
+  // Fetch drone types from API
+  const fetchDroneTypes = async () => {
+    try {
+      const response = await api.get('/drone-types');
+      if (response.data.success) {
+        // Convert array to object for easy lookup
+        const typesMap = {};
+        response.data.data.forEach(type => {
+          typesMap[type.id] = type.name;
+        });
+        setDroneTypes(typesMap);
+      }
+    } catch (error) {
+      console.error('Error fetching drone types:', error);
+      // Fallback to basic mapping
+      setDroneTypes({
+        0: "Russian Orlan",
+        1: "Bayraktar TB2", 
+        2: "MQ-9 Reaper",
+        3: "Iranian Shahed",
+        10: "DJI Mavic",
+        11: "DJI Phantom",
+        20: "DJI Mini",
+        99: "Unknown"
+      });
+    }
   };
 
   useEffect(() => {
+    fetchDroneTypes();
     fetchDevices();
     const interval = setInterval(fetchDevices, 30000); // Refresh every 30 seconds
     return () => clearInterval(interval);
@@ -149,13 +169,15 @@ const MapView = () => {
       const newDetection = {
         ...latestDetection,
         timestamp: Date.now(),
-        id: `${latestDetection.device_id}-${latestDetection.drone_id || 'unknown'}-${latestDetection.device_timestamp || Date.now()}`
+        id: `drone-${latestDetection.drone_id || 'unknown'}-${latestDetection.device_id}` // Group by drone_id, not timestamp
       };
       
       console.log('MapView: Adding to history:', newDetection);
       
       setDroneDetectionHistory(prev => {
-        const newHistory = [newDetection, ...prev.slice(0, 19)];
+        // Remove any existing detection for this same drone_id to avoid duplicates
+        const filtered = prev.filter(d => d.drone_id !== latestDetection.drone_id);
+        const newHistory = [newDetection, ...filtered.slice(0, 19)];
         console.log('MapView: Detection history updated, length:', newHistory.length);
         return newHistory;
       });
@@ -755,7 +777,14 @@ const DroneDetectionPopup = ({ detection, age, droneTypes, droneDetectionHistory
             </div>
             <div>
               <span className="font-medium text-gray-700">Type:</span>
-              <div className="text-gray-900">{droneTypes[detection.drone_type] || 'Unknown'}</div>
+              <div className="text-gray-900">
+                {droneTypes[detection.drone_type] || `Type ${detection.drone_type}`}
+              </div>
+              {droneTypes[detection.drone_type] && (
+                <div className="text-xs text-gray-500 mt-1">
+                  ID: {detection.drone_type}
+                </div>
+              )}
             </div>
           </div>