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

@@ -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) {

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;

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<MentionProps, MentionState> {
   }
 
   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 {

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`.

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
+    );
+  }
+}

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,
 };