diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx index 100286194..6e6f7bc1f 100644 --- a/ts/components/MemberListItem.tsx +++ b/ts/components/MemberListItem.tsx @@ -31,6 +31,8 @@ import { UserGroupsWrapperActions, } from '../webworker/workers/browser/libsession_worker_interface'; import { assertUnreachable } from '../types/sqlSharedTypes'; +import { isUsAnySogsFromCache } from '../session/apis/open_group_api/sogsv3/knownBlindedkeys'; +import { localize } from '../localization/localeTools'; const AvatarContainer = styled.div` position: relative; @@ -332,8 +334,7 @@ export const MemberListItem = ({ hideRadioButton, }: MemberListItemProps) => { const memberName = useNicknameOrProfileNameOrShortenedPubkey(pubkey); - const isUs = UserUtils.isUsFromCache(pubkey); - const ourName = isUs ? window.i18n('you') : null; + const ourName = isUsAnySogsFromCache(pubkey) ? localize('you').toString() : null; return ( { ); const allMembers = allPubKeys.map((pubKey: string) => { - const convo = ConvoHub.use().get(pubKey); - const profileName = convo?.getNicknameOrRealUsernameOrPlaceholder(); - return { id: pubKey, - display: profileName, + display: isUsAnySogsFromCache(pubKey) + ? localize('you').toString() + : ConvoHub.use().get(pubKey)?.getNicknameOrRealUsernameOrPlaceholder() || + PubKey.shorten(pubKey), }; }); diff --git a/ts/components/conversation/composition/CompositionBox.tsx b/ts/components/conversation/composition/CompositionBox.tsx index fb40ead3f..5ebf20b34 100644 --- a/ts/components/conversation/composition/CompositionBox.tsx +++ b/ts/components/conversation/composition/CompositionBox.tsx @@ -1,4 +1,4 @@ -import _, { debounce, isEmpty, uniq } from 'lodash'; +import _, { debounce, isEmpty } from 'lodash'; import { connect } from 'react-redux'; import styled from 'styled-components'; @@ -14,16 +14,11 @@ import { SessionRecording } from '../SessionRecording'; import { SettingsKey } from '../../../data/settings-key'; import { showLinkSharingConfirmationModalDialog } from '../../../interactions/conversationInteractions'; -import { ConvoHub } from '../../../session/conversations'; -import { ToastUtils, UserUtils } from '../../../session/utils'; +import { ToastUtils } from '../../../session/utils'; import { ReduxConversationType } from '../../../state/ducks/conversations'; import { removeAllStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments'; import { StateType } from '../../../state/reducer'; -import { - getMentionsInput, - getQuotedMessage, - getSelectedConversation, -} from '../../../state/selectors/conversations'; +import { getQuotedMessage, getSelectedConversation } from '../../../state/selectors/conversations'; import { getIsSelectedBlocked, getSelectedCanWrite, @@ -57,10 +52,7 @@ import { import { CompositionTextArea } from './CompositionTextArea'; import { cleanMentions, mentionsRegex } from './UserMentions'; import { HTMLDirection } from '../../../util/i18n/rtlSupport'; -import { PubKey } from '../../../session/types'; -import { localize } from '../../../localization/localeTools'; import type { FixedBaseEmoji } from '../../../types/Reaction'; -import type { SessionSuggestionDataItem } from './types'; export interface ReplyingToMessageProps { convoId: string; @@ -442,7 +434,6 @@ class CompositionBoxInner extends Component { }} container={this.container} textAreaRef={this.textarea} - fetchMentionData={this.fetchMentionData} typingEnabled={this.props.typingEnabled} onKeyDown={this.onKeyDown} /> @@ -464,52 +455,6 @@ class CompositionBoxInner extends Component { ); } - - private filterMentionDataByQuery(query: string, mentionData: Array) { - return ( - mentionData - .filter(d => !!d) - .filter( - d => - d.display?.toLowerCase()?.includes(query.toLowerCase()) || - d.id?.toLowerCase()?.includes(query.toLowerCase()) - ) || [] - ); - } - - private membersInThisChat(): Array { - const { selectedConversation } = this.props; - if (!selectedConversation) { - return []; - } - if (selectedConversation.isPublic) { - return getMentionsInput(window?.inboxStore?.getState() || []); - } - const members = selectedConversation.isPrivate - ? uniq([UserUtils.getOurPubKeyStrFromCache(), selectedConversation.id]) - : selectedConversation.members || []; - return members.map(m => { - return { - id: m, - display: UserUtils.isUsFromCache(m) - ? localize('you').toString() - : ConvoHub.use().get(m)?.getNicknameOrRealUsernameOrPlaceholder() || PubKey.shorten(m), - }; - }); - } - - private fetchMentionData(query: string): Array { - let overriddenQuery = query; - if (!query) { - overriddenQuery = ''; - } - if (!this.props.selectedConversation) { - return []; - } - - return this.filterMentionDataByQuery(overriddenQuery, this.membersInThisChat()); - } - private renderStagedLinkPreview(): JSX.Element | null { // Don't generate link previews if user has turned them off if (!(window.getSettingValue(SettingsKey.settingsLinkPreview) || false)) { diff --git a/ts/components/conversation/composition/CompositionTextArea.tsx b/ts/components/conversation/composition/CompositionTextArea.tsx index 0472f5ab7..2fc3bf626 100644 --- a/ts/components/conversation/composition/CompositionTextArea.tsx +++ b/ts/components/conversation/composition/CompositionTextArea.tsx @@ -1,10 +1,14 @@ import { RefObject, useState } from 'react'; import { Mention, MentionsInput } from 'react-mentions'; +import { uniq } from 'lodash'; +import { useSelector } from 'react-redux'; import { useSelectedConversationKey, useSelectedIsBlocked, useSelectedIsGroupDestroyed, useSelectedIsKickedFromGroup, + useSelectedIsPrivate, + useSelectedIsPublic, useSelectedNicknameOrProfileNameOrShortenedPubkey, } from '../../../state/selectors/selectedConversation'; import { updateDraftForConversation } from '../SessionConversationDrafts'; @@ -14,6 +18,11 @@ import { HTMLDirection, useHTMLDirection } from '../../../util/i18n/rtlSupport'; import { ConvoHub } from '../../../session/conversations'; import { Constants } from '../../../session'; import type { SessionSuggestionDataItem } from './types'; +import { getMentionsInput } from '../../../state/selectors/conversations'; +import { UserUtils } from '../../../session/utils'; +import { localize } from '../../../localization/localeTools'; +import { PubKey } from '../../../session/types'; +import { useLibGroupMembers } from '../../../state/selectors/groups'; const sendMessageStyle = (dir?: HTMLDirection) => { return { @@ -44,14 +53,62 @@ type Props = { setDraft: (draft: string) => void; container: RefObject; textAreaRef: RefObject; - fetchMentionData: (query: string) => Array; typingEnabled: boolean; onKeyDown: (event: any) => void; }; +function filterMentionDataByQuery(query: string, mentionData: Array) { + return ( + mentionData + .filter(d => !!d) + .filter( + d => + d.display?.toLowerCase()?.includes(query.toLowerCase()) || + d.id?.toLowerCase()?.includes(query.toLowerCase()) + ) || [] + ); +} + +function useMembersInThisChat(): Array { + const selectedConvoKey = useSelectedConversationKey(); + const isPrivate = useSelectedIsPrivate(); + const isPublic = useSelectedIsPublic(); + const membersForCommunity = useSelector(getMentionsInput); + const membersFor03Group = useLibGroupMembers(selectedConvoKey); + + if (!selectedConvoKey) { + return []; + } + if (isPublic) { + return membersForCommunity || []; + } + const members = isPrivate + ? uniq([UserUtils.getOurPubKeyStrFromCache(), selectedConvoKey]) + : membersFor03Group || []; + return members.map(m => { + return { + id: m, + display: UserUtils.isUsFromCache(m) + ? localize('you').toString() + : ConvoHub.use().get(m)?.getNicknameOrRealUsernameOrPlaceholder() || PubKey.shorten(m), + }; + }); +} + +function fetchMentionData( + query: string, + fetchedMembersInThisChat: Array +): Array { + let overriddenQuery = query; + if (!query) { + overriddenQuery = ''; + } + + return filterMentionDataByQuery(overriddenQuery, fetchedMembersInThisChat); +} + export const CompositionTextArea = (props: Props) => { - const { draft, setDraft, container, textAreaRef, fetchMentionData, typingEnabled, onKeyDown } = - props; + const { draft, setDraft, container, textAreaRef, typingEnabled, onKeyDown } = props; const [lastBumpTypingMessageLength, setLastBumpTypingMessageLength] = useState(0); @@ -61,6 +118,7 @@ export const CompositionTextArea = (props: Props) => { const isGroupDestroyed = useSelectedIsGroupDestroyed(); const isBlocked = useSelectedIsBlocked(); const groupName = useSelectedNicknameOrProfileNameOrShortenedPubkey(); + const membersInThisChat = useMembersInThisChat(); if (!selectedConversationKey) { return null; @@ -143,7 +201,7 @@ export const CompositionTextArea = (props: Props) => { displayTransform={(_id, display) => { return htmlDirection === 'rtl' ? `${display}@` : `@${display}`; }} - data={fetchMentionData} + data={(query: string) => fetchMentionData(query, membersInThisChat)} renderSuggestion={renderUserMentionRow} />