mirror of https://github.com/vector-im/riot-web
Merge pull request #5481 from matrix-org/t3chguy/fix/15905
Throttle RoomState.members handler to improve performancepull/21833/head
commit
d05ad1e36c
|
@ -43,6 +43,7 @@ import RoomContext from "../../../contexts/RoomContext";
|
|||
import {UIFeature} from "../../../settings/UIFeature";
|
||||
import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
|
||||
import WidgetContextMenu from "../context_menus/WidgetContextMenu";
|
||||
import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
|
||||
|
||||
interface IProps {
|
||||
room: Room;
|
||||
|
@ -210,14 +211,6 @@ const onRoomSettingsClick = () => {
|
|||
defaultDispatcher.dispatch({ action: "open_room_settings" });
|
||||
};
|
||||
|
||||
const useMemberCount = (room: Room) => {
|
||||
const [count, setCount] = useState(room.getJoinedMembers().length);
|
||||
useEventEmitter(room.currentState, "RoomState.members", () => {
|
||||
setCount(room.getJoinedMembers().length);
|
||||
});
|
||||
return count;
|
||||
};
|
||||
|
||||
const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
|
||||
const cli = useContext(MatrixClientContext);
|
||||
|
||||
|
@ -251,7 +244,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
|
|||
</div>
|
||||
</React.Fragment>;
|
||||
|
||||
const memberCount = useMemberCount(room);
|
||||
const memberCount = useRoomMemberCount(room);
|
||||
|
||||
return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
|
||||
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
|
||||
|
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {useState} from "react";
|
||||
import {Room} from "matrix-js-sdk/src/models/room";
|
||||
import {RoomMember} from "matrix-js-sdk/src/models/room-member";
|
||||
|
||||
import {useEventEmitter} from "./useEventEmitter";
|
||||
import {throttle} from "lodash";
|
||||
|
||||
// Hook to simplify watching Matrix Room joined members
|
||||
export const useRoomMembers = (room: Room, throttleWait = 250) => {
|
||||
const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
|
||||
useEventEmitter(room.currentState, "RoomState.members", throttle(() => {
|
||||
setMembers(room.getJoinedMembers());
|
||||
}, throttleWait, {leading: true, trailing: true}));
|
||||
return members;
|
||||
};
|
||||
|
||||
// Hook to simplify watching Matrix Room joined member count
|
||||
export const useRoomMemberCount = (room: Room, throttleWait = 250) => {
|
||||
const [count, setCount] = useState<number>(room.getJoinedMemberCount());
|
||||
useEventEmitter(room.currentState, "RoomState.members", throttle(() => {
|
||||
setCount(room.getJoinedMemberCount());
|
||||
}, throttleWait, {leading: true, trailing: true}));
|
||||
return count;
|
||||
};
|
Loading…
Reference in New Issue