create useIsRevisionOutdated

apps/app/src/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -14,8 +14,7 @@ import {
 } from '~/stores/context';
 
 import '@growi/remark-drawio/dist/style.css';
-import { useSWRxCurrentPage } from '~/stores/page';
-import { useRemoteRevisionId } from '~/stores/remote-latest-page';
+import { useIsRevisionOutdated } from '~/stores/page';
 
 import styles from './DrawioViewerWithEditButton.module.scss';
 
@@ -35,8 +34,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: isSharedUser } = useIsSharedUser();
   const { data: shareLinkId } = useShareLinkId();
-  const { data: currentPage } = useSWRxCurrentPage();
-  const { data: remoteRevisionId } = useRemoteRevisionId();
+  const { data: isRevisionOutdated } = useIsRevisionOutdated();
 
   const [isRendered, setRendered] = useState(false);
   const [mxfile, setMxfile] = useState('');
@@ -60,8 +58,6 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
     }
   }, []);
 
-  const currentRevisionId = currentPage?.revision?._id;
-  const isRevisionOutdated = (currentRevisionId != null && remoteRevisionId != null) && (currentRevisionId !== remoteRevisionId);
   const showEditButton = !isRevisionOutdated && isRendered && !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null;
 
   return (

apps/app/src/components/ReactMarkdownComponents/TableWithEditButton.tsx

@@ -7,8 +7,7 @@ import type { Element } from 'react-markdown/lib/rehype-filter';
 import {
   useIsGuestUser, useIsReadOnlyUser, useIsSharedUser, useShareLinkId,
 } from '~/stores/context';
-import { useSWRxCurrentPage } from '~/stores/page';
-import { useRemoteRevisionId } from '~/stores/remote-latest-page';
+import { useIsRevisionOutdated } from '~/stores/page';
 
 import styles from './TableWithEditButton.module.scss';
 
@@ -31,8 +30,7 @@ export const TableWithEditButton = React.memo((props: TableWithEditButtonProps):
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: isSharedUser } = useIsSharedUser();
   const { data: shareLinkId } = useShareLinkId();
-  const { data: currentPage } = useSWRxCurrentPage();
-  const { data: remoteRevisionId } = useRemoteRevisionId();
+  const { data: isRevisionOutdated } = useIsRevisionOutdated();
 
   const bol = node.position?.start.line;
   const eol = node.position?.end.line;
@@ -41,8 +39,6 @@ export const TableWithEditButton = React.memo((props: TableWithEditButtonProps):
     globalEmitter.emit('launchHandsonTableModal', bol, eol);
   }, [bol, eol]);
 
-  const currentRevisionId = currentPage?.revision?._id;
-  const isRevisionOutdated = (currentRevisionId != null && remoteRevisionId != null) && (currentRevisionId !== remoteRevisionId);
   const showEditButton = !isRevisionOutdated && !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null;
 
   return (

apps/app/src/stores/page.tsx

@@ -26,6 +26,7 @@ import type { IPageTagsInfo } from '../interfaces/tag';
 import {
   useCurrentPathname, useShareLinkId, useIsGuestUser, useIsReadOnlyUser,
 } from './context';
+import { useRemoteRevisionId } from './remote-latest-page';
 
 
 const { isPermalink: _isPermalink } = pagePathUtils;
@@ -326,3 +327,15 @@ export const useIsTrashPage = (): SWRResponse<boolean, Error> => {
     // { fallbackData:  }
   );
 };
+
+export const useIsRevisionOutdated = (): SWRResponse<boolean, Error> => {
+  const { data: currentPage } = useSWRxCurrentPage();
+  const { data: remoteRevisionId } = useRemoteRevisionId();
+
+  const currentRevisionId = currentPage?.revision?._id;
+
+  return useSWRImmutable(
+    currentRevisionId != null && remoteRevisionId != null ? ['useIsRevisionOutdated', currentRevisionId, remoteRevisionId] : null,
+    ([, remoteRevisionId, currentRevisionId]) => { return remoteRevisionId !== currentRevisionId },
+  );
+};