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

app/src/components/layout/sidebarRight/properties/eventProperties/actions/DelayAction.tsx

@@ -9,9 +9,14 @@ interface DelayActionProps {
   onChange: (value: string) => void;
 }
 
-const DelayAction: React.FC<DelayActionProps> = ({ value, defaultValue, min, max, onChange }) => {
+const DelayAction: React.FC<DelayActionProps> = ({
+  value,
+  defaultValue,
+  min,
+  max,
+  onChange,
+}) => {
   return (
-        <>
     <InputWithDropDown
       label="Delay"
       value={value}
@@ -20,10 +25,9 @@ const DelayAction: React.FC<DelayActionProps> = ({ value, defaultValue, min, max
       defaultValue={defaultValue}
       max={max}
       activeOption="s"
-                onClick={() => { }}
+      onClick={() => {}}
       onChange={onChange}
     />
-        </>
   );
 };
 

app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
-import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 
 interface SwapActionProps {
   onSelect: (option: string) => void;
@@ -8,19 +7,18 @@ interface SwapActionProps {
   options: string[];
 }
 
-const SwapAction: React.FC<SwapActionProps> = ({ onSelect, defaultOption, options }) => {
+const SwapAction: React.FC<SwapActionProps> = ({
-
+  onSelect,
+  defaultOption,
+  options,
+}) => {
   return (
-        <>
+      <PreviewSelectionWithUpload
-            {/* <PreviewSelectionWithUpload /> */}
-
-            <LabledDropdown
         label="Presets"
         defaultOption={defaultOption}
         options={options}
         onSelect={onSelect}
       />
-        </>
   );
 };
 

app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx

@@ -1,14 +1,32 @@
 import React, { useState } from "react";
-import LabledDropdown from "./LabledDropdown";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import LabledDropdown from "./LabledDropdown";
 
-const PreviewSelectionWithUpload: React.FC = () => {
+interface PreviewSelectionWithUploadProps {
-  const [showPreview, setSetshowPreview] = useState(false);
+  preview?: boolean;
+  upload?: boolean;
+  label?: string;
+  onSelect: (option: string) => void;
+  defaultOption: string;
+  options: string[];
+}
+
+const PreviewSelectionWithUpload: React.FC<PreviewSelectionWithUploadProps> = ({
+  preview = false,
+  upload = false,
+  onSelect,
+  label,
+  defaultOption,
+  options,
+}) => {
+  const [showPreview, setShowPreview] = useState(false);
   return (
     <div className="preview-selection-with-upload-wrapper">
-      <div
+      {preview && (
+        <>
+          <button
             className="input-header-container"
-        onClick={() => setSetshowPreview(!showPreview)}
+            onClick={() => setShowPreview(!showPreview)}
           >
             <div className="input-header">Preview</div>
             <div
@@ -17,12 +35,15 @@ const PreviewSelectionWithUpload: React.FC = () => {
             >
               <ArrowIcon />
             </div>
-      </div>
+          </button>
           {showPreview && (
             <div className="canvas-wrapper">
               <div className="canvas-container"></div>
             </div>
           )}
+        </>
+      )}
+      {upload && (
         <div className="asset-selection-container">
           <div className="upload-custom-asset-button">
             <div className="title">Upload Product</div>
@@ -31,11 +52,21 @@ const PreviewSelectionWithUpload: React.FC = () => {
               accept=".glb, .gltf"
               id="simulation-product-upload"
             />
-          <label className="upload-button" htmlFor="simulation-product-upload">
+            <label
+              className="upload-button"
+              htmlFor="simulation-product-upload"
+            >
               Upload here
             </label>
           </div>
         </div>
+      )}
+      <LabledDropdown
+        label={label}
+        defaultOption={defaultOption}
+        options={options}
+        onSelect={onSelect}
+      />
     </div>
   );
 };