adjust

src/client/js/app.jsx

@@ -52,7 +52,7 @@ const socketIoContainer = appContainer.getContainer('SocketIoContainer');
 // create unstated container instance
 const navigationContainer = new NavigationContainer(appContainer);
 const pageContainer = new PageContainer(appContainer);
-const pageHistoryContainer = new PageHistoryContainer(appContainer);
+const pageHistoryContainer = new PageHistoryContainer(appContainer, pageContainer);
 const commentContainer = new CommentContainer(appContainer);
 const editorContainer = new EditorContainer(appContainer, defaultEditorOptions, defaultPreviewOptions);
 const tagContainer = new TagContainer(appContainer);

src/client/js/components/PageHistory.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
@@ -7,14 +7,8 @@ import { toastError } from '../util/apiNotification';
 
 import PageRevisionList from './PageHistory/PageRevisionList';
 
-import AppContainer from '../services/AppContainer';
-import PageContainer from '../services/PageContainer';
 import PageHistroyContainer from '../services/PageHistoryContainer';
 
-import fetchProfileData from './FakeApi';
-
-const resource = fetchProfileData();
-
 const logger = loggerFactory('growi:PageHistory');
 
 // set dummy value tile for using suspense
@@ -34,78 +28,24 @@ function AppSettingsPage(props) {
   );
 }
 function PageHistory(props) {
-  const { pageContainer, pageHistoryContainer } = props;
-  const { shareLinkId, pageId } = pageContainer.state;
+  const { pageHistoryContainer } = props;
 
   if (!isLoaded) {
     throw new Promise(async() => {
       try {
-        await props.pageHistoryContainer.retrieveRevisions({ pageId, shareLinkId });
+        await props.pageHistoryContainer.retrieveRevisions();
       }
       catch (err) {
         toastError(err);
         pageHistoryContainer.setState({ retrieveError: err.message });
         logger.error(err);
       }
-      isLoaded = true;
+      finally {
+        isLoaded = true;
+      }
     });
   }
 
-  function fetchPageRevisionBody(revision) {
-    const { appContainer, pageContainer } = props;
-    const { pageId, shareLinkId } = pageContainer.state;
-
-    if (revision.body) {
-      return;
-    }
-
-    appContainer.apiGet('/revisions.get', { page_id: pageId, revision_id: revision._id, share_link_id: shareLinkId })
-      .then((res) => {
-        if (res.ok) {
-          this.setState({
-            revisions: this.state.revisions.map((rev) => {
-              // comparing ObjectId
-              // eslint-disable-next-line eqeqeq
-              if (rev._id == res.revision._id) {
-                return res.revision;
-              }
-
-              return rev;
-            }),
-          });
-        }
-      })
-      .catch((err) => {
-
-      });
-  }
-
-  // function getPreviousRevision(currentRevision) {
-  //   let cursor = null;
-  //   for (const revision of revisions) {
-  //     // comparing ObjectId
-  //     // eslint-disable-next-line eqeqeq
-  //     if (cursor && cursor._id == currentRevision._id) {
-  //       cursor = revision;
-  //       break;
-  //     }
-
-  //     cursor = revision;
-  //   }
-
-  //   return cursor;
-  // }
-
-  // function onDiffOpenClicked(revision) {
-  //   const revisionId = revision._id;
-
-  //   diffOpened[revisionId] = !(diffOpened[revisionId]);
-  //   setDiffOpened(diffOpened);
-
-  //   fetchPageRevisionBody(revision);
-  //   fetchPageRevisionBody(getPreviousRevision(revision));
-  // }
-
   return (
     <div className="mt-4">
       {pageHistoryContainer.state.errorMessage && (
@@ -124,12 +64,9 @@ function PageHistory(props) {
 
 }
 
-const RenderPageHistoryWrapper = withUnstatedContainers(PageHistory, [AppContainer, PageContainer, PageHistroyContainer]);
-
+const RenderPageHistoryWrapper = withUnstatedContainers(PageHistory, [PageHistroyContainer]);
 
 PageHistory.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
 };
 

src/client/js/components/PageHistory/PageRevisionList.jsx

@@ -66,7 +66,6 @@ class PageRevisionList extends React.Component {
   render() {
     const { t } = this.props;
 
-    console.log(this.props);
     const revisions = this.props.revisions;
     const revisionCount = this.props.revisions.length;
 

src/client/js/services/PageHistoryContainer.js

@@ -1,31 +1,29 @@
 import { Container } from 'unstated';
 
-import loggerFactory from '@alias/logger';
-
-// eslint-disable-next-line no-unused-vars
-const logger = loggerFactory('growi:services:PageHistoryContainer');
-
-
 /**
  * Service container for personal settings page (PageHistory.jsx)
  * @extends {Container} unstated Container
  */
 export default class PageHistoryContainer extends Container {
 
-  constructor(appContainer) {
+  constructor(appContainer, pageContainer) {
     super();
 
     this.appContainer = appContainer;
+    this.pageContainer = pageContainer;
 
     this.state = {
       retrieveError: null,
-      isLoaded: false,
       hoge: 'huga',
 
       revisions: [],
       diffOpened: null,
     };
 
+    this.retrieveRevisions = this.retrieveRevisions.bind(this);
+    this.onDiffOpenClicked = this.onDiffOpenClicked.bind(this);
+    this.getPreviousRevision = this.getPreviousRevision.bind(this);
+    this.fetchPageRevisionBody = this.fetchPageRevisionBody.bind(this);
   }
 
   /**
@@ -35,7 +33,8 @@ export default class PageHistoryContainer extends Container {
     return 'PageHistoryContainer';
   }
 
-  async retrieveRevisions({ pageId, shareLinkId }) {
+  async retrieveRevisions() {
+    const { pageId, shareLinkId } = this.pageContainer.state;
 
     if (!pageId) {
       return;
@@ -62,20 +61,76 @@ export default class PageHistoryContainer extends Container {
 
     this.setState({ revisions: rev });
     this.setState({ diffOpened });
-    this.setState({ isLoaded: true });
 
     // load 0, and last default
-    // if (rev[0]) {
-    //   fetchPageRevisionBody(rev[0]);
-    // }
-    // if (rev[1]) {
-    //   fetchPageRevisionBody(rev[1]);
-    // }
-    // if (lastId !== 0 && lastId !== 1 && rev[lastId]) {
-    //   fetchPageRevisionBody(rev[lastId]);
-    // }
+    if (rev[0]) {
+      this.fetchPageRevisionBody(rev[0]);
+    }
+    if (rev[1]) {
+      this.fetchPageRevisionBody(rev[1]);
+    }
+    if (lastId !== 0 && lastId !== 1 && rev[lastId]) {
+      this.fetchPageRevisionBody(rev[lastId]);
+    }
 
     return;
   }
 
+  onDiffOpenClicked(revision) {
+    const { diffOpened } = this.state;
+    const revisionId = revision._id;
+
+    diffOpened[revisionId] = !(diffOpened[revisionId]);
+    this.setState(diffOpened);
+
+    this.fetchPageRevisionBody(revision);
+    this.fetchPageRevisionBody(this.getPreviousRevision(revision));
+  }
+
+  getPreviousRevision(currentRevision) {
+    let cursor = null;
+    for (const revision of this.state.revisions) {
+      // comparing ObjectId
+      // eslint-disable-next-line eqeqeq
+      if (cursor && cursor._id == currentRevision._id) {
+        cursor = revision;
+        break;
+      }
+
+      cursor = revision;
+    }
+
+    return cursor;
+  }
+
+  fetchPageRevisionBody(revision) {
+    const { pageId, shareLinkId } = this.pageContainer.state;
+
+    if (revision.body) {
+      return;
+    }
+
+    // TODO apiV3
+    this.appContainer.apiGet('/revisions.get', { page_id: pageId, revision_id: revision._id, share_link_id: shareLinkId })
+      .then((res) => {
+        if (res.ok) {
+          this.setState({
+            revisions: this.state.revisions.map((rev) => {
+              // comparing ObjectId
+              // eslint-disable-next-line eqeqeq
+              if (rev._id == res.revision._id) {
+                return res.revision;
+              }
+
+              return rev;
+            }),
+          });
+        }
+      })
+      .catch((err) => {
+
+      });
+  }
+
+
 }