omit useCurrentUpdatedAt from TrashPageAlert

packages/app/src/client/app.jsx

@@ -31,7 +31,6 @@ import DisplaySwitcher from '../components/Page/DisplaySwitcher';
 import FixPageGrantAlert from '../components/Page/FixPageGrantAlert';
 import RedirectedAlert from '../components/Page/RedirectedAlert';
 import ShareLinkAlert from '../components/Page/ShareLinkAlert';
-import TrashPageAlert from '../components/Page/TrashPageAlert';
 import PageComment from '../components/PageComment';
 import CommentEditorLazyRenderer from '../components/PageComment/CommentEditorLazyRenderer';
 import PageContentFooter from '../components/PageContentFooter';
@@ -83,8 +82,6 @@ Object.assign(componentMappings, {
 
   'maintenance-mode-content': <MaintenanceModeContent />,
 
-  'trash-page-alert': <TrashPageAlert />,
-
   'trash-page-list-container': <TrashPageList />,
 
   'not-found-page': <NotFoundPage />,

packages/app/src/components/Page/TrashPageAlert.jsx

@@ -1,120 +0,0 @@
-import React from 'react';
-
-import { UserPicture } from '@growi/ui';
-import { useTranslation } from 'next-i18next';
-import PropTypes from 'prop-types';
-
-import PageContainer from '~/client/services/PageContainer';
-import { useCurrentUpdatedAt, useIsTrashPage, useShareLinkId } from '~/stores/context';
-import { usePageDeleteModal, usePutBackPageModal } from '~/stores/modal';
-import { useSWRxPageInfo } from '~/stores/page';
-import { useIsAbleToShowTrashPageManagementButtons } from '~/stores/ui';
-
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-const onDeletedHandler = (pathOrPathsToDelete, isRecursively, isCompletely) => {
-  if (typeof pathOrPathsToDelete !== 'string') {
-    return;
-  }
-
-  window.location.href = '/';
-};
-
-const TrashPageAlert = (props) => {
-  const { t } = useTranslation();
-  const { pageContainer } = props;
-  const {
-    pageId, revisionId, path, lastUpdateUsername, deletedUserName, deletedAt,
-  } = pageContainer.state;
-
-  const { data: isAbleToShowTrashPageManagementButtons } = useIsAbleToShowTrashPageManagementButtons();
-  const { data: shareLinkId } = useShareLinkId();
-
-  /*
-  * TODO: Do not use useSWRxPageInfo on this component
-  * Ideal: use useSWRxPageInfo on TrashPage after applying Next.js
-  * Reference: https://github.com/weseek/growi/pull/5359#discussion_r808381329
-  */
-  const { data: pageInfo } = useSWRxPageInfo(pageId ?? null, shareLinkId);
-
-  const { data: updatedAt } = useCurrentUpdatedAt();
-  const { data: isTrashPage } = useIsTrashPage();
-
-  const { open: openDeleteModal } = usePageDeleteModal();
-  const { open: openPutBackPageModal } = usePutBackPageModal();
-
-  function openPutbackPageModalHandler() {
-    const putBackedHandler = (path) => {
-      window.location.reload();
-    };
-    openPutBackPageModal({ pageId, path }, { onPutBacked: putBackedHandler });
-  }
-
-  function openPageDeleteModalHandler() {
-    const pageToDelete = {
-      data: {
-        _id: pageId,
-        revision: revisionId,
-        path,
-      },
-      meta: pageInfo,
-    };
-    openDeleteModal([pageToDelete], { onDeleted: onDeletedHandler });
-  }
-
-  function renderTrashPageManagementButtons() {
-    return (
-      <>
-        <button
-          type="button"
-          className="btn btn-info rounded-pill btn-sm ml-auto mr-2"
-          onClick={openPutbackPageModalHandler}
-          data-toggle="modal"
-        >
-          <i className="icon-action-undo" aria-hidden="true"></i> { t('Put Back') }
-        </button>
-        <button
-          type="button"
-          className="btn btn-danger rounded-pill btn-sm"
-          disabled={!(pageInfo?.isAbleToDeleteCompletely ?? false)}
-          onClick={openPageDeleteModalHandler}
-        >
-          <i className="icon-fire" aria-hidden="true"></i> { t('Delete Completely') }
-        </button>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <div className="alert alert-warning py-3 pl-4 d-flex flex-column flex-lg-row">
-        <div className="flex-grow-1">
-          This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
-          {isTrashPage && (
-            <>
-              <br />
-              <UserPicture user={{ username: deletedUserName || lastUpdateUsername }} />
-              <span className="ml-2">
-                Deleted by {deletedUserName || lastUpdateUsername} at {deletedAt || updatedAt}
-              </span>
-            </>
-          )}
-        </div>
-        <div className="pt-1 d-flex align-items-end align-items-lg-center">
-          { isAbleToShowTrashPageManagementButtons && renderTrashPageManagementButtons()}
-        </div>
-      </div>
-    </>
-  );
-};
-
-TrashPageAlert.propTypes = {
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-/**
- * Wrapper component for using unstated
- */
-const TrashPageAlertWrapper = withUnstatedContainers(TrashPageAlert, [PageContainer]);
-
-export default TrashPageAlertWrapper;

packages/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -5,7 +5,7 @@ import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 
 import {
-  useCurrentUpdatedAt, useIsTrashPage, useShareLinkId,
+  useIsTrashPage, useShareLinkId,
 } from '~/stores/context';
 import { usePageDeleteModal, usePutBackPageModal } from '~/stores/modal';
 import { useSWRxPageInfo, useSWRxCurrentPage } from '~/stores/page';
@@ -30,7 +30,6 @@ export const TrashPageAlert = (): JSX.Element => {
   const pagePath = pageData?.path;
   const { data: pageInfo } = useSWRxPageInfo(pageId ?? null, shareLinkId);
 
-  const { data: updatedAt } = useCurrentUpdatedAt();
 
   const { open: openDeleteModal } = usePageDeleteModal();
   const { open: openPutBackPageModal } = usePutBackPageModal();
@@ -99,7 +98,7 @@ export const TrashPageAlert = (): JSX.Element => {
           <br />
           <UserPicture user={{ username: lastUpdateUserName }} />
           <span className="ml-2">
-            Deleted by { lastUpdateUserName } at {deletedAt || updatedAt}
+            Deleted by { lastUpdateUserName } at {deletedAt || pageData?.updatedAt}
           </span>
         </div>
         <div className="pt-1 d-flex align-items-end align-items-lg-center">