diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js --- a/lib/shared/thread-utils.js +++ b/lib/shared/thread-utils.js @@ -1495,6 +1495,7 @@ rawThreadInfoFromServerThreadInfo, filterThreadEditDetailedPermissions, robotextName, + threadUIName, threadInfoFromRawThreadInfo, rawThreadInfoFromThreadInfo, threadTypeDescriptions, diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js --- a/web/modals/threads/settings/thread-settings-modal.react.js +++ b/web/modals/threads/settings/thread-settings-modal.react.js @@ -13,8 +13,8 @@ import { getAvailableRelationshipButtons } from 'lib/shared/relationship-utils'; import { threadHasPermission, - robotextName, getSingleOtherUser, + threadUIName, } from 'lib/shared/thread-utils'; import { type ThreadInfo, @@ -22,6 +22,7 @@ threadPermissions, type ThreadChanges, } from 'lib/types/thread-types'; +import { useResolvedThreadInfo } from 'lib/utils/entity-helpers'; import Tabs from '../../../components/tabs.react'; import { useSelector } from '../../../redux/redux-utils'; @@ -67,10 +68,20 @@ Object.freeze({}), ); - const namePlaceholder: string = React.useMemo(() => { - invariant(threadInfo, 'threadInfo should exist in namePlaceholder'); - return robotextName(threadInfo, viewerID, userInfos); - }, [threadInfo, userInfos, viewerID]); + const threadInfoWithNoName = React.useMemo(() => { + invariant(threadInfo, 'threadInfo should exist in threadInfoWithNoName'); + if (threadInfo.name === null || threadInfo.name === undefined) { + return threadInfo; + } + const uiName = threadUIName(threadInfo, viewerID, userInfos); + return { + ...threadInfo, + name: undefined, + uiName, + }; + }, [threadInfo, viewerID, userInfos]); + const resolvedThreadInfo = useResolvedThreadInfo(threadInfoWithNoName); + const namePlaceholder = resolvedThreadInfo.uiName; const otherMemberID = React.useMemo(() => { if (!threadInfo) {