feat: retry message when uploading attachments failed

frontend/views/containers/chatroom/ChatMain.vue

@@ -510,19 +510,19 @@ export default ({
             }
           }
         }).then(async () => {
-          const removeTemporaryMessage = () => {
-            // NOTE: remove temporary message which is created before uploading attachments
-            if (temporaryMessage) {
-              const msgIndex = findMessageIdx(temporaryMessage.hash, this.messageState.contract.messages)
-              this.messageState.contract.messages.splice(msgIndex, 1)
-            }
-          }
-
           const isUploaded = await uploadAttachments()
           if (isUploaded) {
+            const removeTemporaryMessage = () => {
+              // NOTE: remove temporary message which is created before uploading attachments
+              if (temporaryMessage) {
+                const msgIndex = findMessageIdx(temporaryMessage.hash, this.messageState.contract.messages)
+                this.messageState.contract.messages.splice(msgIndex, 1)
+              }
+            }
             sendMessage(removeTemporaryMessage)
           } else {
-            removeTemporaryMessage()
+            temporaryMessage.pending = false
+            temporaryMessage.hasFailed = true
           }
         })
       }
@@ -598,8 +598,9 @@ export default ({
       }
     },
     retryMessage (index) {
-      // this.$set(this.ephemeral.pendingMessages[index], 'hasFailed', false)
-      console.log('TODO $store - retry sending a message')
+      const message = cloneDeep(this.messageState.contract.messages[index])
+      this.messageState.contract.messages.splice(index, 1)
+      this.handleSendMessage(message.text, message.attachments)
     },
     replyMessage (message) {
       this.ephemeral.replyingMessage = message.text

frontend/views/containers/chatroom/Message.vue

@@ -2,10 +2,11 @@
 message-base(
   v-bind='$props'
   @add-emoticon='addEmoticon($event)'
-  @reply='reply'
-  @reply-message-clicked='scrollToReplyMessage'
+  @reply='$emit("reply")'
+  @retry='$emit("retry")'
+  @reply-message-clicked='$emit("scroll-to-replying-message")'
   @message-edited='editMessage'
-  @delete-message='deleteMessage'
+  @delete-message='$emit("delete-message")'
   :convertTextToMarkdown='true'
 )
 
@@ -55,15 +56,6 @@ export default ({
     editMessage (newMessage) {
       this.$emit('edit-message', newMessage)
     },
-    deleteMessage () {
-      this.$emit('delete-message')
-    },
-    reply () {
-      this.$emit('reply')
-    },
-    scrollToReplyMessage () {
-      this.$emit('scroll-to-replying-message')
-    },
     moreOptions () {
       console.log('TODO MORE OPTIONS')
     },

frontend/views/containers/chatroom/MessageActions.vue

@@ -2,6 +2,7 @@
 menu-parent(ref='menu')
   .c-actions
     tooltip(
+      v-if='!isFailed'
       direction='top'
       :text='L("Add reaction")'
     )
@@ -12,7 +13,7 @@ menu-parent(ref='menu')
         i.icon-smile-beam
 
     tooltip(
-      v-if='isEditable'
+      v-if='isEditable && !isFailed'
       direction='top'
       :text='L("Edit")'
     )
@@ -23,7 +24,7 @@ menu-parent(ref='menu')
         i.icon-pencil-alt
 
     tooltip(
-      v-if='isText'
+      v-if='isText && !isFailed'
       direction='top'
       :text='L("Reply")'
     )
@@ -34,7 +35,7 @@ menu-parent(ref='menu')
         i.icon-reply
 
     tooltip(
-      v-if='variant === "failed"'
+      v-if='isFailed'
       direction='top'
       :text='L("Retry")'
     )
@@ -45,13 +46,15 @@ menu-parent(ref='menu')
         i.icon-undo
 
     menu-trigger.is-icon-small(
+      v-if='!isFailed'
       :aria-label='L("More options")'
     )
       i.icon-ellipsis-h
 
   menu-content.c-responsive-menu
     ul
       menu-item.hide-desktop.is-icon-small(
+        v-if='!isFailed'
         tag='button'
         @click='action("openEmoticon", $event)'
       )
@@ -60,29 +63,30 @@ menu-parent(ref='menu')
 
       menu-item.hide-desktop.is-icon-small(
         tag='button'
-        v-if='isEditable'
+        v-if='isEditable && !isFailed'
         @click='action("editMessage")'
       )
         i.icon-pencil-alt
         i18n Edit
 
       menu-item.hide-desktop.is-icon-small(
         tag='button'
-        v-if='isText'
+        v-if='isText && !isFailed'
         @click='action("reply")'
       )
         i.icon-reply
         i18n Reply
 
       menu-item.hide-desktop.is-icon-small(
         tag='button'
-        v-if='variant === "failed"'
+        v-if='isFailed'
         @click='action("retry")'
       )
         i.icon-undo
         i18n Add emoticons
 
       menu-item.is-icon-small(
+        v-if='!isFailed'
         tag='button'
         @click='action("copyMessageLink")'
       )
@@ -92,7 +96,7 @@ menu-parent(ref='menu')
       menu-item.is-icon-small.is-danger(
         tag='button'
         data-test='deleteMessage'
-        v-if='isEditable'
+        v-if='isEditable && !isFailed'
         @click='action("deleteMessage")'
       )
         i.icon-trash-alt
@@ -102,7 +106,7 @@ menu-parent(ref='menu')
 <script>
 import { MenuParent, MenuTrigger, MenuContent, MenuItem } from '@components/menu/index.js'
 import Tooltip from '@components/Tooltip.vue'
-import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
+import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 
 export default ({
   name: 'MessageActions',
@@ -114,7 +118,12 @@ export default ({
     Tooltip
   },
   props: {
-    variant: String,
+    variant: {
+      type: String,
+      validator (value) {
+        return Object.values(MESSAGE_VARIANTS).indexOf(value) !== -1
+      }
+    },
     type: String,
     isMsgSender: Boolean
   },
@@ -125,6 +134,9 @@ export default ({
     isPoll () {
       return this.type === MESSAGE_TYPES.POLL
     },
+    isFailed () {
+      return this.variant === MESSAGE_VARIANTS.FAILED
+    },
     isEditable (): Boolean {
       return this.isMsgSender && (this.isText || this.isPoll)
     }

frontend/views/containers/chatroom/MessageBase.vue

@@ -21,7 +21,7 @@
       slot(name='body')
         p.c-replying(
           if='replyingMessage'
-          @click='onReplyMessageClicked'
+          @click='$emit("reply-message-clicked")'
         )
           template(v-for='(objReplyMessage, index) in replyMessageObjects')
             span.custom-markdown-content(
@@ -78,9 +78,9 @@
     ref='messageAction'
     @openEmoticon='openEmoticon($event)'
     @editMessage='editMessage'
-    @deleteMessage='deleteMessage'
+    @deleteMessage='$emit("delete-message")'
     @reply='reply'
-    @retry='retry'
+    @retry='$emit("retry")'
     @copyMessageLink='copyMessageLink'
   )
 </template>
@@ -96,7 +96,7 @@ import SendArea from './SendArea.vue'
 import ChatAttachmentPreview from './file-attachment/ChatAttachmentPreview.vue'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { makeMentionFromUserID } from '@model/contracts/shared/functions.js'
-import { MESSAGE_TYPES } from '@model/contracts/shared/constants.js'
+import { MESSAGE_TYPES, MESSAGE_VARIANTS } from '@model/contracts/shared/constants.js'
 import { convertToMarkdown } from '@view-utils/convert-to-markdown.js'
 
 const TextObjectType = { Text: 'TEXT', Mention: 'MENTION' }
@@ -136,7 +136,12 @@ export default ({
       type: Object,
       default: null
     },
-    variant: String,
+    variant: {
+      type: String,
+      validator (value) {
+        return Object.values(MESSAGE_VARIANTS).indexOf(value) !== -1
+      }
+    },
     isSameSender: Boolean,
     isMsgSender: Boolean,
     convertTextToMarkdown: Boolean
@@ -162,18 +167,12 @@ export default ({
         this.isEditing = true
       }
     },
-    onReplyMessageClicked () {
-      this.$emit('reply-message-clicked')
-    },
     onMessageEdited (newMessage) {
       this.isEditing = false
       if (this.text !== newMessage) {
         this.$emit('message-edited', newMessage)
       }
     },
-    deleteMessage () {
-      this.$emit('delete-message')
-    },
     cancelEdit () {
       this.isEditing = false
     },
@@ -191,9 +190,6 @@ export default ({
     selectEmoticon (emoticon) {
       this.$emit('add-emoticon', emoticon.native || emoticon)
     },
-    retry () {
-      this.$emit('retry')
-    },
     openMenu () {
       this.$refs.messageAction.$refs.menu.handleTrigger()
     },
@@ -265,7 +261,8 @@ export default ({
     transition: opacity 0.7s ease-in-out 0.3s, background-color 0.3s ease-in;
   }
 
-  &.pending {
+  &.pending,
+  &.failed {
     .c-text {
       color: $general_0;
     }