remove container state

packages/app/src/components/PageHistory.jsx

@@ -1,66 +1,60 @@
-import React, { useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+
 import PropTypes from 'prop-types';
-import loggerFactory from '~/utils/logger';
 
-import { withUnstatedContainers } from './UnstatedUtils';
+import PageHistroyContainer from '~/client/services/PageHistoryContainer';
+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';
 
-import { withLoadingSppiner } from './SuspenseUtils';
 import PageRevisionTable from './PageHistory/PageRevisionTable';
-
-import PageHistroyContainer from '~/client/services/PageHistoryContainer';
 import PaginationWrapper from './PaginationWrapper';
 import RevisionComparer from './RevisionComparer/RevisionComparer';
-import RevisionComparerContainer from '~/client/services/RevisionComparerContainer';
+import { withLoadingSppiner } from './SuspenseUtils';
+import { withUnstatedContainers } from './UnstatedUtils';
+
 
 const logger = loggerFactory('growi:PageHistory');
 
 function PageHistory(props) {
+  const [activePage, setActivePage] = useState(1);
+  const [errorMessage, setErrorMessage] = useState('');
+  const { data: currentPageId } = useCurrentPageId();
+  const { data: revisionsData } = useSWRxPageRevisions(currentPageId, 1, 10);
+  const pagingLimit = 10;
+
   const { pageHistoryContainer, revisionComparerContainer } = props;
-  const { getPreviousRevision } = pageHistoryContainer;
-  const {
-    activePage, totalPages, pagingLimit, revisions, diffOpened,
-  } = pageHistoryContainer.state;
-
-  const handlePage = useCallback(async(selectedPage) => {
-    try {
-      await props.pageHistoryContainer.retrieveRevisions(selectedPage);
-    }
-    catch (err) {
-      toastError(err);
-      props.pageHistoryContainer.setState({ errorMessage: err.message });
-      logger.error(err);
-    }
-  }, [props.pageHistoryContainer]);
-
-  if (pageHistoryContainer.state.errorMessage != null) {
-    return (
-      <div className="my-5">
-        <div className="text-danger">{pageHistoryContainer.state.errorMessage}</div>
-      </div>
-    );
-  }
 
-  if (pageHistoryContainer.state.revisions === pageHistoryContainer.dummyRevisions) {
+  useEffect(() => {
     throw new Promise(async() => {
       try {
-        await props.pageHistoryContainer.retrieveRevisions(1);
         await props.revisionComparerContainer.initRevisions();
       }
       catch (err) {
         toastError(err);
-        pageHistoryContainer.setState({ errorMessage: err.message });
+        setErrorMessage(err.message);
         logger.error(err);
       }
     });
+  }, [props.revisionComparerContainer]);
+
+
+  if (errorMessage != null) {
+    return (
+      <div className="my-5">
+        <div className="text-danger">{errorMessage}</div>
+      </div>
+    );
   }
 
   function pager() {
     return (
       <PaginationWrapper
         activePage={activePage}
-        changePage={handlePage}
-        totalItemsCount={totalPages}
+        changePage={setActivePage}
+        totalItemsCount={revisionsData.totalCounts}
         pagingLimit={pagingLimit}
         align="center"
       />
@@ -72,9 +66,7 @@ function PageHistory(props) {
       <PageRevisionTable
         pageHistoryContainer={pageHistoryContainer}
         revisionComparerContainer={revisionComparerContainer}
-        revisions={revisions}
-        diffOpened={diffOpened}
-        getPreviousRevision={getPreviousRevision}
+        revisions={revisionsData.revisions}
       />
       <div className="my-3">
         {pager()}

packages/app/src/components/PageHistory/PageRevisionTable.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+
 import PageHistroyContainer from '~/client/services/PageHistoryContainer';
 import RevisionComparerContainer from '~/client/services/RevisionComparerContainer';
 
@@ -20,7 +21,6 @@ class PageRevisionTable extends React.Component {
     const { revisionComparerContainer, t } = this.props;
     const { latestRevision, oldestRevision } = this.props.pageHistoryContainer.state;
     const revisionId = revision._id;
-    const revisionDiffOpened = this.props.diffOpened[revisionId] || false;
     const { sourceRevision, targetRevision } = revisionComparerContainer.state;
 
     const handleCompareLatestRevisionButton = () => {
@@ -41,7 +41,6 @@ class PageRevisionTable extends React.Component {
               t={this.props.t}
               revision={revision}
               isLatestRevision={revision === latestRevision}
-              revisionDiffOpened={revisionDiffOpened}
               hasDiff={hasDiff}
               key={`revision-history-rev-${revisionId}`}
             />
@@ -159,7 +158,6 @@ PageRevisionTable.propTypes = {
   revisionComparerContainer: PropTypes.instanceOf(RevisionComparerContainer).isRequired,
 
   revisions: PropTypes.array,
-  diffOpened: PropTypes.object,
 };
 
 export default withTranslation()(PageRevisionTable);

packages/app/src/components/PageHistory/Revision.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { UserPicture } from '@growi/ui';
+import PropTypes from 'prop-types';
+
 import UserDate from '../User/UserDate';
 import Username from '../User/Username';
 
@@ -83,6 +84,5 @@ Revision.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   revision: PropTypes.object,
   isLatestRevision: PropTypes.bool.isRequired,
-  revisionDiffOpened: PropTypes.bool.isRequired,
   hasDiff: PropTypes.bool.isRequired,
 };

packages/app/src/interfaces/revision.ts

@@ -8,6 +8,11 @@ export type IRevision = {
   updatedAt: Date,
 }
 
+export type IRevisionsForPagination = {
+  revisions: IRevision[], // revisions in one pagination
+  totalCounts: number // total counts
+}
+
 export type IRevisionOnConflict = {
   revisionId: string,
   revisionBody: string,

packages/app/src/stores/page.tsx

@@ -9,7 +9,7 @@ import {
 } from '~/interfaces/page';
 import { IRecordApplicableGrant, IResIsGrantNormalized } from '~/interfaces/page-grant';
 import { IPagingResult } from '~/interfaces/paging-result';
-import { IRevision } from '~/interfaces/revision';
+import { IRevisionsForPagination } from '~/interfaces/revision';
 
 import { apiGet } from '../client/util/apiv1-client';
 import { IPageTagsInfo } from '../interfaces/pageTagsInfo';
@@ -153,12 +153,18 @@ export const useSWRxPageRevisions = (
     pageId: string,
     page: number, // page number of pagination
     limit: number, // max number of pages in one paginate
-): SWRResponse<IRevision, Error> => {
+): SWRResponse<IRevisionsForPagination, Error> => {
 
-  return useSWRImmutable<IRevision, Error>(
+  return useSWRImmutable<IRevisionsForPagination, Error>(
     ['/revisions/list', pageId, page, limit],
     (endpoint, pageId, page, limit) => {
-      return apiv3Get(endpoint, { pageId, page, limit }).then(response => response.data.docs);
+      return apiv3Get(endpoint, { pageId, page, limit }).then((response) => {
+        const revisions = {
+          revisions: response.data.docs,
+          totalCounts: response.data.totalDocs,
+        };
+        return revisions;
+      });
     },
   );
 };