refactor socket event listener

packages/app/src/client/services/event-listeners/hackmd-draft-updated.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+
+import { SocketEventName } from '~/interfaces/websocket';
+import { useCurrentPageId } from '~/stores/context';
+import { useIsHackmdDraftUpdatingInRealtime } from '~/stores/hackmd';
+import { useGlobalSocket } from '~/stores/websocket';
+
+export const useHackmdDraftUpdatedEffect = (): void => {
+
+  const { data: currentPageId } = useCurrentPageId();
+  const { mutate: mutateIsHackmdDraftUpdatingInRealtime } = useIsHackmdDraftUpdatingInRealtime();
+
+  const { data: socket } = useGlobalSocket();
+
+  const setIsHackmdDraftUpdatingInRealtime = useCallback((data) => {
+    const { s2cMessagePageUpdated } = data;
+    if (s2cMessagePageUpdated.pageId === currentPageId) {
+      mutateIsHackmdDraftUpdatingInRealtime(true);
+    }
+  }, [currentPageId, mutateIsHackmdDraftUpdatingInRealtime]);
+
+  // listen socket for hackmd saved
+  useEffect(() => {
+
+    if (socket == null) { return }
+
+    socket.on(SocketEventName.EditingWithHackmd, setIsHackmdDraftUpdatingInRealtime);
+
+    return () => {
+      socket.off(SocketEventName.EditingWithHackmd, setIsHackmdDraftUpdatingInRealtime);
+    };
+  }, [setIsHackmdDraftUpdatingInRealtime, socket]);
+};

packages/app/src/components/EventListeneres/HashChanged.tsx → packages/app/src/client/services/event-listeners/hash-changed.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useRouter } from 'next/router';
 
@@ -8,8 +8,9 @@ import { useEditorMode, determineEditorModeByHash } from '~/stores/ui';
 /**
  * Change editorMode by browser forward/back operation
  */
-const HashChanged = (): JSX.Element => {
+export const useHashChangedEffect = (): void => {
   const router = useRouter();
+
   const { data: isEditable } = useIsEditable();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
 
@@ -47,8 +48,4 @@ const HashChanged = (): JSX.Element => {
       router.events.off('routeChangeComplete', hashchangeHandler);
     };
   }, [hashchangeHandler, router.events]);
-
-  return <></>;
 };
-
-export default HashChanged;

packages/app/src/client/services/event-listeners/page-updated.ts

