diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/rhs_comment.jsx | 12 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 5 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 39 | ||||
-rw-r--r-- | webapp/components/sidebar_right.jsx | 65 |
4 files changed, 68 insertions, 53 deletions
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx index 29986d415..de99eb37d 100644 --- a/webapp/components/rhs_comment.jsx +++ b/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; - var isAdmin = Utils.isAdmin(UserStore.getCurrentUser().roles); + const isOwner = this.props.currentUser.id === post.user_id; + 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); diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx index a2c7ee7f8..1aa4a555f 100644 --- a/webapp/components/rhs_root_post.jsx +++ b/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 isAdmin = Utils.isAdmin(user.roles); + var isOwner = this.props.currentUser.id === post.user_id; + 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 }; diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx index cc900f8e7..2760765eb 100644 --- a/webapp/components/rhs_thread.jsx +++ b/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) { - let p; - if (UserStore.getCurrentId() === comPost.user_id) { - p = UserStore.getCurrentUser(); - } else { - p = profiles[comPost.user_id]; - } - return ( - <Comment - ref={comPost.id} - key={comPost.id + 'commentKey'} - post={comPost} - user={p} - /> - ); - })} + {postsArray.map((comPost) => { + let p; + if (UserStore.getCurrentId() === comPost.user_id) { + p = UserStore.getCurrentUser(); + } else { + p = profiles[comPost.user_id]; + } + return ( + <Comment + ref={comPost.id} + key={comPost.id + 'commentKey'} + post={comPost} + 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 }; diff --git a/webapp/components/sidebar_right.jsx b/webapp/components/sidebar_right.jsx index 1b3286963..a2e3914f3 100644 --- a/webapp/components/sidebar_right.jsx +++ b/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(); - } - getStateFromStores() { - return { - search_visible: SearchStore.getSearchResults() != null, - post_right_visible: PostStore.getSelectedPost() != null, - is_mention_search: SearchStore.getIsMentionSearch() + this.state = { + searchVisible: !!SearchStore.getSearchResults(), + isMentionSearch: SearchStore.getIsMentionSearch(), + postRightVisible: !!PostStore.getSelectedPost(), + fromSearch: false, + currentUser: UserStore.getCurrentUser() }; } 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 willOpen = nextState.search_visible || nextState.post_right_visible; + const isOpen = this.state.searchVisible || this.state.postRightVisible; + 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); - newState.from_search = fromSearch; - if (!Utils.areObjectsEqual(newState, this.state)) { - this.setState(newState); - } + this.setState({ + postRightVisible: !!PostStore.getSelectedPost(), + fromSearch + }); } onSearchChange() { - var newState = this.getStateFromStores(); - if (!Utils.areObjectsEqual(newState, this.state)) { - this.setState(newState); - } + this.setState({ + searchVisible: !!SearchStore.getSearchResults(), + 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) { - content = <SearchResults isMentionSearch={this.state.is_mention_search}/>; - } else if (this.state.post_right_visible) { + if (this.state.searchVisible) { + content = <SearchResults isMentionSearch={this.state.isMentionSearch}/>; + } else if (this.state.postRightVisible) { content = ( <RhsThread - fromSearch={this.state.from_search} - isMentionSearch={this.state.is_mention_search} + fromSearch={this.state.fromSearch} + isMentionSearch={this.state.isMentionSearch} + currentUser={this.state.currentUser} /> ); } |