#2393 - Add ButtonSubmit.vue for 'Send message' button (#2402)

* replace btn-link with button-submit component / asyncify the method * remove unused console.log
okTurtles · Oct 30, 2024 · 3b142e9 · 3b142e9
1 parent a1294ef
commit 3b142e9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/frontend/views/components/ButtonSubmit.vue b/frontend/views/components/ButtonSubmit.vue
@@ -1,6 +1,6 @@
 <template lang='pug'>
   button.is-loader(
-    type='submit'
+    :type='type'
     ref='btn'
     v-bind='$attrs'
     v-on='bindListeners'
@@ -43,7 +43,11 @@ https://github.com/okTurtles/group-income/pull/854/files#r388638068
 export default ({
   name: 'ButtonSubmit',
   props: {
-    disabled: Boolean
+    disabled: Boolean,
+    type: {
+      type: String,
+      default: 'submit'
+    }
   },
   data: () => ({
     ephemeral: {

diff --git a/frontend/views/components/ProfileCard.vue b/frontend/views/components/ProfileCard.vue
@@ -63,11 +63,12 @@ tooltip(
         ) Add payment information
 
       .buttons(v-if='!isSelf')
-        i18n.button.is-outlined.is-small(
-          tag='button'
-          @click='sendMessage'
+        button-submit.is-outlined.is-small(
+          type='button'
           data-test='buttonSendMessage'
-        ) Send message
+          @click='sendMessage'
+        )
+          i18n Send message
 
         i18n.button.is-outlined.is-small(
           v-if='groupShouldPropose || isGroupCreator'
@@ -85,6 +86,7 @@ tooltip(
 <script>
 import sbp from '@sbp/sbp'
 import AvatarUser from '@components/AvatarUser.vue'
+import ButtonSubmit from '@components/ButtonSubmit.vue'
 import UserName from '@components/UserName.vue'
 import Tooltip from '@components/Tooltip.vue'
 import ModalClose from '@components/modal/ModalClose.vue'
@@ -114,7 +116,8 @@ export default ({
     AvatarUser,
     ModalClose,
     UserName,
-    Tooltip
+    Tooltip,
+    ButtonSubmit
   },
   computed: {
     ...mapGetters([
@@ -165,10 +168,10 @@ export default ({
     toggleTooltip () {
       this.$refs.tooltip.toggle()
     },
-    sendMessage () {
+    async sendMessage () {
       const chatRoomID = this.ourGroupDirectMessageFromUserIds(this.contractID)
       if (!chatRoomID) {
-        this.createDirectMessage(this.contractID)
+        await this.createDirectMessage(this.contractID)
       } else {
         if (!this.ourGroupDirectMessages[chatRoomID].visible) {
           this.setDMVisibility(chatRoomID, true)