@@ -0,0 +1,39 @@
+import { useCallback, useEffect } from 'react';
+
+import { SocketEventName } from '~/interfaces/websocket';
+import { useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
+import { useGlobalSocket } from '~/stores/websocket';
+
+export const usePageUpdatedEffect = (): void => {
+
+  const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
+
+  const { data: socket } = useGlobalSocket();
+
+  const setLatestRemotePageData = useCallback((data) => {
+    const { s2cMessagePageUpdated } = data;
+
+    const remoteData = {
+      remoteRevisionId: s2cMessagePageUpdated.revisionId,
+      remoteRevisionBody: s2cMessagePageUpdated.revisionBody,
+      remoteRevisionLastUpdateUser: s2cMessagePageUpdated.remoteLastUpdateUser,
+      remoteRevisionLastUpdatedAt: s2cMessagePageUpdated.revisionUpdateAt,
+      revisionIdHackmdSynced: s2cMessagePageUpdated.revisionIdHackmdSynced,
+      hasDraftOnHackmd: s2cMessagePageUpdated.hasDraftOnHackmd,
+    };
+    setRemoteLatestPageData(remoteData);
+  }, [setRemoteLatestPageData]);
+
+  // listen socket for someone updating this page
+  useEffect(() => {
+
+    if (socket == null) { return }
+
+    socket.on(SocketEventName.PageUpdated, setLatestRemotePageData);
+
+    return () => {
+      socket.off(SocketEventName.PageUpdated, setLatestRemotePageData);
+    };
+
+  }, [setLatestRemotePageData, socket]);
+};

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

@@ -1,17 +1,13 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import dynamic from 'next/dynamic';
 
 
-import { SocketEventName } from '~/interfaces/websocket';
-import {
-  useCurrentPageId,
-  useIsEditable,
-} from '~/stores/context';
-import { useIsHackmdDraftUpdatingInRealtime } from '~/stores/hackmd';
-import { useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
+import { useHackmdDraftUpdatedEffect } from '~/client/services/event-listeners/hackmd-draft-updated';
+import { useHashChangedEffect } from '~/client/services/event-listeners/hash-changed';
+import { usePageUpdatedEffect } from '~/client/services/event-listeners/page-updated';
+import { useIsEditable } from '~/stores/context';
 import { EditorMode, useEditorMode } from '~/stores/ui';
-import { useGlobalSocket } from '~/stores/websocket';
 
 import CustomTabContent from '../CustomNavigation/CustomTabContent';
 import { Page } from '../Page';
@@ -20,67 +16,19 @@ import { Page } from '../Page';
 const PageEditor = dynamic(() => import('../PageEditor'), { ssr: false });
 const PageEditorByHackmd = dynamic(() => import('../PageEditorByHackmd').then(mod => mod.PageEditorByHackmd), { ssr: false });
 const EditorNavbarBottom = dynamic(() => import('../PageEditor/EditorNavbarBottom'), { ssr: false });
-const HashChanged = dynamic(() => import('../EventListeneres/HashChanged'), { ssr: false });
 
 
 const DisplaySwitcher = React.memo((): JSX.Element => {
 
-  const { data: currentPageId } = useCurrentPageId();
   const { data: editorMode = EditorMode.View } = useEditorMode();
   const { data: isEditable } = useIsEditable();
-  const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
-  const { mutate: mutateIsHackmdDraftUpdatingInRealtime } = useIsHackmdDraftUpdatingInRealtime();
 
-  const { data: socket } = useGlobalSocket();
+  usePageUpdatedEffect();
+  useHashChangedEffect();
+  useHackmdDraftUpdatedEffect();
 
   const isViewMode = editorMode === EditorMode.View;
 
-  const setLatestRemotePageData = useCallback((data) => {
-    const { s2cMessagePageUpdated } = data;
-
-    const remoteData = {
-      remoteRevisionId: s2cMessagePageUpdated.revisionId,
-      remoteRevisionBody: s2cMessagePageUpdated.revisionBody,
-      remoteRevisionLastUpdateUser: s2cMessagePageUpdated.remoteLastUpdateUser,
-      remoteRevisionLastUpdatedAt: s2cMessagePageUpdated.revisionUpdateAt,
-      revisionIdHackmdSynced: s2cMessagePageUpdated.revisionIdHackmdSynced,
-      hasDraftOnHackmd: s2cMessagePageUpdated.hasDraftOnHackmd,
-    };
-    setRemoteLatestPageData(remoteData);
-  }, [setRemoteLatestPageData]);
-
-  const setIsHackmdDraftUpdatingInRealtime = useCallback((data) => {
-    const { s2cMessagePageUpdated } = data;
-    if (s2cMessagePageUpdated.pageId === currentPageId) {
-      mutateIsHackmdDraftUpdatingInRealtime(true);
-    }
-  }, [currentPageId, mutateIsHackmdDraftUpdatingInRealtime]);
-
-  // listen socket for someone updating this page
-  useEffect(() => {
-
-    if (socket == null) { return }
-
-    socket.on(SocketEventName.PageUpdated, setLatestRemotePageData);
-
-    return () => {
-      socket.off(SocketEventName.PageUpdated, setLatestRemotePageData);
-    };
-
-  }, [setLatestRemotePageData, socket]);
-
-  // listen socket for hackmd saved
-  useEffect(() => {
-
-    if (socket == null) { return }
-
-    socket.on(SocketEventName.EditingWithHackmd, setIsHackmdDraftUpdatingInRealtime);
-
-    return () => {
-      socket.off(SocketEventName.EditingWithHackmd, setIsHackmdDraftUpdatingInRealtime);
-    };
-  }, [setIsHackmdDraftUpdatingInRealtime, socket]);
-
   const navTabMapping = useMemo(() => {
     return {
       [EditorMode.View]: {
@@ -121,7 +69,6 @@ const DisplaySwitcher = React.memo((): JSX.Element => {
       <CustomTabContent activeTab={editorMode} navTabMapping={navTabMapping} />
 
       { isEditable && !isViewMode && <EditorNavbarBottom /> }
-      { isEditable && <HashChanged></HashChanged> }
     </>
   );
 });