UBERF-5586: improve loading of reactions and saved messages (hcengine…

…ering#4694)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
Signed-off-by: Tiago Cruz <tcruz@netic.io>

plugins/activity-resources/src/activity.ts

@@ -1,17 +1,22 @@
-import { type DisplayTx } from '@hcengineering/activity'
+import activity, { type DisplayTx, type SavedMessage } from '@hcengineering/activity'
 import core, {
   type Class,
   type Doc,
   type Hierarchy,
   type Ref,
+  SortingOrder,
   type Tx,
   type TxCreateDoc,
   type TxCUD,
   type TxMixin,
   TxProcessor,
-  type TxUpdateDoc
+  type TxUpdateDoc,
+  type WithLookup
 } from '@hcengineering/core'
+import { writable } from 'svelte/store'
+import { createQuery, getClient } from '@hcengineering/presentation'
 
+// TODO: remove old code
 /**
  * @public
  */
@@ -20,10 +25,12 @@ export type ActivityKey = string
 /**
  * @public
  */
+// TODO: remove old code
 export function activityKey (objectClass: Ref<Class<Doc>>, txClass: Ref<Class<Tx>>): ActivityKey {
   return objectClass + ':' + txClass
 }
 
+// TODO: remove old code
 export function newDisplayTx (
   tx: TxCUD<Doc>,
   hierarchy: Hierarchy,
@@ -45,3 +52,26 @@ export function newDisplayTx (
     originTx
   }
 }
+
+export const savedMessagesStore = writable<Array<WithLookup<SavedMessage>>>([])
+
+const savedMessagesQuery = createQuery(true)
+
+export function loadSavedMessages (): void {
+  const client = getClient()
+
+  if (client !== undefined) {
+    savedMessagesQuery.query(
+      activity.class.SavedMessage,
+      {},
+      (res) => {
+        savedMessagesStore.set(res.filter(({ $lookup }) => $lookup?.attachedTo !== undefined))
+      },
+      { lookup: { attachedTo: activity.class.ActivityMessage }, sort: { modifiedOn: SortingOrder.Descending } }
+    )
+  } else {
+    setTimeout(() => {
+      loadSavedMessages()
+    }, 50)
+  }
+}

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

@@ -17,10 +17,12 @@
   import { Doc, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Component, Grid, Label, Lazy, Spinner } from '@hcengineering/ui'
-  import ActivityExtensionComponent from './ActivityExtension.svelte'
+  import { onMount } from 'svelte'
 
+  import ActivityExtensionComponent from './ActivityExtension.svelte'
   import ActivityFilter from './ActivityFilter.svelte'
   import { combineActivityMessages } from '../activityMessagesUtils'
+  import { loadSavedMessages } from '../activity'
 
   export let object: Doc
   export let showCommenInput: boolean = true
@@ -67,6 +69,10 @@
   }
 
   $: void updateActivityMessages(object._id, isNewestFirst ? SortingOrder.Descending : SortingOrder.Ascending)
+
+  onMount(() => {
+    loadSavedMessages()
+  })
 </script>
 
 <div class="antiSection-header high mt-9" class:invisible={transparent}>

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

@@ -20,16 +20,16 @@
   import BookmarkBorder from './icons/BookmarkBorder.svelte'
   import ActivityMessageAction from './ActivityMessageAction.svelte'
   import Bookmark from './icons/Bookmark.svelte'
+  import { savedMessagesStore } from '../activity'
 
   export let object: ActivityMessage
 
   const client = getClient()
-  const query = createQuery()
 
   let savedMessage: SavedMessage | undefined = undefined
 
