From 9f0fd6fa8a56276dd139c1791a0fce0b166d30bc Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 27 Nov 2020 14:32:06 +1100 Subject: [PATCH] fix mentions shows display name in composition box but sends user id --- js/models/conversations.d.ts | 1 + js/models/conversations.js | 6 +-- ts/components/conversation/AddMentions.tsx | 13 ++--- .../conversation/SessionCompositionBox.tsx | 52 ++++++++++++------- ts/util/findMember.ts | 31 +++++------ 5 files changed, 56 insertions(+), 47 deletions(-) diff --git a/js/models/conversations.d.ts b/js/models/conversations.d.ts index 0fdc053fe..108bfeaf6 100644 --- a/js/models/conversations.d.ts +++ b/js/models/conversations.d.ts @@ -104,4 +104,5 @@ export interface ConversationModel queueJob: any; sendGroupInfo: any; onUpdateGroupName: any; + getContactProfileNameOrShortenedPubKey: () => string; } diff --git a/js/models/conversations.js b/js/models/conversations.js index 6ee1e210a..dd27600ea 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -2304,9 +2304,9 @@ const profileName = this.getProfileName(); const number = this.getNumber(); let name; - if (window.shortenPubKey) { + if (window.shortenPubkey) { name = profileName - ? `${profileName} (${window.shortenPubKey(number)})` + ? `${profileName} (${window.shortenPubkey(number)})` : number; } else { name = profileName ? `${profileName} (${number})` : number; @@ -2333,7 +2333,7 @@ if (pubkey === textsecure.storage.user.getNumber()) { return i18n('you'); } - return profileName || window.shortenPubKey(pubkey); + return profileName || window.shortenPubkey(pubkey); }, /** diff --git a/ts/components/conversation/AddMentions.tsx b/ts/components/conversation/AddMentions.tsx index a3c643a65..baf4ca563 100644 --- a/ts/components/conversation/AddMentions.tsx +++ b/ts/components/conversation/AddMentions.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import { MultiDeviceProtocol } from '../../session/protocols'; import { FindMember } from '../../util'; import { useInterval } from '../../hooks/useInterval'; +import { ConversationModel } from '../../../js/models/conversations'; interface MentionProps { key: string; @@ -13,7 +14,7 @@ interface MentionProps { } const Mention = (props: MentionProps) => { - const [found, setFound] = React.useState(undefined); + const [found, setFound] = React.useState(null); const [us, setUs] = React.useState(false); const tryRenameMention = async () => { @@ -22,10 +23,9 @@ const Mention = (props: MentionProps) => { props.text.slice(1), props.convoId ); + if (foundMember) { - const itsUs = await MultiDeviceProtocol.isOurDevice( - foundMember.authorPhoneNumber - ); + const itsUs = await MultiDeviceProtocol.isOurDevice(foundMember.id); setUs(itsUs); setFound(foundMember); // FIXME stop this interval once we found it. @@ -42,9 +42,7 @@ const Mention = (props: MentionProps) => { us && 'mention-profile-name-us' ); - const profileName = found.authorProfileName; - const displayedName = - profileName && profileName.length > 0 ? profileName : 'Anonymous'; + const displayedName = found.getContactProfileNameOrShortenedPubKey(); return {displayedName}; } else { return ( @@ -95,7 +93,6 @@ export class AddMentions extends React.Component { const pubkey = text.slice(match.index, FIND_MENTIONS.lastIndex); results.push(); - // @ts-ignore last = FIND_MENTIONS.lastIndex; match = FIND_MENTIONS.exec(text); } diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx index 4a994132e..5cd4dc64c 100644 --- a/ts/components/session/conversation/SessionCompositionBox.tsx +++ b/ts/components/session/conversation/SessionCompositionBox.tsx @@ -127,7 +127,7 @@ export class SessionCompositionBox extends React.Component { private emojiPanel: any; private linkPreviewAbortController?: AbortController; private container: any; - private readonly mentionsRegex = /@\(05[0-9a-f]{64}\)/g; + private readonly mentionsRegex = /@\u{FFD2}05[0-9a-f]{64}:[^\u{FFD2}]+\u{FFD2}/gu; constructor(props: any) { super(props); @@ -368,13 +368,15 @@ export class SessionCompositionBox extends React.Component { rows={1} style={sendMessageStyle} suggestionsPortalHost={this.container} - allowSuggestionsAboveCursor={true} // if only one suggestion, it might be rendered below + forceSuggestionsAboveCursor={true} // force mentions to be rendered on top of the cursor, this is working with a fork of react-mentions for now > `@(${id})`} + // this is only for the composition box visible content. The real stuff on the backend box is the @markup + displayTransform={(_id, display) => `@${display}`} data={this.fetchUsersForGroup} renderSuggestion={( suggestion, @@ -408,23 +410,21 @@ export class SessionCompositionBox extends React.Component { } private fetchUsersForGroup(query: any, callback: any) { + let overridenQuery = query; if (!query) { - return; + overridenQuery = ''; } if (this.props.isPublic) { - this.fetchUsersForOpenGroup(query, callback); + this.fetchUsersForOpenGroup(overridenQuery, callback); return; } if (!this.props.isPrivate) { - this.fetchUsersForClosedGroup(query, callback); + this.fetchUsersForClosedGroup(overridenQuery, callback); return; } } private fetchUsersForOpenGroup(query: any, callback: any) { - if (!query) { - return; - } void window.lokiPublicChatAPI .getListOfMembers() .then(members => @@ -447,9 +447,6 @@ export class SessionCompositionBox extends React.Component { } private fetchUsersForClosedGroup(query: any, callback: any) { - if (!query) { - return; - } const conversationModel = window.ConversationController.get( this.props.conversationKey ); @@ -470,16 +467,18 @@ export class SessionCompositionBox extends React.Component { authorProfileName: profileName, }; }); + // keep anonymous members so we can still quote them with their id const members = allMembers .filter(d => !!d) - .filter(d => d.authorProfileName !== 'Anonymous') - .filter(d => - d.authorProfileName?.toLowerCase()?.includes(query.toLowerCase()) + .filter( + d => + d.authorProfileName?.toLowerCase()?.includes(query.toLowerCase()) || + !d.authorProfileName ); // Transform the users to what react-mentions expects const mentionsData = members.map(user => ({ - display: user.authorProfileName, + display: user.authorProfileName || window.i18n('anonymous'), id: user.authorPhoneNumber, })); callback(mentionsData); @@ -738,12 +737,29 @@ export class SessionCompositionBox extends React.Component { // tslint:disable-next-line: cyclomatic-complexity private async onSendMessage() { + const toUnicode = (str: string) => { + return str + .split('') + .map(value => { + const temp = value + .charCodeAt(0) + .toString(16) + .toUpperCase(); + if (temp.length > 2) { + return `\\u${temp}`; + } + return value; + }) + .join(''); + }; + // this is dirty but we have to replace all @(xxx) by @xxx manually here const cleanMentions = (text: string): string => { + const textUnicode = toUnicode(text); const matches = text.match(this.mentionsRegex); let replacedMentions = text; (matches || []).forEach(match => { - const replacedMention = match.substring(2, match.length - 1); + const replacedMention = match.substring(2, match.indexOf(':')); replacedMentions = replacedMentions.replace( match, `@${replacedMention}` diff --git a/ts/util/findMember.ts b/ts/util/findMember.ts index dbd7a6941..06ec11b82 100644 --- a/ts/util/findMember.ts +++ b/ts/util/findMember.ts @@ -1,10 +1,12 @@ +import { ConversationModel } from '../../js/models/conversations'; + // tslint:disable: no-unnecessary-class export class FindMember { public static async findMember( pubkey: String, convoId: string, clearOurInterval?: any - ) { + ): Promise { let groupMembers; const groupConvos = window.getConversations().models.filter((d: any) => { @@ -20,12 +22,17 @@ export class FindMember { clearOurInterval(); } - return; + return null; } if (thisConvo.isPublic()) { - groupMembers = await window.lokiPublicChatAPI.getListOfMembers(); - groupMembers = groupMembers.filter((m: any) => !!m); + const publicMembers = await window.lokiPublicChatAPI.getListOfMembers(); + const memberConversations = publicMembers + .map(publicMember => + window.ConversationController.get(publicMember.authorPhoneNumber) + ) + .filter((c: any) => !!c); + groupMembers = memberConversations; } else { const privateConvos = window .getConversations() @@ -37,21 +44,9 @@ export class FindMember { 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, - }; - }); + groupMembers = memberConversations; } - return groupMembers.find( - ({ authorPhoneNumber: pn }: any) => pn && pn === pubkey - ); + return groupMembers.find(({ id: pn }: any) => pn && pn === pubkey); } }