first commit

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>
+        );
+    }
+});