Skip to content

Commit 3daf545

Browse files
DanC5DanC5
authored
Merge pull request #815 from GetStream/refactor-failed-message
Refactor failed message UI
2 parents de70cb8 + b354916 commit 3daf545

File tree

17 files changed

+100
-88
lines changed

17 files changed

+100
-88
lines changed

‎src/components/Channel/Channel.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -564,10 +564,14 @@ const ChannelInner = <
564564
status: 'received',
565565
});
566566
}
567-
} catch (e) {
568-
// set the message to failed..
567+
} catch (error) {
568+
// error response isn't usable so needs to be stringified then parsed
569+
const stringError = JSON.stringify(error);
570+
const parsedError = stringError ? JSON.parse(stringError) : {};
571+
569572
updateMessage({
570573
...message,
574+
errorStatusCode: (parsedError.status as number) || undefined,
571575
status: 'failed',
572576
});
573577
}
@@ -636,6 +640,7 @@ const ChannelInner = <
636640
// set the message status to sending
637641
updateMessage({
638642
...message,
643+
errorStatusCode: undefined,
639644
status: 'sending',
640645
});
641646

‎src/components/Message/MessageCommerce.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,11 @@ const MessageCommerceWithContext = <
9797
isMyMessage() ? 'right' : 'left'
9898
}`;
9999

100-
if (message?.deleted_at) {
100+
if (message.deleted_at) {
101101
return <MessageDeleted message={message} />;
102102
}
103103

104-
if (message?.type === 'message.read' || message.type === 'message.date') {
104+
if (message.type === 'message.read' || message.type === 'message.date') {
105105
return null;
106106
}
107107

@@ -110,9 +110,9 @@ const MessageCommerceWithContext = <
110110
<div
111111
className={`
112112
${messageClasses}
113-
str-chat__message-commerce--${message?.type}
113+
str-chat__message-commerce--${message.type}
114114
${
115-
message?.text
115+
message.text
116116
? 'str-chat__message-commerce--has-text'
117117
: 'str-chat__message-commerce--has-no-text'
118118
}
@@ -123,15 +123,15 @@ const MessageCommerceWithContext = <
123123
: ''
124124
}
125125
${`str-chat__message-commerce--${firstGroupStyle}`}
126-
${message?.pinned ? 'pinned-message' : ''}
126+
${message.pinned ? 'pinned-message' : ''}
127127
`.trim()}
128128
data-testid='message-commerce-wrapper'
129-
key={message?.id || ''}
129+
key={message.id}
130130
>
131131
{(firstGroupStyle === 'bottom' || firstGroupStyle === 'single') && (
132132
<Avatar
133-
image={message?.user?.image}
134-
name={message?.user?.name || message?.user?.id}
133+
image={message.user?.image}
134+
name={message.user?.name || message.user?.id}
135135
onClick={onUserClick}
136136
onMouseOver={onUserHover}
137137
size={32}
@@ -171,20 +171,20 @@ const MessageCommerceWithContext = <
171171
)}
172172
</>
173173
)}
174-
{message?.attachments && Attachment && (
174+
{message.attachments && (
175175
<Attachment
176176
actionHandler={handleAction}
177177
attachments={message.attachments}
178178
/>
179179
)}
180-
{message?.mml && (
180+
{message.mml && (
181181
<MML
182182
actionHandler={handleAction}
183183
align={isMyMessage() ? 'right' : 'left'}
184184
source={message.mml}
185185
/>
186186
)}
187-
{message?.text && (
187+
{message.text && (
188188
<MessageText
189189
{...props}
190190
customInnerClass='str-chat__message-commerce-text-inner'
@@ -202,14 +202,14 @@ const MessageCommerceWithContext = <
202202
<div className='str-chat__message-commerce-reply-button'>
203203
<MessageRepliesCountButton
204204
onClick={handleOpenThread}
205-
reply_count={message?.reply_count}
205+
reply_count={message.reply_count}
206206
/>
207207
</div>
208208
)}
209209
<div className='str-chat__message-commerce-data'>
210210
{!isMyMessage() ? (
211211
<span className='str-chat__message-commerce-name'>
212-
{message?.user?.name || message?.user?.id}
212+
{message.user?.name || message.user?.id}
213213
</span>
214214
) : null}
215215
<MessageTimestamp

‎src/components/Message/MessageLivestream.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -122,21 +122,17 @@ const MessageLivestreamWithContext = <
122122
});
123123

124124
const messageTextToRender =
125-
message?.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
126-
message?.text;
125+
message.i18n?.[`${userLanguage}_text` as `${TranslationLanguages}_text`] ||
126+
message.text;
127127

128128
const messageText = useMemo(
129-
() => renderText(messageTextToRender, message?.mentioned_users),
130-
[message?.mentioned_users, messageTextToRender],
129+
() => renderText(messageTextToRender, message.mentioned_users),
130+
[message.mentioned_users, messageTextToRender],
131131
);
132132

133133
const firstGroupStyle = groupStyles ? groupStyles[0] : '';
134134

135-
if (
136-
!message ||
137-
message.type === 'message.read' ||
138-
message.type === 'message.date'
139-
) {
135+
if (message.type === 'message.read' || message.type === 'message.date') {
140136
return null;
141137
}
142138

@@ -172,7 +168,7 @@ const MessageLivestreamWithContext = <
172168

173169
return (
174170
<>
175-
{message?.pinned && (
171+
{message.pinned && (
176172
<div className='str-chat__message-livestream-pin-indicator'>
177173
<PinIndicator message={message} t={t} />
178174
</div>
@@ -182,17 +178,17 @@ const MessageLivestreamWithContext = <
182178
message.type
183179
} str-chat__message-livestream--${message.status} ${
184180
initialMessage ? 'str-chat__message-livestream--initial-message' : ''
185-
} ${message?.pinned ? 'pinned-message' : ''}`}
181+
} ${message.pinned ? 'pinned-message' : ''}`}
186182
data-testid='message-livestream'
187183
ref={messageWrapperRef}
188184
>
189185
{showDetailedReactions && isReactionEnabled && (
190186
<ReactionSelector
191187
detailedView
192188
handleReaction={handleReaction}
193-
latest_reactions={message?.latest_reactions}
189+
latest_reactions={message.latest_reactions}
194190
own_reactions={message.own_reactions}
195-
reaction_counts={message?.reaction_counts || undefined}
191+
reaction_counts={message.reaction_counts || undefined}
196192
ref={reactionSelectorRef}
197193
reverse={false}
198194
/>
@@ -213,7 +209,7 @@ const MessageLivestreamWithContext = <
213209
<div className='str-chat__message-livestream-left'>
214210
<Avatar
215211
image={message.user?.image}
216-
name={message.user?.name || message?.user?.id}
212+
name={message.user?.name || message.user?.id}
217213
onClick={onUserClick}
218214
onMouseOver={onUserHover}
219215
size={30}
@@ -223,7 +219,7 @@ const MessageLivestreamWithContext = <
223219
<div className='str-chat__message-livestream-content'>
224220
<div className='str-chat__message-livestream-author'>
225221
<strong>{message.user?.name || message.user?.id}</strong>
226-
{message?.type === 'error' && (
222+
{message.type === 'error' && (
227223
<div className='str-chat__message-team-error-header'>
228224
{t('Only visible to you')}
229225
</div>
@@ -263,13 +259,21 @@ const MessageLivestreamWithContext = <
263259
</p>
264260
)}
265261
{message.status === 'failed' && (
266-
<p onClick={() => handleRetry(message)}>
262+
<p
263+
onClick={
264+
message.errorStatusCode !== 403
265+
? () => handleRetry(message)
266+
: undefined
267+
}
268+
>
267269
<ErrorIcon />
268-
{t('Message failed. Click to try again.')}
270+
{message.errorStatusCode !== 403
271+
? t('Message Failed · Click to try again')
272+
: t('Message Failed · Unauthorized')}
269273
</p>
270274
)}
271275
</div>
272-
{message?.attachments && Attachment && (
276+
{message.attachments && Attachment && (
273277
<Attachment
274278
actionHandler={handleAction}
275279
attachments={message.attachments}
@@ -349,7 +353,7 @@ const MessageLivestreamActions = <
349353
const [actionsBoxOpen, setActionsBoxOpen] = useState(false);
350354

351355
const hideOptions = useCallback(() => setActionsBoxOpen(false), []);
352-
const messageDeletedAt = !!message?.deleted_at;
356+
const messageDeletedAt = !!message.deleted_at;
353357
const messageWrapper = messageWrapperRef?.current;
354358

355359
useEffect(() => {

‎src/components/Message/MessageSimple.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,11 @@ const MessageSimpleWithContext = <
109109
? 'str-chat__message str-chat__message--me str-chat__message-simple str-chat__message-simple--me'
110110
: 'str-chat__message str-chat__message-simple';
111111

112-
if (message?.type === 'message.read' || message?.type === 'message.date') {
112+
if (message.type === 'message.read' || message.type === 'message.date') {
113113
return null;
114114
}
115115

116-
if (message?.deleted_at) {
116+
if (message.deleted_at) {
117117
return <MessageDeleted message={message} />;
118118
}
119119

@@ -142,7 +142,7 @@ const MessageSimpleWithContext = <
142142
? 'str-chat__message--with-reactions'
143143
: ''
144144
}
145-
${message?.pinned ? 'pinned-message' : ''}
145+
${message.pinned ? 'pinned-message' : ''}
146146
`.trim()}
147147
key={message.id || ''}
148148
ref={messageWrapperRef}
@@ -159,11 +159,11 @@ const MessageSimpleWithContext = <
159159
<div
160160
className='str-chat__message-inner'
161161
data-testid='message-inner'
162-
onClick={() => {
163-
if (message.status === 'failed') {
164-
handleRetry(message);
165-
}
166-
}}
162+
onClick={
163+
message.status === 'failed' && message.errorStatusCode !== 403
164+
? () => handleRetry(message)
165+
: undefined
166+
}
167167
>
168168
{!message.text && (
169169
<>
@@ -198,7 +198,7 @@ const MessageSimpleWithContext = <
198198
)}
199199
</>
200200
)}
201-
{message?.attachments && Attachment && (
201+
{message.attachments && Attachment && (
202202
<Attachment
203203
actionHandler={handleAction}
204204
attachments={message.attachments}
@@ -269,7 +269,7 @@ const MessageSimpleStatus = <
269269
const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
270270
const { t } = useTranslationContext();
271271

272-
if (!isMyMessage() || message?.type === 'error') {
272+
if (!isMyMessage() || message.type === 'error') {
273273
return null;
274274
}
275275

0 commit comments

Comments
 (0)