Auto update room profile on change

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-23 10:03:20 +05:30
parent 5777c1ab27
commit 5e89675c9c
5 changed files with 47 additions and 12 deletions

View file

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

View file

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

View file

@ -23,7 +23,10 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg'; import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
function RoomViewHeader({ roomId }) { function RoomViewHeader({ roomId }) {
const [, forceUpdate] = useForceUpdate();
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const isDM = initMatrix.roomList.directs.has(roomId); const isDM = initMatrix.roomList.directs.has(roomId);
let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop'); 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); 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 ( return (
<Header> <Header>
<button <button

View file

@ -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.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') { if (mEvent.getType() === 'm.space.child') {
const { event } = mEvent; const { event } = mEvent;
if (isMEventSpaceChild(mEvent)) { if (isMEventSpaceChild(mEvent)) {
@ -288,9 +289,16 @@ class RoomList extends EventEmitter {
this.emit(cons.events.roomList.ROOMLIST_UPDATED); this.emit(cons.events.roomList.ROOMLIST_UPDATED);
return; return;
} }
if (mEvent.getType() !== 'm.room.join_rules') return; if (mEvent.getType() === 'm.room.join_rules') {
this.emit(cons.events.roomList.ROOMLIST_UPDATED); 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) => { this.matrixClient.on('Room.myMembership', (room, membership, prevMembership) => {

View file

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