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

Signed-off-by: Kristina Fefelova <[email protected]>

models/activity/package.json

@@ -35,6 +35,7 @@
     "@hcengineering/model": "^0.6.11",
     "@hcengineering/model-core": "^0.6.0",
     "@hcengineering/model-preference": "^0.6.0",
+    "@hcengineering/model-presentation": "^0.6.0",
     "@hcengineering/model-view": "^0.6.0",
     "@hcengineering/notification": "^0.6.23",
     "@hcengineering/platform": "^0.6.11",

models/activity/src/index.ts

@@ -70,6 +70,7 @@ import preference, { TPreference } from '@hcengineering/model-preference'
 import view from '@hcengineering/model-view'
 import type { Asset, IntlString, Resource } from '@hcengineering/platform'
 import { type AnyComponent } from '@hcengineering/ui/src/types'
+import presentation from '@hcengineering/model-presentation'
 
 import activity from './plugin'
 import { buildActions } from './actions'
@@ -375,6 +376,10 @@ export function createModel (builder: Builder): void {
     ]
   })
 
+  builder.mixin(activity.class.Reaction, core.class.Class, presentation.mixin.InstantTransactions, {
+    txClasses: [core.class.TxCreateDoc]
+  })
+
   buildActions(builder)
   buildNotifications(builder)
 }

packages/core/src/operations.ts

@@ -98,7 +98,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
       throw new Error('createDoc cannot be called for DOMAIN_MODEL classes with non-model space')
     }
     const tx = this.txFactory.createTxCreateDoc(_class, space, attributes, id, modifiedOn, modifiedBy)
-    await this.client.tx(tx)
+    await this.tx(tx)
     return tx.objectId
   }
 
@@ -122,7 +122,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
       modifiedOn,
       modifiedBy
     )
-    await this.client.tx(tx)
+    await this.tx(tx)
     return tx.tx.objectId as unknown as Ref<P>
   }
 
@@ -147,7 +147,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
       modifiedOn,
       modifiedBy
     )
-    await this.client.tx(tx)
+    await this.tx(tx)
     return tx.objectId
   }
 
@@ -170,7 +170,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
       modifiedOn,
       modifiedBy
     )
-    await this.client.tx(tx)
+    await this.tx(tx)
     return tx.objectId
   }
 
@@ -184,7 +184,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
     modifiedBy?: Ref<Account>
   ): Promise<TxResult> {
     const tx = this.txFactory.createTxUpdateDoc(_class, space, objectId, operations, retrieve, modifiedOn, modifiedBy)
-    return this.client.tx(tx)
+    return this.tx(tx)
   }
 
   removeDoc<T extends Doc>(
@@ -195,7 +195,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
     modifiedBy?: Ref<Account>
   ): Promise<TxResult> {
     const tx = this.txFactory.createTxRemoveDoc(_class, space, objectId, modifiedOn, modifiedBy)
-    return this.client.tx(tx)
+    return this.tx(tx)
   }
 
   createMixin<D extends Doc, M extends D>(
@@ -216,7 +216,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
       modifiedOn,
       modifiedBy
     )
-    return this.client.tx(tx)
+    return this.tx(tx)
   }
 
   updateMixin<D extends Doc, M extends D>(
@@ -237,7 +237,7 @@ export class TxOperations implements Omit<Client, 'notify'> {
       modifiedOn,
       modifiedBy
     )
-    return this.client.tx(tx)
+    return this.tx(tx)
   }
 
   async update<T extends Doc>(

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
-
-  $: if (object && hasReactions) {
-    reactionsQuery.query(
-      activity.class.Reaction,
-      { attachedTo: object._id, space: getSpace(object) },
-      (res: Reaction[]) => {
-        reactions = res
-      }
-    )
-  } else {
-    reactionsQuery.unsubscribe()
+  $: hasReactions = (object?.reactions ?? 0) > 0
+  $: lookupReactions = object?.$lookup?.reactions as Reaction[] | undefined
+
+  $: 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>

plugins/activity-resources/src/utils.ts

@@ -1,12 +1,5 @@
 import type { ActivityMessage, Reaction } from '@hcengineering/activity'
-import core, {
-  getCurrentAccount,
-  isOtherHour,
-  type Doc,
-  type Ref,
-  type TxOperations,
-  type Space
-} from '@hcengineering/core'
+import core, { getCurrentAccount, isOtherHour, type Doc, type Ref, type Space } from '@hcengineering/core'
 import { getClient, isSpace } from '@hcengineering/presentation'
 import {
   EmojiPopup,
@@ -22,18 +15,13 @@ import { get } from 'svelte/store'
 import { savedMessagesStore } from './activity'
 import activity from './plugin'
 
-export async function updateDocReactions (
-  client: TxOperations,
-  reactions: Reaction[],
-  object?: Doc,
-  emoji?: string
-): Promise<void> {
+export async function updateDocReactions (reactions: Reaction[], object?: Doc, emoji?: string): Promise<void> {
   if (emoji === undefined || object === undefined) {
     return
   }
 
+  const client = getClient()
   const currentAccount = getCurrentAccount()
-
   const reaction = reactions.find((r) => r.emoji === emoji && r.createBy === currentAccount._id)
 
   if (reaction == null) {
@@ -72,7 +60,7 @@ export async function addReactionAction (
   closePopup()
 
   showPopup(EmojiPopup, {}, element, (emoji: string) => {
-    void updateDocReactions(client, reactions, message, emoji)
+    void updateDocReactions(reactions, message, emoji)
     params?.onClose?.()
   })
   params?.onOpen?.()

plugins/chunter-resources/src/channelDataProvider.ts

@@ -20,6 +20,7 @@ import {
   type DocumentQuery,
   getCurrentAccount,
   isOtherDay,
+  type Lookup,
   type Ref,
   SortingOrder,
   type Space,
@@ -285,13 +286,21 @@ export class ChannelDataProvider implements IChannelDataProvider {
       },
       {
         sort: { createdOn: SortingOrder.Descending },
-        lookup: {
-          _id: { attachments: attachment.class.Attachment, inlineButtons: chunter.class.InlineButton }
-        }
+        lookup: this.getLookup()
       }
     )
   }
 
+  getLookup (): Lookup<ActivityMessage> {
+    return {
+      _id: {
+        attachments: attachment.class.Attachment,
+        inlineButtons: chunter.class.InlineButton,
+        reactions: activity.class.Reaction
+      }
+    }
+  }
+
   isNextLoading (mode: LoadMode): boolean {
     return mode === 'forward' ? get(this.isForwardLoading) : get(this.isBackwardLoading)
   }
@@ -331,9 +340,7 @@ export class ChannelDataProvider implements IChannelDataProvider {
       {
         limit: limit ?? this.limit,
         sort: { createdOn: isBackward ? SortingOrder.Descending : SortingOrder.Ascending },
-        lookup: {
-          _id: { attachments: attachment.class.Attachment, inlineButtons: chunter.class.InlineButton }
-        }
+        lookup: this.getLookup()
       }
     )