From 6c6b115f5820a4860ad09575fe2c442e78e26797 Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Wed, 13 Sep 2023 14:48:26 -0700
Subject: [PATCH] move yjs observers to provider.once("synced")

---
 packages/ui/src/components/Canvas.tsx | 25 -------------------------
 packages/ui/src/lib/store/yjsSlice.ts | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/components/Canvas.tsx b/packages/ui/src/components/Canvas.tsx
index ae2ee42b..2547886c 100644
--- a/packages/ui/src/components/Canvas.tsx
+++ b/packages/ui/src/components/Canvas.tsx
@@ -324,36 +324,11 @@ export function useCopyPaste() {
   }, [handleCopy, handlePaste, rfDomNode]);
 }
 
-function useYjsObserver() {
-  const store = useContext(RepoContext);
-  if (!store) throw new Error("Missing BearContext.Provider in the tree");
-  const nodesMap = useStore(store, (state) => state.getNodesMap());
-  const updateView = useStore(store, (state) => state.updateView);
-  const resetSelection = useStore(store, (state) => state.resetSelection);
-
-  useEffect(() => {
-    const observer = (YMapEvent: Y.YEvent<any>, transaction: Y.Transaction) => {
-      if (transaction.local) return;
-      updateView();
-    };
-
-    // FIXME need to observe edgesMap as well
-    // FIXME need to observe resultMap as well
-    nodesMap.observe(observer);
-
-    return () => {
-      nodesMap.unobserve(observer);
-      resetSelection();
-    };
-  }, [nodesMap, resetSelection, updateView]);
-}
-
 /**
  * The ReactFlow instance keeps re-rendering when nodes change. Thus, we're
  * using this wrapper component to load the useXXX functions only once.
  */
 function CanvasImplWrap() {
-  useYjsObserver();
   useCopyPaste();
   useJump();
   return (
diff --git a/packages/ui/src/lib/store/yjsSlice.ts b/packages/ui/src/lib/store/yjsSlice.ts
index f38a29fb..a3f734e3 100644
--- a/packages/ui/src/lib/store/yjsSlice.ts
+++ b/packages/ui/src/lib/store/yjsSlice.ts
@@ -182,6 +182,21 @@ export const createYjsSlice: StateCreator<MyState, [], [], YjsSlice> = (
           });
         }
       );
+      const nodesMap = get().getNodesMap();
+      // FIXME do I need to unobserve it when disconnecting?
+      nodesMap.observe(
+        (YMapEvent: Y.YEvent<any>, transaction: Y.Transaction) => {
+          if (transaction.local) return;
+          get().updateView();
+        }
+      );
+      const edgesMap = get().getEdgesMap();
+      edgesMap.observe(
+        (YMapEvent: Y.YEvent<any>, transaction: Y.Transaction) => {
+          if (transaction.local) return;
+          get().updateView();
+        }
+      );
       // Set active runtime to the first one.
       const runtimeMap = get().getRuntimeMap();
       if (runtimeMap.size > 0) {