diff options
Diffstat (limited to 'web/react/components/search_results.jsx')
| -rw-r--r-- | web/react/components/search_results.jsx | 218 |
1 files changed, 73 insertions, 145 deletions
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx index b1efd7685..6ee817171 100644 --- a/web/react/components/search_results.jsx +++ b/web/react/components/search_results.jsx @@ -1,181 +1,109 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. - var PostStore = require('../stores/post_store.jsx'); -var ChannelStore = require('../stores/channel_store.jsx'); var UserStore = require('../stores/user_store.jsx'); -var UserProfile = require( './user_profile.jsx' ); -var SearchBox =require('./search_bar.jsx'); +var SearchBox = require('./search_bar.jsx'); var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var Constants = require('../utils/constants.jsx'); -var ActionTypes = Constants.ActionTypes; - -var RhsHeaderSearch = React.createClass({ - handleClose: function(e) { - e.preventDefault(); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_SEARCH, - results: null - }); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_SEARCH_TERM, - term: null, - do_search: false, - is_mention_search: false - }); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_POST_SELECTED, - results: null - }); - }, - render: function() { - var title = this.props.isMentionSearch ? "Recent Mentions" : "Search Results"; - return ( - <div className="sidebar--right__header"> - <span className="sidebar--right__title">{title}</span> - <button type="button" className="sidebar--right__close" aria-label="Close" title="Close" onClick={this.handleClose}></button> - </div> - ); - } -}); - -var SearchItem = React.createClass({ - handleClick: function(e) { - e.preventDefault(); +var SearchResultsHeader = require('./search_results_header.jsx'); +var SearchResultsItem = require('./search_results_item.jsx'); - var self = this; - - client.getPost( - this.props.post.channel_id, - this.props.post.id, - function(data) { - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_POST_SELECTED, - post_list: data, - from_search: PostStore.getSearchTerm() - }); - - AppDispatcher.handleServerAction({ - type: ActionTypes.RECIEVED_SEARCH, - results: null, - is_mention_search: self.props.isMentionSearch - }); - }, - function(err) { - AsyncClient.dispatchError(err, "getPost"); - } - ); - - var postChannel = ChannelStore.get(this.props.post.channel_id); - var teammate = postChannel.type === 'D' ? utils.getDirectTeammate(this.props.post.channel_id).username : ""; - - utils.switchChannel(postChannel, teammate); - }, +function getStateFromStores() { + return {results: PostStore.getSearchResults()}; +} - render: function() { +export default class SearchResults extends React.Component { + constructor(props) { + super(props); - var message = utils.textToJsx(this.props.post.message, {searchTerm: this.props.term, noMentionHighlight: !this.props.isMentionSearch}); - var channelName = ""; - var channel = ChannelStore.get(this.props.post.channel_id); - var timestamp = UserStore.getCurrentUser().update_at; + this.mounted = false; - if (channel) { - channelName = (channel.type === 'D') ? "Private Message" : channel.display_name; - } + this.onChange = this.onChange.bind(this); + this.resize = this.resize.bind(this); - return ( - <div className="search-item-container post" onClick={this.handleClick}> - <div className="search-channel__name">{ channelName }</div> - <div className="post-profile-img__container"> - <img className="post-profile-img" src={"/api/v1/users/" + this.props.post.user_id + "/image?time=" + timestamp} height="36" width="36" /> - </div> - <div className="post__content"> - <ul className="post-header"> - <li className="post-header-col"><strong><UserProfile userId={this.props.post.user_id} /></strong></li> - <li className="post-header-col"> - <time className="search-item-time"> - { utils.displayDate(this.props.post.create_at) + ' ' + utils.displayTime(this.props.post.create_at) } - </time> - </li> - </ul> - <div className="search-item-snippet"><span>{message}</span></div> - </div> - </div> - ); + this.state = getStateFromStores(); } -}); - -function getStateFromStores() { - return { results: PostStore.getSearchResults() }; -} - -module.exports = React.createClass({ - displayName: 'SearchResults', - componentDidMount: function() { - PostStore.addSearchChangeListener(this._onChange); + componentDidMount() { + this.mounted = true; + PostStore.addSearchChangeListener(this.onChange); this.resize(); var self = this; - $(window).resize(function(){ + $(window).resize(function resize() { self.resize(); }); - }, - componentDidUpdate: function() { + } + + componentDidUpdate() { this.resize(); - }, - componentWillUnmount: function() { - PostStore.removeSearchChangeListener(this._onChange); - }, - _onChange: function() { - if (this.isMounted()) { + } + + componentWillUnmount() { + PostStore.removeSearchChangeListener(this.onChange); + this.mounted = false; + } + + onChange() { + if (this.mounted) { var newState = getStateFromStores(); if (!utils.areStatesEqual(newState, this.state)) { this.setState(newState); } } - }, - getInitialState: function() { - return getStateFromStores(); - }, - resize: function() { + } + + resize() { var height = $(window).height() - $('#error_bar').outerHeight() - 100; - $("#search-items-container").css("height", height + "px"); - $("#search-items-container").scrollTop(0); - $("#search-items-container").perfectScrollbar(); - }, - render: function() { + $('#search-items-container').css('height', height + 'px'); + $('#search-items-container').scrollTop(0); + $('#search-items-container').perfectScrollbar(); + } + render() { var results = this.state.results; var currentId = UserStore.getCurrentId(); - var searchForm = currentId ? <SearchBox /> : null; + var searchForm = null; + if (currentId) { + searchForm = <SearchBox />; + } var noResults = (!results || !results.order || !results.order.length); var searchTerm = PostStore.getSearchTerm(); - return ( - <div className="sidebar--right__content"> - <div className="search-bar__container sidebar--right__search-header">{searchForm}</div> - <div className="sidebar-right__body"> - <RhsHeaderSearch isMentionSearch={this.props.isMentionSearch} /> - <div id="search-items-container" className="search-items-container"> - - { noResults ? <div className="sidebar--right__subheader">No results</div> - : results.order.map(function(id) { - var post = results.posts[id]; - return <SearchItem key={post.id} post={post} term={searchTerm} isMentionSearch={this.props.isMentionSearch} /> - }, this) - } + var ctls = null; + + if (noResults) { + ctls = <div className='sidebar--right__subheader'>No results</div>; + } else { + ctls = results.order.map(function mymap(id) { + var post = results.posts[id]; + return ( + <SearchResultsItem + key={post.id} + post={post} + term={searchTerm} + isMentionSearch={this.props.isMentionSearch} + /> + ); + }, this); + } + return ( + <div className='sidebar--right__content'> + <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div> + <div className='sidebar-right__body'> + <SearchResultsHeader isMentionSearch={this.props.isMentionSearch} /> + <div + id='search-items-container' + className='search-items-container' + > + {ctls} </div> </div> </div> ); } -}); +} + +SearchResults.propTypes = { + isMentionSearch: React.PropTypes.bool +}; |