diff --git a/src/app/molecules/room-permissions/RoomPermissions.jsx b/src/app/molecules/room-permissions/RoomPermissions.jsx index d900197..d1a652c 100644 --- a/src/app/molecules/room-permissions/RoomPermissions.jsx +++ b/src/app/molecules/room-permissions/RoomPermissions.jsx @@ -1,17 +1,22 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import './RoomPermissions.scss'; import initMatrix from '../../../client/initMatrix'; import { getPowerLabel } from '../../../util/matrixUtil'; +import { openReusableContextMenu } from '../../../client/action/navigation'; +import { getEventCords } from '../../../util/common'; import Text from '../../atoms/text/Text'; import Button from '../../atoms/button/Button'; import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; +import PowerLevelSelector from '../power-level-selector/PowerLevelSelector'; import SettingTile from '../setting-tile/SettingTile'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; +import { useForceUpdate } from '../../hooks/useForceUpdate'; + const permissionsInfo = { users_default: { name: 'Default role', @@ -144,13 +149,69 @@ const spacePermsGroups = { 'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'], }; +function useRoomStateUpdate(roomId) { + const [, forceUpdate] = useForceUpdate(); + const mx = initMatrix.matrixClient; + + useEffect(() => { + const handleStateEvent = (event) => { + if (event.getRoomId() !== roomId) return; + forceUpdate(); + }; + + mx.on('RoomState.events', handleStateEvent); + return () => { + mx.removeListener('RoomState.events', handleStateEvent); + }; + }, [roomId]); +} + function RoomPermissions({ roomId }) { + useRoomStateUpdate(roomId); const mx = initMatrix.matrixClient; const room = mx.getRoom(roomId); const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0]; const permissions = pLEvent.getContent(); const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId()); + const handlePowerSelector = (e, permKey, parentKey, powerLevel) => { + const handlePowerLevelChange = (newPowerLevel) => { + if (powerLevel === newPowerLevel) return; + + const newPermissions = { ...permissions }; + if (parentKey) { + newPermissions[parentKey] = { + ...permissions[parentKey], + [permKey]: newPowerLevel, + }; + } else if (permKey === 'notifications') { + newPermissions[permKey] = { + ...permissions[permKey], + room: newPowerLevel, + }; + } else { + newPermissions[permKey] = newPowerLevel; + } + + mx.sendStateEvent(roomId, 'm.room.power_levels', newPermissions); + }; + + openReusableContextMenu( + 'bottom', + getEventCords(e, '.btn-surface'), + (closeMenu) => ( + { + closeMenu(); + handlePowerLevelChange(pl); + }} + /> + ), + ); + }; + return (
{ @@ -182,6 +243,11 @@ function RoomPermissions({ roomId }) { content={{permInfo.description}} options={(