CRNS-317: handling deleted properties of user

src/client.ts

@@ -13,6 +13,7 @@ import { JWTUserToken, DevToken, CheckSignature } from './signing';
 import { TokenManager } from './token_manager';
 import {
   isFunction,
+  isOwnUserBaseProperty,
   addFileToFormData,
   chatCodes,
   normalizeQuerySort,
@@ -545,9 +546,12 @@ export class StreamChat<
   _setUser(
     user: OwnUserResponse<ChannelType, CommandType, UserType> | UserResponse<UserType>,
   ) {
-    // this one is used by the frontend
+    /**
+     * This one is used by the frontend. This is a copy of the current user object stored on backend.
+     * It contains reserved properties and own user properties which are not present in `this._user`.
+     */
     this.user = user;
-    // this one is actually used for requests...
+    // this one is actually used for requests. This is a copy of current user provided to `connectUser` function.
     this._user = { ...user };
   }
 
@@ -1339,17 +1343,35 @@ export class StreamChat<
     }
 
     /** update the client.state with any changes to users */
-    if (event.type === 'user.presence.changed' || event.type === 'user.updated') {
-      if (event.user?.id === this.userID) {
-        this.user = this.user && { ...this.user, ...event.user };
-        /** Updating only available properties in _user object. */
-        Object.keys(event.user).forEach((key) => {
-          if (this._user && key in this._user) {
-            /** @ts-expect-error */
-            this._user[key] = event.user[key];
-          }
-        });
+    if (
+      (event.type === 'user.presence.changed' || event.type === 'user.updated') &&
+      event.user.id === this.userID
+    ) {
+      // Remove deleted properties from user objects.
+      for (const key in this.user) {
+        if (key in event.user || isOwnUserBaseProperty(key)) {
+          continue;
+        }
+
+        if (this.user?.[key]) {
+          delete this.user[key];
+        }
+
+        if (this._user?.[key]) {
+          delete this._user[key];
+        }
+      }
+
+      this.user = this.user && { ...this.user, ...event.user };
+
+      /** Updating only available properties in _user object. */
+      for (const key in event.user) {
+        if (this._user && key in this._user) {
+          /** @ts-expect-error */
+          this._user[key] = event.user[key];
+        }
       }
+
       this.state.updateUser(event.user);
       this._updateMemberWatcherReferences(event.user);
     }

src/types.ts

@@ -567,11 +567,11 @@ export type MuteUserResponse<
   own_user?: OwnUserResponse<ChannelType, CommandType, UserType>;
 };
 
-export type OwnUserResponse<
+export type OwnUserBase<
   ChannelType extends UnknownType = UnknownType,
   CommandType extends string = LiteralStringForUnion,
   UserType extends UnknownType = UnknownType
-> = UserResponse<UserType> & {
+> = {
   channel_mutes: ChannelMute<ChannelType, CommandType, UserType>[];
   devices: Device<UserType>[];
   mutes: Mute<UserType>[];
@@ -582,6 +582,12 @@ export type OwnUserResponse<
   roles?: string[];
 };
 
+export type OwnUserResponse<
+  ChannelType extends UnknownType = UnknownType,
+  CommandType extends string = LiteralStringForUnion,
+  UserType extends UnknownType = UnknownType
+> = UserResponse<UserType> & OwnUserBase<ChannelType, CommandType, UserType>;
+
 export type PartialUpdateChannelAPIResponse<
   ChannelType = UnknownType,
   CommandType extends string = LiteralStringForUnion,

src/utils.ts

@@ -2,6 +2,7 @@ import FormData from 'form-data';
 import {
   AscDesc,
   LiteralStringForUnion,
+  OwnUserBase,
   OwnUserResponse,
   UnknownType,
   UserResponse,
@@ -74,6 +75,23 @@ export function isOwnUser<
   );
 }
 
+export function isOwnUserBaseProperty(property: string) {
+  const ownUserBaseProperties: {
+    [Property in keyof Required<OwnUserBase>]: boolean;
+  } = {
+    channel_mutes: true,
+    devices: true,
+    mutes: true,
+    total_unread_count: true,
+    unread_channels: true,
+    unread_count: true,
+    invisible: true,
+    roles: true,
+  };
+
+  return ownUserBaseProperties[property as keyof OwnUserBase];
+}
+
 export function addFileToFormData(
   uri: string | NodeJS.ReadableStream | Buffer | File,
   name?: string,