From 311d81bc71af884db30c468ff2ba5d9af397a87b Mon Sep 17 00:00:00 2001
From: Philip Okugbe <phil@docmost.com>
Date: Thu, 28 Nov 2024 19:39:38 +0000
Subject: [PATCH] fix wrong tree sync bug (#514)

---
 .../page/tree/components/space-tree.tsx       |  2 +-
 .../src/features/websocket/use-tree-socket.ts | 40 ++++++++++---------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/apps/client/src/features/page/tree/components/space-tree.tsx b/apps/client/src/features/page/tree/components/space-tree.tsx
index 3863e9e7..47d00481 100644
--- a/apps/client/src/features/page/tree/components/space-tree.tsx
+++ b/apps/client/src/features/page/tree/components/space-tree.tsx
@@ -191,7 +191,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     <div ref={mergedRef} className={classes.treeContainer}>
       {rootElement.current && (
         <Tree
-          data={data}
+          data={data.filter((node) => node?.spaceId === spaceId)}
           disableDrag={readOnly}
           disableDrop={readOnly}
           disableEdit={readOnly}
diff --git a/apps/client/src/features/websocket/use-tree-socket.ts b/apps/client/src/features/websocket/use-tree-socket.ts
index 3c759a99..bb7d9c3d 100644
--- a/apps/client/src/features/websocket/use-tree-socket.ts
+++ b/apps/client/src/features/websocket/use-tree-socket.ts
@@ -46,30 +46,34 @@ export const useTreeSocket = () => {
           break;
         case 'moveTreeNode':
           // move node
-          treeApi.move({
-            id: event.payload.id,
-            parentId: event.payload.parentId,
-            index: event.payload.index
-          });
+          if (treeApi.find(event.payload.id)) {
+            treeApi.move({
+              id: event.payload.id,
+              parentId: event.payload.parentId,
+              index: event.payload.index
+            });
 
-          // update node position
-          treeApi.update({
-            id: event.payload.id,
-            changes: {
-              position: event.payload.position,
-            }
-          });
+            // update node position
+            treeApi.update({
+              id: event.payload.id,
+              changes: {
+                position: event.payload.position,
+              }
+            });
 
-          setTreeData(treeApi.data);
+            setTreeData(treeApi.data);
+          }
 
           break;
         case "deleteTreeNode":
-          treeApi.drop({ id: event.payload.node.id });
-          setTreeData(treeApi.data);
+          if (treeApi.find(event.payload.node.id)){
+            treeApi.drop({ id: event.payload.node.id });
+            setTreeData(treeApi.data);
 
-          queryClient.invalidateQueries({
-            queryKey: ['pages', event.payload.node.slugId].filter(Boolean),
-          });
+            queryClient.invalidateQueries({
+              queryKey: ['pages', event.payload.node.slugId].filter(Boolean),
+            });
+          }
           break;
       }
     });