#59: Adjusted config for selecting two commits

ui/src/visualizations/legacy/file-tree-comparison/config.js

@@ -1,46 +1,49 @@
 'use strict';
 
 import { connect } from 'react-redux';
-import Promise from 'bluebird';
-import Database from '../../../database/database';
-import SearchBox from '../../../components/SearchBox';
-
+import { setCommit1, setCommit2 } from './sagas/index.js';
 
 const mapStateToProps = (state /*, ownProps*/) => {
-  const fileTreeState = state;
-
+  const fileTreeState = state.visualizations.fileTreeComparison.state.data.data;
   return {
-    fileTreeState,
+    commits: fileTreeState.commits,
+    commit1: null,
+    commit2: null,
   };
 };
 
-const mapDispatchToProps = (dispatch ) => {
+const mapDispatchToProps = (dispatch) => {
   return {
-    //onClickMetric: (metric) => dispatch(setDisplayMetric(metric)),
-    //onClickCheckboxLegend: (selected) => dispatch(setSelectedAuthors(selected)),
+    onSetCommit1: (commit) => dispatch(setCommit1(commit)),
+    onSetCommit2: (commit) => dispatch(setCommit2(commit)),
   };
 };
 
 const ChangesConfigComponent = (props) => {
+  let commits = [];
+  for (const i in props.commits) {
+    commits.push(<option key={i}>{props.commits[i].messageHeader}</option>);
+  }
+  commits = commits.slice().reverse(); //reverse Array
+
   return (
-    <SearchBox
-      placeholder="Select commit..."
-      renderOption={(i) => `#${i.iid} ${i.title}`}
-      search={(text) => {
-        return Promise.resolve(Database.searchCommits(text)).map((i) => {
-          i.createdAt = new Date(i.createdAt);
-          i.closedAt = i.closedAt && new Date(i.closedAt);
-          return i;
-        });
-      }}
-      value={props.issue}
-      onChange={(issue) => {
-        if (issue !== null) {
-          props.onSetIssue(issue);
-        }
-      }}
-    />//TODO search bar
-  );
+    <div>
+      <select
+        value={props.commit1}
+        onChange={(e) => {
+          props.onSetCommit1(props.commits[e.target.options.selectedIndex]);
+        }}>
+        {commits}
+      </select>
+       <select
+         value={props.commit2}
+         onChange={(e) => {
+           props.onSetCommit2(props.commits[e.target.options.selectedIndex]);
+         }}>
+         {commits}
+       </select>
+     </div>
+   )
 };
 
 const FileTreeConfig = connect(mapStateToProps, mapDispatchToProps)(ChangesConfigComponent);

ui/src/visualizations/legacy/file-tree-comparison/reducers/config.js

@@ -5,9 +5,21 @@ import _ from 'lodash';
 
 export default handleActions(
   {
-
+    SET_COMMIT_1: (state, action) =>
+      _.assign({}, state, {
+        commit1: action.payload ? action.payload : null,
+      }),
+    SET_COMMIT_2: (state, action) =>
+      _.assign({}, state, {
+        commit2: action.payload ? action.payload : null,
+      }),
+    REQUEST_COMMITS_AND_FILE_TREE: (state, action) =>
+      _.assign({}, state, {
+        commits: action.payload ? action.payload : null,
+      }),
   },
   {
-
+    commit1: [],
+    commit2: [],
   }
 );