Refactor RoomOptions component
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
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 React, { useEffect, useRef } from 'react';
|
||||||
import './RoomOptions.scss';
|
|
||||||
|
|
||||||
import { twemojify } from '../../../util/twemojify';
|
import { twemojify } from '../../../util/twemojify';
|
||||||
|
|
||||||
|
@ -10,116 +9,19 @@ import { openInviteUser } from '../../../client/action/navigation';
|
||||||
import * as roomActions from '../../../client/action/room';
|
import * as roomActions from '../../../client/action/room';
|
||||||
|
|
||||||
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
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 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 AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
|
||||||
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
|
||||||
|
|
||||||
function getNotifState(roomId) {
|
import { useForceUpdate } from '../../hooks/useForceUpdate';
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
let isRoomOptionVisible = false;
|
let isRoomOptionVisible = false;
|
||||||
let roomId = null;
|
let roomId = null;
|
||||||
function RoomOptions() {
|
function RoomOptions() {
|
||||||
const openerRef = useRef(null);
|
const openerRef = useRef(null);
|
||||||
const [notifState, setNotifState] = useState(cons.notifs.DEFAULT);
|
const [, forceUpdate] = useForceUpdate();
|
||||||
|
|
||||||
function openRoomOptions(cords, rId) {
|
function openRoomOptions(cords, rId) {
|
||||||
if (roomId !== null || isRoomOptionVisible) {
|
if (roomId !== null || isRoomOptionVisible) {
|
||||||
|
@ -129,18 +31,18 @@ function RoomOptions() {
|
||||||
}
|
}
|
||||||
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
|
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
|
||||||
roomId = rId;
|
roomId = rId;
|
||||||
setNotifState(getNotifState(roomId));
|
|
||||||
openerRef.current.click();
|
openerRef.current.click();
|
||||||
|
forceUpdate();
|
||||||
}
|
}
|
||||||
|
|
||||||
function afterRoomOptionsToggle(isVisible) {
|
const afterRoomOptionsToggle = (isVisible) => {
|
||||||
isRoomOptionVisible = isVisible;
|
isRoomOptionVisible = isVisible;
|
||||||
if (!isVisible) {
|
if (!isVisible) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!isRoomOptionVisible) roomId = null;
|
if (!isRoomOptionVisible) roomId = null;
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
|
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
|
||||||
|
@ -165,11 +67,9 @@ function RoomOptions() {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function setNotif(nState, currentNState) {
|
const mx = initMatrix.matrixClient;
|
||||||
if (nState === currentNState) return;
|
const room = mx.getRoom(roomId);
|
||||||
setRoomNotifPushRule(nState, roomId);
|
const canInvite = room?.canInvite(mx.getUserId());
|
||||||
setNotifState(nState);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ContextMenu
|
<ContextMenu
|
||||||
|
@ -187,6 +87,7 @@ function RoomOptions() {
|
||||||
Mark as read
|
Mark as read
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
|
disabled={!canInvite}
|
||||||
iconSrc={AddUserIC}
|
iconSrc={AddUserIC}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleInviteClick(); toggleMenu();
|
handleInviteClick(); toggleMenu();
|
||||||
|
@ -196,34 +97,7 @@ function RoomOptions() {
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
|
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
|
||||||
<MenuHeader>Notification</MenuHeader>
|
<MenuHeader>Notification</MenuHeader>
|
||||||
<MenuItem
|
{roomId && <RoomNotification roomId={roomId} />}
|
||||||
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>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
render={(toggleMenu) => (
|
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