Fix (remaining awareness): add clean up function

ui/src/components/MyMonaco.tsx

@@ -365,19 +365,30 @@ export function MyMonaco({
       awareness
     );
 
-    // FIXME: make sure the provider.wsconnected is true or it won't display any content.
-
-    provider?.once("synced", () => {
-      if (!ytext._start) {
+    const init = () => {
+      if (!ytext._start && ytext.length === 0) {
         ytext.insert(0, value);
       }
-    });
+    };
+
+    if (!provider || !provider.wsconnected) {
+      // TODO: consider offline situation later
+      console.log("editor", provider?.wsconnected, provider, editor.getModel());
+      // editor.getModel().setValue(value);
+      return;
+    } else if (provider.synced) {
+      init();
+    } else {
+      provider.once("synced", init);
+    }
+
+    // FIXME: make sure the provider.wsconnected is true or it won't display any content.
   }
 
   return (
     <MonacoEditor
       language={lang}
-      value={value}
+      // value={value}
       // theme="vs-dark"
       options={{
         selectOnLineNumbers: true,

ui/src/lib/store.tsx

@@ -80,6 +80,7 @@ const initialState = {
   },
   queueProcessing: false,
   ydoc: new Doc(),
+  provider: null,
   socket: null,
   socketIntervalId: null,
   // keep different seletced info on each user themselves
@@ -183,6 +184,7 @@ export interface RepoSlice {
   addClient: (clientId: any, name, color) => void;
   deleteClient: (clientId: any) => void;
   flipShowLineNumbers: () => void;
+  disconnect: () => void;
 }
 
 type BearState = RepoSlice & RuntimeSlice;
@@ -195,19 +197,36 @@ const createRepoSlice: StateCreator<
 > = (set, get) => ({
   ...initialState,
   // FIXME should reset to inital state, not completely empty.
-  resetState: () => set(initialState),
+  resetState: () =>
+    // FIXME before rest a state, first
+    // 1. destroy/disconnect the provider, or it keep the awareness information of the exited page
+    // 2. set state.provider = null, or it can't be assigned a new provider.
+    set((state) => {
+      console.log("user reset state provider", state.provider);
+      if (state.provider) {
+        state.provider.destroy();
+        state.ydoc.destroy();
+        state.provider = null;
+      }
+      return initialState;
+    }),
   setRepo: (repoId: string) =>
     set(
       produce((state: BearState) => {
         state.repoId = repoId;
-        if (!state.provider) {
+        state.ydoc = new Doc();
+        // console.log("user reset state setrepo", repoId);
+        if (state.provider) {
+          console.log("emmm, provider exists", state.provider);
+        } else {
           console.log("connecting yjs socket ..");
           state.provider = new WebsocketProvider(
             serverURL,
             state.repoId,
             state.ydoc
           );
           // max retry time: 10s
+          state.provider.connect();
           state.provider.maxBackoffTime = 10000;
         }
       })
@@ -720,6 +739,19 @@ const createRepoSlice: StateCreator<
     ),
   flipShowLineNumbers: () =>
     set((state) => ({ showLineNumbers: !state.showLineNumbers })),
+  disconnect: () =>
+    set(
+      // clean up the connected provider after exiting the page
+      produce((state) => {
+        if (state.provider) {
+          state.provider.destroy();
+          // just for debug usage, remove it later
+          console.log("remove awareness", state.provider.awareness);
+          state.provider = null;
+        }
+        state.ydoc.destroy();
+      })
+    ),
 });
 
 export const createRepoStore = () =>

ui/src/pages/repo.tsx

@@ -96,20 +96,13 @@ function RepoImpl() {
   const addClient = useStore(store, (state) => state.addClient);
   const deleteClient = useStore(store, (state) => state.deleteClient);
 
-
   const { loading, me } = useMe();
   useEffect(() => {
     if (me) {
       setSessionId(`${me.id}_${id}`);
     }
   }, [me, id, setSessionId]);
 
-  useEffect(() => {
-    if (me) {
-      setUser(me);
-    }
-  }, [me, setUser]);
-
   useEffect(() => {
     if (provider) {
       const awareness = provider.awareness;
@@ -118,23 +111,27 @@ function RepoImpl() {
         const states = awareness.getStates();
         const nodes = change.added.concat(change.updated);
         nodes.forEach((clientID) => {
-            const user = states.get(clientID)?.user
-            if (user) {
-                addClient(clientID, user.name, user.color);
-            }
+          const user = states.get(clientID)?.user;
+          if (user) {
+            addClient(clientID, user.name, user.color);
+          }
         });
         change.removed.forEach((clientID) => {
-            deleteClient(clientID);
-        })
-    })
-  }}, [provider]);
+          deleteClient(clientID);
+        });
+      });
+    }
+  }, [provider]);
 
   useEffect(() => {
     resetState();
     setRepo(id!);
     // load the repo. It is actually not a queue, just an async thunk
     loadRepo(client, id!);
-  }, [client, id, loadRepo, resetState, setRepo]);
+    if (!loading && me) {
+      setUser(me);
+    }
+  }, [client, id, loadRepo, resetState, setRepo, me, loading, setUser]);
 
   // FIXME Removing queueL. This will cause Repo to be re-rendered a lot of
   // times, particularly the delete pod action would cause syncstatus and repo
@@ -163,6 +160,13 @@ function RepoImpl() {
 
 export default function Repo() {
   const store = useRef(createRepoStore()).current;
+  const disconnect = useStore(store, (state) => state.disconnect);
+  // console.log("load store", useRef(createRepoStore()));
+  useEffect(() => {
+    // const provider = useStore(store, (state) => state.provider);
+    // clean up the connected provider after exiting the page
+    return disconnect;
+  }, [store]);
   return (
     <RepoContext.Provider value={store}>
       <RepoImpl />