Fix self-mention in groups

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/components/CompositionArea.tsx

@@ -198,6 +198,7 @@ export type Props = Pick<
   | 'getPreferredBadge'
   | 'onEditorStateChange'
   | 'onTextTooLong'
+  | 'ourConversationId'
   | 'quotedMessageId'
   | 'sendCounter'
   | 'sortedGroupMembers'
@@ -280,6 +281,7 @@ export const CompositionArea = memo(function CompositionArea({
   isFormattingEnabled,
   onEditorStateChange,
   onTextTooLong,
+  ourConversationId,
   sendCounter,
   sortedGroupMembers,
   // EmojiButton
@@ -947,6 +949,7 @@ export const CompositionArea = memo(function CompositionArea({
             }}
             onPickEmoji={onPickEmoji}
             onTextTooLong={onTextTooLong}
+            ourConversationId={ourConversationId}
             platform={platform}
             recentStickers={recentStickers}
             skinTone={skinTone}
@@ -1042,6 +1045,7 @@ export const CompositionArea = memo(function CompositionArea({
             onPickEmoji={onPickEmoji}
             onSubmit={handleSubmit}
             onTextTooLong={onTextTooLong}
+            ourConversationId={ourConversationId}
             platform={platform}
             quotedMessageId={quotedMessageId}
             sendCounter={sendCounter}

ts/components/CompositionInput.stories.tsx

@@ -43,6 +43,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => {
     onPickEmoji: action('onPickEmoji'),
     onSubmit: action('onSubmit'),
     onTextTooLong: action('onTextTooLong'),
+    ourConversationId: 'me',
     platform: 'darwin',
     quotedMessageId: null,
     sendCounter: 0,

ts/components/CompositionInput.tsx

@@ -139,6 +139,7 @@ export type Props = Readonly<{
     timestamp: number
   ): unknown;
   onScroll?: (ev: React.UIEvent<HTMLElement>) => void;
+  ourConversationId: string | undefined;
   platform: string;
   quotedMessageId: string | null;
   shouldHidePopovers: boolean | null;
@@ -173,6 +174,7 @@ export function CompositionInput(props: Props): React.ReactElement {
     onPickEmoji,
     onScroll,
     onSubmit,
+    ourConversationId,
     placeholder,
     platform,
     quotedMessageId,
@@ -781,11 +783,9 @@ export function CompositionInput(props: Props): React.ReactElement {
             },
             mentionCompletion: {
               getPreferredBadge,
-              me: sortedGroupMembers
-                ? sortedGroupMembers.find(foo => foo.isMe)
-                : undefined,
               memberRepositoryRef,
               setMentionPickerElement: setMentionCompletionElement,
+              ourConversationId,
               i18n,
               theme,
             },

ts/components/CompositionTextArea.tsx

@@ -39,6 +39,7 @@ export type CompositionTextAreaProps = {
     timestamp: number
   ) => void;
   onTextTooLong: () => void;
+  ourConversationId: string | undefined;
   platform: string;
   getPreferredBadge: PreferredBadgeSelectorType;
   draftText: string;
@@ -66,6 +67,7 @@ export function CompositionTextArea({
   onSetSkinTone,
   onSubmit,
   onTextTooLong,
+  ourConversationId,
   placeholder,
   platform,
   recentEmojis,
@@ -147,6 +149,7 @@ export function CompositionTextArea({
         onScroll={onScroll}
         onSubmit={onSubmit}
         onTextTooLong={onTextTooLong}
+        ourConversationId={ourConversationId}
         placeholder={placeholder}
         platform={platform}
         quotedMessageId={null}

ts/components/ForwardMessagesModal.stories.tsx

@@ -67,6 +67,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
       onPickEmoji={action('onPickEmoji')}
       onSetSkinTone={action('onSetSkinTone')}
       onTextTooLong={action('onTextTooLong')}
+      ourConversationId="me"
       platform="darwin"
       skinTone={0}
     />

ts/components/MediaEditor.tsx

@@ -89,6 +89,7 @@ export type PropsType = {
     | 'isFormattingEnabled'
     | 'onPickEmoji'
     | 'onTextTooLong'
+    | 'ourConversationId'
     | 'platform'
     | 'sortedGroupMembers'
   > &
@@ -157,6 +158,7 @@ export function MediaEditor({
   isFormattingEnabled,
   onPickEmoji,
   onTextTooLong,
+  ourConversationId,
   platform,
   sortedGroupMembers,
 
@@ -1315,6 +1317,7 @@ export function MediaEditor({
                   onPickEmoji={onPickEmoji}
                   onSubmit={noop}
                   onTextTooLong={onTextTooLong}
+                  ourConversationId={ourConversationId}
                   placeholder={i18n('icu:MediaEditor__input-placeholder')}
                   platform={platform}
                   quotedMessageId={null}

ts/components/StoryCreator.tsx

@@ -274,6 +274,7 @@ export function StoryCreator({
               }}
               onPickEmoji={onPickEmoji}
               onTextTooLong={onTextTooLong}
+              ourConversationId={ourConversationId}
               platform={platform}
               recentStickers={recentStickers}
               skinTone={skinTone}

ts/components/StoryViewer.tsx

@@ -103,6 +103,7 @@ export type PropsType = {
   ) => unknown;
   onUseEmoji: (_: EmojiPickDataType) => unknown;
   onMediaPlaybackStart: () => void;
+  ourConversationId: string | undefined;
   platform: string;
   preferredReactionEmoji: ReadonlyArray<string>;
   queueStoryDownload: (storyId: string) => unknown;
@@ -159,6 +160,7 @@ export function StoryViewer({
   onTextTooLong,
   onUseEmoji,
   onMediaPlaybackStart,
+  ourConversationId,
   platform,
   preferredReactionEmoji,
   queueStoryDownload,
@@ -978,6 +980,7 @@ export function StoryViewer({
             onSetSkinTone={onSetSkinTone}
             onTextTooLong={onTextTooLong}
             onUseEmoji={onUseEmoji}
+            ourConversationId={ourConversationId}
             preferredReactionEmoji={preferredReactionEmoji}
             recentEmojis={recentEmojis}
             renderEmojiPicker={renderEmojiPicker}

ts/components/StoryViewsNRepliesModal.tsx

@@ -107,6 +107,7 @@ export type PropsType = {
   onSetSkinTone: (tone: number) => unknown;
   onTextTooLong: () => unknown;
   onUseEmoji: (_: EmojiPickDataType) => unknown;
+  ourConversationId: string | undefined;
   preferredReactionEmoji: ReadonlyArray<string>;
   recentEmojis?: ReadonlyArray<string>;
   renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
@@ -138,6 +139,7 @@ export function StoryViewsNRepliesModal({
   onSetSkinTone,
   onTextTooLong,
   onUseEmoji,
+  ourConversationId,
   preferredReactionEmoji,
   recentEmojis,
   renderEmojiPicker,
@@ -254,6 +256,7 @@ export function StoryViewsNRepliesModal({
                 onReply(...args);
               }}
               onTextTooLong={onTextTooLong}
+              ourConversationId={ourConversationId}
               placeholder={
                 group
                   ? i18n('icu:StoryViewer__reply-group')

ts/quill/memberRepository.ts

@@ -82,9 +82,9 @@ export class MemberRepository {
     this.isFuseReady = false;
   }
 
-  getMembers(omit?: Pick<MemberType, 'id'>): ReadonlyArray<MemberType> {
+  getMembers(omitId?: string): ReadonlyArray<MemberType> {
-    if (omit) {
+    if (omitId) {
-      return this.members.filter(({ id }) => id !== omit.id);
+      return this.members.filter(({ id }) => id !== omitId);
     }
 
     return this.members;
@@ -102,10 +102,7 @@ export class MemberRepository {
       : undefined;
   }
 
-  search(
+  search(pattern: string, omitId?: string): ReadonlyArray<MemberType> {
-    pattern: string,
-    omit?: Pick<MemberType, 'id'>
-  ): ReadonlyArray<MemberType> {
     if (!this.isFuseReady) {
       this.fuse.setCollection(this.members);
       this.isFuseReady = true;
@@ -115,8 +112,8 @@ export class MemberRepository {
       .search(removeDiacritics(pattern))
       .map(result => result.item);
 
-    if (omit) {
+    if (omitId) {
-      return results.filter(({ id }) => id !== omit.id);
+      return results.filter(({ id }) => id !== omitId);
     }
 
     return results;

ts/quill/mentions/completion.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { Popper } from 'react-popper';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
-import type { ConversationType } from '../../state/ducks/conversations';
 import { Avatar, AvatarSize } from '../../components/Avatar';
 import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { MemberType, MemberRepository } from '../memberRepository';
@@ -26,7 +25,7 @@ export type MentionCompletionOptions = {
   i18n: LocalizerType;
   memberRepositoryRef: RefObject<MemberRepository>;
   setMentionPickerElement: (element: JSX.Element | null) => void;
-  me?: ConversationType;
+  ourConversationId: string | undefined;
   theme: ThemeType;
 };
 
@@ -128,10 +127,15 @@ export class MentionCompletion {
 
         if (memberRepository) {
           if (leftTokenText === '') {
-            results = memberRepository.getMembers(this.options.me);
+            results = memberRepository.getMembers(
+              this.options.ourConversationId
+            );
           } else {
             const fullMentionText = leftTokenText;
-            results = memberRepository.search(fullMentionText, this.options.me);
+            results = memberRepository.search(
+              fullMentionText,
+              this.options.ourConversationId
+            );
           }
         }
 

ts/state/smart/CompositionArea.tsx

@@ -255,6 +255,7 @@ export const SmartCompositionArea = memo(function SmartCompositionArea({
       lastEditableMessageId={lastEditableMessageId ?? null}
       messageCompositionId={messageCompositionId}
       platform={platform}
+      ourConversationId={ourConversationId}
       sendCounter={sendCounter}
       shouldHidePopovers={shouldHidePopovers}
       theme={theme}

ts/state/smart/CompositionTextArea.tsx

@@ -4,7 +4,7 @@ import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
 import type { CompositionTextAreaProps } from '../../components/CompositionTextArea';
 import { CompositionTextArea } from '../../components/CompositionTextArea';
-import { getIntl, getPlatform } from '../selectors/user';
+import { getIntl, getPlatform, getUserConversationId } from '../selectors/user';
 import { useEmojisActions as useEmojiActions } from '../ducks/emojis';
 import { useItemsActions } from '../ducks/items';
 import { getPreferredBadgeSelector } from '../selectors/badges';
@@ -31,6 +31,7 @@ export const SmartCompositionTextArea = memo(function SmartCompositionTextArea(
 ) {
   const i18n = useSelector(getIntl);
   const platform = useSelector(getPlatform);
+  const ourConversationId = useSelector(getUserConversationId);
 
   const { onUseEmoji: onPickEmoji } = useEmojiActions();
   const { onSetSkinTone } = useItemsActions();
@@ -50,6 +51,7 @@ export const SmartCompositionTextArea = memo(function SmartCompositionTextArea(
       onSetSkinTone={onSetSkinTone}
       onTextTooLong={onTextTooLong}
       platform={platform}
+      ourConversationId={ourConversationId}
     />
   );
 });

ts/state/smart/StoryViewer.tsx

@@ -14,7 +14,7 @@ import {
   getTextFormattingEnabled,
   isInternalUser,
 } from '../selectors/items';
-import { getIntl, getPlatform } from '../selectors/user';
+import { getIntl, getPlatform, getUserConversationId } from '../selectors/user';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import {
   getSelectedStoryData,
@@ -64,6 +64,7 @@ export const SmartStoryViewer = memo(function SmartStoryViewer() {
 
   const i18n = useSelector(getIntl);
   const platform = useSelector(getPlatform);
+  const ourConversationId = useSelector(getUserConversationId);
   const getPreferredBadge = useSelector(getPreferredBadgeSelector);
   const preferredReactionEmoji = useSelector(getPreferredReactionEmoji);
   const selectedStoryData = useSelector(getSelectedStoryData);
@@ -154,6 +155,7 @@ export const SmartStoryViewer = memo(function SmartStoryViewer() {
       onSetSkinTone={onSetSkinTone}
       onTextTooLong={handleTextTooLong}
       onUseEmoji={onUseEmoji}
+      ourConversationId={ourConversationId}
       platform={platform}
       preferredReactionEmoji={preferredReactionEmoji}
       queueStoryDownload={queueStoryDownload}

ts/test-electron/quill/mentions/completion_test.tsx

@@ -82,7 +82,7 @@ describe('MentionCompletion', () => {
     const options: MentionCompletionOptions = {
       getPreferredBadge: () => undefined,
       i18n: setupI18n('en', {}),
-      me,
+      ourConversationId: me.id,
       memberRepositoryRef,
       setMentionPickerElement: sinon.stub(),
       theme: ThemeType.dark,