Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Also use getJoinedMemberCount as its capable of using the room summary member count instead

Browse Source 
Leave the useRoomMembers hook for future use as it is very useful.
This commit is contained in:
Michael Telatynski 2020-12-09 11:07:40 +00:00
parent 184c73cca4
commit ecb0b0113f
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@ -43,7 +43,7 @@ import RoomContext from "../../../contexts/RoomContext";
import {UIFeature} from "../../../settings/UIFeature"; import {UIFeature} from "../../../settings/UIFeature";
import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu"; import {ChevronFace, ContextMenuTooltipButton, useContextMenu} from "../../structures/ContextMenu";
import WidgetContextMenu from "../context_menus/WidgetContextMenu"; import WidgetContextMenu from "../context_menus/WidgetContextMenu";
import {useRoomMembers} from "../../../hooks/useRoomMembers"; import {useRoomMemberCount} from "../../../hooks/useRoomMembers";
interface IProps { interface IProps {
room: Room; room: Room;
@ -244,12 +244,12 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
</div> </div>
</React.Fragment>; </React.Fragment>;
const members = useRoomMembers(room); const memberCount = useRoomMemberCount(room);
return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}> return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup"> <Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
<Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}> <Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
{_t("%(count)s people", { count: members.length })} {_t("%(count)s people", { count: memberCount })}
</Button> </Button>
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}> <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{_t("Show files")} {_t("Show files")}

8
src/hooks/useRoomMembers.ts
View File

@ -29,3 +29,11 @@ export const useRoomMembers = (room: Room, throttleWait = 250) => {
}, throttleWait, {leading: true, trailing: true})); }, throttleWait, {leading: true, trailing: true}));
return members; 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;
};