diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index 2e8ec5442..b0c0ffe16 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/ts/components/basic/PillContainer.tsx @@ -10,27 +10,6 @@ type PillContainerProps = { onMouseLeave?: () => void; }; -const StyledPillContainer = styled.div` - display: flex; - background: none; - flex-direction: 'row'; - flex-grow: 1; - flex: 1 1 40%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - align-items: center; - padding: ${props => props.padding || ''}; - margin: ${props => props.margin || ''}; - border-radius: 300px; - cursor: pointer; - border: 1px solid ${props => props.theme.colors.pillDividerColor}; - transition: ${props => props.theme.common.animations.defaultDuration}; - &:hover { - background: ${props => props.theme.colors.clickableHovered}; - } -`; - const StyledPillContainerHoverable = styled.div` background: none; @@ -70,10 +49,6 @@ const StyledPillInner = styled.div` } `; -export const PillContainer = (props: PillContainerProps) => { - return {props.children}; -}; - export const PillTooltipWrapper = (props: PillContainerProps) => { return {props.children}; }; diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx index a3fb21357..e2dd2868c 100644 --- a/ts/components/conversation/ExpireTimer.tsx +++ b/ts/components/conversation/ExpireTimer.tsx @@ -50,13 +50,12 @@ export const ExpireTimer = (props: Props) => { }, [expirationTimestamp, timeLeft, setTimeLeft]); const updateFrequency = 500; + useInterval(update, updateFrequency); if (!(isCorrectSide && expirationLength && expirationTimestamp)) { return null; } - useInterval(update, updateFrequency); - const expireTimerColor = theme.colors.textColor; if (timeLeft <= 60) { diff --git a/ts/components/session/SessionJoinableDefaultRooms.tsx b/ts/components/session/SessionJoinableDefaultRooms.tsx index 282f5bd23..206e794c6 100644 --- a/ts/components/session/SessionJoinableDefaultRooms.tsx +++ b/ts/components/session/SessionJoinableDefaultRooms.tsx @@ -143,7 +143,7 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => { - {showTooltip && {props.name}} + {showTooltip && false && {props.name}} ); }; diff --git a/ts/components/session/SessionPasswordPrompt.tsx b/ts/components/session/SessionPasswordPrompt.tsx index d9e26d127..378cd054a 100644 --- a/ts/components/session/SessionPasswordPrompt.tsx +++ b/ts/components/session/SessionPasswordPrompt.tsx @@ -31,7 +31,6 @@ class SessionPasswordPromptInner extends React.PureComponent<{ theme: DefaultThe } public componentDidMount() { - console.warn('this.inputRef', this.inputRef); setTimeout(() => { this.inputRef?.focus(); }, 100); diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts index c4b25c26f..021e3c719 100644 --- a/ts/models/conversation.ts +++ b/ts/models/conversation.ts @@ -202,9 +202,11 @@ export class ConversationModel extends Backbone.Model { this.throttledBumpTyping = _.throttle(this.bumpTyping, 300); this.updateLastMessage = _.throttle(this.bouncyUpdateLastMessage.bind(this), 1000, { trailing: true, + leading: true, }); this.triggerUIRefresh = _.throttle(this.triggerUIRefresh, 1000, { trailing: true, + leading: true, }); this.throttledNotify = _.debounce(this.notify, 500, { maxWait: 5000, trailing: true }); //start right away the function is called, and wait 1sec before calling it again @@ -934,7 +936,8 @@ export class ConversationModel extends Backbone.Model { public async addSingleMessage(messageAttributes: MessageAttributesOptionals, setToExpire = true) { const model = new MessageModel(messageAttributes); - const messageId = await model.commit(); + // no need to trigger a UI update now, we trigger a messageAdded just below + const messageId = await model.commit(false); model.set({ id: messageId }); if (setToExpire) { diff --git a/ts/models/message.ts b/ts/models/message.ts index e2a9783de..b0ae504fb 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -1011,14 +1011,16 @@ export class MessageModel extends Backbone.Model { await this.commit(); } - public async commit() { + public async commit(triggerUIUpdate = true) { if (!this.attributes.id) { throw new Error('A message always needs an id'); } perfStart(`messageCommit-${this.attributes.id}`); const id = await saveMessage(this.attributes); - this.dispatchMessageUpdate(); + if (triggerUIUpdate) { + this.dispatchMessageUpdate(); + } perfEnd(`messageCommit-${this.attributes.id}`, 'messageCommit'); return id; diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 66c81b52c..265d66678 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -146,9 +146,10 @@ export type MessagePropsType = | 'unread-indicator'; export const getSortedMessagesTypesOfSelectedConversation = createSelector( - getMessagesOfSelectedConversation, + getSortedMessagesOfSelectedConversation, getFirstUnreadMessageId, (sortedMessages, firstUnreadId) => { + const maxMessagesBetweenTwoDateBreaks = 5; // we want to show the date break if there is a large jump in time // remember that messages are sorted from the most recent to the oldest return sortedMessages.map((msg, index) => { @@ -159,9 +160,11 @@ export const getSortedMessagesTypesOfSelectedConversation = createSelector( ? 0 : sortedMessages[index + 1].propsForMessage.serverTimestamp || sortedMessages[index + 1].propsForMessage.timestamp; - // more than 10 minutes + const showDateBreak = - messageTimestamp - previousMessageTimestamp > 10 * 60 * 1000 ? messageTimestamp : undefined; + messageTimestamp - previousMessageTimestamp > maxMessagesBetweenTwoDateBreaks * 60 * 1000 + ? messageTimestamp + : undefined; if (msg.propsForDataExtractionNotification) { return {