feat: add str-chat__simple-message--error-failed class to str-chat__m…

…essage-inner
GetStream · Aug 2, 2022 · a5f8f94 · a5f8f94
1 parent 6e6fce5
commit a5f8f94
Showing 1 changed file with 6 additions and 11 deletions.
diff --git a/src/components/Message/MessageSimple.tsx b/src/components/Message/MessageSimple.tsx
@@ -85,6 +85,7 @@ const MessageSimpleWithContext = <
 
   const showMetadata = !groupedByUser || endOfGroup;
   const showReplyCountButton = !threadList && !!message.reply_count;
+  const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
 
   const rootClassName = clsx(
     'str-chat__message str-chat__message-simple',
@@ -134,18 +135,12 @@ const MessageSimpleWithContext = <
             />
           )}
           <div
-            className='str-chat__message-inner'
+            className={clsx('str-chat__message-inner', {
+              'str-chat__simple-message--error-failed': allowRetry,
+            })}
             data-testid='message-inner'
-            onClick={
-              message.status === 'failed' && message.errorStatusCode !== 403
-                ? () => handleRetry(message)
-                : undefined
-            }
-            onKeyUp={
-              message.status === 'failed' && message.errorStatusCode !== 403
-                ? () => handleRetry(message)
-                : undefined
-            }
+            onClick={allowRetry ? () => handleRetry(message) : undefined}
+            onKeyUp={allowRetry ? () => handleRetry(message) : undefined}
           >
             <MessageOptions />
             <div className='str-chat__message-reactions-host'>