Refactor RoomOptions component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/room-optons/RoomOptions.jsx

@@ -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';
 
@@ -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) {
+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 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) {
+  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 (
     <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
+          {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) => (

src/app/organisms/room-optons/RoomOptions.scss

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