Refactor RoomOptions component
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
parent
8cfa20be1e
commit
2b70a49e09
2 changed files with 12 additions and 159 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import './RoomOptions.scss';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
|
||||
|
|
@ -10,116 +9,19 @@ import { openInviteUser } from '../../../client/action/navigation';
|
|||
import * as roomActions from '../../../client/action/room';
|
||||
|
||||
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
||||
import RoomNotification from '../../molecules/room-notification/RoomNotification';
|
||||
|
||||
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
|
||||
import BellIC from '../../../../public/res/ic/outlined/bell.svg';
|
||||
import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
|
||||
import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
|
||||
import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
|
||||
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
|
||||
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
||||
|
||||
function getNotifState(roomId) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const pushRule = mx.getRoomPushRule('global', roomId);
|
||||
|
||||
if (typeof pushRule === 'undefined') {
|
||||
const overridePushRules = mx.getAccountData('m.push_rules')?.getContent()?.global?.override;
|
||||
if (typeof overridePushRules === 'undefined') return 0;
|
||||
|
||||
const isMuteOverride = overridePushRules.find((rule) => (
|
||||
rule.rule_id === roomId
|
||||
&& rule.actions[0] === 'dont_notify'
|
||||
&& rule.conditions[0].kind === 'event_match'
|
||||
));
|
||||
|
||||
return isMuteOverride ? cons.notifs.MUTE : cons.notifs.DEFAULT;
|
||||
}
|
||||
if (pushRule.actions[0] === 'notify') return cons.notifs.ALL_MESSAGES;
|
||||
return cons.notifs.MENTIONS_AND_KEYWORDS;
|
||||
}
|
||||
|
||||
function setRoomNotifMute(roomId) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const roomPushRule = mx.getRoomPushRule('global', roomId);
|
||||
|
||||
const promises = [];
|
||||
if (roomPushRule) {
|
||||
promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
|
||||
}
|
||||
|
||||
promises.push(mx.addPushRule('global', 'override', roomId, {
|
||||
conditions: [
|
||||
{
|
||||
kind: 'event_match',
|
||||
key: 'room_id',
|
||||
pattern: roomId,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
'dont_notify',
|
||||
],
|
||||
}));
|
||||
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
function setRoomNotifsState(newState, roomId) {
|
||||
const mx = initMatrix.matrixClient;
|
||||
const promises = [];
|
||||
|
||||
const oldState = getNotifState(roomId);
|
||||
if (oldState === cons.notifs.MUTE) {
|
||||
promises.push(mx.deletePushRule('global', 'override', roomId));
|
||||
}
|
||||
|
||||
if (newState === cons.notifs.DEFAULT) {
|
||||
const roomPushRule = mx.getRoomPushRule('global', roomId);
|
||||
if (roomPushRule) {
|
||||
promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
|
||||
}
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
if (newState === cons.notifs.MENTIONS_AND_KEYWORDS) {
|
||||
promises.push(mx.addPushRule('global', 'room', roomId, {
|
||||
actions: [
|
||||
'dont_notify',
|
||||
],
|
||||
}));
|
||||
promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
// cons.notifs.ALL_MESSAGES
|
||||
promises.push(mx.addPushRule('global', 'room', roomId, {
|
||||
actions: [
|
||||
'notify',
|
||||
{
|
||||
set_tweak: 'sound',
|
||||
value: 'default',
|
||||
},
|
||||
],
|
||||
}));
|
||||
|
||||
promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
|
||||
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
function setRoomNotifPushRule(notifState, roomId) {
|
||||
if (notifState === cons.notifs.MUTE) {
|
||||
setRoomNotifMute(roomId);
|
||||
return;
|
||||
}
|
||||
setRoomNotifsState(notifState, roomId);
|
||||
}
|
||||
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
||||
|
||||
let isRoomOptionVisible = false;
|
||||
let roomId = null;
|
||||
function RoomOptions() {
|
||||
const openerRef = useRef(null);
|
||||
const [notifState, setNotifState] = useState(cons.notifs.DEFAULT);
|
||||
const [, forceUpdate] = useForceUpdate();
|
||||
|
||||
function openRoomOptions(cords, rId) {
|
||||
if (roomId !== null || isRoomOptionVisible) {
|
||||
|
|
@ -129,18 +31,18 @@ function RoomOptions() {
|
|||
}
|
||||
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
|
||||
roomId = rId;
|
||||
setNotifState(getNotifState(roomId));
|
||||
openerRef.current.click();
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
function afterRoomOptionsToggle(isVisible) {
|
||||
const afterRoomOptionsToggle = (isVisible) => {
|
||||
isRoomOptionVisible = isVisible;
|
||||
if (!isVisible) {
|
||||
setTimeout(() => {
|
||||
if (!isRoomOptionVisible) roomId = null;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
|
||||
|
|
@ -165,11 +67,9 @@ function RoomOptions() {
|
|||
}
|
||||
};
|
||||
|
||||
function setNotif(nState, currentNState) {
|
||||
if (nState === currentNState) return;
|
||||
setRoomNotifPushRule(nState, roomId);
|
||||
setNotifState(nState);
|
||||
}
|
||||
const mx = initMatrix.matrixClient;
|
||||
const room = mx.getRoom(roomId);
|
||||
const canInvite = room?.canInvite(mx.getUserId());
|
||||
|
||||
return (
|
||||
<ContextMenu
|
||||
|
|
@ -187,6 +87,7 @@ function RoomOptions() {
|
|||
Mark as read
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
disabled={!canInvite}
|
||||
iconSrc={AddUserIC}
|
||||
onClick={() => {
|
||||
handleInviteClick(); toggleMenu();
|
||||
|
|
@ -196,34 +97,7 @@ function RoomOptions() {
|
|||
</MenuItem>
|
||||
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
|
||||
<MenuHeader>Notification</MenuHeader>
|
||||
<MenuItem
|
||||
variant={notifState === cons.notifs.DEFAULT ? 'positive' : 'surface'}
|
||||
iconSrc={BellIC}
|
||||
onClick={() => setNotif(cons.notifs.DEFAULT, notifState)}
|
||||
>
|
||||
Default
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
variant={notifState === cons.notifs.ALL_MESSAGES ? 'positive' : 'surface'}
|
||||
iconSrc={BellRingIC}
|
||||
onClick={() => setNotif(cons.notifs.ALL_MESSAGES, notifState)}
|
||||
>
|
||||
All messages
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
variant={notifState === cons.notifs.MENTIONS_AND_KEYWORDS ? 'positive' : 'surface'}
|
||||
iconSrc={BellPingIC}
|
||||
onClick={() => setNotif(cons.notifs.MENTIONS_AND_KEYWORDS, notifState)}
|
||||
>
|
||||
Mentions & Keywords
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
variant={notifState === cons.notifs.MUTE ? 'positive' : 'surface'}
|
||||
iconSrc={BellOffIC}
|
||||
onClick={() => setNotif(cons.notifs.MUTE, notifState)}
|
||||
>
|
||||
Mute
|
||||
</MenuItem>
|
||||
{roomId && <RoomNotification roomId={roomId} />}
|
||||
</>
|
||||
)}
|
||||
render={(toggleMenu) => (
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
|
||||
.context-menu__item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.context-menu__item .btn-positive::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
background: var(--bg-positive);
|
||||
@include dir.prop(
|
||||
border-radius,
|
||||
0 4px 4px 0,
|
||||
4px 0 0 4px,
|
||||
);
|
||||
position: absolute;
|
||||
@include dir.prop(left, 0, unset);
|
||||
@include dir.prop(right, unset, 0);
|
||||
}
|
||||
Loading…
Reference in a new issue