Refactor action updates to include productId in updateAction calls across mechanics components; enhance event handling in product store and trigger management. Add clear functions for various stores to reset state. Update action and trigger management to prevent duplicates and ensure integrity. Adjust initial load actions to use consistent naming conventions.

app/src/modules/simulation/vehicle/vehicles.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import VehicleInstances from "./instances/vehicleInstances";
 import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
-import { useFloorItems } from "../../../store/store";
 import { useSelectedEventData, useSelectedEventSphere, useSelectedProduct } from "../../../store/simulation/useSimulationStore";
 import VehicleUI from "../ui/vehicle/vehicleUI";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
@@ -10,49 +9,38 @@ import { useProductStore } from "../../../store/simulation/useProductStore";
 function Vehicles() {
     const { products, getProductById } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
-    const { vehicles, addVehicle, removeVehicle } = useVehicleStore();
+    const { vehicles, addVehicle, clearvehicles } = useVehicleStore();
     const { selectedEventSphere } = useSelectedEventSphere();
     const { selectedEventData } = useSelectedEventData();
-    const { floorItems } = useFloorItems();
     const { isPlaying } = usePlayButtonStore();
 
     useEffect(() => {
         if (selectedProduct.productId) {
             const product = getProductById(selectedProduct.productId);
             if (product) {
+                clearvehicles();
                 product.eventDatas.forEach(events => {
                     if (events.type === 'vehicle') {
-                        removeVehicle(events.modelUuid);
                         addVehicle(selectedProduct.productId, events);
                     }
                 });
             }
         }
-    }, [selectedProduct]);
-
-    // useEffect(() => {
-    //     vehicles.forEach(vehicle => {
-    //         const product = getProductById(vehicle.productId);
-    //         if (product) {
-    //             const eventData = product.eventDatas.find(event => event.modelUuid === vehicle.modelUuid);
-    //             if (eventData) {
-    //                 vehicle.eventData = eventData;
-    //             }
-    //         }
-    //     });
-    // }, [vehicles, products]);
+    }, [selectedProduct, products]);
 
     useEffect(() => {
-
         // console.log('vehicles: ', vehicles);
     }, [vehicles])
 
     return (
         <>
+
             <VehicleInstances />
+
             {selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying &&
                 < VehicleUI />
             }
+
         </>
     );
 }