basic version of search implemented

front-ui/app/components/rootApp.js

@@ -8,6 +8,7 @@ var React = require('react'),
     InitializationActions = require('../actions/initializationActions');
 
 var CartIcon = require('./cart/cartIcon');
+var SearchBox = require('./shared/searchBox');
 
 var RootApp = React.createClass({
 
@@ -55,10 +56,15 @@ var RootApp = React.createClass({
         </div>
     </div>
     <div className='row'>
-        <div className='col-md-12' id='header'>
+        <div className='col-md-8' id='header'>
             <SectionsListComponent />
             </div>
+
+        <div className="col-md-4">
+            <SearchBox />
         </div>
+        </div>
+
         <div className='row'>
             <RouteHandler />
         </div>

front-ui/app/components/search/searchResultsPage.js

@@ -0,0 +1,52 @@
+var React = require('react'),
+    NavigationActions = require('../../actions/navigationActions'),
+    Globals = require('../../globals')
+    Router = require("react-router"),
+    Link = Router.Link;
+    
+var SearchStore = require('../../stores/searchStore');
+var SearchActions = require('../../actions/searchActions');
+
+var ItemList = require('../items/itemList');
+var SearchResultsPage = React.createClass({
+    mixins: [Router.State],
+    getInitialState: function() {
+        return SearchStore.getSearchResultsState();
+    },
+    render: function() {
+      return (
+        <div>
+           <h1>Resultati pretrage za {this.state.q}</h1>
+     
+
+        <ItemList items={this.state.items} />
+        </div>
+        
+        );       
+
+    },
+    componentWillReceiveProps: function() {
+      this.update();
+    },
+    update: function(){
+      var query = this.getQuery();
+      SearchActions.getSearchResults(query.q);
+    },
+    componentDidMount: function() {
+      SearchStore.addChangeListener(this._onChange);
+      this.update();
+
+      //CartActions.load();
+    },
+    componentWillUnmount: function () {
+      SearchStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+        if(this.isMounted()) {
+            this.setState(SearchStore.getSearchResultsState());
+        }
+    }
+});
+
+
+module.exports = SearchResultsPage; 

front-ui/app/components/shared/searchBox.js

@@ -0,0 +1,46 @@
+var React = require('react'),
+    Router = require('react-router');
+
+var NavigationActions = require('../../actions/navigationActions');
+var SearchActions = require('../../actions/searchActions');
+var SearchStore = require('../../stores/searchStore');
+
+var SearchBox = React.createClass({
+    getInitialState: function() {
+        return SearchStore.getSearchBoxState();
+    },
+    onSearchClick: function(e) {
+        NavigationActions.goToSearchResults(this.state.q);
+        e.preventDefault();
+    },
+    componentDidMount: function() {
+        SearchStore.addChangeListener(this.onSearchStoreChange);
+    },
+    componentWillUnmount: function() {
+        SearchStore.removeChangeListener(this.onSearchStoreChange);
+    },
+    onSearchStoreChange: function() {
+        if(this.isMounted()) {
+            this.setState(SearchStore.getSearchBoxState());
+        }
+    },
+    onSearchBoxChange: function(e) {
+       SearchActions.searchBoxChange(e.currentTarget.value); 
+    },
+    onKeyPress: function(e) {
+        var enterKeyCode = 13;
+        if(e.which == enterKeyCode) {
+            NavigationActions.goToSearchResults(this.state.q);
+        }
+    },
+    render: function() {
+   return (<div className="input-group">
+      <input type="text" onKeyPress={this.onKeyPress} className="form-control" value={this.state.q} onChange={this.onSearchBoxChange} placeholder="Pretraga"> </input>
+      <span className="input-group-btn">
+        <button className="btn btn-default" type="button" onClick={this.onSearchClick}>Traži</button>
+      </span>
+    </div>)
+    }
+});
+
+module.exports = SearchBox;