diff --git a/src/app/molecules/room-profile/RoomProfile.jsx b/src/app/molecules/room-profile/RoomProfile.jsx index 9012bf4c..fefac0bb 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 7851f253..b94c35c4 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 284b306c..6b8b4c8e 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 5b45bc70..27401e1a 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 9d34c39b..de220303 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',