Load reactions with lookup and make creation instant (#6680)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

plugins/activity-resources/src/components/Activity.svelte

@@ -211,6 +211,11 @@
       {
         sort: {
           createdOn: SortingOrder.Ascending
+        },
+        lookup: {
+          _id: {
+            reactions: activity.class.Reaction
+          }
         }
       }
     )

plugins/activity-resources/src/components/reactions/Reactions.svelte

@@ -55,7 +55,7 @@
     ev.preventDefault()
     ev.stopPropagation()
     showPopup(EmojiPopup, {}, ev.target as HTMLElement, async (emoji: string) => {
-      await updateDocReactions(client, reactions, object, emoji)
+      await updateDocReactions(reactions, object, emoji)
     })
   }
 </script>

plugins/activity-resources/src/components/reactions/ReactionsPresenter.svelte

@@ -14,40 +14,48 @@
 -->
 <script lang="ts">
   import activity, { ActivityMessage, Reaction } from '@hcengineering/activity'
-  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { createQuery } from '@hcengineering/presentation'
+  import { WithLookup } from '@hcengineering/core'
 
   import { getSpace, updateDocReactions } from '../../utils'
   import Reactions from './Reactions.svelte'
 
-  export let object: ActivityMessage | undefined
+  export let object: WithLookup<ActivityMessage> | undefined
   export let readonly = false
 
-  const client = getClient()
   const reactionsQuery = createQuery()
 
   let reactions: Reaction[] = []
 
-  $: hasReactions = object?.reactions && object.reactions > 0
+  $: hasReactions = (object?.reactions ?? 0) > 0
+  $: lookupReactions = object?.$lookup?.reactions as Reaction[] | undefined
 
-  $: if (object && hasReactions) {
-    reactionsQuery.query(
-      activity.class.Reaction,
-      { attachedTo: object._id, space: getSpace(object) },
-      (res: Reaction[]) => {
-        reactions = res
-      }
-    )
-  } else {
-    reactionsQuery.unsubscribe()
+  $: updateReactions(hasReactions, object, lookupReactions)
+
+  function updateReactions (hasReactions: boolean, object?: ActivityMessage, lookupReaction?: Reaction[]): void {
+    if (lookupReaction !== undefined) {
+      reactions = lookupReaction
+    } else if (object && hasReactions) {
+      reactionsQuery.query(
+        activity.class.Reaction,
+        { attachedTo: object._id, space: getSpace(object) },
+        (res: Reaction[]) => {
+          reactions = res
+        }
+      )
+    } else {
+      reactionsQuery.unsubscribe()
+      reactions = []
+    }
   }
 
   const handleClick = (ev: CustomEvent) => {
     if (readonly) return
-    void updateDocReactions(client, reactions, object, ev.detail)
+    void updateDocReactions(reactions, object, ev.detail)
   }
 </script>
 
-{#if object && hasReactions}
+{#if object && reactions.length > 0}
   <div class="footer flex-col p-inline contrast mt-2 min-h-6">
     <Reactions {reactions} {object} {readonly} on:click={handleClick} />
   </div>

plugins/activity-resources/src/components/reactions/ReactionsPreview.svelte

@@ -66,7 +66,7 @@
     e.stopPropagation()
     e.preventDefault()
     showPopup(EmojiPopup, {}, e.target as HTMLElement, (emoji: string) => {
-      void updateDocReactions(client, reactions, message, emoji)
+      void updateDocReactions(reactions, message, emoji)
     })
   }
 </script>