Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
[MM-24436]- Add a threshold from bottom for new messages toast (#5828)
Browse files Browse the repository at this point in the history 
* Changed the buffer value to be considered from bottom for the toast message

* test value changes related to isAtBottom function

* Changes are set to previous values as this is not right approach

* added the condition for the offset from bottom  greater than 1000px

* Change the test conditions according to new condition to show the toast message

* logic change

* eslint corrections

* added a test that fails if the scroll from bottom is less than 1000px

* add constant THRESHOLD_FROM_BOTTOM and replace 1000 value

* Bug fix for toast flashing when you mark as unread

* bug fix

* tests resolved
  • Loading branch information
@sridhar02 @calebroseland
sridhar02 authored and calebroseland committed Oct 27, 2020
1 parent 04ceb42 commit 1ee5e88
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 20 deletions.
34 changes: 18 additions & 16 deletions components/toast_wrapper/toast_wrapper.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import Constants from 'utils/constants';
import {browserHistory} from 'utils/browser_history';

const TOAST_TEXT_COLLAPSE_WIDTH = 500;
const THRESHOLD_FROM_BOTTOM = 1000;

const TOAST_REL_RANGES = [
RelativeRanges.TODAY_YESTERDAY,
Expand Down Expand Up @@ -87,25 +88,26 @@ class ToastWrapper extends React.PureComponent {
} else {
unreadCount = prevState.unreadCountInChannel + props.newRecentMessagesCount;
}
if (props.atBottom !== null) {
// show unread toast on mount when channel is not at bottom and unread count greater than 0
if (typeof showUnreadToast === 'undefined') {
showUnreadToast = unreadCount > 0 && props.initScrollOffsetFromBottom > THRESHOLD_FROM_BOTTOM;
}

// show unread toast on mount when channel is not at bottom and unread count greater than 0
if (typeof showUnreadToast === 'undefined' && props.atBottom !== null) {
showUnreadToast = unreadCount > 0 && !props.atBottom;
}

if (typeof showMessageHistoryToast === 'undefined' && props.focusedPostId !== '' && props.atBottom !== null) {
showMessageHistoryToast = props.initScrollOffsetFromBottom > 1000 || !props.atLatestPost;
}
if (typeof showMessageHistoryToast === 'undefined' && props.focusedPostId !== '') {
showMessageHistoryToast = props.initScrollOffsetFromBottom > THRESHOLD_FROM_BOTTOM || !props.atLatestPost;
}

// show unread toast when a channel is marked as unread
if (props.channelMarkedAsUnread && !props.atBottom && !prevState.channelMarkedAsUnread && !prevState.showUnreadToast) {
showUnreadToast = true;
}
// show unread toast when a channel is marked as unread
if (props.channelMarkedAsUnread && !prevState.channelMarkedAsUnread && !prevState.showUnreadToast) {
showUnreadToast = props.initScrollOffsetFromBottom > THRESHOLD_FROM_BOTTOM;
}

// show unread toast when a channel is remarked as unread using the change in lastViewedAt
// lastViewedAt changes only if a channel is remarked as unread in channelMarkedAsUnread state
if (props.channelMarkedAsUnread && props.lastViewedAt !== prevState.lastViewedAt && !props.atBottom) {
showUnreadToast = true;
// show unread toast when a channel is remarked as unread using the change in lastViewedAt
// lastViewedAt changes only if a channel is remarked as unread in channelMarkedAsUnread state
if (props.channelMarkedAsUnread && props.lastViewedAt !== prevState.lastViewedAt) {
showUnreadToast = props.initScrollOffsetFromBottom > THRESHOLD_FROM_BOTTOM;
}
}

if (!showUnreadToast && unreadCount > 0 && !props.atBottom && (props.lastViewedBottom < props.latestPostTimeStamp)) {
Expand Down
25 changes: 21 additions & 4 deletions components/toast_wrapper/toast_wrapper.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,23 +88,36 @@ describe('components/ToastWrapper', () => {
});

describe('toasts state', () => {
test('Should have unread toast if unreadCount > 0', () => {
test('Should have unread toast if unreadCount > 0 and initScrollOffsetFromBottom is greater than 1000', () => {
const props = {
...baseProps,
unreadCountInChannel: 10,
newRecentMessagesCount: 5,
initScrollOffsetFromBottom: 1100,
};

const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
expect(wrapper.state('showUnreadToast')).toBe(true);
});
test('Should have not have unread toast if initScrollOffsetFromBottom is less than 1000', () => {
const props = {
...baseProps,
unreadCountInChannel: 10,
newRecentMessagesCount: 5,
initScrollOffsetFromBottom: 850,
};

const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
expect(wrapper.state('showUnreadToast')).toBe(false);
});

test('Should set state of have unread toast when atBottom changes from undefined', () => {
const props = {
...baseProps,
unreadCountInChannel: 10,
newRecentMessagesCount: 5,
atBottom: null,
initScrollOffsetFromBottom: 1100,
};

const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
Expand Down Expand Up @@ -132,7 +145,7 @@ describe('components/ToastWrapper', () => {
const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
expect(wrapper.state('showUnreadToast')).toBe(false);
wrapper.setProps({channelMarkedAsUnread: true, atBottom: false});
expect(wrapper.state('showUnreadToast')).toBe(true);
expect(wrapper.state('showUnreadToast')).toBe(false);
});

test('Should have unread toast channel is marked as unread again', () => {
Expand All @@ -157,12 +170,12 @@ describe('components/ToastWrapper', () => {
],
});

expect(wrapper.state('showUnreadToast')).toBe(true);
expect(wrapper.state('showUnreadToast')).toBe(false);
wrapper.setProps({atBottom: true});
expect(wrapper.state('showUnreadToast')).toBe(false);
wrapper.setProps({atBottom: false});
wrapper.setProps({lastViewedAt: 12342});
expect(wrapper.state('showUnreadToast')).toBe(true);
expect(wrapper.state('showUnreadToast')).toBe(false);
});

test('Should have archive toast if channel is not atLatestPost and focusedPostId exists', () => {
Expand Down Expand Up @@ -241,6 +254,7 @@ describe('components/ToastWrapper', () => {
'post4',
'post5',
],
initScrollOffsetFromBottom: 1220,
};

const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
Expand Down Expand Up @@ -298,6 +312,7 @@ describe('components/ToastWrapper', () => {
'post4',
'post5',
],
initScrollOffsetFromBottom: 1005,
};

const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
Expand Down Expand Up @@ -345,6 +360,7 @@ describe('components/ToastWrapper', () => {
'post4',
'post5',
],
initScrollOffsetFromBottom: 1500,
};

const wrapper = shallowWithIntl(<ToastWrapper {...props}/>);
Expand Down Expand Up @@ -405,6 +421,7 @@ describe('components/ToastWrapper', () => {
...baseProps,
unreadCountInChannel: 10,
newRecentMessagesCount: 5,
initScrollOffsetFromBottom: 1008,
};
const updateToastStatus = baseProps.actions.updateToastStatus;

Expand Down

0 comments on commit 1ee5e88

Please sign in to comment.