From 90daf060ccc2f2e7da8a5c2b0250ea4f2d0ee001 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Wed, 8 Jun 2022 14:13:40 +0000
Subject: [PATCH] Emojis update realtime

---
 src/components/Chat.vue                     |  1 -
 src/components/RoomExport.vue               |  1 -
 src/components/messages/MessageIncoming.vue |  2 +-
 src/components/messages/MessageOutgoing.vue |  2 +-
 src/components/messages/QuickReactions.vue  | 15 ++++++++++++---
 src/components/messages/messageMixin.js     |  6 ------
 6 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index abdf012..fc0f065 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -72,7 +72,6 @@
               :room="room"
               :event="event"
               :nextEvent="events[index + 1]"
-              :reactions="timelineSet.getRelationsForEvent(event.getId(), 'm.annotation', 'm.reaction')"
               :timelineSet="timelineSet"
               v-on:send-quick-reaction="sendQuickReaction"
               v-on:context-menu="showContextMenuForEvent($event)"
diff --git a/src/components/RoomExport.vue b/src/components/RoomExport.vue
index 8ed0640..0010efb 100644
--- a/src/components/RoomExport.vue
+++ b/src/components/RoomExport.vue
@@ -33,7 +33,6 @@
                 :room="room"
                 :event="event"
                 :nextEvent="events[index + 1]"
-                :reactions="timelineSet.getRelationsForEvent(event.getId(), 'm.annotation', 'm.reaction')"
                 :timelineSet="timelineSet"
                 ref="exportedEvent"
               />
diff --git a/src/components/messages/MessageIncoming.vue b/src/components/messages/MessageIncoming.vue
index 3f11f2b..a345132 100644
--- a/src/components/messages/MessageIncoming.vue
+++ b/src/components/messages/MessageIncoming.vue
@@ -20,7 +20,7 @@
         ><v-icon>more_vert</v-icon></v-btn
       >
     </div>
-    <QuickReactions :event="event" :reactions="reactions" />
+    <QuickReactions :event="event" :timelineSet="timelineSet" />
   </div>
 </template>
 
diff --git a/src/components/messages/MessageOutgoing.vue b/src/components/messages/MessageOutgoing.vue
index c14d2c9..11b4000 100644
--- a/src/components/messages/MessageOutgoing.vue
+++ b/src/components/messages/MessageOutgoing.vue
@@ -8,7 +8,7 @@
       <div class="status">{{ event.status }}</div>
     </div>
 
-    <QuickReactions :event="event" :reactions="reactions" />
+    <QuickReactions :event="event" :timelineSet="timelineSet" />
     <div class="op-button" ref="opbutton">
       <v-btn id="btn-show-menu" icon @click.stop="showContextMenu($refs.opbutton)"
         ><v-icon>more_vert</v-icon></v-btn
diff --git a/src/components/messages/QuickReactions.vue b/src/components/messages/QuickReactions.vue
index 0e7c7b6..deb608b 100644
--- a/src/components/messages/QuickReactions.vue
+++ b/src/components/messages/QuickReactions.vue
@@ -15,24 +15,33 @@ export default {
         return {}
       }
     },
-    reactions: {
+        timelineSet: {
       type: Object,
       default: function () {
         return null
       }
-    }
+    },
   },
   data() {
     return {
-      reactionMap: {}
+      reactionMap: {},
+      reactions: null
     }
   },
+  mounted() {
+    this.reactions = this.timelineSet.getRelationsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');
+    this.event.on("Event.relationsCreated", this.onRelationsCreated);
+  },
   beforeDestroy() {
+    this.event.off("Event.relationsCreated", this.onRelationsCreated);
     if (this.reactions) {
       this.reactions.off('Relations.add', this.onAddRelation);
     }
   },
   methods: {
+    onRelationsCreated() {
+      this.reactions = this.timelineSet.getRelationsForEvent(this.event.getId(), 'm.annotation', 'm.reaction');
+    },
     onClickEmoji(emoji) {
       this.$bubble('send-quick-reaction', {reaction:emoji, event:this.event});
     },
diff --git a/src/components/messages/messageMixin.js b/src/components/messages/messageMixin.js
index 4255022..e51e53c 100644
--- a/src/components/messages/messageMixin.js
+++ b/src/components/messages/messageMixin.js
@@ -27,12 +27,6 @@ export default {
         return null
       }
     },
-    reactions: {
-      type: Object,
-      default: function () {
-        return null
-      }
-    },
     timelineSet: {
       type: Object,
       default: function () {