Merge branch 'realTimeVisulization' into rtViz

app/src/components/ui/list/DropDownList.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import List from "./List";
 import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
-import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useZones } from "../../../store/store";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
 
 interface DropDownListProps {
   value?: string; // Value to display in the DropDownList
@@ -31,27 +32,23 @@ const DropDownList: React.FC<DropDownListProps> = ({
   listType = "default",
   remove,
 }) => {
+  
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+  const { zones, setZones } = useZones()
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
-  const [zoneDataList, setZoneDataList] = useState<
-    { id: string; name: string }[]
-  >([]);
+  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
   useEffect(() => {
-    async function GetZoneData() {
-      const response = await getZonesApi("hexrfactory");
-      console.log("response: ", response.data);
-      setZoneDataList([
-        { id: "1", name: "zone1" },
-        { id: "2", name: "Zone 2" },
-      ]);
-    }
-
-    GetZoneData();
-  }, []);
+    const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
+      id: val.zoneId,
+      name: val.zoneName
+    }));
+    setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
+  }, [zones]);
 
   return (
     <div className="dropdown-list-container">