diff options
Diffstat (limited to 'web/react/components/search_results.jsx')
| -rw-r--r-- | web/react/components/search_results.jsx | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/web/react/components/search_results.jsx b/web/react/components/search_results.jsx new file mode 100644 index 000000000..51aefd3b8 --- /dev/null +++ b/web/react/components/search_results.jsx @@ -0,0 +1,180 @@ +// 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 utils = require('../utils/utils.jsx'); +var client =require('../utils/client.jsx'); +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +var Constants = require('../utils/constants.jsx'); +var ActionTypes = Constants.ActionTypes; + +RhsHeaderSearch = React.createClass({ + handleClose: function(e) { + e.preventDefault(); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_SEARCH, + results: null + }); + + 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" onClick={this.handleClose}></button> + </div> + ); + } +}); + +SearchItem = React.createClass({ + handleClick: function(e) { + e.preventDefault(); + + 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) { + dispatchError(err, "getPost"); + } + ); + }, + render: function() { + + 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) + + if (channel) { + if (channel.type === 'D') { + channelName = "Direct Message"; + } else { + channelName = channel.display_name; + } + } + + 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"} 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> + ); + } +}); + +function getStateFromStores() { + return { results: PostStore.getSearchResults() }; +} + +module.exports = React.createClass({ + componentDidMount: function() { + PostStore.addSearchChangeListener(this._onChange); + this.resize(); + var self = this; + $(window).resize(function(){ + self.resize(); + }); + }, + componentDidUpdate: function() { + this.resize(); + }, + componentWillUnmount: function() { + PostStore.removeSearchChangeListener(this._onChange); + }, + _onChange: function() { + if (this.isMounted()) { + var newState = getStateFromStores(); + if (!utils.areStatesEqual(newState, this.state)) { + this.setState(newState); + } + } + }, + getInitialState: function() { + return getStateFromStores(); + }, + resize: function() { + 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() { + + var results = this.state.results; + var currentId = UserStore.getCurrentId(); + var searchForm = currentId == null ? null : <SearchBox />; + + if (results == null) { + return ( + <div className="sidebar--right__header"> + <div className="sidebar__heading">Search Results</div> + </div> + ); + } + + if (!results.order || results.order.length == 0) { + return ( + <div className="sidebar--right__content"> + <div className="search-bar__container">{searchForm}</div> + <div className="sidebar-right__body"> + <RhsHeaderSearch /> + <div id="search-items-container" className="search-items-container"> + <div className="sidebar--right__subheader">No results</div> + </div> + </div> + </div> + ); + } + + var self = this; + 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"> + {results.order.map(function(id) { + var post = results.posts[id]; + return <SearchItem key={post.id} post={post} term={PostStore.getSearchTerm()} isMentionSearch={self.props.isMentionSearch} /> + })} + </div> + </div> + </div> + ); + } +}); |