refactor: Improve code readability and structure in EventProperties, DelayAction, SwapAction, and PreviewSelectionWithUpload components

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -1,5 +1,8 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useSelectedEventData, useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
+import React, { useEffect, useState } from "react";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+} from "../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import ConveyorMechanics from "./mechanics/conveyorMechanics";
 import VehicleMechanics from "./mechanics/vehicleMechanics";
@@ -8,55 +11,69 @@ import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
 
 const EventProperties: React.FC = () => {
-    const { selectedEventData } = useSelectedEventData();
-    const { getEventByModelUuid } = useProductStore();
-    const { selectedProduct } = useSelectedProduct();
-    const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
-    const [assetType, setAssetType] = useState<string | null>(null);
+  const { selectedEventData } = useSelectedEventData();
+  const { getEventByModelUuid } = useProductStore();
+  const { selectedProduct } = useSelectedProduct();
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
+    null
+  );
+  const [assetType, setAssetType] = useState<string | null>(null);
 
-    useEffect(() => {
-        const event = getCurrentEventData();
-        setCurrentEventData(event);
+  useEffect(() => {
+    const event = getCurrentEventData();
+    setCurrentEventData(event);
 
-        const type = determineAssetType(event);
-        setAssetType(type);
-
-    }, [selectedEventData, selectedProduct]);
-
-    const getCurrentEventData = () => {
-        if (!selectedEventData?.data || !selectedProduct) return null;
-        return getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid) || null;
-    };
-
-    const determineAssetType = (event: EventsSchema | null) => {
-        if (!event) return null;
-
-        switch (event.type) {
-            case 'transfer': return 'conveyor';
-            case 'vehicle': return 'vehicle';
-            case 'roboticArm': return 'roboticArm';
-            case 'machine': return 'machine';
-            case 'storageUnit': return 'storageUnit';
-            default: return null;
-        }
-    };
+    const type = determineAssetType(event);
+    setAssetType(type);
+  }, [selectedEventData, selectedProduct]);
 
+  const getCurrentEventData = () => {
+    if (!selectedEventData?.data || !selectedProduct) return null;
     return (
-            <div className="event-proprties-wrapper">
-                {currentEventData &&
-                    <>
-                        <div className="header">
-                            <div className="header-value">{selectedEventData?.data.modelName}</div>
-                        </div>
-                        {assetType === 'conveyor' && <ConveyorMechanics />}
-                        {assetType === 'vehicle' && <VehicleMechanics />}
-                        {assetType === 'roboticArm' && <RoboticArmMechanics />}
-                        {assetType === 'machine' && <MachineMechanics />}
-                        {assetType === 'storageUnit' && <StorageMechanics />}
-                    </>
-                }
-            </div>
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData.data.modelUuid
+      ) ?? null
     );
+  };
+
+  const determineAssetType = (event: EventsSchema | null) => {
+    if (!event) return null;
+
+    switch (event.type) {
+      case "transfer":
+        return "conveyor";
+      case "vehicle":
+        return "vehicle";
+      case "roboticArm":
+        return "roboticArm";
+      case "machine":
+        return "machine";
+      case "storageUnit":
+        return "storageUnit";
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="event-proprties-wrapper">
+      {currentEventData && (
+        <>
+          <div className="header">
+            <div className="header-value">
+              {selectedEventData?.data.modelName}
+            </div>
+          </div>
+          {assetType === "conveyor" && <ConveyorMechanics />}
+          {assetType === "vehicle" && <VehicleMechanics />}
+          {assetType === "roboticArm" && <RoboticArmMechanics />}
+          {assetType === "machine" && <MachineMechanics />}
+          {assetType === "storageUnit" && <StorageMechanics />}
+        </>
+      )}
+    </div>
+  );
 };
 
-export default EventProperties;
+export default EventProperties;