From ecb0b0113fc211d93939f16b3efc76f448da873b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 9 Dec 2020 11:07:40 +0000
Subject: [PATCH] Also use `getJoinedMemberCount` as its capable of using the
 room summary member count instead

Leave the useRoomMembers hook for future use as it is very useful.
---
 src/components/views/right_panel/RoomSummaryCard.tsx | 6 +++---
 src/hooks/useRoomMembers.ts                          | 8 ++++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 3617def7aa..ebc07e76b8 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -43,7 +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 {useRoomMembers} from "../../../hooks/useRoomMembers";
+import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
 
 interface IProps {
     room: Room;
@@ -244,12 +244,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
         </div>
     </React.Fragment>;
 
-    const members = useRoomMembers(room);
+    const memberCount = useRoomMemberCount(room);
 
     return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
         <Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
             <Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
-                {_t("%(count)s people", { count: members.length })}
+                {_t("%(count)s people", { count: memberCount })}
             </Button>
             <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                 {_t("Show files")}
diff --git a/src/hooks/useRoomMembers.ts b/src/hooks/useRoomMembers.ts
index 4fa428ef57..71a3c46a86 100644
--- a/src/hooks/useRoomMembers.ts
+++ b/src/hooks/useRoomMembers.ts
@@ -29,3 +29,11 @@ export const useRoomMembers = (room: Room, throttleWait = 250) => {
     }, throttleWait, {leading: true, trailing: true}));
     return members;
 };
+
+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;
+};