Merge pull request #2495 from hmhealey/plt2317a

PLT-2317 Changed RhsRootPost and RhsComment to receive current user through props

webapp/components/rhs_comment.jsx

@@ -5,7 +5,6 @@ import ReactDOM from 'react-dom';
 import PostStore from 'stores/post_store.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import UserProfile from './user_profile.jsx';
-import UserStore from 'stores/user_store.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
@@ -97,8 +96,8 @@ class RhsComment extends React.Component {
             return '';
         }
 
-        var isOwner = UserStore.getCurrentId() === post.user_id;
+        const isOwner = this.props.currentUser.id === post.user_id;
-        var isAdmin = Utils.isAdmin(UserStore.getCurrentUser().roles);
+        const isAdmin = Utils.isAdmin(this.props.currentUser.roles);
 
         var dropdownContents = [];
 
@@ -193,11 +192,11 @@ class RhsComment extends React.Component {
         var post = this.props.post;
 
         var currentUserCss = '';
-        if (UserStore.getCurrentId() === post.user_id) {
+        if (this.props.currentUser === post.user_id) {
             currentUserCss = 'current--user';
         }
 
-        var timestamp = UserStore.getCurrentUser().update_at;
+        var timestamp = this.props.currentUser.update_at;
 
         let loading;
         let postClass = '';
@@ -305,7 +304,8 @@ RhsComment.defaultProps = {
 RhsComment.propTypes = {
     intl: intlShape.isRequired,
     post: React.PropTypes.object,
-    user: React.PropTypes.object
+    user: React.PropTypes.object.isRequired,
+    currentUser: React.PropTypes.object.isRequired
 };
 
 export default injectIntl(RhsComment);

webapp/components/rhs_root_post.jsx

@@ -55,8 +55,8 @@ export default class RhsRootPost extends React.Component {
     render() {
         const post = this.props.post;
         const user = this.props.user;
-        var isOwner = user.id === post.user_id;
+        var isOwner = this.props.currentUser.id === post.user_id;
-        var isAdmin = Utils.isAdmin(user.roles);
+        var isAdmin = Utils.isAdmin(this.props.currentUser.roles);
         var timestamp = UserStore.getProfile(post.user_id).update_at;
         var channel = ChannelStore.get(post.channel_id);
 
@@ -286,5 +286,6 @@ RhsRootPost.defaultProps = {
 RhsRootPost.propTypes = {
     post: React.PropTypes.object.isRequired,
     user: React.PropTypes.object.isRequired,
+    currentUser: React.PropTypes.object.isRequired,
     commentCount: React.PropTypes.number
 };

webapp/components/rhs_thread.jsx

@@ -130,7 +130,7 @@ export default class RhsThread extends React.Component {
         }
 
         // sort failed posts to bottom, followed by pending, and then regular posts
-        postsArray.sort(function postSort(a, b) {
+        postsArray.sort((a, b) => {
             if ((a.state === Constants.POST_LOADING || a.state === Constants.POST_FAILED) && (b.state !== Constants.POST_LOADING && b.state !== Constants.POST_FAILED)) {
                 return 1;
             }
@@ -182,24 +182,26 @@ export default class RhsThread extends React.Component {
                             post={selected}
                             commentCount={postsArray.length}
                             user={profile}
+                            currentUser={this.props.currentUser}
                         />
                         <div className='post-right-comments-container'>
-                        {postsArray.map(function mapPosts(comPost) {
+                            {postsArray.map((comPost) => {
-                            let p;
+                                let p;
-                            if (UserStore.getCurrentId() === comPost.user_id) {
+                                if (UserStore.getCurrentId() === comPost.user_id) {
-                                p = UserStore.getCurrentUser();
+                                    p = UserStore.getCurrentUser();
-                            } else {
+                                } else {
-                                p = profiles[comPost.user_id];
+                                    p = profiles[comPost.user_id];
-                            }
+                                }
-                            return (
+                                return (
-                                <Comment
+                                    <Comment
-                                    ref={comPost.id}
+                                        ref={comPost.id}
-                                    key={comPost.id + 'commentKey'}
+                                        key={comPost.id + 'commentKey'}
-                                    post={comPost}
+                                        post={comPost}
-                                    user={p}
+                                        user={p}
-                                />
+                                        currentUser={this.props.currentUser}
-                            );
+                                    />
-                        })}
+                                );
+                            })}
                         </div>
                         <div className='post-create__container'>
                             <CreateComment
@@ -221,5 +223,6 @@ RhsThread.defaultProps = {
 
 RhsThread.propTypes = {
     fromSearch: React.PropTypes.string,
-    isMentionSearch: React.PropTypes.bool
+    isMentionSearch: React.PropTypes.bool,
+    currentUser: React.PropTypes.object.isRequired
 };

webapp/components/sidebar_right.jsx

@@ -8,6 +8,7 @@ import SearchResults from './search_results.jsx';
 import RhsThread from './rhs_thread.jsx';
 import SearchStore from 'stores/search_store.jsx';
 import PostStore from 'stores/post_store.jsx';
+import UserStore from 'stores/user_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 const SIDEBAR_SCROLL_DELAY = 500;
@@ -22,33 +23,38 @@ export default class SidebarRight extends React.Component {
 
         this.onSelectedChange = this.onSelectedChange.bind(this);
         this.onSearchChange = this.onSearchChange.bind(this);
+        this.onUserChange = this.onUserChange.bind(this);
         this.onShowSearch = this.onShowSearch.bind(this);
 
         this.doStrangeThings = this.doStrangeThings.bind(this);
 
-        this.state = this.getStateFromStores();
+        this.state = {
-    }
+            searchVisible: !!SearchStore.getSearchResults(),
-    getStateFromStores() {
+            isMentionSearch: SearchStore.getIsMentionSearch(),
-        return {
+            postRightVisible: !!PostStore.getSelectedPost(),
-            search_visible: SearchStore.getSearchResults() != null,
+            fromSearch: false,
-            post_right_visible: PostStore.getSelectedPost() != null,
+            currentUser: UserStore.getCurrentUser()
-            is_mention_search: SearchStore.getIsMentionSearch()
         };
     }
     componentDidMount() {
         SearchStore.addSearchChangeListener(this.onSearchChange);
         PostStore.addSelectedPostChangeListener(this.onSelectedChange);
         SearchStore.addShowSearchListener(this.onShowSearch);
+        UserStore.addChangeListener(this.onUserChange);
         this.doStrangeThings();
     }
     componentWillUnmount() {
         SearchStore.removeSearchChangeListener(this.onSearchChange);
         PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
         SearchStore.removeShowSearchListener(this.onShowSearch);
+        UserStore.removeChangeListener(this.onUserChange);
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        return !Utils.areObjectsEqual(nextState, this.state);
     }
     componentWillUpdate(nextProps, nextState) {
-        const isOpen = this.state.search_visible || this.state.post_right_visible;
+        const isOpen = this.state.searchVisible || this.state.postRightVisible;
-        const willOpen = nextState.search_visible || nextState.post_right_visible;
+        const willOpen = nextState.searchVisible || nextState.postRightVisible;
 
         if (!isOpen && willOpen) {
             setTimeout(() => PostStore.jumpPostsViewSidebarOpen(), SIDEBAR_SCROLL_DELAY);
@@ -66,7 +72,7 @@ export default class SidebarRight extends React.Component {
         $('.sidebar--right').addClass('move--left');
 
         //$('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
-        if (this.state.search_visible || this.state.post_right_visible) {
+        if (this.state.searchVisible || this.state.postRightVisible) {
             if (windowWidth > 960) {
                 velocity($('.inner-wrap'), {marginRight: sidebarRightWidth}, {duration: 500, easing: 'easeOutSine'});
                 velocity($('.sidebar--right'), {translateX: 0}, {duration: 500, easing: 'easeOutSine'});
@@ -98,35 +104,40 @@ export default class SidebarRight extends React.Component {
         this.doStrangeThings();
     }
     onSelectedChange(fromSearch) {
-        var newState = this.getStateFromStores(fromSearch);
+        this.setState({
-        newState.from_search = fromSearch;
+            postRightVisible: !!PostStore.getSelectedPost(),
-        if (!Utils.areObjectsEqual(newState, this.state)) {
+            fromSearch
-            this.setState(newState);
+        });
-        }
     }
     onSearchChange() {
-        var newState = this.getStateFromStores();
+        this.setState({
-        if (!Utils.areObjectsEqual(newState, this.state)) {
+            searchVisible: !!SearchStore.getSearchResults(),
-            this.setState(newState);
+            isMentionSearch: SearchStore.getIsMentionSearch()
-        }
+        });
+    }
+    onUserChange() {
+        this.setState({
+            currentUser: UserStore.getCurrentUser()
+        });
     }
     onShowSearch() {
-        if (!this.state.search_visible) {
+        if (!this.state.searchVisible) {
             this.setState({
-                search_visible: true
+                searchVisible: true
             });
         }
     }
     render() {
-        var content = '';
+        let content = null;
 
-        if (this.state.search_visible) {
+        if (this.state.searchVisible) {
-            content = <SearchResults isMentionSearch={this.state.is_mention_search}/>;
+            content = <SearchResults isMentionSearch={this.state.isMentionSearch}/>;
-        } else if (this.state.post_right_visible) {
+        } else if (this.state.postRightVisible) {
             content = (
                 <RhsThread
-                    fromSearch={this.state.from_search}
+                    fromSearch={this.state.fromSearch}
-                    isMentionSearch={this.state.is_mention_search}
+                    isMentionSearch={this.state.isMentionSearch}
+                    currentUser={this.state.currentUser}
                 />
             );
         }