start implementing findbar

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["react", "es2015"],
-  "plugins": ["transform-class-properties", "transform-object-assign", "transform-object-rest-spread"]
+  "plugins": ["transform-class-properties", "transform-object-assign", "transform-object-rest-spread", "lodash"]
 }

package.json

@@ -20,6 +20,7 @@
     "babel-core": "^6.5.1",
     "babel-eslint": "^4.1.8",
     "babel-loader": "^6.2.2",
+    "babel-plugin-lodash": "^3.2.0",
     "babel-plugin-transform-class-properties": "^6.5.2",
     "babel-plugin-transform-object-assign": "^6.5.0",
     "babel-plugin-transform-object-rest-spread": "^6.5.0",
@@ -67,6 +68,7 @@
     "draft-js-import-markdown": "^0.1.6",
     "fuzzy": "^0.1.1",
     "json-loader": "^0.5.4",
-    "localforage": "^1.4.2"
+    "localforage": "^1.4.2",
+    "lodash": "^4.13.1"
   }
 }

src/containers/CollectionPage.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { loadEntries } from '../actions/entries';
 import { selectEntries } from '../reducers';
 import EntryListing from '../components/EntryListing';
+import FindBar from './FindBar';
 
 class DashboardPage extends React.Component {
   componentDidMount() {
@@ -28,8 +29,16 @@ class DashboardPage extends React.Component {
       return <h1>No collections defined in your config.yml</h1>;
     }
 
+    const commands = [
+      { pattern: 'Create Collections(:collectionName)' },
+      { pattern: 'Create Posts(:postName)' },
+      { pattern: 'Find(:seachTerm as what?)' },
+      { pattern: '(:searchTerm as Find...)' }
+    ];
+
     return <div>
       <h1>Dashboard</h1>
+      <FindBar commands={commands} />
       <div>
         {collections.map((collection) => (
           <div key={collection.get('name')}>

src/containers/FindBar.js

@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
 import fuzzy from 'fuzzy';
+import _ from 'lodash';
 import { connect } from 'react-redux';
 
 class FindBar extends React.Component {
-  constructor() {
+  constructor(props) {
+    super(props);
     this.compiledCommands = {};
     this.state = {
       prompt: '',
@@ -13,7 +15,7 @@ class FindBar extends React.Component {
 
     this.compileCommand = this.compileCommand.bind(this);
     this.matchCommand = this.matchCommand.bind(this);
-    this.getSuggestions = this.getSuggestions.bind(this);
+    this.getSuggestions = _.throttle(this.getSuggestions.bind(this), 200);
     this.handleInputChange = this.handleInputChange.bind(this);
   }
 
@@ -67,12 +69,14 @@ class FindBar extends React.Component {
   }
 
   getSuggestions(value) {
+    console.log(value);
     const options = {
       //pre: '<strong>',
       //post: '</strong>',
       extract: el => el. token
     };
     const results = fuzzy.filter(value, this.compiledCommands, options);
+
     return results;
   }
 

webpack.config.js

@@ -21,7 +21,7 @@ module.exports = {
         query: {
           cacheDirectory: true,
           presets: ['react', 'es2015'],
-          plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread']
+          plugins: ['transform-class-properties', 'transform-object-assign', 'transform-object-rest-spread', 'lodash']
         }
       }
     ]