Dwinzo_dev/app/src/modules/visualization/realTimeVizSocket.dev.tsx

import { useEffect } from "react";
import { useSocketStore } from "../../store/store";
import { useSelectedZoneStore } from "../../store/useZoneStore";
import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
import useTemplateStore from "../../store/useTemplateStore";

export default function SocketRealTimeViz() {
    const { visualizationSocket } = useSocketStore();
    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
    const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
    const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
    const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
    const { addWidget } = useZoneWidgetStore()
    const { templates, removeTemplate } = useTemplateStore();
    const { setTemplates } = useTemplateStore();

    useEffect(() => {
        const email = localStorage.getItem("email") || "";
        const organization = email?.split("@")[1]?.split(".")[0];
        if (visualizationSocket) {
            //add panel response
            visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
                console.log('addPanel: ', addPanel);
                if (addPanel.success) {
                    let addPanelData = addPanel.data.data
                    setSelectedZone(addPanelData)
                }
            })
            //delete panel response
            visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
                console.log('deletePanel: ', deletePanel);
                if (deletePanel.success) {
                    let deletePanelData = deletePanel.data.data
                    setSelectedZone(deletePanelData)
                }
            })
            // add 2dWidget response
            visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
                console.log('add2dWidget: ', add2dWidget);

                if (add2dWidget.success && add2dWidget.data) {
                    setSelectedZone((prev) => {
                        const isWidgetAlreadyAdded = prev.widgets.some(
                            (widget) => widget.id === add2dWidget.data.widgetData.id
                        );
                        if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
                        return {
                            ...prev,
                            zoneId: add2dWidget.data.zoneId,
                            zoneName: add2dWidget.data.zoneName,
                            widgets: [...prev.widgets, add2dWidget.data.widgetData],  // Append new widget
                        };
                    });
                }
            });
            //delete 2D Widget response
            visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
                console.log('deleteWidget: ', deleteWidget);

                if (deleteWidget?.success && deleteWidget.data) {
                    setSelectedZone((prevZone: any) => ({
                        ...prevZone,
                        zoneId: deleteWidget.data.zoneId,
                        zoneName: deleteWidget.data.zoneName,
                        widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
                    }));
                }
            });
            //add Floating Widget response
            visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
                console.log('addFloatingWidget: ', addFloatingWidget);

                if (addFloatingWidget.success) {
                    if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
                        const state = useDroppedObjectsStore.getState();
                        const zone = state.zones[addFloatingWidget.data.zoneName];
                        if (!zone) {
                            state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
                        }
                        const existingObjects = zone ? zone.objects : [];
                        const newWidget = addFloatingWidget.data.widget;
                        // ✅ Check if the widget ID already exists before adding
                        const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
                        if (isAlreadyAdded) {

                            return; // Don't add the widget if it already exists
                        }
                        // Add widget only if it doesn't exist
                        state.addObject(addFloatingWidget.data.zoneName, newWidget);
                    }
                    if (addFloatingWidget.message === "Widget updated successfully") {
                        updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
                    }
                }
            });
            //duplicate Floating Widget response
            visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
                console.log('duplicateFloatingWidget: ', duplicateFloatingWidget);

                if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
                    useDroppedObjectsStore.setState((state) => {
                        const zone = state.zones[duplicateFloatingWidget.data.zoneName];
                        if (!zone) return state; // Zone doesn't exist, return state as is
                        const existingObjects = zone.objects;
                        const newWidget = duplicateFloatingWidget.data.widget;
                        // ✅ Check if the object with the same ID already exists
                        const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
                        if (isAlreadyAdded) {

                            return state; // Don't update state if it's already there
                        }
                        return {
                            zones: {
                                ...state.zones,
                                [duplicateFloatingWidget.data.zoneName]: {
                                    ...zone,
                                    objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
                                },
                            },
                        };
                    });
                }
            });
            //delete Floating Widget response
            visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
                console.log('deleteFloatingWidget: ', deleteFloatingWidget);

                if (deleteFloatingWidget.success) {
                    deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
                }
            });
            //add 3D Widget response
            visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
                console.log('add3DWidget: ', add3DWidget);

                if (add3DWidget.success) {
                    if (add3DWidget.message === "Widget created successfully") {
                        addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
                    }
                }
            });
            // add Template response
            visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
                console.log('addingTemplate: ', addingTemplate);

                if (addingTemplate.success) {
                    if (addingTemplate.message === "Template saved successfully") {
                        setTemplates(addingTemplate.data);
                    }
                }
            });
            //load Template response
            visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
                console.log('loadTemplate: ', loadTemplate);

                if (loadTemplate.success) {
                    if (loadTemplate.message === "Template placed in Zone") {
                        let template = loadTemplate.data.template
                        setSelectedZone({
                            panelOrder: template.panelOrder,
                            activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
                            widgets: template.widgets,
                        });
                        useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);

                        if (Array.isArray(template.floatingWidget)) {
                            template.floatingWidget.forEach((val: any) => {
                                useDroppedObjectsStore.getState().addObject(template.zoneName, val);
                            });
                        }
                    }

                }
            });
            //delete Template response
            visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
                console.log('deleteTemplate: ', deleteTemplate);

                if (deleteTemplate.success) {
                    if (deleteTemplate.message === 'Template deleted successfully') {
                        removeTemplate(deleteTemplate.data);
                    }


                }
            });
        }
    }, [visualizationSocket])

    return (
        <></>
    )
}