From 2b70a49e09cc84fac193aea67d4daf6042db0011 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Fri, 24 Dec 2021 15:09:11 +0530 Subject: [PATCH] Refactor RoomOptions component Signed-off-by: Ajay Bura --- src/app/organisms/room-optons/RoomOptions.jsx | 150 ++---------------- .../organisms/room-optons/RoomOptions.scss | 21 --- 2 files changed, 12 insertions(+), 159 deletions(-) delete mode 100644 src/app/organisms/room-optons/RoomOptions.scss diff --git a/src/app/organisms/room-optons/RoomOptions.jsx b/src/app/organisms/room-optons/RoomOptions.jsx index 2616da6..a131ddc 100644 --- a/src/app/organisms/room-optons/RoomOptions.jsx +++ b/src/app/organisms/room-optons/RoomOptions.jsx @@ -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 ( { handleInviteClick(); toggleMenu(); @@ -196,34 +97,7 @@ function RoomOptions() { handleLeaveClick(toggleMenu)}>Leave Notification - setNotif(cons.notifs.DEFAULT, notifState)} - > - Default - - setNotif(cons.notifs.ALL_MESSAGES, notifState)} - > - All messages - - setNotif(cons.notifs.MENTIONS_AND_KEYWORDS, notifState)} - > - Mentions & Keywords - - setNotif(cons.notifs.MUTE, notifState)} - > - Mute - + {roomId && } )} render={(toggleMenu) => ( diff --git a/src/app/organisms/room-optons/RoomOptions.scss b/src/app/organisms/room-optons/RoomOptions.scss deleted file mode 100644 index c091100..0000000 --- a/src/app/organisms/room-optons/RoomOptions.scss +++ /dev/null @@ -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); -} \ No newline at end of file