Create RevisionId selection component.

src/client/js/components/RevisionCompare.jsx

@@ -7,6 +7,8 @@ import PageContainer from '../services/PageContainer';
 import RevisionCompareContainer from '../services/RevisionCompareContainer';
 import RevisionDiff from './PageHistory/RevisionDiff';
 
+import RevisionIdForm from './RevisionCompare/RevisionIdForm';
+
 class PageCompare extends React.Component {
   componentWillMount() {
     const { revisionCompareContainer } = this.props;
@@ -54,18 +56,10 @@ 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-fluid px-0">
-          <div class="row">
-            { fromRevSelector }
-            { toRevSelector }
-          </div>
-        </div>
+        <RevisionIdForm />
         <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/components/RevisionCompare/RevisionIdForm.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+import RevisionCompareContainer from '../../services/RevisionCompareContainer';
+
+class RevisionIdForm extends React.Component {
+
+  constructor(props) {
+
+    super(props);
+
+    this.state = {
+    };
+
+  }
+
+  /**
+   * render a row (Revision component and RevisionDiff component)
+   * @param {label} label text of inputbox
+   */
+  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() {
+    const fromRevSelector = this.renderRevisionSelector("FromRev");
+    const toRevSelector = this.renderRevisionSelector("ToRev");
+
+    return (
+      <div class="container-fluid px-0">
+        <div class="row">
+          { fromRevSelector }
+          { toRevSelector }
+        </div>
+      </div>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const RevisionIdFormWrapper = withUnstatedContainers(RevisionIdForm, [RevisionCompareContainer]);
+
+/**
+ * Properties
+ */
+RevisionIdForm.propTypes = {
+  revisionCompareContainer: PropTypes.instanceOf(RevisionCompareContainer).isRequired,
+};
+
+/**
+ * Properties
+ */
+RevisionIdForm.defaultProps = {
+};
+
+export default RevisionIdFormWrapper;