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,19 @@ 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 withNoName = { ...threadInfo, name: undefined }; + return { + ...withNoName, + uiName: threadUIName(withNoName, viewerID, userInfos), + }; + }, [threadInfo, viewerID, userInfos]); + const resolvedThreadInfo = useResolvedThreadInfo(threadInfoWithNoName); + const namePlaceholder = resolvedThreadInfo.uiName; const otherMemberID = React.useMemo(() => { if (!threadInfo) {