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

Automated cherry pick of #7292 #7301

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 17 additions & 21 deletions components/toast_wrapper/toast_wrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ 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 @@ -88,28 +87,25 @@ 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;
}

if (typeof showMessageHistoryToast === 'undefined' && props.focusedPostId !== '') {
showMessageHistoryToast = props.initScrollOffsetFromBottom > THRESHOLD_FROM_BOTTOM || !props.atLatestPost;
}
// 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 (!props.atBottom) {
// show unread toast when a channel is marked as unread
if (props.channelMarkedAsUnread && !prevState.channelMarkedAsUnread && !prevState.showUnreadToast) {
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 = true;
}
}
if (typeof showMessageHistoryToast === 'undefined' && props.focusedPostId !== '' && props.atBottom !== null) {
showMessageHistoryToast = props.initScrollOffsetFromBottom > 1000 || !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 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;
}

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

describe('toasts state', () => {
test('Should have unread toast if unreadCount > 0 and initScrollOffsetFromBottom is greater than 1000', () => {
test('Should have unread toast if unreadCount > 0', () => {
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 @@ -254,7 +241,6 @@ describe('components/ToastWrapper', () => {
'post4',
'post5',
],
initScrollOffsetFromBottom: 1220,
};

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

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

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

Expand Down