PLT-7093/PLT-7096 Updates to new message below indicator (#6912)

* Updates to new message below indicator

* Fixes per feedback
This commit is contained in:
Joram Wilander
2017-07-12 17:36:45 -04:00
committed by Saturnino Abril
parent 259ad46f30
commit df3290c4cf

View File

@@ -110,7 +110,7 @@ export default class PostList extends React.PureComponent {
atEnd: false,
unViewedCount: 0,
isScrolling: false,
lastViewed: Number.MAX_SAFE_INTEGER
lastViewed: props.lastViewedAt
};
}
@@ -146,24 +146,19 @@ export default class PostList extends React.PureComponent {
this.hasScrolledToFocusedPost = false;
this.hasScrolledToNewMessageSeparator = false;
this.atBottom = false;
this.setState({atEnd: false});
this.setState({atEnd: false, lastViewed: nextProps.lastViewedAt});
if (nextChannel.id) {
this.loadPosts(nextChannel.id);
}
return;
}
if (!this.atBottom && this.props.posts !== nextProps.posts && this.hasScrolledToNewMessageSeparator) {
const unViewedCount = nextProps.posts.reduce((count, post) => {
if (post.create_at > this.state.lastViewed &&
post.user_id !== nextProps.currentUserId &&
post.state !== Constants.POST_DELETED) {
return count + 1;
}
return count;
}, 0);
this.setState({unViewedCount});
const nextPosts = nextProps.posts || [];
const posts = this.props.posts || [];
const hasNewPosts = (posts.length === 0 && nextPosts.length > 0) || (posts.length > 0 && nextPosts.length > 0 && posts[0].id !== nextPosts[0].id);
if (!this.checkBottom() && hasNewPosts) {
this.setUnreadsBelow(nextPosts, nextProps.currentUserId);
}
}
}
@@ -205,6 +200,9 @@ export default class PostList extends React.PureComponent {
if (messageSeparator && !this.hasScrolledToNewMessageSeparator) {
const element = ReactDOM.findDOMNode(messageSeparator);
element.scrollIntoView();
if (!this.checkBottom()) {
this.setUnreadsBelow(posts, this.props.currentUserId);
}
return;
} else if (postList && !this.hasScrolledToNewMessageSeparator) {
postList.scrollTop = postList.scrollHeight;
@@ -244,6 +242,18 @@ export default class PostList extends React.PureComponent {
}
}
setUnreadsBelow = (posts, currentUserId) => {
const unViewedCount = posts.reduce((count, post) => {
if (post.create_at > this.state.lastViewed &&
post.user_id !== currentUserId &&
post.state !== Constants.POST_DELETED) {
return count + 1;
}
return count;
}, 0);
this.setState({unViewedCount});
}
handleScrollStop = () => {
this.setState({
isScrolling: false
@@ -251,6 +261,15 @@ export default class PostList extends React.PureComponent {
}
checkBottom = () => {
if (!this.refs.postlist) {
return false;
}
// No scroll bar so we're at the bottom
if (this.refs.postlist.scrollHeight <= this.refs.postlist.clientHeight) {
return true;
}
return this.refs.postlist.clientHeight + this.refs.postlist.scrollTop >= this.refs.postlist.scrollHeight - CLOSE_TO_BOTTOM_SCROLL_MARGIN;
}
@@ -323,7 +342,7 @@ export default class PostList extends React.PureComponent {
});
}
if (this.atBottom) {
if (this.checkBottom()) {
this.setState({
lastViewed: new Date().getTime(),
unViewedCount: 0,