feat: notifications (#1947)

* feat: notifications
* feat: watchers

* improvements

* handle page move for watchers

* make watchers non-blocking

* more

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -106,10 +106,16 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     }
   }, sizeRef);
   const [isDataLoaded, setIsDataLoaded] = useState(false);
+  const spaceIdRef = useRef(spaceId);
+  spaceIdRef.current = spaceId;
   const { data: currentPage } = usePageQuery({
     pageId: extractPageSlugId(pageSlug),
   });
 
+  useEffect(() => {
+    setIsDataLoaded(false);
+  }, [spaceId]);
+
   useEffect(() => {
     if (hasNextPage && !isFetching) {
       fetchNextPage();
@@ -130,12 +136,15 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
         }
 
         // same space; append only missing roots
+        setIsDataLoaded(true);
         return mergeRootTrees(prev, treeData);
       });
     }
-  }, [pagesData, hasNextPage]);
+  }, [pagesData, hasNextPage, spaceId]);
 
   useEffect(() => {
+    const effectSpaceId = spaceId;
+
     const fetchData = async () => {
       if (isDataLoaded && currentPage) {
         // check if pageId node is present in the tree
@@ -149,6 +158,8 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
         if (!currentPage.id) return;
         const ancestors = await getPageBreadcrumbs(currentPage.id);
 
+        if (spaceIdRef.current !== effectSpaceId) return;
+
         if (ancestors && ancestors?.length > 1) {
           let flatTreeItems = [...buildTree(ancestors)];
 
@@ -176,22 +187,22 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
 
           // Wait for all fetch operations to complete
           Promise.all(fetchPromises).then(() => {
+            if (spaceIdRef.current !== effectSpaceId) return;
+
             // build tree with children
             const ancestorsTree = buildTreeWithChildren(flatTreeItems);
             // child of root page we're attaching the built ancestors to
             const rootChild = ancestorsTree[0];
 
-            // attach built ancestors to tree
-            const updatedTree = appendNodeChildren(
-              data,
-              rootChild.id,
-              rootChild.children,
+            // attach built ancestors to tree using functional updater
+            // to avoid stale closure overwriting the current tree data
+            setData((currentData) =>
+              appendNodeChildren(currentData, rootChild.id, rootChild.children),
             );
-            setData(updatedTree);
 
             setTimeout(() => {
               // focus on node and open all parents
-              treeApiRef.current.select(currentPage.id);
+              treeApiRef.current?.select(currentPage.id);
             }, 100);
           });
         }