scroll to unread indicator rather than message on load convo
This commit is contained in:
parent
c6a394664f
commit
20f5c3b822
|
@ -11,16 +11,18 @@ type ReadableMessageProps = {
|
|||
};
|
||||
|
||||
export const ReadableMessage = (props: ReadableMessageProps) => {
|
||||
const { onChange, messageId } = props;
|
||||
const { onChange, messageId, onContextMenu, className } = props;
|
||||
useFocus(onChange);
|
||||
|
||||
return (
|
||||
<InView
|
||||
id={`msg-${messageId}`}
|
||||
{...props}
|
||||
onContextMenu={onContextMenu}
|
||||
className={className}
|
||||
as="div"
|
||||
threshold={0.5}
|
||||
delay={100}
|
||||
onChange={onChange}
|
||||
triggerOnce={false}
|
||||
>
|
||||
{props.children}
|
||||
|
|
|
@ -28,8 +28,9 @@ const LastSeenText = styled.div`
|
|||
export const SessionLastSeenIndicator = () => {
|
||||
const { i18n } = window;
|
||||
const text = i18n('unreadMessages');
|
||||
// if this unread-indicator is not unique it's going to cause issues
|
||||
return (
|
||||
<LastSeenBarContainer>
|
||||
<LastSeenBarContainer id="unread-indicator">
|
||||
<LastSeenBar>
|
||||
<LastSeenText>{text}</LastSeenText>
|
||||
</LastSeenBar>
|
||||
|
|
|
@ -22,6 +22,7 @@ import { ConversationTypeEnum } from '../../../models/conversation';
|
|||
import { StateType } from '../../../state/reducer';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
getFirstUnreadMessageId,
|
||||
getQuotedMessageToAnimate,
|
||||
getSelectedConversation,
|
||||
getSelectedConversationKey,
|
||||
|
@ -41,6 +42,7 @@ type Props = SessionMessageListProps & {
|
|||
conversation?: ReduxConversationType;
|
||||
showScrollButton: boolean;
|
||||
animateQuotedMessageId: string | undefined;
|
||||
firstUnreadOnOpen: string | undefined;
|
||||
};
|
||||
|
||||
class SessionMessagesListContainerInner extends React.Component<Props> {
|
||||
|
@ -154,28 +156,32 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
|
|||
* Position the list to the middle of the loaded list if the conversation has unread messages and we have some messages loaded
|
||||
*/
|
||||
private initialMessageLoadingPosition() {
|
||||
const { messagesProps, conversation } = this.props;
|
||||
const { messagesProps, conversation, firstUnreadOnOpen } = this.props;
|
||||
if (!conversation || !messagesProps.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (conversation.unreadCount <= 0) {
|
||||
if (conversation.unreadCount <= 0 || firstUnreadOnOpen === undefined) {
|
||||
this.scrollToBottom();
|
||||
} else {
|
||||
// just assume that this need to be shown by default
|
||||
window.inboxStore?.dispatch(showScrollToBottomButton(true));
|
||||
const firstUnreadIndex = messagesProps.findIndex(
|
||||
m => m.propsForMessage.id === firstUnreadOnOpen
|
||||
);
|
||||
|
||||
// conversation.unreadCount > 0
|
||||
// either we loaded all unread messages or not
|
||||
if (conversation.unreadCount < messagesProps.length) {
|
||||
const idToStringTo = messagesProps[conversation.unreadCount - 1].propsForMessage.id;
|
||||
|
||||
this.scrollToMessage(idToStringTo, 'end');
|
||||
} else {
|
||||
if (firstUnreadIndex === -1) {
|
||||
// the first unread message is not in the 30 most recent messages
|
||||
// just scroll to the middle as we don't have enough loaded message nevertheless
|
||||
const middle = Math.floor(messagesProps.length / 2);
|
||||
const idToStringTo = messagesProps[middle].propsForMessage.id;
|
||||
this.scrollToMessage(idToStringTo, 'center');
|
||||
} else {
|
||||
const messageElementDom = document.getElementById('unread-indicator');
|
||||
messageElementDom?.scrollIntoView({
|
||||
behavior: 'auto',
|
||||
block: 'end',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -281,6 +287,7 @@ const mapStateToProps = (state: StateType) => {
|
|||
messagesProps: getSortedMessagesOfSelectedConversation(state),
|
||||
showScrollButton: getShowScrollButton(state),
|
||||
animateQuotedMessageId: getQuotedMessageToAnimate(state),
|
||||
firstUnreadOnOpen: getFirstUnreadMessageId(state),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue