Merge pull request #10 from tkgdsg/branch_dropdown_filter

add filter to branch dropdown menu

Author: mrkm4ntr

.eslintrc

@@ -14,5 +14,5 @@
   "rules": {
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error"
-  }
+  },
 }

scripts/components/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 import CommitGraph from './CommitGraph';
+import FormControl from 'react-bootstrap/lib/FormControl';
 import 'whatwg-fetch';
 
 export default class App extends React.Component {
@@ -18,13 +19,17 @@ export default class App extends React.Component {
     super(props);
     this.selectBranch = this.selectBranch.bind(this);
     this.selectCount = this.selectCount.bind(this);
+    this.clearFilter = this.clearFilter.bind(this);
+    this.changeFilter = this.changeFilter.bind(this);
     this.state = {
       maxLane: 0,
       commits: [],
       branches: [],
       currentBranch: App.allBranchName,
       isFetching: true,
       count: 100,
+      displayCount: 100,
+      filter: '',
     };
   }
 
@@ -48,6 +53,7 @@ export default class App extends React.Component {
   }
 
   selectBranch(branch) {
+    if (branch.startsWith('.')) return;
     const params = this.setParams(branch, { count: this.state.count });
     this.fetchData(params);
   }
@@ -63,7 +69,12 @@ export default class App extends React.Component {
     return window.fetch(`./network/commits?${query}`, { credentials: 'include' }).then(
       r => r.json()
     ).then(data => {
-      const newState = Object.assign({ count: params.count, isFetching: false }, data);
+      const newState = Object.assign({ count: params.count, isFetching: false },
+                                     data,
+                                     { branches: data.branches.map(
+                                         branch => ({ branch, visible: true })) },
+                                     { displayCount: data.branches.length }
+                                    );
       if (data.all) {
         newState.currentBranch = App.allBranchName;
       }
@@ -75,6 +86,40 @@ export default class App extends React.Component {
     });
   }
 
+  stopPropagation(e) {
+    console.log(e.target.value);
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  changeFilter(e) {
+    this.filter(e.target.value);
+  }
+
+  clearFilter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.filter('');
+  }
+
+  filter(value) {
+    this.setState(Object.assign(this.state, { filter: value }));
+
+    this.setState(Object.assign(this.state, {
+      branches: this.state.branches.map(({ branch }) => ({
+        branch,
+        visible: this.state.filter ?
+                 branch.toLowerCase().indexOf(this.state.filter.toLowerCase()) >= 0 : true,
+      })),
+    }));
+
+    this.setState(Object.assign(this.state, {
+      displayCount: this.state.branches.reduce((prev, current) =>
+                                                 prev + (current.visible ? 1 : 0), 0),
+    }));
+  }
+
   render() {
     return (
       <div style={{ marginLeft: '20px' }}>
@@ -90,10 +135,27 @@ export default class App extends React.Component {
           <MenuItem key={App.defaultBranchName} eventKey={App.defaultBranchName}>
             {App.defaultBranchName}
           </MenuItem>
+          <MenuItem>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <FormControl
+                type="text" placeholder="Find branch..."
+                style={{ width: '90%' }}
+                value={this.state.filter}
+                onClick={this.stopPropagation}
+                onChange={this.changeFilter}
+              />
+              <i
+                className="octicon octicon-x" style={{ display: 'flex' }}
+                onClick={this.clearFilter}
+              />
+            </div>
+          </MenuItem>
           <MenuItem divider />
-          {this.state.branches.map(branch =>
+          {this.state.branches.filter(({ visible }) => visible).map(({ branch }) =>
             <MenuItem key={branch} eventKey={branch}>{branch}</MenuItem>
           )}
+          {this.state.displayCount === 0 ?
+            (<MenuItem eventKey=".">NO MATCHED BRANCH</MenuItem>) : (null)}
         </DropdownButton>
         <DropdownButton
           id="countSelector"