diff --git a/lib/hooks/inline-sidebar-text.react.js b/lib/hooks/inline-sidebar-text.react.js index d55cd445d..8507c32a4 100644 --- a/lib/hooks/inline-sidebar-text.react.js +++ b/lib/hooks/inline-sidebar-text.react.js @@ -1,41 +1,45 @@ // @flow import * as React from 'react'; import { relativeMemberInfoSelectorForMembersOfThread } from '../selectors/user-selectors'; import { stringForUser } from '../shared/user-utils'; import type { ThreadInfo } from '../types/thread-types'; import { useSelector } from '../utils/redux-utils'; import { pluralizeAndTrim } from '../utils/text-utils'; function useInlineSidebarText( - threadInfo: ThreadInfo, + threadInfo: ?ThreadInfo, ): { sendersText: string, repliesText: string, } { - const repliesCount = threadInfo.repliesCount || 1; - const repliesText = `${repliesCount} ${ - repliesCount > 1 ? 'replies' : 'reply' - }`; - const threadMembers = useSelector( - relativeMemberInfoSelectorForMembersOfThread(threadInfo.id), + relativeMemberInfoSelectorForMembersOfThread(threadInfo?.id), ); const sendersText = React.useMemo(() => { const senders = threadMembers .filter(member => member.isSender) .map(stringForUser); return senders.length > 0 ? `${pluralizeAndTrim(senders, 25)} sent ` : ''; }, [threadMembers]); - return React.useMemo( - () => ({ + const noThreadInfo = !threadInfo; + + return React.useMemo(() => { + if (noThreadInfo) { + return { sendersText: '', repliesText: '' }; + } + const repliesCount = threadInfo?.repliesCount || 1; + const repliesText = `${repliesCount} ${ + repliesCount > 1 ? 'replies' : 'reply' + }`; + + return { sendersText, repliesText, - }), - [sendersText, repliesText], - ); + }; + }, [noThreadInfo, sendersText, threadInfo?.repliesCount]); } export default useInlineSidebarText;