From 94ddefa6deb4551920be99980ad2d6e00946887d Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Mon, 19 Feb 2024 12:37:54 +0400
Subject: [PATCH] UBERF-5586: improve loading of reactions and saved messages
 (#4694)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
---
 plugins/activity-resources/src/activity.ts    | 34 +++++++++++++++++--
 .../src/components/Activity.svelte            |  8 ++++-
 .../src/components/SaveMessageAction.svelte   |  6 ++--
 .../ActivityMessageExtension.svelte           |  2 +-
 .../ActivityMessageTemplate.svelte            |  6 ++--
 .../reactions/AddReactionAction.svelte        |  4 +--
 .../reactions/ReactionsPresenter.svelte       |  6 ++--
 .../chat-message/ChatMessagePopup.svelte      |  8 ++++-
 .../src/components/chat/Chat.svelte           | 12 +++++--
 .../chat/navigator/ChatSpecialElement.svelte  |  3 +-
 .../chat/specials/SavedMessages.svelte        |  4 +--
 .../src/components/chat/utils.ts              | 19 ++---------
 .../src/components/threads/ThreadView.svelte  |  8 +++--
 .../src/components/inbox/Inbox.svelte         |  7 +++-
 14 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/plugins/activity-resources/src/activity.ts b/plugins/activity-resources/src/activity.ts
index 8a8922fa08..d16f74f573 100644
--- a/plugins/activity-resources/src/activity.ts
+++ b/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)
+  }
+}
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index a83106ed97..67594db7fd 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/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}>
diff --git a/plugins/activity-resources/src/components/SaveMessageAction.svelte b/plugins/activity-resources/src/components/SaveMessageAction.svelte
index 89be7eaed2..5a80726b96 100644
--- a/plugins/activity-resources/src/components/SaveMessageAction.svelte
+++ b/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> {
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessageExtension.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessageExtension.svelte
index f2f2777f84..1fd83e8bcf 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessageExtension.svelte
+++ b/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}
diff --git a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte b/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
index a046f51c47..31bb12888d 100644
--- a/plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte
+++ b/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 &&
diff --git a/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte b/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte
index 4fc6e5349a..cd16a7c1d5 100644
--- a/plugins/activity-resources/src/components/reactions/AddReactionAction.svelte
+++ b/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 || []
     })
diff --git a/plugins/activity-resources/src/components/reactions/ReactionsPresenter.svelte b/plugins/activity-resources/src/components/reactions/ReactionsPresenter.svelte
index d0c3c3ea9c..7d782475ca 100644
--- a/plugins/activity-resources/src/components/reactions/ReactionsPresenter.svelte
+++ b/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>
diff --git a/plugins/chunter-resources/src/components/chat-message/ChatMessagePopup.svelte b/plugins/chunter-resources/src/components/chat-message/ChatMessagePopup.svelte
index d5e6fd5cc9..72dd6a7ff1 100644
--- a/plugins/chunter-resources/src/components/chat-message/ChatMessagePopup.svelte
+++ b/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">
diff --git a/plugins/chunter-resources/src/components/chat/Chat.svelte b/plugins/chunter-resources/src/components/chat/Chat.svelte
index a1fe2a9c3b..5263a16df0 100644
--- a/plugins/chunter-resources/src/components/chat/Chat.svelte
+++ b/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">
diff --git a/plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte b/plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte
index 951458f0c6..2050623a0e 100644
--- a/plugins/chunter-resources/src/components/chat/navigator/ChatSpecialElement.svelte
+++ b/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
diff --git a/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte b/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte
index ce91d85c44..12cfa2227c 100644
--- a/plugins/chunter-resources/src/components/chat/specials/SavedMessages.svelte
+++ b/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()
diff --git a/plugins/chunter-resources/src/components/chat/utils.ts b/plugins/chunter-resources/src/components/chat/utils.ts
index e0cb6cc356..8c93ae3f1a 100644
--- a/plugins/chunter-resources/src/components/chat/utils.ts
+++ b/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()
diff --git a/plugins/chunter-resources/src/components/threads/ThreadView.svelte b/plugins/chunter-resources/src/components/threads/ThreadView.svelte
index 6c57c0781a..6e304e97f3 100644
--- a/plugins/chunter-resources/src/components/threads/ThreadView.svelte
+++ b/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">
diff --git a/plugins/notification-resources/src/components/inbox/Inbox.svelte b/plugins/notification-resources/src/components/inbox/Inbox.svelte
index 767074cd67..a7df9c10a1 100644
--- a/plugins/notification-resources/src/components/inbox/Inbox.svelte
+++ b/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