it possible to select revision.

src/client/js/components/RevisionCompare.jsx

@@ -11,6 +11,36 @@ class PageCompare extends React.Component {
     const { revisionCompareContainer, fromRevisionId, toRevisionId } = this.props;
 
     revisionCompareContainer.fetchPageRevisionBody(fromRevisionId, toRevisionId);
+    revisionCompareContainer.fetchPageRevisions();
+  }
+
+  /**
+   * render a row (Revision component and RevisionDiff component)
+   * @param {Revision} revisionSelected
+   * @param {Array} revisionList
+   */
+  renderRevisionSelector(label) {
+    if (["FromRev", "ToRev"].indexOf(label) === -1) {
+      return <div></div>
+    }
+
+    const { revisionCompareContainer } = this.props;
+    const selectedRev = (label === "FromRev" ? revisionCompareContainer.state.fromRevision : revisionCompareContainer.state.toRevision);
+    const changeHandler = (label === "FromRev" ? revisionCompareContainer.handleFromRevisionChange : revisionCompareContainer.handleToRevisionChange);
+    return (
+      <div class="input-group mb-3 col-sm">
+        <div class="input-group-prepend">
+          <label class="input-group-text" for="inputGroupSelect01">{ label }</label>
+        </div>
+        <select class="custom-select" id="inputGroupSelect01" value={selectedRev ? selectedRev._id : ""} onChange={e => changeHandler(e.target.value)}>
+          {
+            revisionCompareContainer.state.recentRevisions.map(rev => (
+              <option key={rev._id} value={rev._id}>{ rev._id }</option>
+            ))
+          }
+        </select>
+      </div>
+    );
   }
 
   render() {
@@ -20,9 +50,18 @@ class PageCompare extends React.Component {
     const toRev = revisionCompareContainer.state.toRevision;
     const showDiff = (fromRev && toRev);
 
+    const fromRevSelector = this.renderRevisionSelector("FromRev");
+    const toRevSelector = this.renderRevisionSelector("ToRev");
+
     return (
       <div id="revision-compare-content">
         <div>{ t('page_compare_revision.comparing_changes') }</div>
+        <div class="container">
+          <div class="row">
+            { fromRevSelector }
+            { toRevSelector }
+          </div>
+        </div>
         <div class="card card-compare">
           <div class="card-body">
           { fromRev && fromRev._id }<i class="icon-arrow-right-circle mx-1"></i>{ toRev && toRev._id }

src/client/js/services/RevisionCompareContainer.js

@@ -22,9 +22,13 @@ export default class RevisionCompareContainer extends Container {
 
       fromRevision: null,
       toRevision: null,
+
+      recentRevisions: [],
     }
 
     this.fetchPageRevisionBody = this.fetchPageRevisionBody.bind(this);
+    this.handleFromRevisionChange = this.handleFromRevisionChange.bind(this);
+    this.handleToRevisionChange = this.handleToRevisionChange.bind(this);
   }
 
   /**
@@ -61,4 +65,36 @@ export default class RevisionCompareContainer extends Container {
     }
   }
 
+  async fetchPageRevisions() {
+    const { pageId, shareLinkId } = this.pageContainer.state;
+    const page = 1; // The pagination start number is fixed to 1.
+    const res = await this.appContainer.apiv3Get('/revisions/list', {
+      pageId, shareLinkId, page, limit: 100,
+    });
+    const recentRevisions = res.data.docs;
+
+    res.data.docs.forEach((revision, i) => {
+      const user = revision.author;
+      if (user) {
+        recentRevisions[i].author = user;
+      }
+    });
+
+    this.setState({ recentRevisions });
+  }
+
+  handleFromRevisionChange(revisionId) {
+    this.setState({
+      fromRevision: revisionId
+    })
+    this.fetchPageRevisionBody(revisionId, this.state.toRevision._id);
+  }
+
+  handleToRevisionChange(revisionId) {
+    this.setState({
+      toRevision: revisionId
+    })
+    this.fetchPageRevisionBody(this.state.fromRevision._id, revisionId);
+  }
+
 }