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;

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

@@ -2,29 +2,33 @@ import React from "react";
 import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 
 interface DelayActionProps {
-    value: string;
-    defaultValue: string;
-    min: number;
-    max: number;
-    onChange: (value: string) => void;
+  value: string;
+  defaultValue: string;
+  min: number;
+  max: number;
+  onChange: (value: string) => void;
 }
 
-const DelayAction: React.FC<DelayActionProps> = ({ value, defaultValue, min, max, onChange }) => {
-    return (
-        <>
-            <InputWithDropDown
-                label="Delay"
-                value={value}
-                min={min}
-                step={0.1}
-                defaultValue={defaultValue}
-                max={max}
-                activeOption="s"
-                onClick={() => { }}
-                onChange={onChange}
-            />
-        </>
-    );
+const DelayAction: React.FC<DelayActionProps> = ({
+  value,
+  defaultValue,
+  min,
+  max,
+  onChange,
+}) => {
+  return (
+    <InputWithDropDown
+      label="Delay"
+      value={value}
+      min={min}
+      step={0.1}
+      defaultValue={defaultValue}
+      max={max}
+      activeOption="s"
+      onClick={() => {}}
+      onChange={onChange}
+    />
+  );
 };
 
 export default DelayAction;

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

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

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

@@ -1,41 +1,72 @@
 import React, { useState } from "react";
-import LabledDropdown from "./LabledDropdown";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
+import LabledDropdown from "./LabledDropdown";
 
-const PreviewSelectionWithUpload: React.FC = () => {
-  const [showPreview, setSetshowPreview] = useState(false);
+interface PreviewSelectionWithUploadProps {
+  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
-        className="input-header-container"
-        onClick={() => setSetshowPreview(!showPreview)}
-      >
-        <div className="input-header">Preview</div>
-        <div
-          className="arrow-container"
-          style={{ rotate: showPreview ? "0deg" : "90deg" }}
-        >
-          <ArrowIcon />
-        </div>
-      </div>
-      {showPreview && (
-        <div className="canvas-wrapper">
-          <div className="canvas-container"></div>
+      {preview && (
+        <>
+          <button
+            className="input-header-container"
+            onClick={() => setShowPreview(!showPreview)}
+          >
+            <div className="input-header">Preview</div>
+            <div
+              className="arrow-container"
+              style={{ rotate: showPreview ? "0deg" : "90deg" }}
+            >
+              <ArrowIcon />
+            </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>
+            <input
+              type="file"
+              accept=".glb, .gltf"
+              id="simulation-product-upload"
+            />
+            <label
+              className="upload-button"
+              htmlFor="simulation-product-upload"
+            >
+              Upload here
+            </label>
+          </div>
         </div>
       )}
-      <div className="asset-selection-container">
-        <div className="upload-custom-asset-button">
-          <div className="title">Upload Product</div>
-          <input
-            type="file"
-            accept=".glb, .gltf"
-            id="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>
   );
 };