fix: update the number of members from a room (#4955)

* [FIX] Update the number of members from a room

* update the subscription users count inside room actions view

* remove console.log

* added e2e test

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

app/definitions/ISubscription.ts

@@ -102,6 +102,7 @@ export interface ISubscription {
 	onHold?: boolean;
 	source?: IOmnichannelSource;
 	hideMentionStatus?: boolean;
+	usersCount?: number;
 	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
 	messages: RelationModified<TMessageModel>;
 	threads: RelationModified<TThreadModel>;

app/lib/database/model/Subscription.js

@@ -137,5 +137,7 @@ export default class Subscription extends Model {
 
 	@field('on_hold') onHold;
 
+	@field('users_count') usersCount;
+
 	@json('source', sanitizer) source;
 }

app/lib/database/model/migrations.js

@@ -257,6 +257,15 @@ export default schemaMigrations({
 					columns: [{ name: 'e2e_suggested_key', type: 'string', isOptional: true }]
 				})
 			]
+		},
+		{
+			toVersion: 21,
+			steps: [
+				addColumns({
+					table: 'subscriptions',
+					columns: [{ name: 'users_count', type: 'string', isOptional: true }]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/app.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 20,
+	version: 21,
 	tables: [
 		tableSchema({
 			name: 'subscriptions',
@@ -63,7 +63,8 @@ export default appSchema({
 				{ name: 'team_main', type: 'boolean', isOptional: true }, // Use `Q.notEq(true)` to get false or null
 				{ name: 'on_hold', type: 'boolean', isOptional: true },
 				{ name: 'source', type: 'string', isOptional: true },
-				{ name: 'hide_mention_status', type: 'boolean', isOptional: true }
+				{ name: 'hide_mention_status', type: 'boolean', isOptional: true },
+				{ name: 'users_count', type: 'number', isOptional: true }
 			]
 		}),
 		tableSchema({

app/lib/methods/helpers/mergeSubscriptionsRooms.ts

@@ -85,6 +85,9 @@ export const merge = (
 		if (room && 'source' in room) {
 			mergedSubscription.source = room?.source;
 		}
+		if (room && 'usersCount' in room) {
+			mergedSubscription.usersCount = room.usersCount;
+		}
 	}
 
 	if (!mergedSubscription.name) {

app/views/RoomActionsView/index.tsx

@@ -86,7 +86,7 @@ interface IRoomActionsViewProps extends IActionSheetProvider, IBaseScreen<ChatsS
 
 interface IRoomActionsViewState {
 	room: TSubscriptionModel;
-	membersCount: number;
+	membersCount?: number;
 	member: Partial<IUser>;
 	joined: boolean;
 	canViewMembers: boolean;
@@ -153,10 +153,12 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 			this.roomObservable = room.observe();
 			this.subscription = this.roomObservable.subscribe(changes => {
 				if (this.mounted) {
-					this.setState({ room: changes });
+					this.setState({ room: changes, membersCount: changes.usersCount });
 				} else {
 					// @ts-ignore
 					this.state.room = changes;
+					// @ts-ignore
+					this.state.membersCount = changes.usersCount;
 				}
 			});
 		}
@@ -191,7 +193,8 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 				try {
 					const counters = await Services.getRoomCounters(room.rid, room.t as any);
 					if (counters.success) {
-						this.setState({ membersCount: counters.members, joined: counters.joined });
+						await this.updateUsersCount(counters.members);
+						this.setState({ joined: counters.joined });
 					}
 				} catch (e) {
 					log(e);
@@ -231,6 +234,23 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 		return room.t === 'l' && room.status === 'queued' && !this.joined;
 	}
 
+	updateUsersCount = async (members: number) => {
+		const { room } = this.state;
+		if (members === room.usersCount) return;
+		try {
+			const db = database.active;
+			await db.write(async () => {
+				await room.update(
+					protectedFunction((r: TSubscriptionModel) => {
+						r.usersCount = members;
+					})
+				);
+			});
+		} catch {
+			//
+		}
+	};
+
 	onPressTouchable: IOnPressTouch = (item: {
 		route?: keyof ChatsStackParamList;
 		params?: ChatsStackParamList[keyof ChatsStackParamList];
@@ -1052,7 +1072,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							<>
 								<List.Item
 									title='Members'
-									subtitle={membersCount > 0 ? `${membersCount} ${I18n.t('members')}` : undefined}
+									subtitle={membersCount && membersCount > 0 ? `${membersCount} ${I18n.t('members')}` : undefined}
 									onPress={() => this.onPressTouchable({ route: 'RoomMembersView', params: { rid, room, joined: this.joined } })}
 									testID='room-actions-members'
 									left={() => <List.Icon name='team' />}

e2e/tests/room/03-roomactions.spec.ts

@@ -103,6 +103,7 @@ describe('Room actions screen', () => {
 
 			it('should have members', async () => {
 				await expect(element(by.id('room-actions-members'))).toExist();
+				await expect(element(by[textMatcher]('1 members'))).toExist();
 			});
 
 			it('should have files', async () => {
@@ -338,6 +339,9 @@ describe('Room actions screen', () => {
 				await element(by.id('selected-users-view-submit')).tap();
 				await sleep(300);
 				await backToActions();
+				await waitFor(element(by[textMatcher]('3 members')))
+					.toExist()
+					.withTimeout(5000);
 			});
 
 			describe('Room Members', () => {