Merge pull request #2257 from mattermost/rhs-profile-fix

Final fixes for user store changes

web/react/components/center_panel.jsx

@@ -33,7 +33,8 @@ export default class CenterPanel extends React.Component {
         this.state = {
             showTutorialScreens: tutorialStep === TutorialSteps.INTRO_SCREENS,
             showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS,
-            user: UserStore.getCurrentUser()
+            user: UserStore.getCurrentUser(),
+            profiles: JSON.parse(JSON.stringify(UserStore.getProfiles()))
         };
     }
     componentDidMount() {
@@ -54,7 +55,7 @@ export default class CenterPanel extends React.Component {
         this.setState({showPostFocus: ChannelStore.getPostMode() === ChannelStore.POST_MODE_FOCUS});
     }
     onUserChange() {
-        this.setState({user: UserStore.getCurrentUser()});
+        this.setState({user: UserStore.getCurrentUser(), profiles: JSON.parse(JSON.stringify(UserStore.getProfiles()))});
     }
     render() {
         const channel = ChannelStore.getCurrent();
@@ -65,7 +66,7 @@ export default class CenterPanel extends React.Component {
             postsContainer = <TutorialIntroScreens/>;
             createPost = null;
         } else if (this.state.showPostFocus) {
-            postsContainer = <PostFocusView/>;
+            postsContainer = <PostFocusView profiles={this.state.profiles}/>;
 
             handleClick = function clickHandler(e) {
                 e.preventDefault();
@@ -87,7 +88,7 @@ export default class CenterPanel extends React.Component {
                 </div>
             );
         } else {
-            postsContainer = <PostsViewContainer/>;
+            postsContainer = <PostsViewContainer profiles={this.state.profiles}/>;
             createPost = (
                 <div
                     className='post-create__container'

web/react/components/delete_post_modal.jsx

@@ -5,7 +5,6 @@ import * as Client from '../utils/client.jsx';
 import PostStore from '../stores/post_store.jsx';
 import ModalStore from '../stores/modal_store.jsx';
 var Modal = ReactBootstrap.Modal;
-import * as Utils from '../utils/utils.jsx';
 import * as AsyncClient from '../utils/async_client.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import Constants from '../utils/constants.jsx';
@@ -21,9 +20,6 @@ export default class DeletePostModal extends React.Component {
         this.handleDelete = this.handleDelete.bind(this);
         this.handleToggle = this.handleToggle.bind(this);
         this.handleHide = this.handleHide.bind(this);
-        this.onListenerChange = this.onListenerChange.bind(this);
-
-        this.selectedList = null;
 
         this.state = {
             show: false,
@@ -35,11 +31,9 @@ export default class DeletePostModal extends React.Component {
 
     componentDidMount() {
         ModalStore.addModalListener(ActionTypes.TOGGLE_DELETE_POST_MODAL, this.handleToggle);
-        PostStore.addSelectedPostChangeListener(this.onListenerChange);
     }
 
     componentWillUnmount() {
-        PostStore.removeSelectedPostChangeListener(this.onListenerChange);
         ModalStore.removeModalListener(ActionTypes.TOGGLE_DELETE_POST_MODAL, this.handleToggle);
     }
 
@@ -56,40 +50,15 @@ export default class DeletePostModal extends React.Component {
             this.state.post.channel_id,
             this.state.post.id,
             () => {
-                var selectedList = this.selectedList;
-
-                if (selectedList && selectedList.order && selectedList.order.length > 0) {
-                    var selectedPost = selectedList.posts[selectedList.order[0]];
-                    if ((selectedPost.id === this.state.post.id && !this.state.root_id) || selectedPost.root_id === this.state.post.id) {
-                        AppDispatcher.handleServerAction({
-                            type: ActionTypes.RECEIVED_SEARCH,
-                            results: null
-                        });
-
-                        AppDispatcher.handleServerAction({
-                            type: ActionTypes.RECEIVED_POST_SELECTED,
-                            postId: null
-                        });
-                    } else if (selectedPost.id === this.state.post.id && this.state.root_id) {
-                        if (selectedPost.root_id && selectedPost.root_id.length > 0 && selectedList.posts[selectedPost.root_id]) {
-                            selectedList.order = [selectedPost.root_id];
-                            delete selectedList.posts[selectedPost.id];
-
-                            AppDispatcher.handleServerAction({
-                                type: ActionTypes.RECEIVED_POST_SELECTED,
-                                postId: selectedPost.root_id
-                            });
-
-                            AppDispatcher.handleServerAction({
-                                type: ActionTypes.RECEIVED_SEARCH,
-                                results: null
-                            });
-                        }
-                    }
-                }
-
                 PostStore.deletePost(this.state.post);
                 AsyncClient.getPosts(this.state.post.channel_id);
+
+                if (this.state.post.id === PostStore.getSelectedPostId()) {
+                    AppDispatcher.handleServerAction({
+                        type: ActionTypes.RECEIVED_POST_SELECTED,
+                        postId: null
+                    });
+                }
             },
             (err) => {
                 AsyncClient.dispatchError(err, 'deletePost');
@@ -112,13 +81,6 @@ export default class DeletePostModal extends React.Component {
         this.setState({show: false});
     }
 
-    onListenerChange() {
-        var newList = PostStore.getSelectedPost();
-        if (!Utils.areObjectsEqual(this.selectedList, newList)) {
-            this.selectedList = newList;
-        }
-    }
-
     render() {
         if (!this.state.post) {
             return null;

web/react/components/post_focus_view.jsx

@@ -105,6 +105,7 @@ export default class PostFocusView extends React.Component {
                     introText={this.getIntroMessage()}
                     messageSeparatorTime={0}
                     postsToHighlight={postsToHighlight}
+                    profiles={this.props.profiles}
                 />
             </div>
         );
@@ -114,4 +115,5 @@ PostFocusView.defaultProps = {
 };
 
 PostFocusView.propTypes = {
+    profiles: React.PropTypes.object
 };

web/react/components/posts_view.jsx

@@ -321,7 +321,7 @@ export default class PostsView extends React.Component {
                 if (this.refs.newMessageSeparator) {
                     var objDiv = this.refs.postlist;
                     objDiv.scrollTop = this.refs.newMessageSeparator.offsetTop; //scrolls node to top of Div
-                } else {
+                } else if (this.refs.postlist) {
                     this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
                 }
             });

web/react/components/posts_view_container.jsx

@@ -6,7 +6,6 @@ import LoadingScreen from './loading_screen.jsx';
 
 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 EventHelpers from '../dispatcher/event_helpers.jsx';
@@ -25,13 +24,11 @@ export default class PostsViewContainer extends React.Component {
         this.handlePostsViewScroll = this.handlePostsViewScroll.bind(this);
         this.loadMorePostsTop = this.loadMorePostsTop.bind(this);
         this.handlePostsViewJumpRequest = this.handlePostsViewJumpRequest.bind(this);
-        this.onUserChange = this.onUserChange.bind(this);
 
         const currentChannelId = ChannelStore.getCurrentId();
         const state = {
             scrollType: PostsView.SCROLL_TYPE_BOTTOM,
-            scrollPost: null,
+            scrollPost: null
-            profiles: JSON.parse(JSON.stringify(UserStore.getProfiles()))
         };
         if (currentChannelId) {
             Object.assign(state, {
@@ -57,14 +54,12 @@ export default class PostsViewContainer extends React.Component {
         ChannelStore.addLeaveListener(this.onChannelLeave);
         PostStore.addChangeListener(this.onPostsChange);
         PostStore.addPostsViewJumpListener(this.handlePostsViewJumpRequest);
-        UserStore.addChangeListener(this.onUserChange);
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChannelChange);
         ChannelStore.removeLeaveListener(this.onChannelLeave);
         PostStore.removeChangeListener(this.onPostsChange);
         PostStore.removePostsViewJumpListener(this.handlePostsViewJumpRequest);
-        UserStore.removeChangeListener(this.onUserChange);
     }
     handlePostsViewJumpRequest(type, post) {
         switch (type) {
@@ -140,9 +135,6 @@ export default class PostsViewContainer extends React.Component {
         atTop[this.state.currentChannelIndex] = PostStore.getVisibilityAtTop(currentChannelId);
         this.setState({postLists, atTop});
     }
-    onUserChange() {
-        this.setState({profiles: JSON.parse(JSON.stringify(UserStore.getProfiles()))});
-    }
     getChannelPosts(id) {
         return PostStore.getVisiblePosts(id);
     }
@@ -188,7 +180,7 @@ export default class PostsViewContainer extends React.Component {
                     showMoreMessagesBottom={false}
                     introText={channel ? createChannelIntroMessage(channel) : null}
                     messageSeparatorTime={this.state.currentLastViewed}
-                    profiles={this.state.profiles}
+                    profiles={this.props.profiles}
                 />
             );
             if (!postLists[i] && isActive) {
@@ -208,3 +200,7 @@ export default class PostsViewContainer extends React.Component {
         );
     }
 }
+
+PostsViewContainer.propTypes = {
+    profiles: React.PropTypes.object
+};

web/react/components/rhs_thread.jsx

@@ -91,9 +91,11 @@ export default class RhsThread extends React.Component {
         });
     }
     onPostChange() {
-        const selected = PostStore.getSelectedPost();
+        if (this.mounted) {
-        const posts = PostStore.getSelectedPostThread();
+            const selected = PostStore.getSelectedPost();
-        this.setState({posts, selected});
+            const posts = PostStore.getSelectedPostThread();
+            this.setState({posts, selected});
+        }
     }
     onUserChange() {
         const profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
@@ -185,7 +187,7 @@ export default class RhsThread extends React.Component {
                         <div className='post-right-comments-container'>
                         {postsArray.map(function mapPosts(comPost) {
                             let p;
-                            if (UserStore.getCurrentId() === selected.user_id) {
+                            if (UserStore.getCurrentId() === comPost.user_id) {
                                 p = UserStore.getCurrentUser();
                             } else {
                                 p = profiles[comPost.user_id];

web/react/components/search_results.jsx

@@ -61,7 +61,15 @@ export default class SearchResults extends React.Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-        return !Utils.areObjectsEqual(this.props, nextProps) || !Utils.areObjectsEqual(this.state, nextState);
+        if (!Utils.areObjectsEqual(this.props, nextProps)) {
+            return true;
+        }
+
+        if (!Utils.areObjectsEqual(this.state, nextState)) {
+            return true;
+        }
+
+        return false;
     }
 
     componentDidUpdate() {
@@ -143,13 +151,19 @@ export default class SearchResults extends React.Component {
             );
         } else {
             ctls = results.order.map(function mymap(id) {
-                var post = results.posts[id];
+                const post = results.posts[id];
+                let profile;
+                if (UserStore.getCurrentId() === post.user_id) {
+                    profile = UserStore.getCurrentUser();
+                } else {
+                    profile = profiles[post.user_id];
+                }
                 return (
                     <SearchResultsItem
                         key={post.id}
                         channel={this.state.channels.get(post.channel_id)}
                         post={post}
-                        user={profiles[post.user_id]}
+                        user={profile}
                         term={searchTerm}
                         isMentionSearch={this.props.isMentionSearch}
                     />

web/react/dispatcher/event_helpers.jsx

@@ -46,9 +46,16 @@ export function emitPostFocusRightHandSideFromSearch(post, isMentionSearch) {
         post.channel_id,
         post.id,
         (data) => {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_POSTS,
+                id: post.channel_id,
+                numRequested: 0,
+                post_list: data
+            });
+
             AppDispatcher.handleServerAction({
                 type: ActionTypes.RECEIVED_POST_SELECTED,
-                post_list: data,
+                postId: Utils.getRootId(post),
                 from_search: SearchStore.getSearchTerm()
             });
 

web/react/stores/post_store.jsx

@@ -303,6 +303,20 @@ class PostStoreClass extends EventEmitter {
             postList.order.splice(index, 1);
         }
 
+        for (const pid in postList.posts) {
+            if (!postList.posts.hasOwnProperty(pid)) {
+                continue;
+            }
+
+            if (postList.posts[pid].root_id === post.id) {
+                Reflect.deleteProperty(postList.posts, pid);
+                const commentIndex = postList.order.indexOf(pid);
+                if (commentIndex !== -1) {
+                    postList.order.splice(commentIndex, 1);
+                }
+            }
+        }
+
         this.postsInfo[channelId].postList = postList;
     }