From 5e89675c9cff5aa8c5d56a762282871439fcb095 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Thu, 23 Dec 2021 10:03:20 +0530
Subject: [PATCH] Auto update room profile on change

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/room-profile/RoomProfile.jsx | 15 ++++++++++-----
 src/app/organisms/room/RoomView.jsx            |  8 ++++++--
 src/app/organisms/room/RoomViewHeader.jsx      | 17 +++++++++++++++++
 src/client/state/RoomList.js                   | 18 +++++++++++++-----
 src/client/state/cons.js                       |  1 +
 5 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/app/molecules/room-profile/RoomProfile.jsx b/src/app/molecules/room-profile/RoomProfile.jsx
index 9012bf4..fefac0b 100644
--- a/src/app/molecules/room-profile/RoomProfile.jsx
+++ b/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 = () => (
diff --git a/src/app/organisms/room/RoomView.jsx b/src/app/organisms/room/RoomView.jsx
index 7851f25..b94c35c 100644
--- a/src/app/organisms/room/RoomView.jsx
+++ b/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 () => {
diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx
index 284b306..6b8b4c8 100644
--- a/src/app/organisms/room/RoomViewHeader.jsx
+++ b/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
diff --git a/src/client/state/RoomList.js b/src/client/state/RoomList.js
index 5b45bc7..27401e1 100644
--- a/src/client/state/RoomList.js
+++ b/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) => {
diff --git a/src/client/state/cons.js b/src/client/state/cons.js
index 9d34c39..de22030 100644
--- a/src/client/state/cons.js
+++ b/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',