UBERF-11415: Optimise contact UI stores (#9185)

Author: lexiv0re

desktop/src/ui/notifications.ts

@@ -1,4 +1,4 @@
-import { getPersonBySocialId, formatName } from '@hcengineering/contact'
+import { getPersonByPersonId, formatName } from '@hcengineering/contact'
 import { Ref, TxOperations } from '@hcengineering/core'
 import notification, { DocNotifyContext, CommonInboxNotification, ActivityInboxNotification, InboxNotification } from '@hcengineering/notification'
 import { IntlString, addEventListener, translate } from '@hcengineering/platform'
@@ -67,7 +67,7 @@ async function hydrateNotificationAsYouCan (lastNotification: InboxNotification)
     body: ''
   }
 
-  const person = await getPersonBySocialId(client, lastNotification.modifiedBy)
+  const person = await getPersonByPersonId(client, lastNotification.modifiedBy)
   if (person == null) {
     return noPersonData
   }

desktop/tsconfig.json

@@ -11,7 +11,7 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
-    "lib": ["es2016", "dom", "ES2021.String", "ESNext.Array"]
+    "lib": ["es2023", "dom", "ES2021.String", "ESNext.Array"]
   },
   "include": ["src/**/*", "declarations.d.ts"],
   "exclude": ["node_modules", "lib", "dist", "types", "bundle"]

dev/prod/tsconfig.json

@@ -13,7 +13,7 @@
     "verbatimModuleSyntax": true,
     "allowSyntheticDefaultImports": true,
     "lib": [
-      "es2016",
+      "es2023",
       "dom",
       "ES2021.String",
       "ESNext.Array"

models/contact/src/index.ts

@@ -826,10 +826,6 @@ export function createModel (builder: Builder): void {
     presenter: contact.component.PersonPresenter
   })
 
-  builder.mixin(core.class.TypePersonId, core.class.Class, view.mixin.ArrayEditor, {
-    inlineEditor: contact.component.PersonIdArrayEditor
-  })
-
   builder.mixin(core.class.TypeAccountUuid, core.class.Class, view.mixin.ArrayEditor, {
     inlineEditor: contact.component.AccountArrayEditor
   })

packages/core/src/common.ts

@@ -14,6 +14,22 @@ export function groupByArray<T, K> (array: T[], keyProvider: (item: T) => K): Ma
   return result
 }
 
