From 1efe6ca728c0c3cbff0aeec59b1f9304a9fede8d Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 7 Feb 2022 11:44:07 +1100 Subject: [PATCH] click oin @ bring to latest mention --- app/sql.js | 32 +++++++- stylesheets/_mentions.scss | 25 ------- .../conversation-list-item/HeaderItem.tsx | 74 ++++++++++++++++++- ts/data/data.ts | 8 ++ ts/models/message.ts | 14 +++- 5 files changed, 123 insertions(+), 30 deletions(-) diff --git a/app/sql.js b/app/sql.js index 1e84d5424..8d773f32c 100644 --- a/app/sql.js +++ b/app/sql.js @@ -74,6 +74,7 @@ module.exports = { getLastMessagesByConversation, getOldestMessageInConversation, getFirstUnreadMessageIdInConversation, + getFirstUnreadMessageWithMention, hasConversationOutgoingMessage, trimMessages, fillWithTestData, @@ -2279,7 +2280,7 @@ const orderByClause = 'ORDER BY COALESCE(serverTimestamp, sent_at, received_at) const orderByClauseASC = 'ORDER BY COALESCE(serverTimestamp, sent_at, received_at) ASC'; function getMessagesByConversation(conversationId, { messageId = null } = {}) { - const absLimit = 20; + const absLimit = 30; // If messageId is given it means we are opening the conversation to that specific messageId, // or that we just scrolled to it by a quote click and needs to load around it. // If messageId is null, it means we are just opening the convo to the last unread message, or at the bottom @@ -2420,6 +2421,35 @@ function getFirstUnreadMessageIdInConversation(conversationId) { return rows[0].id; } +function getFirstUnreadMessageWithMention(conversationId, ourpubkey) { + if (!ourpubkey || !ourpubkey.length) { + throw new Error('getFirstUnreadMessageWithMention needs our pubkey but nothing was given'); + } + const likeMatch = `%@${ourpubkey}%`; + + const rows = globalInstance + .prepare( + ` + SELECT id, json FROM ${MESSAGES_TABLE} WHERE + conversationId = $conversationId AND + unread = $unread AND + body LIKE $likeMatch + ORDER BY serverTimestamp ASC, serverId ASC, sent_at ASC, received_at ASC + LIMIT 1; + ` + ) + .all({ + conversationId, + unread: 1, + likeMatch, + }); + + if (rows.length === 0) { + return undefined; + } + return rows[0].id; +} + /** * Deletes all but the 10,000 last received messages. */ diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index 7eb0d2c30..f4bbd5771 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -74,28 +74,3 @@ .module-conversation-list-item--mentioned-us { border-left: 4px solid $session-color-green !important; } - -.at-symbol { - background-color: var(--color-accent); - - color: $color-black; - text-align: center; - margin-top: 0px; - margin-bottom: 0px; - padding-top: 1px; - padding-inline-start: 3px; - padding-inline-end: 3px; - - position: static; - margin-inline-start: 5px; - - font-weight: 300; - font-size: 11px; - letter-spacing: 0.25px; - - height: 16px; - min-width: 16px; - border-radius: 8px; - - box-shadow: 0px 0px 0px 1px $color-dark-85; -} diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index aeeb60749..10d189160 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -1,8 +1,14 @@ import classNames from 'classnames'; -import React, { useContext } from 'react'; +import React, { useCallback, useContext } from 'react'; import { useSelector } from 'react-redux'; import styled from 'styled-components'; +import { getFirstUnreadMessageWithMention } from '../../../data/data'; import { useConversationPropsById, useIsPinned } from '../../../hooks/useParamSelector'; +import { UserUtils } from '../../../session/utils'; +import { + openConversationToSpecificMessage, + openConversationWithMessages, +} from '../../../state/ducks/conversations'; import { SectionType } from '../../../state/ducks/section'; import { isSearching } from '../../../state/selectors/search'; import { getFocusedSection } from '../../../state/selectors/section'; @@ -74,12 +80,72 @@ const ListItemIcons = () => { ); }; +const MentionAtSymbol = styled.span` + background-color: var(--color-accent); + + color: black; + text-align: center; + margin-top: 0px; + margin-bottom: 0px; + padding-top: 1px; + padding-inline-start: 3px; + padding-inline-end: 3px; + + position: static; + margin-inline-start: 5px; + + font-weight: 300; + font-size: 11px; + letter-spacing: 0.25px; + + height: 16px; + min-width: 16px; + border-radius: 8px; + /* transition: filter 0.25s linear; */ + cursor: pointer; + + :hover { + filter: grayscale(0.7); + } +`; + export const ConversationListItemHeaderItem = () => { const conversationId = useContext(ContextConversationId); const isSearchingMode = useSelector(isSearching); const convoProps = useHeaderItemProps(conversationId); + + const openConvoToLastMention = useCallback( + async (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + + // mousedown is invoked sooner than onClick, but for both right and left click + if (e.button === 0) { + const oldestMessageUnreadWithMention = + (await getFirstUnreadMessageWithMention( + conversationId, + UserUtils.getOurPubKeyStrFromCache() + )) || null; + if (oldestMessageUnreadWithMention) { + await openConversationToSpecificMessage({ + conversationKey: conversationId, + messageIdToNavigateTo: oldestMessageUnreadWithMention, + shouldHighlightMessage: true, + }); + } else { + window.log.info('cannot open to latest mention as no unread mention are found'); + await openConversationWithMessages({ + conversationKey: conversationId, + messageId: null, + }); + } + } + }, + [conversationId] + ); + if (!convoProps) { return null; } @@ -88,7 +154,11 @@ export const ConversationListItemHeaderItem = () => { let atSymbol = null; let unreadCountDiv = null; if (unreadCount > 0) { - atSymbol = mentionedUs ?

@

: null; + atSymbol = mentionedUs ? ( + + @ + + ) : null; unreadCountDiv =

{unreadCount}

; } diff --git a/ts/data/data.ts b/ts/data/data.ts index 2304fe512..d0179ad48 100644 --- a/ts/data/data.ts +++ b/ts/data/data.ts @@ -130,6 +130,7 @@ const channelsToMake = { getLastMessagesByConversation, getOldestMessageInConversation, getFirstUnreadMessageIdInConversation, + getFirstUnreadMessageWithMention, hasConversationOutgoingMessage, getSeenMessagesByHashList, getLastHashBySnode, @@ -838,6 +839,13 @@ export async function getFirstUnreadMessageIdInConversation( return channels.getFirstUnreadMessageIdInConversation(conversationId); } +export async function getFirstUnreadMessageWithMention( + conversationId: string, + ourPubkey: string +): Promise { + return channels.getFirstUnreadMessageWithMention(conversationId, ourPubkey); +} + export async function hasConversationOutgoingMessage(conversationId: string): Promise { return channels.hasConversationOutgoingMessage(conversationId); } diff --git a/ts/models/message.ts b/ts/models/message.ts index d75bd52c3..dc06af0c8 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -19,7 +19,7 @@ import { } from './messageType'; import autoBind from 'auto-bind'; -import { saveMessage } from '../../ts/data/data'; +import { getFirstUnreadMessageWithMention, saveMessage } from '../../ts/data/data'; import { ConversationModel, ConversationTypeEnum } from './conversation'; import { FindAndFormatContactType, @@ -1030,7 +1030,17 @@ export class MessageModel extends Backbone.Model { if (convo) { const beforeUnread = convo.get('unreadCount'); const unreadCount = await convo.getUnreadCount(); - if (beforeUnread !== unreadCount) { + + const nextMentionedUs = await getFirstUnreadMessageWithMention( + convo.id, + UserUtils.getOurPubKeyStrFromCache() + ); + let mentionedUsChange = false; + if (convo.get('mentionedUs') && !nextMentionedUs) { + convo.set('mentionedUs', false); + mentionedUsChange = true; + } + if (beforeUnread !== unreadCount || mentionedUsChange) { convo.set({ unreadCount }); await convo.commit(); }