threads in sidebar

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -1,13 +1,22 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
 import useModuleStore, { useSubModuleStore } from "../../../store/ui/useModuleStore";
-import { AnalysisIcon, FilePackageIcon, MechanicsIcon, PropertiesIcon, SimulationIcon } from "../../icons/SimulationIcons";
+import {
+    AnalysisIcon,
+    FilePackageIcon,
+    MechanicsIcon,
+    PropertiesIcon,
+    SimulationIcon,
+} from "../../icons/SimulationIcons";
 import { useToggleStore } from "../../../store/ui/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import { useIsComparing, useToolMode } from "../../../store/builder/store";
+import { useActiveTool, useIsComparing, useToolMode } from "../../../store/builder/store";
-import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import {
+    useSelectedEventData,
+    useSelectedEventSphere,
+} from "../../../store/simulation/useSimulationStore";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 import GlobalProperties from "./properties/GlobalProperties";
 import AssetProperties from "./properties/AssetProperties";
@@ -25,6 +34,7 @@ import SelectedZoneProperties from "./properties/SelectedZoneProperties";
 
 import ResourceManagement from "./resourceManagement/ResourceManagement";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
+import ThreadDetails from "./properties/eventProperties/components/ThreadDetails";
 
 type DisplayComponent =
     | "versionHistory"
@@ -44,20 +54,26 @@ type DisplayComponent =
     | "analysis"
     | "visualization"
     | "resourceManagement"
+    | "threadDetails"
     | "none";
 
 const SideBarRight: React.FC = () => {
     const { activeModule } = useModuleStore();
+    const { activeTool } = useActiveTool();
+    console.log("activeTool: ", activeTool);
     const { toggleUIRight } = useToggleStore();
     const { toolMode } = useToolMode();
     const { subModule, setSubModule } = useSubModuleStore();
-    const { selectedWall, selectedFloor, selectedAisle, selectedZone, selectedDecal } = useBuilderStore();
+    const { selectedWall, selectedFloor, selectedAisle, selectedZone, selectedDecal } =
+        useBuilderStore();
     const { selectedEventData } = useSelectedEventData();
     const { selectedEventSphere } = useSelectedEventSphere();
-    const { versionStore, assetStore } = useSceneContext();
+    const { versionStore, assetStore, threadStore } = useSceneContext();
     const { selectedAssets } = assetStore();
     const { viewVersionHistory, setVersionHistoryVisible } = versionStore();
     const { isComparing } = useIsComparing();
+    const { threads } = threadStore();
+    console.log("threads: ", threads);
 
     const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
 
@@ -104,7 +120,10 @@ const SideBarRight: React.FC = () => {
             }
         }
 
