Add flagging functionality to search results (#3803)

1 files changed, 26 insertions, 10 deletions

diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx
index f66f28fcd..f128245e4 100644
--- a/webapp/components/search_results.jsx
+++ b/webapp/components/search_results.jsx
@@ -1,18 +1,21 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
+import SearchResultsHeader from './search_results_header.jsx';
+import SearchResultsItem from './search_results_item.jsx';
+import SearchBox from './search_bar.jsx';
+
 import ChannelStore from 'stores/channel_store.jsx';
 import SearchStore from 'stores/search_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-import SearchBox from './search_bar.jsx';
+
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 const Preferences = Constants.Preferences;
-import SearchResultsHeader from './search_results_header.jsx';
-import SearchResultsItem from './search_results_item.jsx';
 
+import $ from 'jquery';
+import React from 'react';
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 function getStateFromStores() {
@@ -34,12 +37,11 @@ function getStateFromStores() {
     return {
         results,
         channels,
-        searchTerm: SearchStore.getSearchTerm()
+        searchTerm: SearchStore.getSearchTerm(),
+        flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST)
     };
 }
 
-import React from 'react';
-
 export default class SearchResults extends React.Component {
     constructor(props) {
         super(props);
@@ -48,6 +50,7 @@ export default class SearchResults extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.onUserChange = this.onUserChange.bind(this);
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.resize = this.resize.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.handleResize = this.handleResize.bind(this);
@@ -62,10 +65,13 @@ export default class SearchResults extends React.Component {
 
     componentDidMount() {
         this.mounted = true;
+
         SearchStore.addSearchChangeListener(this.onChange);
         ChannelStore.addChangeListener(this.onChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
         UserStore.addChangeListener(this.onUserChange);
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
+
         this.resize();
         window.addEventListener('resize', this.handleResize);
         if (!Utils.isMobile()) {
@@ -94,11 +100,14 @@ export default class SearchResults extends React.Component {
     }
 
     componentWillUnmount() {
+        this.mounted = false;
+
         SearchStore.removeSearchChangeListener(this.onChange);
         ChannelStore.removeChangeListener(this.onChange);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
         UserStore.removeChangeListener(this.onUserChange);
-        this.mounted = false;
+        PreferenceStore.removeChangeListener(this.onPreferenceChange);
+
         window.removeEventListener('resize', this.handleResize);
     }
 
@@ -111,7 +120,8 @@ export default class SearchResults extends React.Component {
 
     onPreferenceChange() {
         this.setState({
-            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
+            flaggedPosts: PreferenceStore.getCategory(Constants.Preferences.CATEGORY_FLAGGED_POST)
         });
     }
 
@@ -213,6 +223,11 @@ export default class SearchResults extends React.Component {
                 } else {
                     profile = profiles[post.user_id];
                 }
+
+                let isFlagged = false;
+                if (this.state.flaggedPosts) {
+                    isFlagged = this.state.flaggedPosts.get(post.id) === 'true';
+                }
                 return (
                     <SearchResultsItem
                         key={post.id}
@@ -222,9 +237,10 @@ export default class SearchResults extends React.Component {
                         user={profile}
                         term={searchTerm}
                         isMentionSearch={this.props.isMentionSearch}
+                        isFlaggedSearch={this.props.isFlaggedPosts}
                         useMilitaryTime={this.props.useMilitaryTime}
                         shrink={this.props.shrink}
-                        isFlagged={this.props.isFlaggedPosts}
+                        isFlagged={isFlagged}
                     />
                 );
             }, this);