[PAY-1251] [PAY-1188] DMs: Add error message to failed message sends (#…

…3428)
AudiusProject · May 25, 2023 · 9ba1956 · 9ba1956
1 parent 14034ae
commit 9ba1956
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 8 deletions.
diff --git a/packages/common/src/store/pages/chat/sagas.ts b/packages/common/src/store/pages/chat/sagas.ts
@@ -263,10 +263,10 @@ function* doMarkChatAsRead(action: ReturnType<typeof markChatAsRead>) {
 function* doSendMessage(action: ReturnType<typeof sendMessage>) {
   const { chatId, message, resendMessageId } = action.payload
   const messageIdToUse = resendMessageId ?? ulid()
+  const userId = yield* select(getUserId)
   try {
     const audiusSdk = yield* getContext('audiusSdk')
     const sdk = yield* call(audiusSdk)
-    const userId = yield* select(getUserId)
     const currentUserId = encodeHashId(userId)
     if (!currentUserId) {
       return
@@ -296,6 +296,13 @@ function* doSendMessage(action: ReturnType<typeof sendMessage>) {
   } catch (e) {
     console.error('sendMessageFailed', e)
     yield* put(sendMessageFailed({ chatId, messageId: messageIdToUse }))
+
+    // Refetch permissions and blocking on failed message send
+    yield* put(fetchBlockees())
+    yield* put(fetchBlockers())
+    if (userId) {
+      yield* put(fetchPermissions({ userIds: [userId] }))
+    }
   }
 }
 

diff --git a/packages/common/src/store/pages/chat/slice.ts b/packages/common/src/store/pages/chat/slice.ts
@@ -359,7 +359,7 @@ const slice = createSlice({
       action: PayloadAction<{
         chatId: string
         message: string
-        resendMessageId?: string // Required if resend = true
+        resendMessageId?: string
       }>
     ) => {
       // triggers saga which will add a message optimistically and replace it after success

diff --git a/packages/stems/src/assets/icons/iconError.svg b/packages/stems/src/assets/icons/iconError.svg
diff --git a/packages/stems/src/components/Icons/index.ts b/packages/stems/src/components/Icons/index.ts
@@ -144,3 +144,4 @@ export { ReactComponent as IconTrash } from '../../assets/icons/iconTrash.svg'
 export { ReactComponent as IconRobot } from '../../assets/icons/iconRobot.svg'
 export { ReactComponent as IconMessageLocked } from '../../assets/icons/iconMessageLocked.svg'
 export { ReactComponent as IconTipping } from '../../assets/icons/iconTipping.svg'
+export { ReactComponent as IconError } from '../../assets/icons/iconError.svg'
diff --git a/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css b/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
@@ -54,7 +54,7 @@
   user-select: text;
 }
 
-.date {
+.meta {
   font-size: var(--font-xs);
   color: var(--neutral-light-2);
   margin-bottom: var(--unit-4);
@@ -145,3 +145,24 @@
 .root.isAuthor .tail {
   right: -12px;
 }
+
+.error {
+  display: flex;
+  align-items: center;
+  gap: var(--unit-1);
+
+  color: var(--accent-red);
+}
+
+.error:hover {
+  cursor: pointer;
+}
+
+.error svg {
+  width: var(--unit-3);
+  height: var(--unit-3);
+}
+
+.error svg path {
+  fill: var(--accent-red);
+}
diff --git a/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx b/packages/web/src/pages/chat-page/components/ChatMessageListItem.tsx
@@ -11,10 +11,11 @@ import {
   formatMessageDate,
   isAudiusUrl,
   getPathFromAudiusUrl,
+  ChatMessageWithExtras,
+  Status,
   useCanSendMessage
 } from '@audius/common'
-import type { ChatMessage } from '@audius/sdk'
-import { IconPlus, PopupPosition } from '@audius/stems'
+import { IconError, IconPlus, PopupPosition } from '@audius/stems'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
 import Linkify from 'linkify-react'
@@ -30,15 +31,19 @@ import styles from './ChatMessageListItem.module.css'
 import { LinkPreview } from './LinkPreview'
 import { ReactionPopupMenu } from './ReactionPopupMenu'
 
-const { setMessageReaction } = chatActions
+const { setMessageReaction, sendMessage } = chatActions
 const { getUserId } = accountSelectors
 
 type ChatMessageListItemProps = {
   chatId: string
-  message: ChatMessage
+  message: ChatMessageWithExtras
   hasTail: boolean
 }
 
+const messages = {
+  error: 'Message Failed to Send. Click to Retry.'
+}
+
 export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
   const { chatId, message, hasTail } = props
 
@@ -100,6 +105,16 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
     [dispatch]
   )
 
+  const handleResendClicked = useCallback(() => {
+    dispatch(
+      sendMessage({
+        chatId,
+        message: message.message,
+        resendMessageId: message.message_id
+      })
+    )
+  }, [dispatch, chatId, message.message, message.message_id])
+
   // Only render reactions if user has message permissions
   const { canSendMessage } = useCanSendMessage(chatId)
   const renderReactions = () => {
@@ -201,7 +216,14 @@ export const ChatMessageListItem = (props: ChatMessageListItemProps) => {
           onSelected={handleReactionSelected}
         />
       ) : null}
-      {hasTail ? (
+      {message.status === Status.ERROR ? (
+        <div
+          className={cn(styles.meta, styles.error)}
+          onClick={handleResendClicked}
+        >
+          <IconError /> {messages.error}
+        </div>
+      ) : hasTail ? (
         <div className={styles.date}>
           {formatMessageDate(message.created_at)}
         </div>