WIP: POI Update

hooks/useMapComponentState.js

@@ -1,5 +1,5 @@
 // hooks/useMapComponentState.js
-import { useState, useRef } from "react";
+import { useState, useEffect } from "react";
 import usePoiTypData from "./usePoiTypData";
 import { useRecoilValue } from "recoil";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
@@ -12,6 +12,26 @@ export const useMapComponentState = () => {
   const [menuItemAdded, setMenuItemAdded] = useState(false);
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
 
+  // Fetch devices when the component is mounted
+  useEffect(() => {
+    const fetchDeviceData = async () => {
+      try {
+        const response = await fetch("/api/talas5/location_device"); // API call to get devices
+        const data = await response.json();
+        setLocationDeviceData(data); // Set the device data
+
+        // Optional: set a default deviceName if needed
+        if (data.length > 0) {
+          setDeviceName(data[0].name); // Set the first device's name
+        }
+      } catch (error) {
+        console.error("Error fetching device data:", error);
+      }
+    };
+
+    fetchDeviceData();
+  }, []); // Runs only once when the component is mounted
+
   return {
     poiTypData,
     isPoiTypLoaded,