Listen to YjsHasRevisionBodyDiffUpdated

apps/app/src/client/services/side-effects/yjs.ts

@@ -6,30 +6,17 @@ import { SocketEventName } from '~/interfaces/websocket';
 import { type CurrentPageYjsDraft } from '~/interfaces/yjs';
 import { useCurrentPageYjsData } from '~/stores/yjs';
 
-export const useYjsDraftEffect = (): void => {
+export const useCurrentPageYjsDataEffect = (): void => {
   const { data: socket } = useGlobalSocket();
-  const { updateHasDraft } = useCurrentPageYjsData();
+  const { updateHasDraft, updateHasRevisionBodyDiff, updateAwarenessStateSize } = useCurrentPageYjsData();
 
   const yjsDraftUpdateHandler = useCallback(((currentPageYjsDraft: CurrentPageYjsDraft) => {
     updateHasDraft(currentPageYjsDraft.hasYjsDraft);
   }), [updateHasDraft]);
 
-  useEffect(() => {
-
-    if (socket == null) { return }
-
-    socket.on(SocketEventName.YjsDraftUpdated, yjsDraftUpdateHandler);
-
-    return () => {
-      socket.off(SocketEventName.YjsDraftUpdated, yjsDraftUpdateHandler);
-    };
-
-  }, [socket, yjsDraftUpdateHandler]);
-};
-
-export const useYjsAwarenessStateEffect = (): void => {
-  const { data: socket } = useGlobalSocket();
-  const { updateAwarenessStateSize } = useCurrentPageYjsData();
+  const yjsHasRevisionBodyDiffUpdateHandler = useCallback((hasRevisionBodyDiff: boolean) => {
+    updateHasRevisionBodyDiff(hasRevisionBodyDiff);
+  }, [updateHasRevisionBodyDiff]);
 
   const yjsAwarenessStateUpdateHandler = useCallback(((awarenessStateSize: number) => {
     updateAwarenessStateSize(awarenessStateSize);
@@ -39,12 +26,15 @@ export const useYjsAwarenessStateEffect = (): void => {
 
     if (socket == null) { return }
 
+    socket.on(SocketEventName.YjsDraftUpdated, yjsDraftUpdateHandler);
+    socket.on(SocketEventName.YjsHasRevisionBodyDiffUpdated, yjsHasRevisionBodyDiffUpdateHandler);
     socket.on(SocketEventName.YjsAwarenessStateUpdated, yjsAwarenessStateUpdateHandler);
 
     return () => {
+      socket.off(SocketEventName.YjsDraftUpdated, yjsDraftUpdateHandler);
+      socket.off(SocketEventName.YjsHasRevisionBodyDiffUpdated, yjsHasRevisionBodyDiffUpdateHandler);
       socket.off(SocketEventName.YjsAwarenessStateUpdated, yjsAwarenessStateUpdateHandler);
     };
 
-  }, [socket, yjsAwarenessStateUpdateHandler]);
-
+  }, [socket, yjsAwarenessStateUpdateHandler, yjsDraftUpdateHandler, yjsHasRevisionBodyDiffUpdateHandler]);
 };

apps/app/src/components/Page/DisplaySwitcher.tsx

@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic';
 
 import { useHashChangedEffect } from '~/client/services/side-effects/hash-changed';
 import { usePageUpdatedEffect } from '~/client/services/side-effects/page-updated';
-import { useYjsDraftEffect, useYjsAwarenessStateEffect } from '~/client/services/side-effects/yjs';
+import { useCurrentPageYjsDataEffect } from '~/client/services/side-effects/yjs';
 import { useIsEditable } from '~/stores/context';
 import { useIsLatestRevision } from '~/stores/page';
 import { EditorMode, useEditorMode } from '~/stores/ui';
@@ -27,8 +27,7 @@ export const DisplaySwitcher = (props: Props): JSX.Element => {
 
   usePageUpdatedEffect();
   useHashChangedEffect();
-  useYjsDraftEffect();
-  useYjsAwarenessStateEffect();
+  useCurrentPageYjsDataEffect();
 
   return (
     <>

apps/app/src/interfaces/websocket.ts

@@ -52,6 +52,7 @@ export const SocketEventName = {
   // Yjs
   YjsDraftUpdated: 'yjs:draft-update',
   YjsAwarenessStateUpdated: 'yjs:awareness-state-update',
+  YjsHasRevisionBodyDiffUpdated: 'yjs:has-revision-body-diff-update',
 } as const;
 export type SocketEventName = typeof SocketEventName[keyof typeof SocketEventName];
 

apps/app/src/stores/yjs.ts

@@ -7,6 +7,7 @@ import type { CurrentPageYjsData } from '~/interfaces/yjs';
 
 type CurrentPageYjsDataUtils = {
   updateHasDraft(hasYjsDraft: boolean): void
+  updateHasRevisionBodyDiff(hasRevisionBodyDiff: boolean): void
   updateAwarenessStateSize(awarenessStateSize: number): void
 }
 
@@ -17,9 +18,15 @@ export const useCurrentPageYjsData = (): SWRResponse<CurrentPageYjsData, Error>
     swrResponse.mutate({ ...swrResponse.data, hasDraft });
   }, [swrResponse]);
 
+  const updateHasRevisionBodyDiff = useCallback((hasRevisionBodyDiff: boolean) => {
+    swrResponse.mutate({ ...swrResponse.data, hasRevisionBodyDiff });
+  }, [swrResponse]);
+
   const updateAwarenessStateSize = useCallback((awarenessStateSize: number) => {
     swrResponse.mutate({ ...swrResponse.data, awarenessStateSize });
   }, [swrResponse]);
 
-  return { ...swrResponse, updateHasDraft, updateAwarenessStateSize };
+  return {
+    ...swrResponse, updateHasDraft, updateHasRevisionBodyDiff, updateAwarenessStateSize,
+  };
 };