Merge pull request #2594 from mattermost/plt-2476

PLT-2476 Fixing username display in center channel

webapp/components/channel_view.jsx

@@ -8,7 +8,6 @@ import PostsViewContainer from 'components/posts_view_container.jsx';
 import CreatePost from 'components/create_post.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
-import UserStore from 'stores/user_store.jsx';
 
 export default class ChannelView extends React.Component {
     constructor(props) {
@@ -23,14 +22,12 @@ export default class ChannelView extends React.Component {
     getStateFromStores(props) {
         const channel = ChannelStore.getByName(props.params.channel);
         const channelId = channel ? channel.id : '';
-        const profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
         return {
-            channelId,
+            channelId
-            profiles
         };
     }
     isStateValid() {
-        return this.state.channelId !== '' && this.state.profiles;
+        return this.state.channelId !== '';
     }
     updateState() {
         this.setState(this.getStateFromStores(this.props));
@@ -44,13 +41,6 @@ export default class ChannelView extends React.Component {
     componentWillReceiveProps(nextProps) {
         this.setState(this.getStateFromStores(nextProps));
     }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (nextState.channelId !== this.state.channelId) {
-            return true;
-        }
-
-        return false;
-    }
     render() {
         return (
             <div
@@ -60,7 +50,7 @@ export default class ChannelView extends React.Component {
                 <ChannelHeader
                     channelId={this.state.channelId}
                 />
-                <PostsViewContainer profiles={this.state.profiles}/>
+                <PostsViewContainer profiles={this.props.profiles}/>
                 <div
                     className='post-create__container'
                     id='post-create'
@@ -75,5 +65,6 @@ ChannelView.defaultProps = {
 };
 
 ChannelView.propTypes = {
-    params: React.PropTypes.object.isRequired
+    params: React.PropTypes.object.isRequired,
+    profiles: React.PropTypes.object
 };

webapp/components/invite_member_modal.jsx

@@ -50,6 +50,7 @@ class InviteMemberModal extends React.Component {
     constructor(props) {
         super(props);
 
+        this.teamChange = this.teamChange.bind(this);
         this.handleToggle = this.handleToggle.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleHide = this.handleHide.bind(this);
@@ -68,16 +69,27 @@ class InviteMemberModal extends React.Component {
             emailEnabled: global.window.mm_config.SendEmailNotifications === 'true',
             userCreationEnabled: global.window.mm_config.EnableUserCreation === 'true',
             showConfirmModal: false,
-            isSendingEmails: false
+            isSendingEmails: false,
+            teamType: null
         };
     }
 
+    teamChange() {
+        const team = TeamStore.getCurrent();
+        const teamType = team ? team.type : null;
+        this.setState({
+            teamType
+        });
+    }
+
     componentDidMount() {
         ModalStore.addModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle);
+        TeamStore.addChangeListener(this.teamChange);
     }
 
     componentWillUnmount() {
         ModalStore.removeModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle);
+        TeamStore.removeChangeListener(this.teamChange);
     }
 
     handleToggle(value) {
@@ -224,7 +236,7 @@ class InviteMemberModal extends React.Component {
         var currentUser = UserStore.getCurrentUser();
         const {formatMessage} = this.props.intl;
 
-        if (currentUser != null) {
+        if (currentUser != null && this.state.teamType != null) {
             var inviteSections = [];
             var inviteIds = this.state.inviteIds;
             for (var i = 0; i < inviteIds.length; i++) {
@@ -398,7 +410,7 @@ class InviteMemberModal extends React.Component {
                 );
             } else if (this.state.userCreationEnabled) {
                 var teamInviteLink = null;
-                if (currentUser && TeamStore.getCurrent().type === 'O') {
+                if (currentUser && this.state.teamType === 'O') {
                     var link = (
                         <a
                             href='#'

webapp/components/logged_in.jsx

@@ -47,11 +47,12 @@ export default class LoggedIn extends React.Component {
         this.onUserChanged = this.onUserChanged.bind(this);
 
         this.state = {
-            user: null
+            user: null,
+            profiles: null
         };
     }
     isValidState() {
-        return this.state.user != null;
+        return this.state.user != null && this.state.profiles != null;
     }
     onUserChanged() {
         // Grab the current user
@@ -84,7 +85,13 @@ export default class LoggedIn extends React.Component {
             browserHistory.push(Utils.getTeamURLFromAddressBar() + '/tutorial');
         }
 
-        this.setState({user});
+        // Get profiles
+        const profiles = UserStore.getProfiles();
+
+        this.setState({
+            user,
+            profiles
+        });
     }
     componentWillMount() {
         // Emit view action
@@ -232,7 +239,10 @@ export default class LoggedIn extends React.Component {
                         </div>
                     </div>
                     <div className='row main'>
-                        {this.props.center}
+                        {React.cloneElement(this.props.center, {
+                            user: this.state.user,
+                            profiles: this.state.profiles
+                        })}
                     </div>
                 </div>
             );

webapp/components/permalink_view.jsx

@@ -7,7 +7,6 @@ import ChannelHeader from 'components/channel_header.jsx';
 import PostFocusView from 'components/post_focus_view.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
-import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import {Link} from 'react-router';
@@ -30,17 +29,15 @@ export default class PermalinkView extends React.Component {
         const channelName = channel ? channel.name : '';
         const team = TeamStore.getCurrent();
         const teamName = team ? team.name : '';
-        const profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
         return {
             channelId,
             channelName,
-            profiles,
             teamName,
             postId
         };
     }
     isStateValid() {
-        return this.state.channelId !== '' && this.state.profiles && this.state.teamName;
+        return this.state.channelId !== '' && this.state.teamName;
     }
     updateState() {
         this.setState(this.getStateFromStores(this.props));
@@ -56,21 +53,6 @@ export default class PermalinkView extends React.Component {
     componentWillReceiveProps(nextProps) {
         this.setState(this.getStateFromStores(nextProps));
     }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (nextState.postId !== this.state.postId) {
-            return true;
-        }
-
-        if (nextState.channelId !== this.state.channelId) {
-            return true;
-        }
-
-        if (nextState.teamName !== this.state.teamName) {
-            return true;
-        }
-
-        return false;
-    }
     render() {
         if (!this.isStateValid()) {
             return null;
@@ -83,7 +65,7 @@ export default class PermalinkView extends React.Component {
                 <ChannelHeader
                     channelId={this.state.channelId}
                 />
-                <PostFocusView profiles={this.state.profiles}/>
+                <PostFocusView profiles={this.props.profiles}/>
                 <div
                     id='archive-link-home'
                 >
@@ -106,5 +88,6 @@ PermalinkView.defaultProps = {
 };
 
 PermalinkView.propTypes = {
-    params: React.PropTypes.object.isRequired
+    params: React.PropTypes.object.isRequired,
+    profiles: React.PropTypes.object
 };

webapp/components/posts_view_container.jsx

@@ -8,7 +8,6 @@ import ChannelStore from 'stores/channel_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
-import * as Utils from 'utils/utils.jsx';
 import * as GlobalActions from 'action_creators/global_actions.jsx';
 
 import Constants from 'utils/constants.jsx';
@@ -158,17 +157,6 @@ export default class PostsViewContainer extends React.Component {
             this.setState({scrollType: PostsView.SCROLL_TYPE_FREE});
         }
     }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (!Utils.areObjectsEqual(this.state, nextState)) {
-            return true;
-        }
-
-        if (!Utils.areObjectsEqual(this.props, nextProps)) {
-            return true;
-        }
-
-        return false;
-    }
     render() {
         const postLists = this.state.postLists;
         const channels = this.state.channels;