Merge pull request #6072 from weseek/fix/show-page-history-comparation-modal

fix: Show page history comparation modal on init

packages/app/src/client/app.jsx

@@ -49,8 +49,6 @@ import TagPage from '../components/TagPage';
 import TrashPageList from '../components/TrashPageList';
 
 import { appContainer, componentMappings } from './base';
-import { toastError } from './util/apiNotification';
-
 
 const logger = loggerFactory('growi:cli:app');
 
@@ -128,18 +126,11 @@ if (pageContainer.state.pageId != null) {
 
     'recent-created-icon': <RecentlyCreatedIcon />,
   });
-
   if (!pageContainer.state.isEmpty) {
     Object.assign(componentMappings, {
       'fix-page-grant-alert': <FixPageGrantAlert />,
     });
   }
-
-  // show the Page accessory modal when query of "compare" is requested
-  if (revisionComparerContainer.getRevisionIDsToCompareAsParam().length > 0) {
-    toastError('Sorry, opening PageAccessoriesModal is not implemented yet in v5.');
-  //   pageAccessoriesContainer.openPageAccessoriesModal('pageHistory');
-  }
 }
 if (pageContainer.state.creator != null) {
   Object.assign(componentMappings, {

packages/app/src/client/base.jsx

@@ -23,6 +23,8 @@ import PageDuplicateModal from '../components/PageDuplicateModal';
 import PagePresentationModal from '../components/PagePresentationModal';
 import PageRenameModal from '../components/PageRenameModal';
 
+import ShowPageAccessoriesModal from './services/ShowPageAccessoriesModal';
+
 const logger = loggerFactory('growi:cli:app');
 
 if (!window) {
@@ -69,6 +71,7 @@ const componentMappings = {
   'system-version': <SystemVersion />,
 
 
+  'show-page-accessories-modal': <ShowPageAccessoriesModal />,
 };
 
 export { appContainer, componentMappings };

packages/app/src/client/services/ShowPageAccessoriesModal.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+
+import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
+
+function getURLQueryParamValue(key: string) {
+// window.location.href is page URL;
+  const queryStr: URLSearchParams = new URL(window.location.href).searchParams;
+  return queryStr.get(key);
+}
+
+const queryCompareFormat = new RegExp(/([a-z0-9]){24}...([a-z0-9]){24}/);
+
+const ShowPageAccessoriesModal = (): JSX.Element => {
+  const { data: status, open: openPageAccessories } = usePageAccessoriesModal();
+  const [isArleadyMounted, setIsArleadyMounted] = useState(false);
+  useEffect(() => {
+    const pageIdParams = getURLQueryParamValue('compare');
+    if (status == null || status.isOpened === true) {
+      return;
+    }
+    if (isArleadyMounted === true) {
+      return;
+    }
+    if (pageIdParams != null) {
+      if (queryCompareFormat.test(pageIdParams)) {
+        openPageAccessories(PageAccessoriesModalContents.PageHistory);
+      }
+    }
+    setIsArleadyMounted(true);
+  }, [openPageAccessories, status, isArleadyMounted]);
+  return <></>;
+};
+
+export default ShowPageAccessoriesModal;

packages/app/src/components/PageAccessoriesModal.tsx

@@ -1,25 +1,25 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalBody, ModalHeader,
 } from 'reactstrap';
 
-import { useTranslation } from 'react-i18next';
 
+import AppContainer from '~/client/services/AppContainer';
 import { useIsGuestUser, useIsSharedUser } from '~/stores/context';
 import { usePageAccessoriesModal, PageAccessoriesModalContents } from '~/stores/modal';
-import AppContainer from '~/client/services/AppContainer';
 
-import HistoryIcon from './Icons/HistoryIcon';
+import { CustomNavTab } from './CustomNavigation/CustomNav';
+import CustomTabContent from './CustomNavigation/CustomTabContent';
+import ExpandOrContractButton from './ExpandOrContractButton';
 import AttachmentIcon from './Icons/AttachmentIcon';
+import HistoryIcon from './Icons/HistoryIcon';
 import ShareLinkIcon from './Icons/ShareLinkIcon';
-import { withUnstatedContainers } from './UnstatedUtils';
 import PageAttachment from './PageAttachment';
 import PageHistory from './PageHistory';
 import ShareLink from './ShareLink/ShareLink';
-import { CustomNavTab } from './CustomNavigation/CustomNav';
-import ExpandOrContractButton from './ExpandOrContractButton';
-import CustomTabContent from './CustomNavigation/CustomTabContent';
+import { withUnstatedContainers } from './UnstatedUtils';
 
 
 type Props = {

packages/app/src/server/views/layout/layout.html

@@ -113,8 +113,10 @@
 <div id="page-accessories-modal"></div>
 <div id="descendants-page-list-modal"></div>
 <div id="page-put-back-modal"></div>
+<div id="show-page-accessories-modal"></div>
 <div id="shortcuts-modal"></div>
 
+
 {% block body_end %}
 {% endblock %}
 </body>