Deleted redundant codes and added new states

packages/app/src/components/PageHistory.jsx

@@ -1,9 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
-import PropTypes from 'prop-types';
-
-import RevisionComparerContainer from '~/client/services/RevisionComparerContainer';
-import { toastError } from '~/client/util/apiNotification';
 import { useCurrentPageId } from '~/stores/context';
 import { useSWRxPageRevisions } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
@@ -11,41 +7,23 @@ import loggerFactory from '~/utils/logger';
 import PageRevisionTable from './PageHistory/PageRevisionTable';
 import PaginationWrapper from './PaginationWrapper';
 import RevisionComparer from './RevisionComparer/RevisionComparer';
-import { withLoadingSppiner } from './SuspenseUtils';
-import { withUnstatedContainers } from './UnstatedUtils';
 
 
 const logger = loggerFactory('growi:PageHistory');
 
-function PageHistory(props) {
+const PageHistory = () => {
   const [activePage, setActivePage] = useState(1);
-  const [errorMessage, setErrorMessage] = useState(null);
   const { data: currentPageId } = useCurrentPageId();
   const { data: revisionsData } = useSWRxPageRevisions(currentPageId, activePage, 10);
-  const pagingLimit = 10;
-
-  const { revisionComparerContainer } = props;
+  const [latestRevision, setLatestRevision] = useState(null);
+  const [sourceRevision, setSourceRevision] = useState(latestRevision);
+  const [targetRevision, setTargetRevision] = useState(latestRevision);
 
   useEffect(() => {
-    (async() => {
-      try {
-        await props.revisionComparerContainer.initRevisions();
-      }
-      catch (err) {
-        toastError(err);
-        setErrorMessage(err.message);
-        logger.error(err);
-      }
-    })();
-  }, [props.revisionComparerContainer]);
+    if (revisionsData != null) setLatestRevision(revisionsData.revisions[0]);
+  }, [revisionsData]);
 
-  if (errorMessage != null) {
-    return (
-      <div className="my-5">
-        <div className="text-danger">{errorMessage}</div>
-      </div>
-    );
-  }
+  const pagingLimit = 10;
 
   if (revisionsData == null) {
     return (
@@ -70,23 +48,26 @@ function PageHistory(props) {
   return (
     <div className="revision-history" data-testid="page-history">
       <PageRevisionTable
-        revisionComparerContainer={revisionComparerContainer}
         revisions={revisionsData.revisions}
         pagingLimit={pagingLimit}
+        sourceRevision={sourceRevision}
+        targetRevision={targetRevision}
+        changeSourceRevision={setSourceRevision}
+        changeTargetRevision={setTargetRevision}
       />
       <div className="my-3">
         {pager()}
       </div>
-      <RevisionComparer />
+      <RevisionComparer
+        revisions={revisionsData.revisions}
+        sourceRevision={sourceRevision}
+        targetRevision={targetRevision}
+        changeSourceRevision={setSourceRevision}
+        changeTargetRevision={setTargetRevision}
+        currentPageId={currentPageId}
+      />
     </div>
   );
-
-}
-
-const RenderPageHistoryWrapper = withUnstatedContainers(withLoadingSppiner(PageHistory), [RevisionComparerContainer]);
-
-PageHistory.propTypes = {
-  revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
 };
 
-export default RenderPageHistoryWrapper;
+export default PageHistory;