11import { PageBase } from 'web/components/page-base'
22import { useRouter } from 'next/router'
3- import { usePrivateMessages , useSortedPrivateMessageMemberships , } from 'web/hooks/use-private-messages'
3+ import { usePrivateMessages , useSortedPrivateMessageMemberships } from 'web/hooks/use-private-messages'
44import { Col } from 'web/components/layout/col'
55import { User } from 'common/user'
66import { useCallback , useEffect , useState } from 'react'
@@ -19,6 +19,7 @@ import {Row} from 'web/components/layout/row'
1919import clsx from 'clsx'
2020import { useRedirectIfSignedOut } from 'web/hooks/use-redirect-if-signed-out'
2121import { MultipleOrSingleAvatars } from 'web/components/multiple-or-single-avatars'
22+ import { Avatar } from 'web/components/widgets/avatar'
2223import { Modal , MODAL_CLASS } from 'web/components/layout/modal'
2324import { BannedBadge , UserAvatarAndBadge , } from 'web/components/widgets/user-link'
2425import DropdownMenu from 'web/components/comments/dropdown-menu'
@@ -69,6 +70,7 @@ export function PrivateMessagesContent(props: {
6970 useRedirectIfSignedOut ( )
7071
7172 const { channelId, user} = props
73+ const t = useT ( )
7274 const channelMembership = useSortedPrivateMessageMemberships (
7375 user . id ,
7476 1 ,
@@ -77,14 +79,20 @@ export function PrivateMessagesContent(props: {
7779 const { channels, memberIdsByChannelId} = channelMembership
7880 const thisChannel = channels ?. find ( ( c ) => c . channel_id == channelId )
7981 const loaded = channels !== undefined && channelId
80- const memberIds = thisChannel
82+ const memberIds = ( thisChannel
8183 ? memberIdsByChannelId ?. [ thisChannel . channel_id ]
82- : undefined
84+ : undefined ) ?? [ ]
8385
8486 return (
8587 < >
86- { user && loaded && thisChannel && memberIds ? (
87- < PrivateChat channel = { thisChannel } user = { user } memberIds = { memberIds } />
88+ { user && loaded ? (
89+ thisChannel ? (
90+ < PrivateChat channel = { thisChannel } user = { user } memberIds = { memberIds } />
91+ ) : (
92+ < div className = "flex h-[50vh] flex-col items-center justify-center mx-4 font-bold text-2xl" >
93+ { t ( '' , 'You do not have access to this conversation.' ) }
94+ </ div >
95+ )
8896 ) : (
8997 < CompassLoadingIndicator />
9098 ) }
@@ -103,6 +111,8 @@ export const PrivateChat = (props: {
103111 const isSafari = / ^ ( (? ! c h r o m e | a n d r o i d ) .) * s a f a r i / i. test ( navigator . userAgent )
104112 const isMobile = useIsMobile ( )
105113
114+ const noOtherUser = memberIds . length === 0
115+
106116 const totalMessagesToLoad = 100
107117 const { messages : realtimeMessages , setMessages, fetchMessages} = usePrivateMessages (
108118 channelId ,
@@ -246,28 +256,34 @@ export const PrivateChat = (props: {
246256 }
247257 >
248258 < BackButton className = "self-stretch" />
249- < MultipleOrSingleAvatars
250- size = "sm"
251- spacing = { 0.5 }
252- startLeft = { 1 }
253- avatars = { members ?? [ ] }
254- onClick = { ( ) => setShowUsers ( true ) }
255- />
256- { members && (
259+ { members && members . length > 0 ? (
260+ < MultipleOrSingleAvatars
261+ size = "sm"
262+ spacing = { 0.5 }
263+ startLeft = { 1 }
264+ avatars = { members }
265+ onClick = { ( ) => setShowUsers ( true ) }
266+ />
267+ ) : (
268+ < Avatar size = "sm" username = "?" noLink />
269+ ) }
270+ { members && members . length > 0 ? (
257271 < span
258- className = { 'ml-1 cursor-pointer hover:underline' }
272+ className = { clsx ( 'ml-1 cursor-pointer hover:underline' , noOtherUser && 'italic' ) }
259273 onClick = { ( ) =>
260274 members . length === 1
261275 ? router . push ( `/${ members [ 0 ] . username } ` )
262276 : setShowUsers ( true )
263277 }
264278 >
265279 { members
266- . map ( ( user ) => user . name . split ( ' ' ) [ 0 ] . trim ( ) )
280+ . map ( ( user ) => ( user . name ? user . name . split ( ' ' ) [ 0 ] . trim ( ) : t ( 'messages.deleted_user' , 'Deleted user' ) ) )
267281 . slice ( 0 , 2 )
268282 . join ( ', ' ) }
269283 { members . length > 2 && ` & ${ members . length - 2 } more` }
270284 </ span >
285+ ) : (
286+ < span className = { 'ml-1 italic' } > { t ( 'messages.deleted_user' , 'Deleted user' ) } </ span >
271287 ) }
272288
273289 { members ?. length == 1 && members [ 0 ] . isBannedFromPosting && (
@@ -419,16 +435,24 @@ export const PrivateChat = (props: {
419435 </ div >
420436 </ div >
421437 </ Col >
422- < CommentInputTextArea
423- editor = { editor }
424- user = { user }
425- submit = { submitMessage }
426- isSubmitting = { isSubmitting }
427- submitOnEnter = { ! isMobile }
428- replyTo = { replyToUserInfo }
429- isEditing = { ! ! editingMessage }
430- cancelEditing = { cancelEditing }
431- />
438+ { noOtherUser ? (
439+ < div className = "border-ink-200 p-4 text-center" >
440+ < span className = "text-ink-600" >
441+ { t ( 'messages.cannot_message_deleted' , "You can't text them as they deleted their account" ) }
442+ </ span >
443+ </ div >
444+ ) : (
445+ < CommentInputTextArea
446+ editor = { editor }
447+ user = { user }
448+ submit = { submitMessage }
449+ isSubmitting = { isSubmitting }
450+ submitOnEnter = { ! isMobile }
451+ replyTo = { replyToUserInfo }
452+ isEditing = { ! ! editingMessage }
453+ cancelEditing = { cancelEditing }
454+ />
455+ ) }
432456 </ Col >
433457 )
434458}
0 commit comments