diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 4ce4b75f9b..ebc07e76b8 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -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 = ({ room, onClose }) => { const cli = useContext(MatrixClientContext); @@ -251,7 +244,7 @@ const RoomSummaryCard: React.FC = ({ room, onClose }) => { ; - const memberCount = useMemberCount(room); + const memberCount = useRoomMemberCount(room); return diff --git a/src/hooks/useRoomMembers.ts b/src/hooks/useRoomMembers.ts new file mode 100644 index 0000000000..e25436045e --- /dev/null +++ b/src/hooks/useRoomMembers.ts @@ -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(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(room.getJoinedMemberCount()); + useEventEmitter(room.currentState, "RoomState.members", throttle(() => { + setCount(room.getJoinedMemberCount()); + }, throttleWait, {leading: true, trailing: true})); + return count; +};