-        if (activeModule === "simulation" || activeModule === "builder") {
+        if (
+            activeModule === "simulation" ||
+            (activeModule === "builder" && activeTool !== "comment")
+        ) {
             if (subModule === "resourceManagement") {
                 setDisplayComponent("resourceManagement");
                 return;
@@ -116,31 +135,81 @@ const SideBarRight: React.FC = () => {
                 setDisplayComponent("assetProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedDecal && !selectedZone && selectedWall) {
+            if (
+                selectedAssets.length !== 1 &&
+                !selectedFloor &&
+                !selectedAisle &&
+                !selectedDecal &&
+                !selectedZone &&
+                selectedWall
+            ) {
                 setDisplayComponent("selectedWallProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedDecal && !selectedZone && selectedFloor) {
+            if (
+                selectedAssets.length !== 1 &&
+                !selectedWall &&
+                !selectedAisle &&
+                !selectedDecal &&
+                !selectedZone &&
+                selectedFloor
+            ) {
                 setDisplayComponent("selectedFloorProperties");
                 return;
             }
-            if (viewVersionHistory && selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal && !selectedZone) {
+            if (
+                viewVersionHistory &&
+                selectedAssets.length !== 1 &&
+                !selectedWall &&
+                !selectedAisle &&
+                !selectedFloor &&
+                !selectedDecal &&
+                !selectedZone
+            ) {
                 setDisplayComponent("versionHistory");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedWall && !selectedZone && selectedDecal) {
+            if (
+                selectedAssets.length !== 1 &&
+                !selectedFloor &&
+                !selectedAisle &&
+                !selectedWall &&
+                !selectedZone &&
+                selectedDecal
+            ) {
                 setDisplayComponent("selectedDecalProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedZone && selectedAisle) {
+            if (
+                selectedAssets.length !== 1 &&
+                !selectedFloor &&
+                !selectedWall &&
+                !selectedDecal &&
+                !selectedZone &&
+                selectedAisle
+            ) {
                 setDisplayComponent("selectedAisleProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle && selectedZone) {
+            if (
+                selectedAssets.length !== 1 &&
+                !selectedFloor &&
+                !selectedWall &&
+                !selectedDecal &&
+                !selectedAisle &&
+                selectedZone
+            ) {
                 setDisplayComponent("selectedZoneProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle && !selectedZone) {
+            if (
+                selectedAssets.length !== 1 &&
+                !selectedFloor &&
+                !selectedWall &&
+                !selectedDecal &&
+                !selectedAisle &&
+                !selectedZone
+            ) {
                 if (toolMode === "Aisle") {
                     setDisplayComponent("aisleProperties");
                     return;
@@ -161,10 +230,26 @@ const SideBarRight: React.FC = () => {
                 setDisplayComponent("globalProperties");
                 return;
             }
+            if (activeModule === "builder" && activeTool === "comment") {
+                setDisplayComponent("threadDetails");
+            }
         }
 
         setDisplayComponent("none");
-    }, [viewVersionHistory, activeModule, subModule, isComparing, selectedAssets, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal, selectedZone]);
+    }, [
+        viewVersionHistory,
+        activeModule,
+        subModule,
+        isComparing,
+        selectedAssets,
+        selectedWall,
+        selectedFloor,
+        selectedAisle,
+        toolMode,
+        selectedDecal,
+        selectedZone,
+        activeTool,
+    ]);
 
     const renderComponent = () => {
         switch (displayComponent) {
@@ -202,13 +287,20 @@ const SideBarRight: React.FC = () => {
                 return <Visualization />;
             case "resourceManagement":
                 return <ResourceManagement />;
+            case "threadDetails":
+                return <ThreadDetails />;
             default:
                 return null;
         }
     };
 
     return (
-        <div className={`sidebar-right-wrapper ${toggleUIRight && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`} onPointerDown={(e) => e.stopPropagation()}>
+        <div
+            className={`sidebar-right-wrapper ${
+                toggleUIRight && (!isComparing || activeModule !== "simulation") ? "open" : "closed"
+            }`}
+            onPointerDown={(e) => e.stopPropagation()}
+        >
             <Header />
             {toggleUIRight && (
                 <>
@@ -218,7 +310,9 @@ const SideBarRight: React.FC = () => {
                                 <>
                                     <button
                                         id="sidebar-action-list-properties"
-                                        className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
+                                        className={`sidebar-action-list ${
+                                            subModule === "properties" ? "active" : ""
+                                        }`}
                                         onClick={() => {
                                             setSubModule("properties");
                                             setVersionHistoryVisible(false);
@@ -234,7 +328,9 @@ const SideBarRight: React.FC = () => {
                                 <>
                                     <button
                                         id="sidebar-action-list-simulation"
-                                        className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""}`}
+                                        className={`sidebar-action-list ${
+                                            subModule === "simulations" ? "active" : ""
+                                        }`}
                                         onClick={() => {
                                             setSubModule("simulations");
                                             setVersionHistoryVisible(false);
@@ -245,7 +341,9 @@ const SideBarRight: React.FC = () => {
                                     </button>
                                     <button
                                         id="sidebar-action-list-mechanics"
-                                        className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""}`}
+                                        className={`sidebar-action-list ${
+                                            subModule === "mechanics" ? "active" : ""
+                                        }`}
                                         onClick={() => {
                                             setSubModule("mechanics");
                                             setVersionHistoryVisible(false);
@@ -256,7 +354,9 @@ const SideBarRight: React.FC = () => {
                                     </button>
                                     <button
                                         id="sidebar-action-list-analysis"
-                                        className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""}`}
+                                        className={`sidebar-action-list ${
+                                            subModule === "analysis" ? "active" : ""
+                                        }`}
                                         onClick={() => {
                                             setSubModule("analysis");
                                             setVersionHistoryVisible(false);
@@ -271,18 +371,26 @@ const SideBarRight: React.FC = () => {
                             {(activeModule === "builder" || activeModule === "simulation") && (
                                 <button
                                     id="sidebar-action-list-properties"
-                                    className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""}`}
+                                    className={`sidebar-action-list ${
+                                        subModule === "resourceManagement" ? "active" : ""
+                                    }`}
                                     onClick={() => {
                                         setSubModule("resourceManagement");
                                         setVersionHistoryVisible(false);
                                     }}
                                 >
                                     <div className="tooltip">Resource Management</div>
-                                    <FilePackageIcon isActive={subModule === "resourceManagement"} />
+                                    <FilePackageIcon
+                                        isActive={subModule === "resourceManagement"}
+                                    />
                                 </button>
                             )}
                         </div>
                     )}
+                    {/* {activeModule === "builder" &&
+                        activeTool === "comment" &&
+                        threads &&
+                        threads.map((val) => <p>{val.threadTitle}</p>)} */}
 
                     {displayComponent !== "none" && (
                         <div className="sidebar-right-container">

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+const ThreadDetails = () => {
+    return <div></div>;
+};
+
+export default ThreadDetails;

app/src/modules/collaboration/socket/builderResponses.tsx

@@ -546,6 +546,8 @@ function BuilderResponses() {
     }, [builderSocket, selectedZone]);
     //#endregion
 
+
+    
     return null;
 }
 

app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx

@@ -14,7 +14,8 @@ interface ThreadSocketProps {
 
 const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSocketProps) => {
     const { threadSocket } = useSocketStore();
-    const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } = useSelectedComment();
+    const { selectedComment, setSelectedComment, setCommentPositionState, commentPositionState } =
+        useSelectedComment();
     const { threadStore } = useSceneContext();
     const { threads, removeReply, addThread, addReply, updateThread, updateReply } = threadStore();
     const { userId } = getUserData();
@@ -73,7 +74,9 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
                 setMessages((prev) =>
                     prev.map((message) => {
                         // 👈 log each message
-                        return message.replyId === data.data?._id ? { ...message, comment: data.data?.comment } : message;
+                        return message.replyId === data.data?._id
+                            ? { ...message, comment: data.data?.comment }
+                            : message;
                     })
                 );
             }
@@ -143,7 +146,17 @@ const ThreadSocketResponsesDev = ({ setMessages, modeRef, messages }: ThreadSock
             threadSocket.off("v1-thread:response:delete", handleDeleteThread);
             threadSocket.off("v1-thread:response:updateTitle", handleEditThread);
         };
-    }, [threadSocket, selectedComment, commentPositionState, userId, setSelectedComment, setCommentPositionState, threads, modeRef.current, messages]);
+    }, [
+        threadSocket,
+        selectedComment,
+        commentPositionState,
+        userId,
+        setSelectedComment,
+        setCommentPositionState,
+        threads,
+        modeRef.current,
+        messages,
+    ]);
 
     return null;
 };

app/src/services/factoryBuilder/collab/comments/getAllThreads.ts

@@ -25,6 +25,7 @@ export const getAllThreads = async (projectId: string, versionId: string) => {
         }
 
         const result = await response.json();
+        console.log('result: ', result);
 
         return result;
     } catch {