impl useYjsDraftEffect

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

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react';
+
+import { useGlobalSocket } from '@growi/core/dist/swr';
+
+import { SocketEventName } from '~/interfaces/websocket';
+import { useHasYjsDraft } from '~/stores/page';
+
+export const useYjsDraftEffect = (): void => {
+
+  const { mutate: mutateHasYjsDraft } = useHasYjsDraft();
+  const { data: socket } = useGlobalSocket();
+
+  const yjsDraftUpdateHandler = useCallback(((hasYjsDraft: boolean) => {
+    mutateHasYjsDraft(hasYjsDraft);
+  }), [mutateHasYjsDraft]);
+
+  useEffect(() => {
+
+    if (socket == null) { return }
+
+    socket.on(SocketEventName.YjsUpdated, yjsDraftUpdateHandler);
+
+    return () => {
+      socket.off(SocketEventName.YjsUpdated, yjsDraftUpdateHandler);
+    };
+
+  }, [mutateHasYjsDraft, socket, yjsDraftUpdateHandler]);
+};

apps/app/src/components/Navbar/PageEditorModeManager.tsx

@@ -1,13 +1,11 @@
-import React, { type ReactNode, useCallback, useEffect } from 'react';
+import React, { type ReactNode, useCallback } from 'react';
 
 import { Origin } from '@growi/core';
 import { useGlobalSocket } from '@growi/core/dist/swr';
 import { useTranslation } from 'next-i18next';
 
-
 import { useCreatePageAndTransit } from '~/client/services/create-page';
 import { toastError } from '~/client/util/toastr';
-import { SocketEventName } from '~/interfaces/websocket';
 import { useIsNotFound, useHasYjsDraft } from '~/stores/page';
 import { EditorMode, useEditorMode, useIsDeviceLargerThanMd } from '~/stores/ui';
 
@@ -67,8 +65,7 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
   const { data: isNotFound } = useIsNotFound();
   const { mutate: mutateEditorMode } = useEditorMode();
   const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
-  const { data: hasYjsDraft, mutate: mutateHasYjsDraft } = useHasYjsDraft();
-  const { data: socket } = useGlobalSocket();
+  const { data: hasYjsDraft } = useHasYjsDraft();
 
   const { isCreating, createAndTransit } = useCreatePageAndTransit();
 
@@ -89,22 +86,6 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
     }
   }, [createAndTransit, isNotFound, mutateEditorMode, path, t]);
 
-  useEffect(() => {
-
-    if (socket == null) { return }
-
-    const yjsDraftUpdateHandler = (hasYjsDraft: boolean) => {
-      mutateHasYjsDraft(hasYjsDraft);
-    };
-
-    socket.on(SocketEventName.YjsUpdated, yjsDraftUpdateHandler);
-
-    return () => {
-      socket.off(SocketEventName.YjsUpdated, yjsDraftUpdateHandler);
-    };
-
-  }, [mutateHasYjsDraft, socket]);
-
   const _isBtnDisabled = isCreating || isBtnDisabled;
 
   return (

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

@@ -4,6 +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 } from '~/client/services/side-effects/yjs-draft';
 import { useIsEditable } from '~/stores/context';
 import { useIsLatestRevision } from '~/stores/page';
 import { EditorMode, useEditorMode } from '~/stores/ui';
@@ -26,6 +27,7 @@ export const DisplaySwitcher = (props: Props): JSX.Element => {
 
   usePageUpdatedEffect();
   useHashChangedEffect();
+  useYjsDraftEffect();
 
   return (
     <>