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 './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) => (

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