fix: message loop on multi-tabs

src/social-network/defaults/emptyDefinition.ts

@@ -3,6 +3,7 @@ import { PersonIdentifier } from '../../database/type'
 import { SocialNetworkUIDefinition } from '../ui'
 import { nop, nopWithUnmount } from '../../utils/utils'
 import { Person, Group } from '../../database'
+import { PersonArrayComparer, GroupArrayComparer } from '../../utils/comparer'
 
 /**
  * DO NOT use this in content script
@@ -14,8 +15,8 @@ export const emptyDefinition: SocialNetworkUIDefinition = {
     shouldActivate() {
         return false
     },
-    myIdentitiesRef: new ValueRef([] as Person[]),
-    groupsRef: new ValueRef([] as Group[]),
+    myIdentitiesRef: new ValueRef([] as Person[], PersonArrayComparer),
+    groupsRef: new ValueRef([] as Group[], GroupArrayComparer),
     lastRecognizedIdentity: new ValueRef({ identifier: PersonIdentifier.unknown }),
     currentIdentity: new ValueRef<Person | null>(null),
     init() {
@@ -34,7 +35,7 @@ export const emptyDefinition: SocialNetworkUIDefinition = {
         return false
     },
     posts: new Map(),
-    friendsRef: new ValueRef([] as Person[]),
+    friendsRef: new ValueRef([] as Person[], PersonArrayComparer),
     isDangerousNetwork: false,
     isValidUsername() {
         return true

src/social-network/defaults/ui.ts

@@ -6,11 +6,12 @@ import { PersonIdentifier } from '../../database/type'
 import { cloneDeep } from 'lodash-es'
 import { Person, Group } from '../../database'
 import { MaskbookDarkTheme, MaskbookLightTheme } from '../../utils/theme'
+import { PersonArrayComparer, GroupArrayComparer } from '../../utils/comparer'
 
 const defaultDataSources: Required<SocialNetworkUIDataSources> = cloneDeep({
-    friendsRef: new ValueRef([] as Person[]),
-    myIdentitiesRef: new ValueRef([] as Person[]),
-    groupsRef: new ValueRef([] as Group[]),
+    friendsRef: new ValueRef([] as Person[], PersonArrayComparer),
+    myIdentitiesRef: new ValueRef([] as Person[], PersonArrayComparer),
+    groupsRef: new ValueRef([] as Group[], GroupArrayComparer),
     currentIdentity: new ValueRef<Person | null>(null),
     lastRecognizedIdentity: new ValueRef({ identifier: PersonIdentifier.unknown }),
     posts: new Map(),

src/utils/comparer.ts

@@ -0,0 +1,30 @@
+import { Group, Person } from '../database'
+
+export const PersonArrayComparer = (a: Person[], b: Person[]) => {
+    if (a.length !== b.length) return false
+    return a.every((person, index) => {
+        const target = b[index]
+        if (!person.identifier.equals(target.identifier)) return false
+        if (person.avatar !== target.avatar) return false
+        if (person.fingerprint !== target.fingerprint) return false
+        if (person.groups.length !== target.groups.length) return false
+        if (person.nickname !== target.nickname) return false
+        if (person.previousIdentifiers?.length !== target.previousIdentifiers?.length) return false
+        if (!person.groups.every((group, index) => target.groups[index].equals(group))) return false
+        return true
+    })
+}
+
+export function GroupArrayComparer(a: Group[], b: Group[]) {
+    if (a.length !== b.length) return false
+    return a.every((group, index) => {
+        const target = b[index]
+        if (!group.identifier.equals(target.identifier)) return false
+        if (group.avatar !== target.avatar) return false
+        if (group.banned !== target.banned) return false
+        if (group.groupName !== target.groupName) return false
+        if (group.members.length !== target.members.length) return false
+        if (!group.members.every((person, index) => target.members[index].equals(person))) return false
+        return true
+    })
+}