Auto update room profile on change

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/molecules/room-profile/RoomProfile.jsx

@@ -18,10 +18,12 @@ import ImageUpload from '../image-upload/ImageUpload';
 import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
 
 import { useStore } from '../../hooks/useStore';
+import { useForceUpdate } from '../../hooks/useForceUpdate';
 
 function RoomProfile({ roomId }) {
   const isMountStore = useStore();
   const [isEditing, setIsEditing] = useState(false);
+  const [, forceUpdate] = useForceUpdate();
   const [status, setStatus] = useState({
     msg: null,
     type: cons.status.PRE_FLIGHT,
@@ -44,7 +46,15 @@ function RoomProfile({ roomId }) {
 
   useEffect(() => {
     isMountStore.setItem(true);
+    const { roomList } = initMatrix;
+    const handleProfileUpdate = (rId) => {
+      if (roomId !== rId) return;
+      forceUpdate();
+    };
+
+    roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
     return () => {
+      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
       isMountStore.setItem(false);
       setStatus({
         msg: null,
@@ -111,11 +121,6 @@ function RoomProfile({ roomId }) {
         await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
       }
     } else await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
-    if (!isMountStore.getItem()) return;
-    setStatus({
-      msg: null,
-      type: cons.status.PRE_FLIGHT,
-    });
   };
 
   const renderEditNameAndTopic = () => (

src/app/organisms/room/RoomView.jsx

@@ -26,8 +26,12 @@ function RoomView({ roomTimeline, eventId }) {
       roomView.classList.toggle('room-view--dropped');
 
       const roomViewContent = roomView.children[1];
-      if (isVisible) setTimeout(() => { roomViewContent.style.visibility = 'hidden'; }, 200);
-      else roomViewContent.style.visibility = 'visible';
+      if (isVisible) {
+        setTimeout(() => {
+          if (!navigation.isRoomSettings) return;
+          roomViewContent.style.visibility = 'hidden';
+        }, 200);
+      } else roomViewContent.style.visibility = 'visible';
     };
     navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     return () => {

src/app/organisms/room/RoomViewHeader.jsx

@@ -23,7 +23,10 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
 function RoomViewHeader({ roomId }) {
+  const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
@@ -43,6 +46,20 @@ function RoomViewHeader({ roomId }) {
       navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
     };
   }, []);
+
+  useEffect(() => {
+    const { roomList } = initMatrix;
+    const handleProfileUpdate = (rId) => {
+      if (roomId !== rId) return;
+      forceUpdate();
+    };
+
+    roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+    return () => {
+      roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+    };
+  }, [roomId]);
+
   return (
     <Header>
       <button

src/client/state/RoomList.js

@@ -273,11 +273,12 @@ class RoomList extends EventEmitter {
       });
     });
 
-    this.matrixClient.on('Room.name', () => {
+    this.matrixClient.on('Room.name', (room) => {
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+      this.emit(cons.events.roomList.ROOM_PROFILE_UPDATED, room.roomId);
     });
 
-    this.matrixClient.on('RoomState.events', (mEvent) => {
+    this.matrixClient.on('RoomState.events', (mEvent, state) => {
       if (mEvent.getType() === 'm.space.child') {
         const { event } = mEvent;
         if (isMEventSpaceChild(mEvent)) {
@@ -288,9 +289,16 @@ class RoomList extends EventEmitter {
         this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         return;
       }
-      if (mEvent.getType() !== 'm.room.join_rules') return;
-
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+      if (mEvent.getType() === 'm.room.join_rules') {
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        return;
+      }
+      if (['m.room.avatar', 'm.room.topic'].includes(mEvent.getType())) {
+        if (mEvent.getType() === 'm.room.avatar') {
+          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        }
+        this.emit(cons.events.roomList.ROOM_PROFILE_UPDATED, state.roomId);
+      }
     });
 
     this.matrixClient.on('Room.myMembership', (room, membership, prevMembership) => {

src/client/state/cons.js

@@ -85,6 +85,7 @@ const cons = {
       ROOM_LEAVED: 'ROOM_LEAVED',
       ROOM_CREATED: 'ROOM_CREATED',
       SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
+      ROOM_PROFILE_UPDATED: 'ROOM_PROFILE_UPDATED',
     },
     notifications: {
       NOTI_CHANGED: 'NOTI_CHANGED',