adding search form

packages/base-components/lib/common/Header.jsx

@@ -5,7 +5,7 @@ const Messages = Core.Messages;
 
 const Header = ({currentUser}) => {
   
-  ({Logo, ListContainer, CategoriesList, FlashContainer, FlashMessages, ModalButton, NewDocContainer, CanCreatePost, CurrentUserContainer, NewsletterForm} = Telescope.components);
+  ({Logo, ListContainer, CategoriesList, FlashContainer, FlashMessages, ModalButton, NewDocContainer, CanCreatePost, CurrentUserContainer, NewsletterForm, SearchForm} = Telescope.components);
 
   const logoUrl = Telescope.settings.get("logoUrl");
   const siteTitle = Telescope.settings.get("title", "Telescope");
@@ -41,6 +41,8 @@ const Header = ({currentUser}) => {
 
       <CurrentUserContainer component={NewsletterForm} />
 
+      <SearchForm/>
+
       <FlashContainer component={FlashMessages}/>
 
     </header>

packages/base-components/lib/common/SearchForm.jsx

@@ -0,0 +1,65 @@
+import React, { PropTypes, Component } from 'react';
+import Formsy from 'formsy-react';
+import FRC from 'formsy-react-components';
+
+const Input = FRC.Input;
+
+// see: http://stackoverflow.com/questions/1909441/jquery-keyup-delay
+const delay = (function(){
+  var timer = 0;
+  return function(callback, ms){
+    clearTimeout (timer);
+    timer = setTimeout(callback, ms);
+  };
+})();
+
+class SearchForm extends Component{
+
+  constructor() {
+    super();
+    this.search = this.search.bind(this);
+  }
+
+  search(data) {
+
+    if (FlowRouter.getRouteName() !== "posts.list") {
+      FlowRouter.go("posts.list");
+    }
+    
+    if (data.searchQuery === '') {
+      data.searchQuery = null;
+    }
+
+    delay(function(){
+      FlowRouter.setQueryParams({query: data.searchQuery});
+    }, 700 );
+
+  }
+
+  render() {
+
+    return (
+      <div className="search-form">
+        <Formsy.Form onChange={this.search}>
+          <Input
+            name="searchQuery"
+            value=""
+            label={this.props.labelText}
+            type="text"
+          />
+        </Formsy.Form>
+      </div>
+    )
+  }
+}
+
+SearchForm.propTypes = {
+  labelText: React.PropTypes.string
+}
+
+SearchForm.defaultProps = {
+  labelText: "Search"
+};
+
+module.exports = SearchForm;
+export default SearchForm;

packages/base-components/lib/components.js

@@ -8,6 +8,7 @@ Telescope.registerComponent("Flash", require('./common/Flash.jsx'));
 Telescope.registerComponent("FlashMessages", require('./common/FlashMessages.jsx'));
 Telescope.registerComponent("NewsletterForm", require('./common/NewsletterForm.jsx'));
 Telescope.registerComponent("Icon", require('./common/Icon.jsx'));
+Telescope.registerComponent("SearchForm", require('./common/SearchForm.jsx'));
 
 // posts