diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index e0d5904..b7607f8 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/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 { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore"; +import { useActiveTool, useIsComparing, useToolMode } from "../../../store/builder/store"; +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("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 ; case "resourceManagement": return ; + case "threadDetails": + return ; default: return null; } }; return ( -
e.stopPropagation()}> +
e.stopPropagation()} + >
{toggleUIRight && ( <> @@ -218,7 +310,9 @@ const SideBarRight: React.FC = () => { <> )}
)} + {/* {activeModule === "builder" && + activeTool === "comment" && + threads && + threads.map((val) =>

{val.threadTitle}

)} */} {displayComponent !== "none" && (
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ThreadDetails.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ThreadDetails.tsx new file mode 100644 index 0000000..4189ab0 --- /dev/null +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ThreadDetails.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +const ThreadDetails = () => { + return
; +}; + +export default ThreadDetails; diff --git a/app/src/modules/collaboration/socket/builderResponses.tsx b/app/src/modules/collaboration/socket/builderResponses.tsx index 71acff3..6601528 100644 --- a/app/src/modules/collaboration/socket/builderResponses.tsx +++ b/app/src/modules/collaboration/socket/builderResponses.tsx @@ -546,6 +546,8 @@ function BuilderResponses() { }, [builderSocket, selectedZone]); //#endregion + + return null; } diff --git a/app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx b/app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx index abdb38f..d2c547a 100644 --- a/app/src/modules/collaboration/socket/threadSocketResponses.dev.tsx +++ b/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; }; diff --git a/app/src/services/factoryBuilder/collab/comments/getAllThreads.ts b/app/src/services/factoryBuilder/collab/comments/getAllThreads.ts index 6222cf2..a22cfec 100644 --- a/app/src/services/factoryBuilder/collab/comments/getAllThreads.ts +++ b/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 {