Merge pull request #2099 from hmhealey/plt1883

PLT-1883 Update search result components when we receive channels

web/react/components/search_results.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import ChannelStore from '../stores/channel_store.jsx';
 import SearchStore from '../stores/search_store.jsx';
 import UserStore from '../stores/user_store.jsx';
 import SearchBox from './search_bar.jsx';
@@ -11,7 +12,22 @@ import SearchResultsItem from './search_results_item.jsx';
 import {FormattedMessage, FormattedHTMLMessage} from 'mm-intl';
 
 function getStateFromStores() {
-    return {results: SearchStore.getSearchResults()};
+    const results = SearchStore.getSearchResults();
+
+    const channels = new Map();
+    const channelIds = results.order.map((postId) => results.posts[postId].channel_id);
+    for (const id of channelIds) {
+        if (channels.has(id)) {
+            continue;
+        }
+
+        channels.set(id, ChannelStore.get(id));
+    }
+
+    return {
+        results,
+        channels
+    };
 }
 
 export default class SearchResults extends React.Component {
@@ -33,16 +49,22 @@ export default class SearchResults extends React.Component {
     componentDidMount() {
         this.mounted = true;
         SearchStore.addSearchChangeListener(this.onChange);
+        ChannelStore.addChangeListener(this.onChange);
         this.resize();
         window.addEventListener('resize', this.handleResize);
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return !Utils.areObjectsEqual(this.props, nextProps) || !Utils.areObjectsEqual(this.state, nextState);
+    }
+
     componentDidUpdate() {
         this.resize();
     }
 
     componentWillUnmount() {
         SearchStore.removeSearchChangeListener(this.onChange);
+        ChannelStore.removeChangeListener(this.onChange);
         this.mounted = false;
         window.removeEventListener('resize', this.handleResize);
     }
@@ -56,10 +78,7 @@ export default class SearchResults extends React.Component {
 
     onChange() {
         if (this.mounted) {
-            var newState = getStateFromStores();
+            this.setState(getStateFromStores());
-            if (!Utils.areObjectsEqual(newState, this.state)) {
-                this.setState(newState);
-            }
         }
     }
 
@@ -116,6 +135,7 @@ export default class SearchResults extends React.Component {
                 return (
                     <SearchResultsItem
                         key={post.id}
+                        channel={this.state.channels.get(post.channel_id)}
                         post={post}
                         term={searchTerm}
                         isMentionSearch={this.props.isMentionSearch}

web/react/components/search_results_item.jsx

@@ -1,7 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ChannelStore from '../stores/channel_store.jsx';
 import UserStore from '../stores/user_store.jsx';
 import UserProfile from './user_profile.jsx';
 import * as EventHelpers from '../dispatcher/event_helpers.jsx';
@@ -37,8 +36,8 @@ export default class SearchResultsItem extends React.Component {
     }
 
     render() {
-        var channelName = '';
+        var channelName = null;
-        var channel = ChannelStore.get(this.props.post.channel_id);
+        const channel = this.props.channel;
         var timestamp = UserStore.getCurrentUser().update_at;
 
         if (channel) {
@@ -136,6 +135,7 @@ export default class SearchResultsItem extends React.Component {
 
 SearchResultsItem.propTypes = {
     post: React.PropTypes.object,
+    channel: React.PropTypes.object,
     isMentionSearch: React.PropTypes.bool,
     term: React.PropTypes.string
 };

web/react/utils/utils.jsx

@@ -392,6 +392,10 @@ export function areObjectsEqual(x, y) {
         return x.toString() === y.toString();
     }
 
+    if (x instanceof Map && y instanceof Map) {
+        return areMapsEqual(x, y);
+    }
+
     // At last checking prototypes as good a we can
     if (!(x instanceof Object && y instanceof Object)) {
         return false;
@@ -456,6 +460,24 @@ export function areObjectsEqual(x, y) {
     return true;
 }
 
+export function areMapsEqual(a, b) {
+    if (a.size !== b.size) {
+        return false;
+    }
+
+    for (const [key, value] of a) {
+        if (!b.has(key)) {
+            return false;
+        }
+
+        if (!areObjectsEqual(value, b.get(key))) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
 export function replaceHtmlEntities(text) {
     var tagsToReplace = {
         '&': '&',