From a857cf18f4809ab5fbff4956b42430e5eeddb54e Mon Sep 17 00:00:00 2001
From: George Goldberg <george@gberg.me>
Date: Thu, 22 Dec 2016 17:19:19 +0000
Subject: PLT-4860 Make ProfilePopover into it's own component and use it
 consistently everywhere (#4701)

* PLT-4860 - Use same User Popover everywhere.

Refactor out the ProfilePopover into it's own component and give it the
union of all the features of the previous two implementations, and make
sure all the necessary data for it to work consistently everywhere is
provided through the props wherever it is used.

* Don't show popover for webhook posts in main view.

* No popover on RHS when it's a webhook post.

* Fix style.

* Don't send in user when it's a system message.

* Fix some duplication of code.
---
 webapp/components/search_results.jsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

(limited to 'webapp/components/search_results.jsx')

diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx
index 6396150e7..466665c2c 100644
--- a/webapp/components/search_results.jsx
+++ b/webapp/components/search_results.jsx
@@ -9,6 +9,7 @@ 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 WebrtcStore from 'stores/webrtc_store.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
@@ -51,8 +52,10 @@ 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.onBusy = this.onBusy.bind(this);
         this.resize = this.resize.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
+        this.onStatusChange = this.onStatusChange.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
         const state = getStateFromStores();
@@ -60,6 +63,8 @@ export default class SearchResults extends React.Component {
         state.windowHeight = Utils.windowHeight();
         state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
         state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT;
+        state.isBusy = WebrtcStore.isBusy();
+        state.statuses = Object.assign({}, UserStore.getStatuses());
         this.state = state;
     }
 
@@ -70,7 +75,9 @@ export default class SearchResults extends React.Component {
         ChannelStore.addChangeListener(this.onChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
         UserStore.addChangeListener(this.onUserChange);
+        UserStore.addStatusesChangeListener(this.onStatusChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
+        WebrtcStore.addBusyListener(this.onBusy);
 
         this.resize();
         window.addEventListener('resize', this.handleResize);
@@ -80,6 +87,10 @@ export default class SearchResults extends React.Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
+        if (!Utils.areObjectsEqual(nextState.statuses, this.state.statuses)) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(this.props, nextProps)) {
             return true;
         }
@@ -92,6 +103,10 @@ export default class SearchResults extends React.Component {
             return true;
         }
 
+        if (nextState.isBusy !== this.state.isBusy) {
+            return true;
+        }
+
         return false;
     }
 
@@ -106,7 +121,9 @@ export default class SearchResults extends React.Component {
         ChannelStore.removeChangeListener(this.onChange);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
         UserStore.removeChangeListener(this.onUserChange);
+        UserStore.removeStatusesChangeListener(this.onStatusChange);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
+        WebrtcStore.removeBusyListener(this.onBusy);
 
         window.removeEventListener('resize', this.handleResize);
     }
@@ -135,6 +152,14 @@ export default class SearchResults extends React.Component {
         this.setState({profiles: JSON.parse(JSON.stringify(UserStore.getProfiles()))});
     }
 
+    onBusy(isBusy) {
+        this.setState({isBusy});
+    }
+
+    onStatusChange() {
+        this.setState({statuses: Object.assign({}, UserStore.getStatuses())});
+    }
+
     resize() {
         $('#search-items-container').scrollTop(0);
     }
@@ -224,6 +249,11 @@ export default class SearchResults extends React.Component {
                     profile = profiles[post.user_id];
                 }
 
+                let status = 'offline';
+                if (this.state.statuses) {
+                    status = this.state.statuses[post.user_id] || 'offline';
+                }
+
                 let isFlagged = false;
                 if (this.state.flaggedPosts) {
                     isFlagged = this.state.flaggedPosts.get(post.id) === 'true';
@@ -241,6 +271,8 @@ export default class SearchResults extends React.Component {
                         useMilitaryTime={this.props.useMilitaryTime}
                         shrink={this.props.shrink}
                         isFlagged={isFlagged}
+                        isBusy={this.state.isBusy}
+                        status={status}
                     />
                 );
             }, this);
-- 
cgit v1.2.3-1-g7c22