-  $: query.query(activity.class.SavedMessage, { attachedTo: object._id }, (res) => {
-    savedMessage = res[0]
+  savedMessagesStore.subscribe((saved) => {
+    savedMessage = saved.find(({ attachedTo }) => attachedTo === object._id)
   })
 
   async function toggleSaveMessage (): Promise<void> {

plugins/activity-resources/src/components/activity-message/ActivityMessageExtension.svelte

@@ -24,7 +24,7 @@
 {#each extensions as extension}
   {#each extension.components as component}
     {#if component.kind === kind}
-      <Component is={component.component} {props} on:close on:open />
+      <Component is={component.component} {props} showLoading={false} on:close on:open />
     {/if}
   {/each}
 {/each}

plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte

@@ -31,6 +31,7 @@
   import ActivityMessageActions from '../ActivityMessageActions.svelte'
   import { isReactionMessage } from '../../activityMessagesUtils'
   import Bookmark from '../icons/Bookmark.svelte'
+  import { savedMessagesStore } from '../../activity'
 
   export let message: DisplayActivityMessage
   export let parentMessage: DisplayActivityMessage | undefined = undefined
@@ -55,7 +56,6 @@
   export let onReply: (() => void) | undefined = undefined
 
   const client = getClient()
-  const savedMessageQuery = createQuery()
 
   let allActionIds: string[] = []
 
@@ -65,8 +65,8 @@
 
   let isSaved = false
 
-  savedMessageQuery.query(activity.class.SavedMessage, { attachedTo: message._id }, (res) => {
-    isSaved = res.length > 0
+  savedMessagesStore.subscribe((saved) => {
+    isSaved = saved.some((savedMessage) => savedMessage.attachedTo === message._id)
   })
 
   $: withActions &&

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

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { ActionIcon, EmojiPopup, IconEmoji, showPopup } from '@hcengineering/ui'
+  import { EmojiPopup, IconEmoji, showPopup } from '@hcengineering/ui'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import activity, { ActivityMessage, Reaction } from '@hcengineering/activity'
 
@@ -31,7 +31,7 @@
   let reactions: Reaction[] = []
   let isOpened = false
 
-  $: if (object) {
+  $: if (object?.reactions && object.reactions > 0) {
     reactionsQuery.query(activity.class.Reaction, { attachedTo: object._id }, (res?: Reaction[]) => {
       reactions = res || []
     })

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

@@ -26,7 +26,9 @@
 
   let reactions: Reaction[] = []
 
-  $: if (object) {
+  $: hasReactions = object?.reactions && object.reactions > 0
+
+  $: if (object && hasReactions) {
     reactionsQuery.query(activity.class.Reaction, { attachedTo: object._id }, (res?: Reaction[]) => {
       reactions = res || []
     })
@@ -37,7 +39,7 @@
   }
 </script>
 
-{#if object?.reactions && object.reactions > 0}
+{#if object && hasReactions}
   <div class="footer flex-col p-inline contrast mt-2 min-h-6">
     <Reactions {reactions} {object} on:click={handleClick} />
   </div>

plugins/chunter-resources/src/components/chat-message/ChatMessagePopup.svelte

@@ -14,13 +14,15 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, onMount } from 'svelte'
   import { Doc, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import activity from '@hcengineering/activity'
   import chunter, { ChatMessage } from '@hcengineering/chunter'
   import { closeTooltip, Label, Lazy, Spinner, resizeObserver, MiniToggle } from '@hcengineering/ui'
   import { ObjectPresenter, DocNavLink } from '@hcengineering/view-resources'
+  import { loadSavedMessages } from '@hcengineering/activity-resources'
+
   import ChatMessageInput from './ChatMessageInput.svelte'
   import ChatMessagePresenter from './ChatMessagePresenter.svelte'
 
@@ -51,6 +53,10 @@
   $: if (isTextMode) {
     dispatch('tooltip', { kind: 'popup' })
   }
+
+  onMount(() => {
+    loadSavedMessages()
+  })
 </script>
 
 <div class="commentPopup-container">

plugins/chunter-resources/src/components/chat/Chat.svelte

@@ -24,15 +24,16 @@
     Separator,
     Location
   } from '@hcengineering/ui'
-  import chunter from '@hcengineering/chunter'
   import { DocNotifyContext } from '@hcengineering/notification'
-  import { NavHeader } from '@hcengineering/workbench-resources'
+
   import { NavigatorModel, SpecialNavModel } from '@hcengineering/workbench'
   import { InboxNotificationsClientImpl } from '@hcengineering/notification-resources'
+  import { loadSavedMessages } from '@hcengineering/activity-resources'
+  import { onMount } from 'svelte'
 
   import ChatNavigator from './navigator/ChatNavigator.svelte'
   import ChannelView from '../ChannelView.svelte'
-  import { chatSpecials } from './utils'
+  import { chatSpecials, loadSavedAttachments } from './utils'
 
   export let visibleNav: boolean = true
   export let navFloat: boolean = false
@@ -115,6 +116,11 @@
     { minSize: 20, maxSize: 40, size: 30, float: 'navigator' },
     { size: 'auto', minSize: 30, maxSize: 'auto', float: undefined }
   ])
+
+  onMount(() => {
+    loadSavedMessages()
+    loadSavedAttachments()
+  })
 </script>
 
 <div class="flex-row-top h-full">

plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte

@@ -20,9 +20,10 @@
   import { Ref } from '@hcengineering/core'
   import { SavedAttachments } from '@hcengineering/attachment'
   import { SavedMessage } from '@hcengineering/activity'
+  import { savedMessagesStore } from '@hcengineering/activity-resources'
 
   import NavItem from './NavItem.svelte'
-  import { savedAttachmentsStore, savedMessagesStore } from '../utils'
+  import { savedAttachmentsStore } from '../utils'
 
   export let special: SpecialNavModel
   export let currentSpecial: SpecialNavModel | undefined = undefined

plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte

@@ -21,11 +21,11 @@
   import { getClient } from '@hcengineering/presentation'
   import { Icon, Label, Scroller } from '@hcengineering/ui'
   import activity, { ActivityMessage, SavedMessage } from '@hcengineering/activity'
-  import { ActivityMessagePresenter } from '@hcengineering/activity-resources'
+  import { ActivityMessagePresenter, savedMessagesStore } from '@hcengineering/activity-resources'
 
   import chunter from '../../../plugin'
   import { openMessageFromSpecial } from '../../../utils'
-  import { savedAttachmentsStore, savedMessagesStore } from '../utils'
+  import { savedAttachmentsStore } from '../utils'
   import Header from '../../Header.svelte'
 
   const client = getClient()

plugins/chunter-resources/src/components/chat/utils.ts

@@ -19,12 +19,11 @@ import { writable } from 'svelte/store'
 import view from '@hcengineering/view'
 import workbench, { type SpecialNavModel } from '@hcengineering/workbench'
 import attachment, { type SavedAttachments } from '@hcengineering/attachment'
-import activity, { type SavedMessage } from '@hcengineering/activity'
+import activity from '@hcengineering/activity'
 
 import { type ChatNavGroupModel } from './types'
 import chunter from '../../plugin'
 
-export const savedMessagesStore = writable<Array<WithLookup<SavedMessage>>>([])
 export const savedAttachmentsStore = writable<Array<WithLookup<SavedAttachments>>>([])
 
 export const chatSpecials: SpecialNavModel[] = [
@@ -102,11 +101,10 @@ export const chatNavGroupsModel: ChatNavGroupModel[] = [
   }
 ]
 
-function fillSavedItemsStores (): void {
+export function loadSavedAttachments (): void {
   const client = getClient()
 
   if (client !== undefined) {
-    const savedMessagesQuery = createQuery(true)
     const savedAttachmentsQuery = createQuery(true)
 
     savedAttachmentsQuery.query(
@@ -117,20 +115,9 @@ function fillSavedItemsStores (): void {
       },
       { lookup: { attachedTo: attachment.class.Attachment }, sort: { modifiedOn: SortingOrder.Descending } }
     )
-
-    savedMessagesQuery.query(
-      activity.class.SavedMessage,
-      {},
-      (res) => {
-        savedMessagesStore.set(res.filter(({ $lookup }) => $lookup?.attachedTo !== undefined))
-      },
-      { lookup: { attachedTo: activity.class.ActivityMessage }, sort: { modifiedOn: SortingOrder.Descending } }
-    )
   } else {
     setTimeout(() => {
-      fillSavedItemsStores()
+      loadSavedAttachments()
     }, 50)
   }
 }
-
-fillSavedItemsStores()

plugins/chunter-resources/src/components/threads/ThreadView.svelte

@@ -16,9 +16,9 @@
   import { Doc, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Breadcrumbs, IconClose, Label, location as locationStore } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, onMount } from 'svelte'
   import activity, { ActivityMessage, DisplayActivityMessage } from '@hcengineering/activity'
-  import { getMessageFromLoc } from '@hcengineering/activity-resources'
+  import { getMessageFromLoc, loadSavedMessages } from '@hcengineering/activity-resources'
   import contact from '@hcengineering/contact'
 
   import chunter from '../../plugin'
@@ -89,6 +89,10 @@
       { label: chunter.string.Thread }
     ]
   }
+
+  onMount(() => {
+    loadSavedMessages()
+  })
 </script>
 
 <div class="popupPanel panel">

plugins/notification-resources/src/components/inbox/Inbox.svelte

@@ -37,7 +37,8 @@
   import { Ref, WithLookup } from '@hcengineering/core'
   import { ViewletSelector } from '@hcengineering/view-resources'
   import activity, { ActivityMessage } from '@hcengineering/activity'
-  import { isReactionMessage } from '@hcengineering/activity-resources'
+  import { isReactionMessage, loadSavedMessages } from '@hcengineering/activity-resources'
+  import { onMount } from 'svelte'
 
   import { inboxMessagesStore, InboxNotificationsClientImpl } from '../../inboxNotificationsClient'
   import Filter from '../Filter.svelte'
@@ -250,6 +251,10 @@
     { minSize: 30, maxSize: 50, size: 40, float: 'navigator' },
     { size: 'auto', minSize: 30, maxSize: 'auto', float: undefined }
   ])
+
+  onMount(() => {
+    loadSavedMessages()
+  })
 </script>
 
 <ActionContext