summaryrefslogtreecommitdiffstats
path: root/web/react/components/search_bar.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/search_bar.jsx')
-rw-r--r--web/react/components/search_bar.jsx126
1 files changed, 74 insertions, 52 deletions
diff --git a/web/react/components/search_bar.jsx b/web/react/components/search_bar.jsx
index b11b39e9e..8da8231a2 100644
--- a/web/react/components/search_bar.jsx
+++ b/web/react/components/search_bar.jsx
@@ -1,7 +1,6 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-
var client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var PostStore = require('../stores/post_store.jsx');
@@ -10,36 +9,47 @@ var utils = require('../utils/utils.jsx');
var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
-function getSearchTermStateFromStores() {
- var term = PostStore.getSearchTerm() || '';
- return {
- search_term: term
- };
-}
+export default class SearchBar extends React.Component {
+ constructor() {
+ super();
+ this.mounted = false;
-module.exports = React.createClass({
- displayName: 'SearchBar',
- componentDidMount: function() {
- PostStore.addSearchTermChangeListener(this._onChange);
- },
- componentWillUnmount: function() {
- PostStore.removeSearchTermChangeListener(this._onChange);
- },
- _onChange: function(doSearch, isMentionSearch) {
- if (this.isMounted()) {
- var newState = getSearchTermStateFromStores();
+ this.onListenerChange = this.onListenerChange.bind(this);
+ this.handleUserInput = this.handleUserInput.bind(this);
+ this.performSearch = this.performSearch.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
+
+ this.state = this.getSearchTermStateFromStores();
+ }
+ getSearchTermStateFromStores() {
+ var term = PostStore.getSearchTerm() || '';
+ return {
+ searchTerm: term
+ };
+ }
+ componentDidMount() {
+ PostStore.addSearchTermChangeListener(this.onListenerChange);
+ this.mounted = true;
+ }
+ componentWillUnmount() {
+ PostStore.removeSearchTermChangeListener(this.onListenerChange);
+ this.mounted = false;
+ }
+ onListenerChange(doSearch, isMentionSearch) {
+ if (this.mounted) {
+ var newState = this.getSearchTermStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState);
}
if (doSearch) {
- this.performSearch(newState.search_term, isMentionSearch);
+ this.performSearch(newState.searchTerm, isMentionSearch);
}
}
- },
- clearFocus: function(e) {
+ }
+ clearFocus() {
$('.search-bar__container').removeClass('focused');
- },
- handleClose: function(e) {
+ }
+ handleClose(e) {
e.preventDefault();
AppDispatcher.handleServerAction({
@@ -58,23 +68,23 @@ module.exports = React.createClass({
type: ActionTypes.RECIEVED_POST_SELECTED,
results: null
});
- },
- handleUserInput: function(e) {
+ }
+ handleUserInput(e) {
var term = e.target.value;
PostStore.storeSearchTerm(term);
PostStore.emitSearchTermChange(false);
- this.setState({ search_term: term });
- },
- handleUserFocus: function(e) {
+ this.setState({searchTerm: term});
+ }
+ handleUserFocus(e) {
e.target.select();
$('.search-bar__container').addClass('focused');
- },
- performSearch: function(terms, isMentionSearch) {
+ }
+ performSearch(terms, isMentionSearch) {
if (terms.length) {
this.setState({isSearching: true});
client.search(
terms,
- function(data) {
+ function success(data) {
this.setState({isSearching: false});
if (utils.isMobile()) {
React.findDOMNode(this.refs.search).value = '';
@@ -86,38 +96,50 @@ module.exports = React.createClass({
is_mention_search: isMentionSearch
});
}.bind(this),
- function(err) {
+ function error(err) {
this.setState({isSearching: false});
- AsyncClient.dispatchError(err, "search");
+ AsyncClient.dispatchError(err, 'search');
}.bind(this)
);
}
- },
- handleSubmit: function(e) {
+ }
+ handleSubmit(e) {
e.preventDefault();
- this.performSearch(this.state.search_term.trim());
- },
- getInitialState: function() {
- return getSearchTermStateFromStores();
- },
- render: function() {
+ this.performSearch(this.state.searchTerm.trim());
+ }
+ render() {
+ var isSearching = null;
+ if (this.state.isSearching) {
+ isSearching = <span className={'glyphicon glyphicon-refresh glyphicon-refresh-animate'}></span>;
+ }
return (
<div>
- <div className="sidebar__collapse" onClick={this.handleClose}><span className="fa fa-angle-left"></span></div>
- <span onClick={this.clearFocus} className="search__clear">Cancel</span>
- <form role="form" className="search__form relative-div" onSubmit={this.handleSubmit}>
- <span className="glyphicon glyphicon-search sidebar__search-icon"></span>
+ <div
+ className='sidebar__collapse'
+ onClick={this.handleClose} >
+ <span className='fa fa-angle-left'></span>
+ </div>
+ <span
+ className='search__clear'
+ onClick={this.clearFocus}>
+ Cancel
+ </span>
+ <form
+ role='form'
+ className='search__form relative-div'
+ onSubmit={this.handleSubmit}>
+ <span className='glyphicon glyphicon-search sidebar__search-icon'></span>
<input
- type="text"
- ref="search"
- className="form-control search-bar"
- placeholder="Search"
- value={this.state.search_term}
+ type='text'
+ ref='search'
+ className='form-control search-bar'
+ placeholder='Search'
+ value={this.state.searchTerm}
onFocus={this.handleUserFocus}
onChange={this.handleUserInput} />
- {this.state.isSearching ? <span className={"glyphicon glyphicon-refresh glyphicon-refresh-animate"}></span> : null}
+ {isSearching}
</form>
</div>
);
}
-});
+}