+export async function groupByArrayAsync<T, K> (array: T[], keyProvider: (item: T) => Promise<K>): Promise<Map<K, T[]>> {
+  const result = new Map<K, T[]>()
+
+  for (const item of array) {
+    const key = await keyProvider(item)
+
+    if (!result.has(key)) {
+      result.set(key, [item])
+    } else {
+      result.get(key)?.push(item)
+    }
+  }
+
+  return result
+}
+
 export function flipSet<T> (set: Set<T>, item: T): Set<T> {
   if (set.has(item)) {
     set.delete(item)

packages/core/src/utils.ts

@@ -944,6 +944,14 @@ export function notEmpty<T> (id: T | undefined | null): id is T {
   return id !== undefined && id !== null && id !== ''
 }
 
+export function unique<T> (arr: T[]): T[] {
+  return Array.from(new Set(arr))
+}
+
+export function uniqueNotEmpty<T extends NonNullable<unknown>> (arr: Array<T | undefined | null>): T[] {
+  return unique(arr).filter(notEmpty)
+}
+
 /**
  * Return a current performance timestamp
  */

plugins/activity-resources/src/activityMessagesUtils.ts

@@ -19,7 +19,7 @@ import core, {
   type Client,
   type Collection,
   type Doc,
-  groupByArray,
+  groupByArrayAsync,
   type Hierarchy,
   type Mixin,
   type Ref,
@@ -37,8 +37,7 @@ import {
 import contact, { type Person } from '@hcengineering/contact'
 import { type IntlString } from '@hcengineering/platform'
 import { type AnyComponent } from '@hcengineering/ui'
-import { get } from 'svelte/store'
-import { personRefByPersonIdStore } from '@hcengineering/contact-resources'
+import { getPersonRefByPersonId } from '@hcengineering/contact-resources'
 import activity, {
   type ActivityMessage,
   type DisplayActivityMessage,
@@ -257,7 +256,10 @@ export async function combineActivityMessages (
 
   const result: Array<DisplayActivityMessage | undefined> = [...uncombined]
 
-  const groupedByType: Map<string, DocUpdateMessage[]> = groupByArray(docUpdateMessages, getDocUpdateMessageKey)
+  const groupedByType: Map<string, DocUpdateMessage[]> = await groupByArrayAsync(
+    docUpdateMessages,
+    getDocUpdateMessageKey
+  )
 
   for (const [, groupedMessages] of groupedByType) {
     const cantMerge = groupedMessages.filter(
@@ -365,8 +367,8 @@ function groupByTime<T extends ActivityMessage> (messages: T[]): T[][] {
   return result
 }
 
-function getDocUpdateMessageKey (message: DocUpdateMessage): string {
-  const personRef = get(personRefByPersonIdStore).get(message.createdBy as any)
+async function getDocUpdateMessageKey (message: DocUpdateMessage): Promise<string> {
+  const personRef = await getPersonRefByPersonId(message.createdBy as any)
 
   if (message.action === 'update') {
     return [message._class, message.attachedTo, message.action, personRef, getAttributeUpdatesKey(message)].join('_')

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

@@ -16,8 +16,8 @@
 <script lang="ts">
   import { ComponentExtensions, getClient, LiteMessageViewer } from '@hcengineering/presentation'
   import { Person } from '@hcengineering/contact'
-  import { Avatar, personByPersonIdStore, SystemAvatar } from '@hcengineering/contact-resources'
-  import core, { PersonId, Doc, Ref, Timestamp, type WithLookup } from '@hcengineering/core'
+  import { Avatar, getPersonByPersonIdCb, SystemAvatar } from '@hcengineering/contact-resources'
+  import core, { PersonId, Doc, Timestamp } from '@hcengineering/core'
   import { Icon, Label, resizeObserver, TimeSince, tooltip } from '@hcengineering/ui'
   import { Asset, getEmbeddedLabel, IntlString } from '@hcengineering/platform'
   import activity, { ActivityMessage, ActivityMessagePreviewType } from '@hcengineering/activity'
@@ -42,12 +42,18 @@
   const tooltipLimit = 512
 
   let isActionsOpened = false
-  let person: WithLookup<Person> | undefined = undefined
+  let person: Person | undefined = undefined
 
   let width: number
 
   $: isCompact = width < limit
-  $: person = account !== undefined ? $personByPersonIdStore.get(account) : undefined
+  $: if (account !== undefined) {
+    getPersonByPersonIdCb(account, (p) => {
+      person = p ?? undefined
+    })
+  } else {
+    person = undefined
+  }
 
   export function onActionsOpened (): void {
     isActionsOpened = true

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

@@ -14,8 +14,8 @@
 -->
 <script lang="ts">
   import { Person } from '@hcengineering/contact'
-  import { personByIdStore, Avatar } from '@hcengineering/contact-resources'
-  import { Doc, IdMap, Ref, WithLookup } from '@hcengineering/core'
+  import { Avatar, getPersonByPersonRefStore } from '@hcengineering/contact-resources'
+  import { Doc, IdMap, notEmpty, Ref, WithLookup } from '@hcengineering/core'
   import { Label, TimeSince } from '@hcengineering/ui'
   import activity, { ActivityMessage } from '@hcengineering/activity'
   import notification, {
@@ -49,7 +49,8 @@
   $: notificationsByContextStore = inboxClient?.inboxNotificationsByContext
 
   $: hasNew = hasNewReplies(object, $contextByDocStore, $notificationsByContextStore)
-  $: updateQuery(persons, $personByIdStore)
+  $: personByRefStore = getPersonByPersonRefStore(Array.from(persons))
+  $: updateQuery(persons, $personByRefStore)
 
   function hasNewReplies (
     message: ActivityMessage,
@@ -73,7 +74,7 @@
   function updateQuery (personIds: Set<Ref<Person>>, personById: IdMap<Person>): void {
     displayPersons = Array.from(personIds)
       .map((id) => personById.get(id))
-      .filter((person): person is Person => person !== undefined)
+      .filter(notEmpty)
       .slice(0, maxDisplayPersons - 1)
   }
 

plugins/activity-resources/src/components/activity-info-message/ActivityInfoMessagePresenter.svelte

@@ -14,13 +14,14 @@
 -->
 <script lang="ts">
   import { ActivityInfoMessage } from '@hcengineering/activity'
-  import { Avatar, SystemAvatar, personByPersonIdStore } from '@hcengineering/contact-resources'
+  import { Avatar, SystemAvatar, getPersonByPersonIdCb } from '@hcengineering/contact-resources'
   import { translateCB } from '@hcengineering/platform'
   import { HTMLViewer } from '@hcengineering/presentation'
   import { Action, themeStore } from '@hcengineering/ui'
 
   import ActivityMessageHeader from '../activity-message/ActivityMessageHeader.svelte'
   import ActivityMessageTemplate from '../activity-message/ActivityMessageTemplate.svelte'
+  import { Person } from '@hcengineering/contact'
 
   export let value: ActivityInfoMessage
   export let showNotify: boolean = false
@@ -36,7 +37,10 @@
   export let readonly: boolean = false
   export let onClick: (() => void) | undefined = undefined
 
-  $: person = $personByPersonIdStore.get(value.createdBy ?? value.modifiedBy)
+  let person: Person | undefined
+  $: getPersonByPersonIdCb(value.createdBy ?? value.modifiedBy, (p) => {
+    person = p ?? undefined
+  })
 
   let content = ''