refactor: Improve code readability by adding missing commas and logging data in socket responses

app/src/modules/builder/asset/models/model/model.tsx

@@ -14,6 +14,7 @@ import useModuleStore, { useSubModuleStore } from '../../../../../store/useModul
 import { useLeftData, useTopData } from '../../../../../store/visualization/useZone3DWidgetStore';
 import { useSelectedAsset } from '../../../../../store/simulation/useSimulationStore';
 import { useProductContext } from '../../../../simulation/products/productContext';
+import { useParams } from 'react-router-dom';
 
 function Model({ asset }: { readonly asset: Asset }) {
     const { camera, controls, gl } = useThree();
@@ -38,6 +39,7 @@ function Model({ asset }: { readonly asset: Asset }) {
     const [gltfScene, setGltfScene] = useState<GLTF | null>(null);
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const groupRef = useRef<THREE.Group>(null);
+    const { projectId } = useParams();
 
     useEffect(() => {
         const loader = new GLTFLoader();
@@ -157,6 +159,7 @@ function Model({ asset }: { readonly asset: Asset }) {
         if (activeTool === 'delete' && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
             const email = localStorage.getItem('email')
             const organization = (email!.split("@")[1]).split(".")[0];
+            const userId = localStorage.getItem("userId");
 
             //REST
 
@@ -168,10 +171,12 @@ function Model({ asset }: { readonly asset: Asset }) {
                 organization: organization,
                 modelUuid: asset.modelUuid,
                 modelName: asset.modelName,
-                socketId: socket.id
+                socketId: socket.id,
+                userId,
+                projectId
             }
 
-            const response = socket.emit('v2:model-asset:delete', data)
+            const response = socket.emit('v1:model-asset:delete', data)
 
             useEventsStore.getState().removeEvent(asset.modelUuid);
             useProductStore.getState().deleteEvent(asset.modelUuid);

app/src/modules/builder/dfx/LoadBlueprint.tsx

@@ -72,7 +72,8 @@ const DxfFile = ({
                     line: lineData.line,
                     type: lineData.type,
                     socketId: socket.id,
-                    projectId,userId
+                    projectId,
+                    userId
                 }
 
                 socket.emit('v1:Line:create', input);

app/src/modules/builder/eventDeclaration/dragControlDeclaration.ts

@@ -58,7 +58,8 @@ export default async function addDragControl(
             position: { "x": event.object.position.x, "y": 0.01, "z": event.object.position.z },
             uuid: event.object.uuid,
             socketId: socket.id,
-            projectId,userId
+            projectId,
+            userId
         }
 
         socket.emit('v1:Line:update', data);

app/src/modules/builder/geomentries/floors/drawOnlyFloor.ts

@@ -98,7 +98,8 @@ async function drawOnlyFloor(
                             line: data.line,
                             type: data.type,
                             socketId: socket.id,
-                            projectId,userId
+                            projectId,
+                            userId
                         }
 
                         socket.emit('v1:Line:create', input);
@@ -162,7 +163,9 @@ async function drawOnlyFloor(
                 layer: data.layer,
                 line: data.line,
                 type: data.type,
-                socketId: socket.id,projectId,userId
+                socketId: socket.id,
+                projectId,
+                userId
             }
 
             socket.emit('v1:Line:create', input);

app/src/modules/builder/geomentries/layers/deleteLayer.ts

@@ -36,7 +36,8 @@ async function DeleteLayer(
         organization: organization,
         layer: removedLayer,
         socketId: socket.id,
-        projectId,userId
+        projectId,
+        userId
     }
 
     socket.emit('v1:Line:delete:layer', data);

app/src/modules/builder/geomentries/lines/deleteLine.ts

@@ -47,7 +47,8 @@ function deleteLine(
             { "uuid": linePoints[1][1] }
         ],
         socketId: socket.id,
-        projectId,userId
+        projectId,
+        userId
     }
 
     socket.emit('v1:Line:delete', data);

app/src/modules/builder/geomentries/lines/drawWall.ts

@@ -91,7 +91,8 @@ async function drawWall(
                             line: data.line,
                             type: data.type,
                             socketId: socket.id,
-                            projectId,userId
+                            projectId,
+                            userId
                         }
 
                         console.log('input: ', input);
@@ -153,7 +154,8 @@ async function drawWall(
                 line: data.line,
                 type: data.type,
                 socketId: socket.id,
-                projectId,userId
+                projectId,
+                userId
             }
 
             console.log('input: ', input);

app/src/modules/builder/geomentries/lines/splitLine.ts

@@ -57,7 +57,9 @@ function splitLine(
             { "uuid": visibleIntersect.object.userData.linePoints[0][1] },
             { "uuid": visibleIntersect.object.userData.linePoints[1][1] }
         ],
-        socketId: socket.id,projectId,userId
+        socketId: socket.id,
+        projectId,
+        userId
     }
 
     socket.emit('v1:Line:delete', data);
@@ -94,7 +96,9 @@ function splitLine(
         layer: line1.layer,
         line: line1.line,
         type: line1.type,
-        socketId: socket.id,projectId,userId
+        socketId: socket.id,
+        projectId,
+        userId
     }
 
     socket.emit('v1:Line:create', input1);
@@ -110,7 +114,9 @@ function splitLine(
         layer: line2.layer,
         line: line2.line,
         type: line2.type,
-        socketId: socket.id,projectId,userId
+        socketId: socket.id,
+        projectId,
+        userId
     }
 
     socket.emit('v1:Line:create', input2);

app/src/modules/builder/geomentries/points/deletePoint.ts

@@ -41,7 +41,8 @@ function deletePoint(
         organization: organization,
         uuid: DeletedPointUUID,
         socketId: socket.id,
-        projectId,userId
+        projectId,
+        userId
     }
 
     console.log('data: ', data);

app/src/modules/builder/geomentries/walls/addWallItems.ts

@@ -114,7 +114,9 @@ async function AddWallItems(
             position: newWallItem.position,
             quaternion: newWallItem.quaternion,
             scale: newWallItem.scale,
-            socketId: socket.id, projectId, userId
+            socketId: socket.id, 
+            projectId, 
+            userId
         };
 
         // console.log('data: ', data);

app/src/modules/builder/geomentries/walls/deleteWallItems.ts

@@ -36,7 +36,9 @@ function DeleteWallItems(
                 organization: organization,
                 modelUuid: removedItem?.model?.uuid!,
                 modelName: removedItem?.modelName!,
-                socketId: socket.id,projectId,userId
+                socketId: socket.id,
+                projectId,
+                userId
             }
 
             socket.emit('v1:wallItems:delete', data);

app/src/modules/builder/groups/floorPlanGroup.tsx

@@ -35,7 +35,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
 
     useEffect(() => {
         if (toolMode === 'move') {
-            addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket,projectId);
+            addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket, projectId);
         }
 
         return () => {
@@ -50,7 +50,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
         const organization = (email!.split("@")[1]).split(".")[0];
 
         // Load data from localStorage if available
-        getLines(organization,projectId).then((data) => {
+        getLines(organization, projectId).then((data) => {
             // console.log('data: ', data);
 
             const Lines: Types.Lines = objectLinesToArray(data);
@@ -107,7 +107,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
 
     useEffect(() => {
         if (removedLayer !== null) {
-            DeleteLayer(removedLayer, lines, floorPlanGroupLine, floorPlanGroupPoint, onlyFloorlines, floorGroup, setDeletedLines, setRemovedLayer, socket,projectId);
+            DeleteLayer(removedLayer, lines, floorPlanGroupLine, floorPlanGroupPoint, onlyFloorlines, floorGroup, setDeletedLines, setRemovedLayer, socket, projectId);
         }
     }, [removedLayer]);
 
@@ -153,19 +153,19 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
 
             if (deletePointOrLine) {
                 if (hoveredDeletablePoint.current !== null) {
-                    deletePoint(hoveredDeletablePoint, onlyFloorlines, floorPlanGroupPoint, floorPlanGroupLine, lines, setDeletedLines, socket,projectId);
+                    deletePoint(hoveredDeletablePoint, onlyFloorlines, floorPlanGroupPoint, floorPlanGroupLine, lines, setDeletedLines, socket, projectId);
                 }
                 if (hoveredDeletableLine.current !== null) {
-                    deleteLine(hoveredDeletableLine, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroupPoint, setDeletedLines, socket,projectId);
+                    deleteLine(hoveredDeletableLine, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroupPoint, setDeletedLines, socket, projectId);
                 }
             }
 
             if (toolMode === "Wall") {
-                drawWall(raycaster, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket);
+                drawWall(raycaster, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket, projectId);
             }
 
             if (toolMode === "Floor") {
-                drawOnlyFloor(raycaster, state, camera, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, onlyFloorline, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket,projectId);
+                drawOnlyFloor(raycaster, state, camera, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, onlyFloorline, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket, projectId);
             }
         }
 

app/src/modules/builder/groups/wallItemsGroup.tsx

@@ -155,7 +155,8 @@ const WallItemsGroup = ({
                             quaternion: currentItem.quaternion,
                             scale: currentItem.scale!,
                             socketId: socket.id,
-                            projectId,userId
+                            projectId,
+                            userId
                         };
 
                         // console.log('data: ', data);

app/src/modules/builder/groups/zoneGroup.tsx

@@ -82,10 +82,11 @@ const ZoneGroup: React.FC = () => {
 
       const organization = email.split("@")[1].split(".")[0];
       const data = await getZonesApi(organization, projectId);
+      console.log('data: ', data);
 
-      if (data.data && data.data.length > 0) {
+      if (data.length > 0) {
-        const fetchedZones = data.data.map((zone: any) => ({
+        const fetchedZones = data.map((zone: any) => ({
-          zoneId: zone.zoneId,
+          zoneUuid: zone.zoneUuid,
           zoneName: zone.zoneName,
           points: zone.points,
           viewPortCenter: zone.viewPortCenter,
@@ -95,7 +96,7 @@ const ZoneGroup: React.FC = () => {
 
         setZones(fetchedZones);
 
-        const fetchedPoints = data.data.flatMap((zone: any) =>
+        const fetchedPoints = data.flatMap((zone: any) =>
           zone.points
             .slice(0, 4)
             .map(
@@ -130,7 +131,7 @@ const ZoneGroup: React.FC = () => {
       zones
         .filter((zone: any) => zone.layer === removedLayer)
         .forEach((zone: any) => {
-          deleteZoneFromBackend(zone.zoneId);
+          deleteZoneFromBackend(zone.zoneUuid);
         });
 
       setRemovedLayer(null);
@@ -153,12 +154,12 @@ const ZoneGroup: React.FC = () => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const addZoneToBackend = async (zone: {
-    zoneId: string;
+    zoneUuid: string;
     zoneName: string;
     points: [number, number, number][];
     layer: string;
   }) => {
-    console.log('zoneId: ', zone);
+    console.log('zoneUuid: ', zone);
     const email = localStorage.getItem("email");
     const userId = localStorage.getItem("userId");
     const organization = email!.split("@")[1].split(".")[0];
@@ -192,10 +193,11 @@ const ZoneGroup: React.FC = () => {
 
     const input = {
       userId: userId,
+      projectId,
       organization: organization,
       zoneData: {
         zoneName: zone.zoneName,
-        zoneId: zone.zoneId,
+        zoneUuid: zone.zoneUuid,
         points: zone.points,
         viewPortCenter: target,
         viewPortposition: position,
@@ -203,12 +205,12 @@ const ZoneGroup: React.FC = () => {
       },
     };
 
-    socket.emit("v2:zone:set", input);
+    socket.emit("v1:zone:set", input);
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const updateZoneToBackend = async (zone: {
-    zoneId: string;
+    zoneUuid: string;
     zoneName: string;
     points: [number, number, number][];
     layer: string;
@@ -246,10 +248,11 @@ const ZoneGroup: React.FC = () => {
 
     const input = {
       userId: userId,
+      projectId,
       organization: organization,
       zoneData: {
         zoneName: zone.zoneName,
-        zoneId: zone.zoneId,
+        zoneUuid: zone.zoneUuid,
         points: zone.points,
         viewPortCenter: target,
         viewPortposition: position,
@@ -257,29 +260,30 @@ const ZoneGroup: React.FC = () => {
       },
     };
 
-    socket.emit("v2:zone:set", input);
+    socket.emit("v1:zone:set", input);
   };
 
-  const deleteZoneFromBackend = async (zoneId: string) => {
+  const deleteZoneFromBackend = async (zoneUuid: string) => {
     const email = localStorage.getItem("email");
     const userId = localStorage.getItem("userId");
     const organization = email!.split("@")[1].split(".")[0];
 
     const input = {
       userId: userId,
+      projectId,
       organization: organization,
-      zoneId: zoneId,
+      zoneUuid: zoneUuid,
     };
 
-    socket.emit("v2:zone:delete", input);
+    socket.emit("v1:zone:delete", input);
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleDeleteZone = (zoneId: string) => {
+  const handleDeleteZone = (zoneUuid: string) => {
-    const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
+    const updatedZones = zones.filter((zone: any) => zone.zoneUuid !== zoneUuid);
     setZones(updatedZones);
 
-    const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId);
+    const zoneIndex = zones.findIndex((zone: any) => zone.zoneUuid === zoneUuid);
     if (zoneIndex !== -1) {
       const zonePointsToRemove = zonePoints.slice(
         zoneIndex * 4,
@@ -294,7 +298,7 @@ const ZoneGroup: React.FC = () => {
       );
       setZonePoints(updatedzonePoints);
     }
-    deleteZoneFromBackend(zoneId);
+    deleteZoneFromBackend(zoneUuid);
   };
 
   useEffect(() => {
@@ -356,9 +360,9 @@ const ZoneGroup: React.FC = () => {
           ] as [number, number, number][];
 
           const zoneName = `Zone ${zones.length + 1}`;
-          const zoneId = THREE.MathUtils.generateUUID();
+          const zoneUuid = THREE.MathUtils.generateUUID();
           const newZone = {
-            zoneId,
+            zoneUuid,
             zoneName,
             points: points,
             layer: activeLayer,
@@ -402,8 +406,8 @@ const ZoneGroup: React.FC = () => {
           );
           if (sphereIndex !== -1) {
             const zoneIndex = Math.floor(sphereIndex / 4);
-            const zoneId = zones[zoneIndex].zoneId;
+            const zoneUuid = zones[zoneIndex].zoneUuid;
-            handleDeleteZone(zoneId);
+            handleDeleteZone(zoneUuid);
             return;
           }
         }
@@ -534,9 +538,9 @@ const ZoneGroup: React.FC = () => {
       <group name="zones" visible={!toggleView}>
         {zones.map((zone: any) => (
           <group
-            key={zone.zoneId}
+            key={zone.zoneUuid}
             name={zone.zoneName}
-            visible={zone.zoneId === selectedZone.zoneUuid}
+            visible={zone.zoneUuid === selectedZone.zoneUuid}
           >
             {zone.points
               .slice(0, -1)
@@ -613,7 +617,7 @@ const ZoneGroup: React.FC = () => {
                 return (
                   <Html
                     // data
-                    key={zone.zoneId}
+                    key={zone.zoneUuid}
                     position={htmlPosition}
                     // class
                     className="zone-name-wrapper"
@@ -632,14 +636,14 @@ const ZoneGroup: React.FC = () => {
           .filter((zone: any) => zone.layer === activeLayer)
           .map((zone: any) => (
             <Line
-              key={zone.zoneId}
+              key={zone.zoneUuid}
               points={zone.points}
               color="#007BFF"
               lineWidth={3}
               onClick={(e) => {
                 e.stopPropagation();
                 if (deletePointOrLine) {
-                  handleDeleteZone(zone.zoneId);
+                  handleDeleteZone(zone.zoneUuid);
                 }
               }}
             />
@@ -705,10 +709,10 @@ const ZoneGroup: React.FC = () => {
           .flatMap((zone: any) =>
             zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
               <Sphere
-                key={`${zone.zoneId}-point-${pointIndex}`}
+                key={`${zone.zoneUuid}-point-${pointIndex}`}
                 position={new THREE.Vector3(...point)}
                 args={[0.3, 16, 16]}
-                name={`point-${zone.zoneId}-${pointIndex}`}
+                name={`point-${zone.zoneUuid}-${pointIndex}`}
               >
                 <meshBasicMaterial color="red" />
               </Sphere>

app/src/modules/collaboration/socket/socketResponses.dev.tsx

@@ -174,6 +174,7 @@ export default function SocketResponses({
         });
 
         socket.on("v1:Line:response:update", (data: any) => {
+            console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
             }
@@ -670,6 +671,7 @@ export default function SocketResponses({
         const organization = email!.split("@")[1].split(".")[0];
 
         socket.on("v1:Line:response:create", async (data: any) => {
+            console.log('data: ', data);
             // 
             if (socket.id === data.socketId) {
                 return;
@@ -788,6 +790,7 @@ export default function SocketResponses({
         const organization = email!.split("@")[1].split(".")[0];
 
         socket.on("v1:zone:response:updates", (data: any) => {
+            console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
             }
@@ -833,6 +836,7 @@ export default function SocketResponses({
         });
 
         socket.on("v1:zone:response:delete", (data: any) => {
+            console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
             }

app/src/modules/scene/camera/updateCameraPosition.ts

@@ -19,7 +19,8 @@ export default function updateCamPosition(
         position: position,
         target: new THREE.Vector3(target.x, 0, target.z),
         rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z),
-        socketId: socket.id,projectId
+        socketId: socket.id,
+        projectId
     };
     socket.emit("v1:Camera:set", camData);
     localStorage.setItem("cameraPosition", JSON.stringify(position));

app/src/modules/scene/controls/controls.tsx

@@ -57,7 +57,7 @@ export default function Controls() {
 
             const camData = {
                 organization: organization,
-                userId: localStorage.getItem('userId')!,
+                userId: userId,
                 position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
                 target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
                 rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),

app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx

@@ -359,7 +359,8 @@ const CopyPasteControls = ({
                         isVisible: true,
                         socketId: socket.id,
                         eventData: eventData,
-                        userId, projectId
+                        userId, 
+                        projectId
                     };
 
                     socket.emit("v1:model-asset:add", data);
@@ -412,7 +413,9 @@ const CopyPasteControls = ({
                         rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                         isLocked: false,
                         isVisible: true,
-                        socketId: socket.id, projectId, userId
+                        socketId: socket.id, 
+                        projectId, 
+                        userId
                     };
 
                     socket.emit("v1:model-asset:add", data);

app/src/modules/scene/controls/selectionControls/duplicationControls.tsx

@@ -334,7 +334,8 @@ const DuplicationControls = ({
                         isVisible: true,
                         socketId: socket.id,
                         eventData: eventData,
-                        projectId, userId
+                        projectId, 
+                        userId
                     };
 
                     socket.emit("v1:model-asset:add", data);
@@ -382,7 +383,8 @@ const DuplicationControls = ({
                         isLocked: false,
                         isVisible: true,
                         socketId: socket.id,
-                        userId, projectId
+                        userId, 
+                        projectId
                     };
 
                     socket.emit("v1:model-asset:add", data);

app/src/modules/scene/controls/selectionControls/moveControls.tsx

@@ -314,7 +314,8 @@ function MoveControls({
                     isLocked: false,
                     isVisible: true,
                     socketId: socket.id,
-                    projectId,userId
+                    projectId,
+                    userId
                 };
 
                 socket.emit("v1:model-asset:add", data);

app/src/modules/scene/controls/selectionControls/rotateControls.tsx

@@ -269,7 +269,8 @@ function RotateControls({
                     isLocked: false,
                     isVisible: true,
                     socketId: socket.id,
-                    projectId,userId
+                    projectId,
+                    userId
                 };
 
                 socket.emit("v1:model-asset:add", data);

app/src/modules/scene/controls/transformControls/transformControls.tsx

@@ -131,9 +131,11 @@ export default function TransformControl() {
                 isLocked: false,
                 isVisible: true,
                 socketId: socket.id,
+                userId,
+                projectId
             };
 
-            socket.emit("v2:model-asset:add", data);
+            socket.emit("v1:model-asset:add", data);
         }
     }