Improve Members Right Panel (#1286)

* fix room members hook

* fix resize observer hook

* add intersection observer hook

* install react-virtual lib

* improve right panel - WIP

* add filters for members

* fix bug in async search

* categories members and add search

* show spinner on room member fetch

* make invite member btn clickable

* so no member text

* add line between room view and member drawer

* fix imports

* add screen size hook

* fix set setting hook

* make member drawer responsive

* extract power level tags hook

* fix room members hook

* fix use async search api

* produce search result on filter change
This commit is contained in:
Ajay Bura 2023-06-22 09:14:50 +10:00 committed by GitHub
parent da32d0d9e7
commit c07905c360
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 984 additions and 79 deletions

View file

@ -1,23 +1,25 @@
import { MatrixClient, MatrixEvent, RoomMember, RoomMemberEvent } from 'matrix-js-sdk';
import { useEffect, useState } from 'react';
import { useAlive } from './useAlive';
export const useRoomMembers = (mx: MatrixClient, roomId: string): RoomMember[] => {
const [members, setMembers] = useState<RoomMember[]>([]);
const alive = useAlive();
useEffect(() => {
const room = mx.getRoom(roomId);
let loadingMembers = true;
let disposed = false;
const updateMemberList = (event?: MatrixEvent) => {
if (!room || !alive || (event && event.getRoomId() !== roomId)) return;
if (!room || disposed || (event && event.getRoomId() !== roomId)) return;
if (loadingMembers) return;
setMembers(room.getMembers());
};
if (room) {
updateMemberList();
setMembers(room.getMembers());
room.loadMembersIfNeeded().then(() => {
if (!alive) return;
loadingMembers = false;
if (disposed) return;
updateMemberList();
});
}
@ -25,10 +27,11 @@ export const useRoomMembers = (mx: MatrixClient, roomId: string): RoomMember[] =
mx.on(RoomMemberEvent.Membership, updateMemberList);
mx.on(RoomMemberEvent.PowerLevel, updateMemberList);
return () => {
disposed = true;
mx.removeListener(RoomMemberEvent.Membership, updateMemberList);
mx.removeListener(RoomMemberEvent.PowerLevel, updateMemberList);
};
}, [mx, roomId, alive]);
}, [mx, roomId]);
return members;
};