Added the ability to select the source and target from the update history.

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

@@ -99,7 +99,7 @@ class Revision extends React.Component {
                   id={`rbCompareFrom_${revision._id}`}
                   className="custom-control-input"
                   name="rbCompareFrom"
-                  onChange={() => revisionCompareContainer.handleFromRevisionChange(revision._id)}
+                  onChange={() => revisionCompareContainer.handleFromRevisionChange(revision)}
                 />
                 <label className="custom-control-label" htmlFor={`rbCompareFrom_${revision._id}`}>{t('page_history.comparing_from')}</label>
               </span>
@@ -109,7 +109,7 @@ class Revision extends React.Component {
                   id={`rbCompareTo_${revision._id}`}
                   className="custom-control-input"
                   name="rbCompareTo"
-                  onChange={() => revisionCompareContainer.handleToRevisionChange(revision._id)}
+                  onChange={() => revisionCompareContainer.handleToRevisionChange(revision)}
                 />
                 <label className="custom-control-label" htmlFor={`rbCompareTo_${revision._id}`}>{t('page_history.comparing_to')}</label>
               </span>

src/client/js/components/RevisionCompare.jsx

@@ -9,7 +9,10 @@ import {
 } from 'reactstrap';
 
 import { withUnstatedContainers } from './UnstatedUtils';
+
+import PageHistroyContainer from '../services/PageHistoryContainer';
 import RevisionCompareContainer from '../services/RevisionCompareContainer';
+
 import RevisionDiff from './PageHistory/RevisionDiff';
 import RevisionIdForm from './RevisionCompare/RevisionIdForm';
 
@@ -99,10 +102,11 @@ const PageCompare = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const PageCompareWrapper = withUnstatedContainers(PageCompare, [RevisionCompareContainer]);
+const PageCompareWrapper = withUnstatedContainers(PageCompare, [PageHistroyContainer, RevisionCompareContainer]);
 
 PageCompare.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
   revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
 };
 

src/client/js/components/RevisionCompare/RevisionIdForm.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { format } from 'date-fns';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
+import PageHistroyContainer from '../../services/PageHistoryContainer';
 import RevisionCompareContainer from '../../services/RevisionCompareContainer';
 
 class RevisionIdForm extends React.Component {
@@ -12,10 +13,10 @@ class RevisionIdForm extends React.Component {
    * create an Option array for AsyncSelect from the revision list
    */
   revisionOptions() {
-    const { revisionCompareContainer } = this.props;
+    const { revisions } = this.props.pageHistoryContainer.state;
     const timeFormat = 'yyyy/MM/dd HH:mm:ss';
 
-    return revisionCompareContainer.state.revisions.map((rev) => {
+    return revisions.map((rev) => {
       return { label: `${format(new Date(rev.createdAt), timeFormat)} - ${rev._id}`, value: rev._id };
     });
   }
@@ -68,12 +69,13 @@ class RevisionIdForm extends React.Component {
 /**
  * Wrapper component for using unstated
  */
-const RevisionIdFormWrapper = withUnstatedContainers(RevisionIdForm, [RevisionCompareContainer]);
+const RevisionIdFormWrapper = withUnstatedContainers(RevisionIdForm, [PageHistroyContainer, RevisionCompareContainer]);
 
 /**
  * Properties
  */
 RevisionIdForm.propTypes = {
+  pageHistoryContainer: PropTypes.instanceOf(PageHistroyContainer).isRequired,
   revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
 };
 

src/client/js/services/RevisionCompareContainer.js

@@ -139,14 +139,12 @@ export default class RevisionCompareContainer extends Container {
     }
   }
 
-  async handleFromRevisionChange(revisionId) {
-    const fromRevision = await this.fetchPageRevision(revisionId);
-    this.setState({ fromRevision });
+  async handleFromRevisionChange(revision) {
+    this.setState({ fromRevision: revision });
   }
 
-  async handleToRevisionChange(revisionId) {
-    const toRevision = await this.fetchPageRevision(revisionId);
-    this.setState({ toRevision });
+  async handleToRevisionChange(revision) {
+    this.setState({ toRevision: revision });
   }
 
 }