From 6fdace07c8a14f9c18aa926e425d2c09031f1ae6 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Fri, 29 Oct 2021 18:11:02 +0530
Subject: [PATCH] Automatic update people list

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 .../profile-viewer/ProfileViewer.jsx          | 10 ++++++--
 src/app/organisms/room/PeopleDrawer.jsx       | 23 +++++++++++--------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx
index 6705b29..191678a 100644
--- a/src/app/organisms/profile-viewer/ProfileViewer.jsx
+++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx
@@ -92,6 +92,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
   const [isInviting, setIsInviting] = useState(false);
   const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
 
+  const myPowerlevel = room.getMember(mx.getUserId()).powerLevel;
+  const canIKick = room.currentState.hasSufficientPowerLevelFor('kick', myPowerlevel);
+
   useEffect(() => () => {
     isMountedRef.current = false;
   }, []);
@@ -180,8 +183,11 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
         {isCreatingDM ? 'Creating room...' : 'Message'}
       </Button>
       { member?.membership === 'join' && <Button>Mention</Button>}
-      {room.canInvite(mx.getUserId()) && isInvitable && (
-        <Button onClick={toggleInvite}>
+      { (isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
+        <Button
+          onClick={toggleInvite}
+          disabled={isInviting}
+        >
           {
             isInvited
               ? `${isInviting ? 'Disinviting...' : 'Disinvite'}`
diff --git a/src/app/organisms/room/PeopleDrawer.jsx b/src/app/organisms/room/PeopleDrawer.jsx
index 050d8b6..268e43b 100644
--- a/src/app/organisms/room/PeopleDrawer.jsx
+++ b/src/app/organisms/room/PeopleDrawer.jsx
@@ -103,30 +103,35 @@ function PeopleDrawer({ roomId }) {
   }, [memberList]);
 
   useEffect(() => {
-    searchRef.current.value = '';
-    setMemberList(
-      simplyfiMembers(
-        getMembersWithMembership(membership)
-          .sort(AtoZ).sort(sortByPowerLevel),
-      ),
-    );
-    room.loadMembersIfNeeded().then(() => {
-      if (isRoomChanged) return;
+    let isGettingMembers = true;
+    const updateMemberList = (event) => {
+      if (isGettingMembers) return;
+      console.log(event?.event?.room_id);
+      if (event && event?.event?.room_id !== roomId) return;
       setMemberList(
         simplyfiMembers(
           getMembersWithMembership(membership)
             .sort(AtoZ).sort(sortByPowerLevel),
         ),
       );
+    };
+    searchRef.current.value = '';
+    updateMemberList();
+    room.loadMembersIfNeeded().then(() => {
+      isGettingMembers = false;
+      if (isRoomChanged) return;
+      updateMemberList();
     });
 
     asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
+    mx.on('RoomMember.membership', updateMemberList);
     return () => {
       isRoomChanged = true;
       setMemberList([]);
       setSearchedMembers(null);
       setItemCount(PER_PAGE_MEMBER);
       asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
+      mx.removeListener('RoomMember.membership', updateMemberList);
     };
   }, [roomId, membership]);