Merge pull request #8638 from weseek/fix/supress-page-accessories-modal-rerendering

fix: Supress PageAccessoriesModal rerendering for keeping radio button selections of PageHistory

apps/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -56,6 +56,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
 
   useEffect(() => {
     if (revisions != null) {
+      // when both source and target are specified
       if (sourceRevisionId != null && targetRevisionId != null) {
         const sourceRevision = revisions.filter(revision => revision._id === sourceRevisionId)[0];
         const targetRevision = revisions.filter(revision => revision._id === targetRevisionId)[0];
@@ -63,11 +64,10 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
         setTargetRevision(targetRevision);
       }
       else {
-        const latestRevision = revisions != null ? revisions[0] : null;
-        if (latestRevision != null) {
-          setSourceRevision(latestRevision);
-          setTargetRevision(latestRevision);
-        }
+        const latestRevision = revisions != null ? revisions[0] : undefined;
+        const previousRevision = revisions.length >= 2 ? revisions[1] : latestRevision;
+        setTargetRevision(latestRevision);
+        setSourceRevision(previousRevision);
       }
     }
   }, [revisions, sourceRevisionId, targetRevisionId]);
@@ -210,13 +210,15 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
       </table>
 
       {sourceRevision != null && targetRevision != null && (
-        <RevisionComparer
-          sourceRevision={sourceRevision}
-          targetRevision={targetRevision}
-          currentPageId={currentPageId}
-          currentPagePath={currentPagePath}
-          onClose={onClose}
-        />
+        <div className="mt-5">
+          <RevisionComparer
+            sourceRevision={sourceRevision}
+            targetRevision={targetRevision}
+            currentPageId={currentPageId}
+            currentPagePath={currentPagePath}
+            onClose={onClose}
+          />
+        </div>
       )
       }
     </>

apps/app/src/stores/modal.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import type {
   IAttachmentHasId, IPageToDeleteWithMeta, IPageToRenameWithMeta, IUserGroupHasId,
 } from '@growi/core';
+import { useSWRStatic } from '@growi/core/dist/swr';
 import type { SWRResponse } from 'swr';
 
 
@@ -363,33 +364,35 @@ type PageAccessoriesModalUtils = {
 export const usePageAccessoriesModal = (): SWRResponse<PageAccessoriesModalStatus, Error> & PageAccessoriesModalUtils => {
 
   const initialStatus = { isOpened: false };
-  const swrResponse = useStaticSWR<PageAccessoriesModalStatus, Error>('pageAccessoriesModalStatus', undefined, { fallbackData: initialStatus });
+  const swrResponse = useSWRStatic<PageAccessoriesModalStatus, Error>('pageAccessoriesModalStatus', undefined, { fallbackData: initialStatus });
+
+  const { data, mutate } = swrResponse;
 
   return Object.assign(swrResponse, {
-    open: (activatedContents) => {
-      if (swrResponse.data == null) {
+    open: useCallback((activatedContents) => {
+      if (data == null) {
         return;
       }
-      swrResponse.mutate({
+      mutate({
         isOpened: true,
         activatedContents,
       });
-    },
-    close: () => {
-      if (swrResponse.data == null) {
+    }, [data, mutate]),
+    close: useCallback(() => {
+      if (data == null) {
         return;
       }
-      swrResponse.mutate({ isOpened: false });
-    },
-    selectContents: (activatedContents) => {
-      if (swrResponse.data == null) {
+      mutate({ isOpened: false });
+    }, [data, mutate]),
+    selectContents: useCallback((activatedContents) => {
+      if (data == null) {
         return;
       }
-      swrResponse.mutate({
-        isOpened: swrResponse.data.isOpened,
+      mutate({
+        isOpened: data.isOpened,
         activatedContents,
       });
-    },
+    }, [data, mutate]),
   });
 };