Skip to content

Commit 6ad3d30

Browse files
committed
Show messages of deleted users
1 parent 7598f32 commit 6ad3d30

4 files changed

Lines changed: 72 additions & 38 deletions

File tree

web/messages/de.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,8 @@
314314
"messages.toast.muting_forever.success": "Benachrichtigungen dauerhaft stummgeschaltet",
315315
"messages.toast.send_failed": "Senden der Nachricht fehlgeschlagen. Bitte versuchen Sie es später erneut oder kontaktieren Sie den Support, wenn das Problem weiterhin besteht.",
316316
"messages.you_prefix": "Sie: ",
317+
"messages.cannot_message_deleted": "Sie können ihnen keine Nachricht senden, da sie ihr Konto gelöscht haben",
318+
"messages.deleted_user": "Gelöschter Benutzer",
317319
"multi-checkbox.enter_value": "Bitte geben Sie einen Wert ein.",
318320
"multi-checkbox.could_not_add": "Option konnte nicht hinzugefügt werden.",
319321
"multi-checkbox.add_failed": "Hinzufügen der Option fehlgeschlagen.",

web/messages/fr.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,8 @@
314314
"messages.toast.muting_forever.success": "Notifs coupées définitivement",
315315
"messages.toast.send_failed": "Échec de l'envoi du message. Veuillez réessayer plus tard ou contacter le support si le problème persiste.",
316316
"messages.you_prefix": "Vous : ",
317+
"messages.cannot_message_deleted": "Vous ne pouvez pas leur envoyer de message car ils ont supprimé leur compte",
318+
"messages.deleted_user": "Utilisateur supprimé",
317319
"multi-checkbox.enter_value": "Veuillez saisir une valeur.",
318320
"multi-checkbox.could_not_add": "Impossible d'ajouter l'option.",
319321
"multi-checkbox.add_failed": "Échec de l'ajout de l'option.",

web/pages/messages/[channelId].tsx

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {PageBase} from 'web/components/page-base'
22
import {useRouter} from 'next/router'
3-
import {usePrivateMessages, useSortedPrivateMessageMemberships,} from 'web/hooks/use-private-messages'
3+
import {usePrivateMessages, useSortedPrivateMessageMemberships} from 'web/hooks/use-private-messages'
44
import {Col} from 'web/components/layout/col'
55
import {User} from 'common/user'
66
import {useCallback, useEffect, useState} from 'react'
@@ -19,6 +19,7 @@ import {Row} from 'web/components/layout/row'
1919
import clsx from 'clsx'
2020
import {useRedirectIfSignedOut} from 'web/hooks/use-redirect-if-signed-out'
2121
import {MultipleOrSingleAvatars} from 'web/components/multiple-or-single-avatars'
22+
import {Avatar} from 'web/components/widgets/avatar'
2223
import {Modal, MODAL_CLASS} from 'web/components/layout/modal'
2324
import {BannedBadge, UserAvatarAndBadge,} from 'web/components/widgets/user-link'
2425
import 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 = /^((?!chrome|android).)*safari/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
}

web/pages/messages/index.tsx

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {useUser} from 'web/hooks/use-user'
1717
import {useUsersInStore} from 'web/hooks/use-user-supabase'
1818
import {useRedirectIfSignedOut} from 'web/hooks/use-redirect-if-signed-out'
1919
import {MultipleOrSingleAvatars} from 'web/components/multiple-or-single-avatars'
20+
import {Avatar} from 'web/components/widgets/avatar'
2021
import {BannedBadge} from 'web/components/widgets/user-link'
2122
import {PrivateMessageChannel} from 'common/supabase/private-messages'
2223
import {SEO} from "web/components/SEO";
@@ -66,8 +67,7 @@ export function MessagesContent(props: { currentUser: User }) {
6667
{channels?.map((channel) => {
6768
const userIds = memberIdsByChannelId?.[channel.channel_id]?.map(
6869
(m) => m
69-
)
70-
if (!userIds) return null
70+
) || []
7171
return (
7272
<MessageChannelRow
7373
key={channel.channel_id}
@@ -100,26 +100,30 @@ export const MessageChannelRow = (props: {
100100

101101
const isBanned = otherUsers?.length == 1 && otherUsers[0].isBannedFromPosting
102102
return (
103-
<Row className={'items-center gap-3 rounded-md'}>
104-
<MultipleOrSingleAvatars
105-
size="md"
106-
spacing={numOthers === 2 ? 0.3 : 0.15}
107-
startLeft={numOthers === 2 ? 2.2 : 1.2}
108-
avatars={otherUsers ?? []}
109-
className={numOthers > 1 ? '-ml-2' : ''}
110-
/>
103+
<Row className={'items-center gap-3 rounded-md hover:bg-canvas-100 p-2'}>
104+
{otherUsers && otherUsers.length > 0 ? (
105+
<MultipleOrSingleAvatars
106+
size="md"
107+
spacing={numOthers === 2 ? 0.3 : 0.15}
108+
startLeft={numOthers === 2 ? 2.2 : 1.2}
109+
avatars={otherUsers}
110+
className={numOthers > 1 ? '-ml-2' : ''}
111+
/>
112+
) : (
113+
<Avatar size="md" username="?" noLink/>
114+
)}
111115
<Link
112-
className="hover:bg-canvas-0 rounded p-2 transition-colors w-full"
116+
className="rounded w-full"
113117
key={channelId}
114118
href={'/messages/' + channelId}
115119
>
116120
<Col className={''}>
117121
<Row className={'items-center justify-between'}>
118122
<span className={'font-semibold'}>
119-
{otherUsers && (
123+
{otherUsers && otherUsers.length > 0 ? (
120124
<span>
121125
{otherUsers
122-
.map((user) => user.name.split(' ')[0].trim())
126+
.map((user) => (user.name ? user.name.split(' ')[0].trim() : t('messages.deleted_user', 'Deleted user')))
123127
.slice(0, 2)
124128
.join(', ')}
125129
{otherUsers.length > 2 && (
@@ -129,6 +133,8 @@ export const MessageChannelRow = (props: {
129133
</>
130134
)}
131135
</span>
136+
) : (
137+
<span className="italic">{t('messages.deleted_user', 'Deleted user')}</span>
132138
)}
133139
{isBanned && <BannedBadge/>}
134140
</span>

0 commit comments

Comments
 (0)