refs #1281 Add reaction buttion and refresh after reaction

src/renderer/components/organisms/Toot.vue

@@ -103,6 +103,16 @@
             <bdi v-html="username(message.account)"></bdi>
           </span>
         </div>
+        <div class="emoji-reactions">
+          <template v-for="reaction in reactions">
+            <el-button v-if="reaction.me" type="success" size="medium" class="reaction" @click="removeReaction(reaction.name)"
+              >{{ reaction.name }} {{ reaction.count }}</el-button
+            >
+            <el-button v-else type="text" size="medium" class="reaction" @click="addReaction(reaction.name)"
+              >{{ reaction.name }} {{ reaction.count }}</el-button
+            >
+          </template>
+        </div>
         <div class="tool-box" v-click-outside="hideEmojiPicker">
           <el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
             <icon name="reply" scale="0.9"></icon>
@@ -228,7 +238,8 @@ export default {
       hideAllAttachments: this.$store.state.App.hideAllAttachments,
       now: Date.now(),
       pollResponse: null,
-      openEmojiPicker: false
+      openEmojiPicker: false,
+      reactionResponse: null
     }
   },
   props: {
@@ -321,6 +332,13 @@ export default {
         return this.originalMessage.poll
       }
     },
+    reactions: function () {
+      if (this.reactionResponse) {
+        return this.reactionResponse
+      } else {
+        return this.originalMessage.emoji_reactions
+      }
+    },
     sensitive: function () {
       return (this.hideAllAttachments || this.originalMessage.sensitive) && this.mediaAttachments.length > 0
     },
@@ -616,11 +634,26 @@ export default {
       this.openEmojiPicker = false
     },
     async selectEmoji(emoji) {
-      await this.$store.dispatch('organisms/Toot/sendReaction', {
+      const res = await this.$store.dispatch('organisms/Toot/sendReaction', {
         status_id: this.originalMessage.id,
         native: emoji.native
       })
+      this.reactionResponse = res
       this.hideEmojiPicker()
+    },
+    async addReaction(native) {
+      const res = await this.$store.dispatch('organisms/Toot/sendReaction', {
+        status_id: this.originalMessage.id,
+        native: native
+      })
+      this.reactionResponse = res
+    },
+    async removeReaction(native) {
+      const res = await this.$store.dispatch('organisms/Toot/deleteReaction', {
+        status_id: this.originalMessage.id,
+        native: native
+      })
+      this.reactionResponse = res
     }
   }
 }
@@ -795,6 +828,12 @@ export default {
       }
     }
 
+    .emoji-reactions {
+      .reaction {
+        padding: 10px 8px;
+      }
+    }
+
     .tool-box {
       float: left;
 

src/renderer/store/organisms/Toot.ts

@@ -116,7 +116,7 @@ const actions: ActionTree<TootState, RootState> = {
     const res = await client.getPoll(id)
     return res.data
   },
-  sendReaction: async ({ rootState }, params: ReactionParam): Promise<Entity.Status> => {
+  sendReaction: async ({ rootState }, params: ReactionParam): Promise<Array<Entity.Reaction>> => {
     const client = generator(
       rootState.TimelineSpace.sns,
       rootState.TimelineSpace.account.baseURL,
@@ -125,7 +125,24 @@ const actions: ActionTree<TootState, RootState> = {
       rootState.App.proxyConfiguration
     )
     const res = await client.createEmojiReaction(params.status_id, params.native)
-    return res.data
+    if (res.data.reblog) {
+      return res.data.reblog.emoji_reactions
+    }
+    return res.data.emoji_reactions
+  },
+  deleteReaction: async ({ rootState }, params: ReactionParam): Promise<Array<Entity.Reaction>> => {
+    const client = generator(
+      rootState.TimelineSpace.sns,
+      rootState.TimelineSpace.account.baseURL,
+      rootState.TimelineSpace.account.accessToken,
+      rootState.App.userAgent,
+      rootState.App.proxyConfiguration
+    )
+    const res = await client.deleteEmojiReaction(params.status_id, params.native)
+    if (res.data.reblog) {
+      return res.data.reblog.emoji_reactions
+    }
+    return res.data.emoji_reactions
   }
 }