Linking backend data to frontend

frontend/components/alerts/DetectorList.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
-import detectorsData from '../../data/detectors.json'
 
 interface Detector {
   detector_id: number
@@ -45,12 +44,31 @@ const DetectorList: React.FC<DetectorListProps> = ({ objectId, selectedDetectors
   const [searchTerm, setSearchTerm] = useState<string>('')
 
   useEffect(() => {
-    const detectorsArray = Object.values(detectorsData.detectors).filter(
-      (detector: RawDetector) => objectId ? detector.object === objectId : true
-    )
-    setDetectors(detectorsArray as Detector[])
- 
-
+    const loadDetectors = async () => {
+      try {
+        const res = await fetch('/api/get-detectors', { cache: 'no-store' })
+        if (!res.ok) return
+        const payload = await res.json()
+        const detectorsData: Record<string, RawDetector> = payload?.data?.detectors ?? {}
+        const rawArray: RawDetector[] = Object.values(detectorsData).filter(
+          (detector) => (objectId ? detector.object === objectId : true)
+        )
+        const normalized: Detector[] = rawArray.map((d) => ({
+          detector_id: d.detector_id,
+          name: d.name,
+          location: d.location,
+          status: d.status,
+          object: d.object,
+          floor: d.floor,
+          checked: false,
+        }))
+        console.log('[DetectorList] Payload:', payload) 
+        setDetectors(normalized)
+      } catch (e) {
+        console.error('Failed to load detectors:', e)
+      }
+    }
+    loadDetectors()
   }, [objectId])
  
   const filteredDetectors = detectors.filter(detector => {