From ae9c2fda6691d65effe645e9a809ba61335b7e1d Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Sat, 3 May 2025 18:16:31 +0530
Subject: [PATCH] refactor: Improve code readability and consistency in
 PointsCreator component; streamline JSX structure and enhance key usage in
 event mapping

---
 .../events/points/creator/pointsCreator.tsx   | 302 +++++++++---------
 1 file changed, 155 insertions(+), 147 deletions(-)

diff --git a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
index 8c6f852..29a6db7 100644
--- a/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
+++ b/app/src/modules/simulation/events/points/creator/pointsCreator.tsx
@@ -13,15 +13,23 @@ import {
 import { useThree } from "@react-three/fiber";
 
 function PointsCreator() {
-    const { gl, raycaster, scene, pointer, camera } = useThree();
-    const { subModule } = useSubModuleStore();
-    const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
-    const { activeModule } = useModuleStore();
-    const transformRef = useRef<any>(null);
-    const [transformMode, setTransformMode] = useState<"translate" | "rotate" | null>(null);
-    const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
-    const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
-    const { selectedEventData, setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
+  const { gl, raycaster, scene, pointer, camera } = useThree();
+  const { subModule } = useSubModuleStore();
+  const { events, updatePoint, getPointByUuid, getEventByModelUuid } =
+    useEventsStore();
+  const { activeModule } = useModuleStore();
+  const transformRef = useRef<any>(null);
+  const [transformMode, setTransformMode] = useState<
+    "translate" | "rotate" | null
+  >(null);
+  const sphereRefs = useRef<{ [key: string]: THREE.Mesh }>({});
+  const {
+    selectedEventSphere,
+    setSelectedEventSphere,
+    clearSelectedEventSphere,
+  } = useSelectedEventSphere();
+  const { setSelectedEventData, clearSelectedEventData } =
+    useSelectedEventData();
 
   useEffect(() => {
     if (selectedEventSphere) {
@@ -123,146 +131,146 @@ function PointsCreator() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gl, subModule, selectedEventSphere]);
 
-    return (
+  return (
+    <>
+      {activeModule === "simulation" && (
         <>
-            {activeModule === "simulation" && (
-                <>
-                    <group name="EventPointsGroup">
-                        {events.map((event, i) => {
-                            if (event.type === "transfer") {
-                                return (
-                                    <group
-                                        key={i}
-                                        position={event.position}
-                                        rotation={event.rotation}
-                                    >
-                                        {event.points.map((point, j) => (
-                                            <mesh
-                                                name="Event-Sphere"
-                                                uuid={point.uuid}
-                                                ref={(el) => (sphereRefs.current[point.uuid] = el!)}
-                                                onClick={(e) => {
-                                                    e.stopPropagation();
-                                                    setSelectedEventSphere(
-                                                        sphereRefs.current[point.uuid]
-                                                    );
-                                                }}
-                                                key={`${i}-${j}`}
-                                                position={new THREE.Vector3(...point.position)}
-                                                userData={{
-                                                    modelUuid: event.modelUuid,
-                                                    pointUuid: point.uuid,
-                                                }}
-                                            >
-                                                <sphereGeometry args={[0.1, 16, 16]} />
-                                                <meshStandardMaterial color="orange" />
-                                            </mesh>
-                                        ))}
-                                    </group>
-                                );
-                            } else if (event.type === "vehicle") {
-                                return (
-                                    <group
-                                        key={i}
-                                        position={event.position}
-                                        rotation={event.rotation}
-                                    >
-                                        <mesh
-                                            name="Event-Sphere"
-                                            uuid={event.point.uuid}
-                                            ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setSelectedEventSphere(
-                                                    sphereRefs.current[event.point.uuid]
-                                                );
-                                            }}
-                                            position={new THREE.Vector3(...event.point.position)}
-                                            userData={{
-                                                modelUuid: event.modelUuid,
-                                                pointUuid: event.point.uuid,
-                                            }}
-                                        >
-                                            <sphereGeometry args={[0.1, 16, 16]} />
-                                            <meshStandardMaterial color="blue" />
-                                        </mesh>
-                                    </group>
-                                );
-                            } else if (event.type === "roboticArm") {
-                                return (
-                                    <group
-                                        key={i}
-                                        position={event.position}
-                                        rotation={event.rotation}
-                                    >
-                                        <mesh
-                                            name="Event-Sphere"
-                                            uuid={event.point.uuid}
-                                            ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setSelectedEventSphere(
-                                                    sphereRefs.current[event.point.uuid]
-                                                );
-                                            }}
-                                            position={new THREE.Vector3(...event.point.position)}
-                                            userData={{
-                                                modelUuid: event.modelUuid,
-                                                pointUuid: event.point.uuid,
-                                            }}
-                                        >
-                                            <sphereGeometry args={[0.1, 16, 16]} />
-                                            <meshStandardMaterial color="green" />
-                                        </mesh>
-                                    </group>
-                                );
-                            } else if (event.type === "machine") {
-                                return (
-                                    <group
-                                        key={i}
-                                        position={event.position}
-                                        rotation={event.rotation}
-                                    >
-                                        <mesh
-                                            name="Event-Sphere"
-                                            uuid={event.point.uuid}
-                                            ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setSelectedEventSphere(
-                                                    sphereRefs.current[event.point.uuid]
-                                                );
-                                            }}
-                                            position={new THREE.Vector3(...event.point.position)}
-                                            userData={{
-                                                modelUuid: event.modelUuid,
-                                                pointUuid: event.point.uuid,
-                                            }}
-                                        >
-                                            <sphereGeometry args={[0.1, 16, 16]} />
-                                            <meshStandardMaterial color="purple" />
-                                        </mesh>
-                                    </group>
-                                );
-                            } else {
-                                return null;
-                            }
-                        })}
-                    </group>
-                    {selectedEventSphere && transformMode && (
-                        <TransformControls
-                            ref={transformRef}
-                            object={selectedEventSphere}
-                            mode={transformMode}
-                            onMouseUp={(e) => {
-                                updatePointToState(selectedEventSphere);
-                            }}
-                        />
-                    )}
-                </>
-            )}
+          <group name="EventPointsGroup">
+            {events.map((event, index) => {
+              if (event.type === "transfer") {
+                return (
+                  <group
+                    key={`${index}-${event.modelUuid}`}
+                    position={event.position}
+                    rotation={event.rotation}
+                  >
+                    {event.points.map((point, j) => (
+                      <mesh
+                        name="Event-Sphere"
+                        uuid={point.uuid}
+                        ref={(el) => (sphereRefs.current[point.uuid] = el!)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedEventSphere(
+                            sphereRefs.current[point.uuid]
+                          );
+                        }}
+                        key={`${index}-${point.uuid}`}
+                        position={new THREE.Vector3(...point.position)}
+                        userData={{
+                          modelUuid: event.modelUuid,
+                          pointUuid: point.uuid,
+                        }}
+                      >
+                        <sphereGeometry args={[0.1, 16, 16]} />
+                        <meshStandardMaterial color="orange" />
+                      </mesh>
+                    ))}
+                  </group>
+                );
+              } else if (event.type === "vehicle") {
+                return (
+                  <group
+                    key={`${index}-${event.modelUuid}`}
+                    position={event.position}
+                    rotation={event.rotation}
+                  >
+                    <mesh
+                      name="Event-Sphere"
+                      uuid={event.point.uuid}
+                      ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedEventSphere(
+                          sphereRefs.current[event.point.uuid]
+                        );
+                      }}
+                      position={new THREE.Vector3(...event.point.position)}
+                      userData={{
+                        modelUuid: event.modelUuid,
+                        pointUuid: event.point.uuid,
+                      }}
+                    >
+                      <sphereGeometry args={[0.1, 16, 16]} />
+                      <meshStandardMaterial color="blue" />
+                    </mesh>
+                  </group>
+                );
+              } else if (event.type === "roboticArm") {
+                return (
+                  <group
+                    key={`${index}-${event.modelUuid}`}
+                    position={event.position}
+                    rotation={event.rotation}
+                  >
+                    <mesh
+                      name="Event-Sphere"
+                      uuid={event.point.uuid}
+                      ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedEventSphere(
+                          sphereRefs.current[event.point.uuid]
+                        );
+                      }}
+                      position={new THREE.Vector3(...event.point.position)}
+                      userData={{
+                        modelUuid: event.modelUuid,
+                        pointUuid: event.point.uuid,
+                      }}
+                    >
+                      <sphereGeometry args={[0.1, 16, 16]} />
+                      <meshStandardMaterial color="green" />
+                    </mesh>
+                  </group>
+                );
+              } else if (event.type === "machine") {
+                return (
+                  <group
+                    key={`${index}-${event.modelUuid}`}
+                    position={event.position}
+                    rotation={event.rotation}
+                  >
+                    <mesh
+                      name="Event-Sphere"
+                      uuid={event.point.uuid}
+                      ref={(el) => (sphereRefs.current[event.point.uuid] = el!)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSelectedEventSphere(
+                          sphereRefs.current[event.point.uuid]
+                        );
+                      }}
+                      position={new THREE.Vector3(...event.point.position)}
+                      userData={{
+                        modelUuid: event.modelUuid,
+                        pointUuid: event.point.uuid,
+                      }}
+                    >
+                      <sphereGeometry args={[0.1, 16, 16]} />
+                      <meshStandardMaterial color="purple" />
+                    </mesh>
+                  </group>
+                );
+              } else {
+                return null;
+              }
+            })}
+          </group>
+          {selectedEventSphere && transformMode && (
+            <TransformControls
+              ref={transformRef}
+              object={selectedEventSphere}
+              mode={transformMode}
+              onMouseUp={(e) => {
+                updatePointToState(selectedEventSphere);
+              }}
+            />
+          )}
         </>
-    );
+      )}
+    </>
+  );
 }
 
 export default PointsCreator;