From 64dff64925c4262ea90aaac07bb45d7b6d212234 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 29 Jul 2020 14:40:49 +1000 Subject: [PATCH] fix mentions notification displayname rather than pubkeys * replace @pubkeys with their corresponding display name if found * fix the display of the @ sign on the conversationListItem --- js/models/messages.js | 14 +++++- stylesheets/_mentions.scss | 9 ++-- ts/components/conversation/AddMentions.tsx | 57 +++------------------- ts/session/types/PubKey.ts | 4 +- ts/util/findMember.ts | 57 ++++++++++++++++++++++ ts/util/index.ts | 2 + 6 files changed, 87 insertions(+), 56 deletions(-) create mode 100644 ts/util/findMember.ts diff --git a/js/models/messages.js b/js/models/messages.js index 15abc5ca2..777825217 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -264,8 +264,20 @@ /* eslint-enable no-bitwise */ }, getNotificationText() { - const description = this.getDescription(); + let description = this.getDescription(); if (description) { + // regex with a 'g' to ignore part groups + const regex = new RegExp( + `@${window.libsession.Types.PubKey.regexForPubkeys}`, + 'g' + ); + const pubkeysInDesc = description.match(regex); + (pubkeysInDesc || []).forEach(pubkey => { + const displayName = this.getLokiNameForNumber(pubkey.slice(1)); + if (displayName && displayName.length) { + description = description.replace(pubkey, `@${displayName}`); + } + }); return description; } if (this.get('attachments').length > 0) { diff --git a/stylesheets/_mentions.scss b/stylesheets/_mentions.scss index eded63c8b..c32a70d55 100644 --- a/stylesheets/_mentions.scss +++ b/stylesheets/_mentions.scss @@ -184,11 +184,11 @@ } .module-conversation-list-item--mentioned-us { - border-left: 4px solid #ffb000 !important; + border-left: 4px solid $session-color-green !important; } .at-symbol { - background-color: #ffb000; + background-color: $session-color-green; color: $color-black; text-align: center; @@ -198,8 +198,9 @@ padding-right: 3px; position: absolute; - right: -6px; - top: 12px; + left: 50%; + margin-left: 30px; + top: 2px; font-weight: 300; font-size: 11px; diff --git a/ts/components/conversation/AddMentions.tsx b/ts/components/conversation/AddMentions.tsx index ae7a50dde..d9ce07951 100644 --- a/ts/components/conversation/AddMentions.tsx +++ b/ts/components/conversation/AddMentions.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { RenderTextCallbackType } from '../../types/Util'; import classNames from 'classnames'; +import { FindMember } from '../../util'; declare global { interface Window { @@ -71,61 +72,17 @@ class Mention extends React.Component { } private async tryRenameMention() { - const found = await this.findMember(this.props.text.slice(1)); + const bound = this.clearOurInterval.bind(this); + const found = await FindMember.findMember( + this.props.text.slice(1), + this.props.convoId, + bound + ); if (found) { this.setState({ found }); this.clearOurInterval(); } } - - private async findMember(pubkey: String) { - let groupMembers; - - const groupConvos = window.getConversations().models.filter((d: any) => { - return !d.isPrivate(); - }); - const thisConvo = groupConvos.find((d: any) => { - return d.id === this.props.convoId; - }); - - if (!thisConvo) { - // If this gets triggered, is is likely because we deleted the conversation - this.clearOurInterval(); - - return; - } - - if (thisConvo.isPublic()) { - groupMembers = await window.lokiPublicChatAPI.getListOfMembers(); - groupMembers = groupMembers.filter((m: any) => !!m); - } else { - const privateConvos = window - .getConversations() - .models.filter((d: any) => d.isPrivate()); - const members = thisConvo.attributes.members; - if (!members) { - return null; - } - const memberConversations = members - .map((m: any) => privateConvos.find((c: any) => c.id === m)) - .filter((c: any) => !!c); - groupMembers = memberConversations.map((m: any) => { - const name = m.getLokiProfile() - ? m.getLokiProfile().displayName - : m.attributes.displayName; - - return { - id: m.id, - authorPhoneNumber: m.id, - authorProfileName: name, - }; - }); - } - - return groupMembers.find( - ({ authorPhoneNumber: pn }: any) => pn && pn === pubkey - ); - } } interface Props { diff --git a/ts/session/types/PubKey.ts b/ts/session/types/PubKey.ts index 06d07e94d..d3fbb7c0c 100644 --- a/ts/session/types/PubKey.ts +++ b/ts/session/types/PubKey.ts @@ -4,14 +4,16 @@ export class PubKey { // They have a different regex to match // FIXME move this to a new class which validates group ids and use it in all places where we have group ids (message sending included) public static readonly MOBILE_GROUP_PUBKEY_LEN = 32; + public static readonly regexForPubkeys = `((05)?[0-9a-fA-F]{${PubKey.PUBKEY_LEN - + 2}})`; private static readonly regexForMobileGroupID = `__textsecure_group__![0-9a-fA-F]{${PubKey.MOBILE_GROUP_PUBKEY_LEN}}`; // prettier-ignore - private static readonly regexForPubkeys = `((05)?[0-9a-fA-F]{${PubKey.PUBKEY_LEN - 2}})`; private static readonly regex: RegExp = new RegExp( `^${PubKey.regexForPubkeys}|${PubKey.regexForMobileGroupID}$` ); public readonly key: string; + /** * A PubKey object. * If `pubKeyString` is not valid then this will throw an `Error`. diff --git a/ts/util/findMember.ts b/ts/util/findMember.ts new file mode 100644 index 000000000..dbd7a6941 --- /dev/null +++ b/ts/util/findMember.ts @@ -0,0 +1,57 @@ +// tslint:disable: no-unnecessary-class +export class FindMember { + public static async findMember( + pubkey: String, + convoId: string, + clearOurInterval?: any + ) { + let groupMembers; + + const groupConvos = window.getConversations().models.filter((d: any) => { + return !d.isPrivate(); + }); + const thisConvo = groupConvos.find((d: any) => { + return d.id === convoId; + }); + + if (!thisConvo) { + // If this gets triggered, is is likely because we deleted the conversation + if (clearOurInterval) { + clearOurInterval(); + } + + return; + } + + if (thisConvo.isPublic()) { + groupMembers = await window.lokiPublicChatAPI.getListOfMembers(); + groupMembers = groupMembers.filter((m: any) => !!m); + } else { + const privateConvos = window + .getConversations() + .models.filter((d: any) => d.isPrivate()); + const members = thisConvo.attributes.members; + if (!members) { + return null; + } + const memberConversations = members + .map((m: any) => privateConvos.find((c: any) => c.id === m)) + .filter((c: any) => !!c); + groupMembers = memberConversations.map((m: any) => { + const name = m.getLokiProfile() + ? m.getLokiProfile().displayName + : m.attributes.displayName; + + return { + id: m.id, + authorPhoneNumber: m.id, + authorProfileName: name, + }; + }); + } + + return groupMembers.find( + ({ authorPhoneNumber: pn }: any) => pn && pn === pubkey + ); + } +} diff --git a/ts/util/index.ts b/ts/util/index.ts index c5428412b..fd90de3fd 100644 --- a/ts/util/index.ts +++ b/ts/util/index.ts @@ -4,6 +4,7 @@ import { isFileDangerous } from './isFileDangerous'; import { missingCaseError } from './missingCaseError'; import { migrateColor } from './migrateColor'; import { makeLookup } from './makeLookup'; +import { FindMember } from './findMember'; import * as UserUtil from './user'; export * from './blockedNumberController'; @@ -16,4 +17,5 @@ export { migrateColor, missingCaseError, UserUtil, + FindMember, };