Refactor RoomOptions component

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-24 15:09:11 +05:30
parent 8cfa20be1e
commit 2b70a49e09
2 changed files with 12 additions and 159 deletions

View file

@ -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) => (

View file

@ -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);
}