From 8583ab19f06465bb01ccaf533fc81a9c48b6a92f Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Mon, 5 Sep 2022 08:30:45 +0530 Subject: [PATCH] Manage ignored users (#814) * Add options to display/ignore usersId's * Update string * Hide search icon in encrypted rooms (#763) * Fix styles --- src/app/hooks/useAccountData.js | 4 +- .../GlobalNotification.jsx | 2 +- .../global-notification/IgnoreUserList.jsx | 64 +++++++++++++++++++ .../global-notification/IgnoreUserList.scss | 17 +++++ .../KeywordNotification.jsx | 2 +- .../KeywordNotification.scss | 3 +- src/app/organisms/room/RoomViewHeader.jsx | 9 +-- src/app/organisms/settings/Settings.jsx | 2 + src/app/organisms/settings/Settings.scss | 1 + 9 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 src/app/molecules/global-notification/IgnoreUserList.jsx create mode 100644 src/app/molecules/global-notification/IgnoreUserList.scss diff --git a/src/app/hooks/useAccountData.js b/src/app/hooks/useAccountData.js index 01c973e..ed654d9 100644 --- a/src/app/hooks/useAccountData.js +++ b/src/app/hooks/useAccountData.js @@ -5,12 +5,12 @@ import initMatrix from '../../client/initMatrix'; export function useAccountData(eventType) { const mx = initMatrix.matrixClient; - const [event, setEvent] = useState(mx.getAccountData(eventType)?.getContent()); + const [event, setEvent] = useState(mx.getAccountData(eventType)); useEffect(() => { const handleChange = (mEvent) => { if (mEvent.getType() !== eventType) return; - setEvent(mEvent.getContent()); + setEvent(mEvent); }; mx.on('accountData', handleChange); return () => { diff --git a/src/app/molecules/global-notification/GlobalNotification.jsx b/src/app/molecules/global-notification/GlobalNotification.jsx index a28687e..865582c 100644 --- a/src/app/molecules/global-notification/GlobalNotification.jsx +++ b/src/app/molecules/global-notification/GlobalNotification.jsx @@ -53,7 +53,7 @@ export function getTypeActions(type, highlightValue = false) { function useGlobalNotif() { const mx = initMatrix.matrixClient; - const pushRules = useAccountData('m.push_rules'); + const pushRules = useAccountData('m.push_rules')?.getContent(); const underride = pushRules?.global?.underride ?? []; const rulesToType = { [DM]: notifType.ON, diff --git a/src/app/molecules/global-notification/IgnoreUserList.jsx b/src/app/molecules/global-notification/IgnoreUserList.jsx new file mode 100644 index 0000000..87ee627 --- /dev/null +++ b/src/app/molecules/global-notification/IgnoreUserList.jsx @@ -0,0 +1,64 @@ +import React from 'react'; +import './IgnoreUserList.scss'; + +import initMatrix from '../../../client/initMatrix'; +import * as roomActions from '../../../client/action/room'; + +import Text from '../../atoms/text/Text'; +import Chip from '../../atoms/chip/Chip'; +import Input from '../../atoms/input/Input'; +import Button from '../../atoms/button/Button'; +import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; +import SettingTile from '../setting-tile/SettingTile'; + +import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; + +import { useAccountData } from '../../hooks/useAccountData'; + +function IgnoreUserList() { + useAccountData('m.ignored_user_list'); + const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers(); + + const handleSubmit = (evt) => { + evt.preventDefault(); + const { ignoreInput } = evt.target.elements; + const value = ignoreInput.value.trim(); + const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/)); + if (userIds.length === 0) return; + ignoreInput.value = ''; + roomActions.ignore(userIds); + }; + + return ( +
+ Ignored users + + Ignore userId if you do not want to receive their messages or invites. +
+ + +
+ {ignoredUsers.length > 0 && ( +
+ {ignoredUsers.map((uId) => ( + roomActions.unignore([uId])} + /> + ))} +
+ )} +
+ )} + /> + + ); +} + +export default IgnoreUserList; diff --git a/src/app/molecules/global-notification/IgnoreUserList.scss b/src/app/molecules/global-notification/IgnoreUserList.scss new file mode 100644 index 0000000..9283155 --- /dev/null +++ b/src/app/molecules/global-notification/IgnoreUserList.scss @@ -0,0 +1,17 @@ +.ignore-user-list { + &__users { + & form, + & > div:last-child { + display: flex; + flex-wrap: wrap; + gap: var(--sp-tight); + } + + & form { + margin: var(--sp-extra-tight) 0 var(--sp-normal); + .input-container { + flex-grow: 1; + } + } + } +} \ No newline at end of file diff --git a/src/app/molecules/global-notification/KeywordNotification.jsx b/src/app/molecules/global-notification/KeywordNotification.jsx index c44ffc4..8484d41 100644 --- a/src/app/molecules/global-notification/KeywordNotification.jsx +++ b/src/app/molecules/global-notification/KeywordNotification.jsx @@ -29,7 +29,7 @@ const KEYWORD = 'keyword'; function useKeywordNotif() { const mx = initMatrix.matrixClient; - const pushRules = useAccountData('m.push_rules'); + const pushRules = useAccountData('m.push_rules')?.getContent(); const override = pushRules?.global?.override ?? []; const content = pushRules?.global?.content ?? []; diff --git a/src/app/molecules/global-notification/KeywordNotification.scss b/src/app/molecules/global-notification/KeywordNotification.scss index a587002..4d1bfd4 100644 --- a/src/app/molecules/global-notification/KeywordNotification.scss +++ b/src/app/molecules/global-notification/KeywordNotification.scss @@ -3,11 +3,12 @@ & form, & > div:last-child { display: flex; + flex-wrap: wrap; gap: var(--sp-tight); } & form { - margin: var(--sp-ultra-tight) 0 var(--sp-normal); + margin: var(--sp-extra-tight) 0 var(--sp-normal); .input-container { flex-grow: 1; } diff --git a/src/app/organisms/room/RoomViewHeader.jsx b/src/app/organisms/room/RoomViewHeader.jsx index 849ba14..46a6ba0 100644 --- a/src/app/organisms/room/RoomViewHeader.jsx +++ b/src/app/organisms/room/RoomViewHeader.jsx @@ -33,9 +33,10 @@ function RoomViewHeader({ roomId }) { const [, forceUpdate] = useForceUpdate(); const mx = initMatrix.matrixClient; const isDM = initMatrix.roomList.directs.has(roomId); - let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop'); - avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc; - const roomName = mx.getRoom(roomId).name; + const room = mx.getRoom(roomId); + let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop'); + avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc; + const roomName = room.name; const roomHeaderBtnRef = useRef(null); useEffect(() => { @@ -93,7 +94,7 @@ function RoomViewHeader({ roomId }) { - toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} /> + {mx.isRoomEncrypted(roomId) === false && toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />} toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} /> + ); } diff --git a/src/app/organisms/settings/Settings.scss b/src/app/organisms/settings/Settings.scss index aa45570..a9ddd47 100644 --- a/src/app/organisms/settings/Settings.scss +++ b/src/app/organisms/settings/Settings.scss @@ -40,6 +40,7 @@ .settings-notifications, .global-notification, .keyword-notification, +.ignore-user-list, .settings-security__card, .settings-security .device-manage, .settings-about__card,