refactor: Update zone handling by integrating zoneStore in multiple components and removing unused zones state

app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -12,13 +12,17 @@ import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCam
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../../functions/getUserData";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";
 
 const ZoneProperties: React.FC = () => {
   const { Edit, setEdit } = useEditPosition();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zonePosition, setZonePosition } = usezonePosition();
   const { zoneTarget, setZoneTarget } = usezoneTarget();
-  const { zones, setZones } = useZones();
+  // const { zones, setZones } = useZones();
+  const { assetStore, zoneStore } = useSceneContext();
+  const { zones, setZoneName } = zoneStore()
+
   const { projectId } = useParams();
   const { userName, userId, organization, email } = getUserData();
   const { selectedVersionStore } = useVersionContext();
@@ -34,10 +38,11 @@ const ZoneProperties: React.FC = () => {
 
       let zonesdata = {
         zoneUuid: selectedZone.zoneUuid,
-        viewPortposition: zonePosition,
+        viewPortPosition: zonePosition,
-        viewPortCenter: zoneTarget,
+        viewPortTarget: zoneTarget,
       };
 
+
       let response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
       // console.log('response: ', response);
       if (response.message === "zone updated") {
@@ -63,13 +68,14 @@ const ZoneProperties: React.FC = () => {
     let response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
     if (response.message === "zone updated") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
-      setZones((prevZones: any[]) =>
+      setZoneName(selectedZone.zoneUuid, newName)
-        prevZones.map((zone) =>
+      // setZones((prevZones: any[]) =>
-          zone.zoneUuid === selectedZone.zoneUuid
+      //   prevZones.map((zone) =>
-            ? { ...zone, zoneName: newName }
+      //     zone.zoneUuid === selectedZone.zoneUuid
-            : zone
+      //       ? { ...zone, zoneName: newName }
-        )
+      //       : zone
-      );
+      //   )
+      // );
     } else {
       // console.log(response?.message);
     }
@@ -81,6 +87,7 @@ const ZoneProperties: React.FC = () => {
     setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
   }
   const checkZoneNameDuplicate = (name: string) => {
+    console.log('zones: ', zones);
     return zones.some(
       (zone: any) =>
         zone.zoneName?.trim().toLowerCase() === name?.trim().toLowerCase() &&

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

@@ -44,15 +44,18 @@ const DropDownList: React.FC<DropDownListProps> = ({
   remove,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
-  const { zones } = useZones();
+  // const { zones } = useZones();
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
 
   const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
-  const { assetStore } = useSceneContext();
+  // const { assetStore } = useSceneContext();
+  const { assetStore, zoneStore } = useSceneContext();
   const { assets } = assetStore();
+  const { zones } = zoneStore()
+
 
   const isPointInsidePolygon = (
     point: [number, number],
@@ -76,7 +79,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
   };
 
   useEffect(() => {
-    const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
+    const updatedZoneList: ZoneData[] = zones?.map((zone: any) => {
       const polygon2D = zone.points.map((p: [number, number, number]) => [
         p[0],
         p[2],

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

@@ -46,7 +46,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-  const { zones, setZones } = useZones();
+
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
   const { projectId } = useParams();
@@ -55,6 +55,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { organization } = getUserData();
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
+  const { zoneStore } = useSceneContext();
+  const { zones, setZoneName } = zoneStore()
 
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
@@ -92,8 +94,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         lockedPanels: response?.lockedPanels ?? [],
         widgets: response?.widgets ?? [],
         zoneUuid: response?.zoneUuid,
-        zoneViewPortTarget: response?.viewPortCenter ?? [],
+        zoneViewPortTarget: response?.viewPortTarget ?? [],
-        zoneViewPortPosition: response?.viewPortposition ?? [],
+        zoneViewPortPosition: response?.viewPortPosition ?? [],
       });
     } catch (error) {
       echo.error("Failed to select zone");
@@ -123,13 +125,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
     if (response.message === "zone updated") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
-      setZones((prevZones: any[]) =>
+      setZoneName(selectedZone.zoneUuid, newName)
-        prevZones.map((zone) =>
+      // setZones((prevZones: any[]) =>
-          zone.zoneUuid === selectedZone.zoneUuid
+      //   prevZones.map((zone) =>
-            ? { ...zone, zoneName: newName }
+      //     zone.zoneUuid === selectedZone.zoneUuid
-            : zone
+      //       ? { ...zone, zoneName: newName }
-        )
+      //       : zone
-      );
+      //   )
+      // );
     }
   }
 

app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx

@@ -20,7 +20,7 @@ function ZoneCreator() {
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
     const { zoneStore } = useSceneContext();
-    const { addZone, getZonePointById, getZoneByPoints } = zoneStore();
+    const { zones, addZone, getZonePointById, getZoneByPoints } = zoneStore();
     const drag = useRef(false);
     const isLeftMouseDown = useRef(false);
     const { selectedVersionStore } = useVersionContext();
@@ -32,6 +32,7 @@ function ZoneCreator() {
     const [isCreating, setIsCreating] = useState(false);
     const { zoneColor, zoneHeight, snappedPosition, snappedPoint, setSnappedPoint, setSnappedPosition } = useBuilderStore();
 
+
     useEffect(() => {
         const canvasElement = gl.domElement;
 
@@ -92,7 +93,7 @@ function ZoneCreator() {
             if (tempPoints.length > 2 && isCreating && snappedPoint && snappedPoint.pointUuid === tempPoints[0].pointUuid) {
                 const zone: Zone = {
                     zoneUuid: THREE.MathUtils.generateUUID(),
-                    zoneName: "Zone",
+                    zoneName: `Zone `,
                     points: tempPoints,
                     zoneColor,
                     zoneHeight,

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -17,6 +17,7 @@ import { useWidgetStore } from "../../store/useWidgetStore";
 import { useNavigate, useParams } from "react-router-dom";
 import { getUserData } from "../../functions/getUserData";
 import { useVersionContext } from "../builder/version/versionContext";
+import { useSceneContext } from "../scene/sceneContext";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -28,6 +29,7 @@ type FormattedZoneData = Record<
     points: [];
     lockedPanels: Side[];
     zoneUuid: string;
+    zoneName: string;
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
     widgets: Widget[];
@@ -64,6 +66,9 @@ const RealTimeVisulization: React.FC = () => {
   const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
   const navigate = useNavigate();
+  const { zoneStore } = useSceneContext();
+  const { zones } = zoneStore();
+
 
   OuterClick({
     contextClassName: [
@@ -82,6 +87,7 @@ const RealTimeVisulization: React.FC = () => {
   useEffect(() => {
     if (!projectId || !selectedVersion) return;
     getZone2dData(organization, projectId, selectedVersion?.versionId || '').then((response) => {
+      // console.log('response: ', response);
       if (!response) return;
       // if (response.status === 401) {
       //   console.log("force logout");
@@ -94,19 +100,21 @@ const RealTimeVisulization: React.FC = () => {
       const formattedData = response.reduce<FormattedZoneData>(
         (acc, zone) => {
 
-          acc[zone.zoneName] = {
+          acc[zone.zoneUuid] = {
             activeSides: [],
             panelOrder: [],
             lockedPanels: [],
             points: zone.points,
             zoneUuid: zone.zoneUuid,
-            zoneViewPortTarget: zone.viewPortCenter,
+            zoneName: zone.zoneName,
-            zoneViewPortPosition: zone.viewPortposition,
+            zoneViewPortTarget: zone.viewPortTarget,
+            zoneViewPortPosition: zone.viewPortPosition,
             widgets: [],
           };
           return acc;
         }, {}
       );
+      // console.log('formattedData: ', formattedData);
       setZonesData(formattedData);
     })
 
@@ -119,13 +127,14 @@ const RealTimeVisulization: React.FC = () => {
       if (!selectedZone) return prev;
       return {
         ...prev,
-        [selectedZone.zoneName]: {
+        [selectedZone.zoneUuid]: {
-          ...prev[selectedZone.zoneName], // Keep existing properties
+          ...prev[selectedZone.zoneUuid], // Keep existing properties
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
           points: selectedZone.points || [],
           zoneUuid: selectedZone.zoneUuid || "",
+          zoneName: selectedZone.zoneName || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
           widgets: selectedZone.widgets || [],

app/src/modules/visualization/zone/DisplayZone.tsx

@@ -34,6 +34,7 @@ interface DisplayZoneProps {
       points: [];
       widgets: Widget[];
       zoneUuid: string;
+      zoneName: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
     };
@@ -111,8 +112,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       setShowLeftArrow(isOverflowing && canScrollLeft);
       setShowRightArrow(isOverflowing && canScrollRight);
 
-      // console.log('canScrollRight: ', canScrollRight);
+      // 
-      // console.log('isOverflowing: ', isOverflowing);
+      // 
     }
   }, []);
 
@@ -180,9 +181,10 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       // setSelectedChartId(null);
 
       let response = await getSelect2dZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
-      // console.log('response2d: ', response);
+
+      // 
       let res = await getFloatingZoneData(zoneUuid, organization, projectId, selectedVersion?.versionId || '');
-      // console.log("resFloating: ", res);
+      // 
 
       setFloatingWidget(res);
       // Set the selected zone in the store
@@ -201,8 +203,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         widgets: response.widgets || [],
         points: response.points || [],
         zoneUuid: zoneUuid,
-        zoneViewPortTarget: response.viewPortCenter || {},
+        zoneViewPortTarget: response.viewPortTarget || [],
-        zoneViewPortPosition: response.viewPortposition || {},
+        zoneViewPortPosition: response.viewPortPosition || [],
       });
     } catch (error) {
       echo.error("Failed to select zone");
@@ -238,20 +240,22 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       >
         {Object.keys(zonesData).length !== 0 ? (
           <>
-            {Object.keys(zonesData).map((zoneName, index) => (
+            {Object.values(zonesData).map((zone, index) => (
+              <>
+                { }
                 <div
                   key={index}
-                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
+                  className={`zone ${selectedZone.zoneUuid === zone.zoneUuid ? "active" : ""
                     }`}
                   onClick={() => {
 
-                  console.log('zonesData: ', zonesData);
+                    handleSelect2dZoneData(zonesData[zone.zoneUuid]?.zoneUuid, zone.zoneName)
-                  handleSelect2dZoneData(zonesData[zoneName]?.zoneUuid, zoneName)
                   }
                   }
                 >
-                {zoneName}
+                  {zone.zoneName}
                 </div>
+              </>
             ))}
           </>
         ) : (

app/src/modules/visualization/zone/zoneCameraTarget.tsx

@@ -10,6 +10,7 @@ import {
 
 export default function ZoneCentreTarget() {
   const { selectedZone } = useSelectedZoneStore();
+  // 
   const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
     null
   );

app/src/pages/UserAuth.tsx

@@ -56,7 +56,6 @@ const UserAuth: React.FC = () => {
 
         try {
           const projects = await recentlyViewed(organization, res.message.userId);
-          console.log('projects: ', projects);
           if (res.message.isShare) {
             if (Object.values(projects.RecentlyViewed).length > 0) {
               const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;

app/src/services/factoryBuilder/zone/getZonesApi.ts

@@ -1,9 +1,6 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getZonesApi = async (
+export const getZonesApi = async (projectId: string, versionId: string,) => {
-    projectId: string,
-    versionId: string,
-) => {
     try {
         const response = await fetch(`${url_Backend_dwinzo}/api/V1/zones/${projectId}/${versionId}`, {
             method: "GET",

app/src/services/visulization/zone/zoneCameraUpdation.ts

@@ -3,7 +3,7 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 
 export const zoneCameraUpdate = async (zoneData: {}, organization: string, projectId?: string, versionId?: string) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/V1/zones`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/upsertZone`, {
       method: "POST",
       headers: {
         Authorization: "Bearer <access_token>",  // Replace with actual token