#59: Moved select for commits to chart.js, made boundaries for commit2

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

@@ -7,12 +7,14 @@ export default class Changes extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      commitsToChoose1: [],
+      commitsToChoose2: [],
       commits: this.props.commits,
       commit1: {
-        messageHeader: '',
+        messageHeader: 'Select a first commit',
       },
       commit2: {
-        messageHeader: '',
+        messageHeader: 'Select a second commit',
       },
       tree1: [],
       tree2: [],
@@ -21,34 +23,113 @@ export default class Changes extends React.Component {
 
   render() {
     return (
-      <Tree files={this.state.tree1} />
+      <table>
+        <thead>
+          <th>
+            <select
+              value={this.state.commit1.messageHeader}
+              onChange={(e) => {
+                const commit = this.state.commits.find((c) => {
+                  return e.target.options[e.target.options.selectedIndex].getAttribute('sha') === c.sha;
+                });
+                this.calculateValues(commit, null);
+                this.setState({ commitsToChoose2: this.buildingSelect(this.state.commits, commit.date) });
+              }}>
+              {this.state.commitsToChoose1}
+            </select>
+          </th>
+          <th>
+            <select
+              value={this.state.commit2.messageHeader}
+              onChange={(e) => {
+                const commit = this.state.commits.find((c) => {
+                  return e.target.options[e.target.options.selectedIndex].getAttribute('sha') === c.sha;
+                });
+                this.calculateValues(null, commit);
+              }}>
+              {this.state.commitsToChoose2}
+            </select>
+          </th>
+        </thead>
+        <tbody>
+          <td>
+            <div>
+              <Tree files={this.state.tree1} />
+            </div>
+          </td>
+          <td>
+            <div>
+              <Tree files={this.state.tree2} />
+            </div>
+          </td>
+        </tbody>
+      </table>
     );
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.commit1 !== [] && nextProps.commit2 !== []) {
-      let tree1 = getTreeCommitspan(nextProps.commit1.sha, nextProps.commits);
+  calculateValues(commit1, commit2) {
+    if (commit1 !== null) {
+      let tree1 = getTreeCommitspan(commit1.sha, this.state.commits);
       tree1 = makeHierarchyFileTree(tree1);
-      let tree2 = getTreeCommitspan(nextProps.commit2.sha, nextProps.commits);
+      this.setState({ commit1: commit1, tree1: tree1 });
+    }
+    if (commit2 !== null) {
+      let tree2 = getTreeCommitspan(commit2.sha, this.state.commits);
       tree2 = makeHierarchyFileTree(tree2);
-      this.setState({
-        commits: nextProps.commits,
-        commit1: nextProps.commit1,
-        commit2: nextProps.commit2,
-        tree1: tree1,
-        tree2: tree2,
-      });
+      this.setState({ commit2: commit2, tree2: tree2 });
+    }
+    if (this.state.commit1.messageHeader !== 'Select a first commit' && this.state.commit2.messageHeader !== 'Select a first commit') {
+      //this.compareTrees
+    }
+  }
+
+  buildingSelect(commits, filter) {
+    let newCommits = [];
+    if (filter === null) {
+      for (const i in commits) {
+        newCommits.push(
+          <option key={i} sha={commits[i].sha}>
+            {commits[i].messageHeader}
+          </option>
+        );
+      }
+    } else {
+      for (const i in commits) {
+        if (commits[i].date > filter) {
+          newCommits.push(
+            <option key={i} sha={commits[i].sha}>
+              {commits[i].messageHeader}
+            </option>
+          );
+        }
+      }
+    }
+    newCommits = newCommits.slice().reverse(); //reverse Array
+    console.log(newCommits);
+    return newCommits;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.commits.length !== 0) {
+      const commits = this.buildingSelect(nextProps.commits, null);
+      this.setState({ commits: nextProps.commits, commitsToChoose1: commits, commitsToChoose2: commits });
     }
   }
 }
 
+function compareTrees(tree1, tree2) {
+  tree2.forEach((e) => {
+    if (tree1.contains(e)) {
+      console.log('True');
+    }
+  });
+}
+
 function getTreeCommitspan(toSha, commits) {
   if (toSha === undefined || commits === undefined) {
     return null;
   }
   const fileTree = [];
-  console.log(commits);
-  console.log(toSha);
 
   for (let i = 0; i < commits.length; i++) {
     if (commits[i].sha !== toSha) {

ui/src/visualizations/legacy/file-tree-comparison/chart/index.js

@@ -2,7 +2,6 @@
 
 import { connect } from 'react-redux';
 import Chart from './chart.js';
-import { setCommit1, setCommit2 } from '../sagas';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const corState = state.visualizations.fileTreeComparison.state;
@@ -17,8 +16,6 @@ const mapStateToProps = (state /*, ownProps*/) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onSetCommit1: (commit) => dispatch(setCommit1(commit)),
-    onSetCommit2: (commit) => dispatch(setCommit2(commit)),
   };
 };
 

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

@@ -1,54 +1,26 @@
 'use strict';
 
 import { connect } from 'react-redux';
-import { setCommit1, setCommit2, setTree1, setTree2 } from './sagas/index.js';
 
 const mapStateToProps = (state /*, ownProps*/) => {
   const fileTreeState = state.visualizations.fileTreeComparison.state.data.data;
   return {
     commits: fileTreeState.commits,
-    commit1: null,
-    commit2: null,
-    tree1: null,
-    tree2: null,
   };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    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 (
     <div>
-      <select
-        value={props.commit1}
-        onChange={(e) => {
-          props.onSetCommit1(props.commits[commits.length - e.target.options.selectedIndex - 1]);
-        }}>
-        {commits}
-      </select>
-      <select
-        value={props.commit2}
-        onChange={(e) => {
-          props.onSetCommit2(props.commits[commits.length - e.target.options.selectedIndex - 1]);
-        }}>
-        {commits}
-      </select>
     </div>
   );
 };
 
 const FileTreeConfig = connect(mapStateToProps, mapDispatchToProps)(ChangesConfigComponent);
 
 export default FileTreeConfig;
-