PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update member count on room summary update (#11488)

Browse source 
* Update member count on room summary update

* Fix performance regression for large rooms

* Update useRoomMemberCount JSDoc

* Improve throttle updates definition

* remove useCallback
This commit is contained in:
Germain 2023-08-31 14:36:47 +01:00 committed by GitHub
parent 77a468f8e8
commit f948a8f798
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/hooks/room/useRoomCallStatus.ts
View file

@ -67,7 +67,7 @@ export const useRoomCallStatus = (
const hasGroupCall = useCall(room.roomId) !== null;
const memberCount = useRoomMemberCount(room, { includeFunctional: false });
const memberCount = useRoomMemberCount(room);
const [mayEditWidgets, mayCreateElementCalls] = useTypedEventEmitterState(
room,

48
src/hooks/useRoomMembers.ts
View file

@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { useState } from "react";
import { useMemo, useState } from "react";
import { Room, RoomEvent, RoomMember, RoomStateEvent } from "matrix-js-sdk/src/matrix";
import { throttle } from "lodash";
import { useTypedEventEmitter } from "./useEventEmitter";
import { getJoinedNonFunctionalMembers } from "../utils/room/getJoinedNonFunctionalMembers";
// Hook to simplify watching Matrix Room joined members
export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] => {
@ -43,43 +42,38 @@ type RoomMemberCountOpts = {
* Wait time between room member count update
*/
throttleWait?: number;
/**
* Whether to include functional members (bots, etc...) in the room count
* @default true
*/
includeFunctional: boolean;
};
// Hook to simplify watching Matrix Room joined member count
export const useRoomMemberCount = (
room: Room,
opts: RoomMemberCountOpts = { throttleWait: 250, includeFunctional: true },
): number => {
/**
* Returns a count of members in a given room
* @param room the room to track.
* @param opts The options.
* @returns the room member count.
*/
export const useRoomMemberCount = (room: Room, opts: RoomMemberCountOpts = { throttleWait: 250 }): number => {
const [count, setCount] = useState<number>(room.getJoinedMemberCount());
const { throttleWait, includeFunctional } = opts;
const { throttleWait } = opts;
useTypedEventEmitter(
room.currentState,
RoomStateEvent.Members,
const throttledUpdate = useMemo(
() =>
throttle(
() => {
// At the time where `RoomStateEvent.Members` is emitted the
// summary API has not had a chance to update the `summaryJoinedMemberCount`
// value, therefore handling the logic locally here.
//
// Tracked as part of https://github.com/vector-im/element-web/issues/26033
const membersCount = includeFunctional
? room.getMembers().reduce((count, m) => {
return m.membership === "join" ? count + 1 : count;
}, 0)
: getJoinedNonFunctionalMembers(room).length;
setCount(membersCount);
setCount(room.getJoinedMemberCount());
},
throttleWait,
{ leading: true, trailing: true },
),
[room, throttleWait],
);
useTypedEventEmitter(room.currentState, RoomStateEvent.Members, throttledUpdate);
/**
* `room.getJoinedMemberCount()` caches the member count behind the room summary
* So we need to re-compute the member count when the summary gets updated
*/
useTypedEventEmitter(room, RoomEvent.Summary, throttledUpdate);
return count;
};