-
-
- {name}
- {parentName && (
-
- {' — '}
- {parentName}
-
- )}
-
- {isUnread && (
-
- )}
-
- }
- options={options}
- onClick={onClick}
- onContextMenu={onContextMenu}
- />
- );
-}
-RoomSelector.defaultProps = {
- parentName: null,
- isSelected: false,
- imageSrc: null,
- iconSrc: null,
- isMuted: false,
- options: null,
- onContextMenu: null,
-};
-RoomSelector.propTypes = {
- name: PropTypes.string.isRequired,
- parentName: PropTypes.string,
- roomId: PropTypes.string.isRequired,
- imageSrc: PropTypes.string,
- iconSrc: PropTypes.string,
- isSelected: PropTypes.bool,
- isMuted: PropTypes.bool,
- isUnread: PropTypes.bool.isRequired,
- notificationCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
- isAlert: PropTypes.bool.isRequired,
- options: PropTypes.node,
- onClick: PropTypes.func.isRequired,
- onContextMenu: PropTypes.func,
-};
-
-export default RoomSelector;
diff --git a/src/app/molecules/room-selector/RoomSelector.scss b/src/app/molecules/room-selector/RoomSelector.scss
deleted file mode 100644
index 59e47473..00000000
--- a/src/app/molecules/room-selector/RoomSelector.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-@use '../../partials/dir';
-
-.room-selector {
- @extend .cp-fx__row--s-c;
-
- border: 1px solid transparent;
- border-radius: var(--bo-radius);
- cursor: pointer;
-
- &--muted {
- opacity: 0.6;
- }
-
- &--unread {
- .room-selector__content > .text {
- color: var(--tc-surface-high);
- }
- }
-
- &--selected {
- background-color: var(--bg-surface);
- border-color: var(--bg-surface-border);
-
- & .room-selector__options {
- display: flex;
- }
- }
-
- @media (hover: hover) {
- &:hover {
- background-color: var(--bg-surface-hover);
- & .room-selector__options {
- display: flex;
- }
- }
- }
- &:focus-within {
- background-color: var(--bg-surface-hover);
- & button {
- outline: none;
- }
- }
- &:active {
- background-color: var(--bg-surface-active);
- }
- &--selected:hover,
- &--selected:focus,
- &--selected:active {
- background-color: var(--bg-surface);
- }
-}
-
-.room-selector__content {
- @extend .cp-fx__item-one;
- @extend .cp-fx__row--s-c;
- padding: 0 var(--sp-extra-tight);
- min-height: 40px;
- cursor: inherit;
-
- & > .avatar-container .avatar__border--active {
- box-shadow: none;
- }
-
- & > .text {
- @extend .cp-fx__item-one;
- @extend .cp-txt__ellipsis;
- margin: 0 var(--sp-extra-tight);
-
- color: var(--tc-surface-normal-low);
- }
-}
-.room-selector__options {
- @extend .cp-fx__row--s-c;
- @include dir.side(margin, 0, var(--sp-ultra-tight));
- display: none;
-
- &:empty {
- margin: 0 !important;
- }
-
- & .ic-btn {
- padding: 6px;
- border-radius: calc(var(--bo-radius) / 2);
- }
-}
\ No newline at end of file
diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
deleted file mode 100644
index 2e0a63f6..00000000
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './RoomTile.scss';
-
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-
-function RoomTile({ avatarSrc, name, id, inviterName, memberCount, desc, options }) {
- return (
-
-
-
- {name}
-
- {inviterName !== null
- ? `Invited by ${inviterName} to ${id}${
- memberCount === null ? '' : ` • ${memberCount} members`
- }`
- : id + (memberCount === null ? '' : ` • ${memberCount} members`)}
-
- {desc !== null && typeof desc === 'string' ? (
-
- {desc}
-
- ) : (
- desc
- )}
-
- {options !== null &&
{options}
}
-
-
-
- {
- typeof title === 'string'
- ? {title}
- : title
- }
-
- {content}
-
- {options !== null &&
{options}
}
-
- {process && }
- {process || `${selected.length} item selected`}
- {!process && (
-
- )}
-
- )}
-
- );
-}
-SpaceAddExistingContent.propTypes = {
- roomId: PropTypes.string.isRequired,
- spaces: PropTypes.bool.isRequired,
-};
-
-function useVisibilityToggle() {
- const [data, setData] = useState(null);
-
- useEffect(() => {
- const handleOpen = (roomId, spaces) =>
- setData({
- roomId,
- spaces,
- });
- navigation.on(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
- return () => {
- navigation.removeListener(cons.events.navigation.SPACE_ADDEXISTING_OPENED, handleOpen);
- };
- }, []);
-
- const requestClose = () => setData(null);
-
- return [data, requestClose];
-}
-
-function SpaceAddExisting() {
- const [data, requestClose] = useVisibilityToggle();
- const mx = useMatrixClient();
- const room = mx.getRoom(data?.roomId);
-
- return (
-
- );
-}
-
-export default SpaceAddExisting;
diff --git a/src/app/molecules/space-add-existing/SpaceAddExisting.scss b/src/app/molecules/space-add-existing/SpaceAddExisting.scss
deleted file mode 100644
index 3eb3d96a..00000000
--- a/src/app/molecules/space-add-existing/SpaceAddExisting.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@use '../../partials/dir';
-@use '../../partials/flex';
-
-.space-add-existing {
- height: 100%;
-
- .dialog__content-container {
- padding: 0;
- padding-bottom: 80px;
- @include dir.side(padding, var(--sp-extra-tight), 0);
-
- & > .text {
- margin: var(--sp-loose) var(--sp-normal);
- text-align: center;
- }
- }
-
- & form {
- @extend .cp-fx__row--s-c;
- padding: var(--sp-extra-tight);
- padding-top: var(--sp-normal);
-
- position: sticky;
- top: 0;
- z-index: 999;
- background-color: var(--bg-surface);
-
- & > .ic-raw,
- & > .ic-btn {
- position: absolute;
- }
- & > .ic-raw {
- margin: 0 var(--sp-tight);
- }
- & > .ic-btn {
- border-radius: calc(var(--bo-radius) / 2);
- @include dir.prop(right, var(--sp-tight), unset);
- @include dir.prop(left, unset, var(--sp-tight));
- }
- & input {
- padding: var(--sp-tight) 40px;
- }
- }
-
- .input-container {
- @extend .cp-fx__item-one;
- }
-
- .room-selector {
- margin: 0 var(--sp-extra-tight);
- }
- .room-selector__options {
- display: flex;
- margin: 0 10px;
- }
-}
-
-.space-add-existing__footer {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- padding: var(--sp-normal);
- background-color: var(--bg-surface);
- border-top: 1px solid var(--bg-surface-border);
- display: flex;
- align-items: center;
-
- & > .text {
- @extend .cp-fx__item-one;
- padding: 0 var(--sp-tight);
- }
-
- & > button {
- @include dir.side(margin, var(--sp-normal), 0);
- }
-}
\ No newline at end of file
diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
deleted file mode 100644
index 04b2faeb..00000000
--- a/src/app/organisms/create-room/CreateRoom.jsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './CreateRoom.scss';
-
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
-import { isRoomAliasAvailable, getIdServer } from '../../../util/matrixUtil';
-import { getEventCords } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import Toggle from '../../atoms/button/Toggle';
-import IconButton from '../../atoms/button/IconButton';
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-import Input from '../../atoms/input/Input';
-import Spinner from '../../atoms/spinner/Spinner';
-import SegmentControl from '../../atoms/segmented-controls/SegmentedControls';
-import Dialog from '../../molecules/dialog/Dialog';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
-
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import SpacePlusIC from '../../../../public/res/ic/outlined/space-plus.svg';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
-import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
-import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
- const [joinRule, setJoinRule] = useState(parentId ? 'restricted' : 'invite');
- const [isEncrypted, setIsEncrypted] = useState(true);
- const [isCreatingRoom, setIsCreatingRoom] = useState(false);
- const [creatingError, setCreatingError] = useState(null);
- const { navigateRoom, navigateSpace } = useRoomNavigate();
-
- const [isValidAddress, setIsValidAddress] = useState(null);
- const [addressValue, setAddressValue] = useState(undefined);
- const [roleIndex, setRoleIndex] = useState(0);
-
- const addressRef = useRef(null);
-
- const mx = useMatrixClient();
- const userHs = getIdServer(mx.getUserId());
-
- const handleSubmit = async (evt) => {
- evt.preventDefault();
- const { target } = evt;
-
- if (isCreatingRoom) return;
- setIsCreatingRoom(true);
- setCreatingError(null);
-
- const name = target.name.value;
- let topic = target.topic.value;
- if (topic.trim() === '') topic = undefined;
- let roomAlias;
- if (joinRule === 'public') {
- roomAlias = addressRef?.current?.value;
- if (roomAlias.trim() === '') roomAlias = undefined;
- }
-
- const powerLevel = roleIndex === 1 ? 101 : undefined;
-
- try {
- const data = await roomActions.createRoom(mx, {
- name,
- topic,
- joinRule,
- alias: roomAlias,
- isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
- powerLevel,
- isSpace,
- parentId,
- });
- setIsCreatingRoom(false);
- setCreatingError(null);
- setIsValidAddress(null);
- setAddressValue(undefined);
- onRequestClose();
- if (isSpace) {
- navigateSpace(data.room_id);
- } else {
- navigateRoom(data.room_id);
- }
- } catch (e) {
- if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
- setCreatingError('ERROR: Invalid characters in address');
- setIsValidAddress(false);
- } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
- setCreatingError('ERROR: This address is already in use');
- setIsValidAddress(false);
- } else setCreatingError(e.message);
- setIsCreatingRoom(false);
- }
- };
-
- const validateAddress = (e) => {
- const myAddress = e.target.value;
- setIsValidAddress(null);
- setAddressValue(e.target.value);
- setCreatingError(null);
-
- setTimeout(async () => {
- if (myAddress !== addressRef.current.value) return;
- const roomAlias = addressRef.current.value;
- if (roomAlias === '') return;
- const roomAddress = `#${roomAlias}:${userHs}`;
-
- if (await isRoomAliasAvailable(mx, roomAddress)) {
- setIsValidAddress(true);
- } else {
- setIsValidAddress(false);
- }
- }, 1000);
- };
-
- const joinRules = ['invite', 'restricted', 'public'];
- const joinRuleShortText = ['Private', 'Restricted', 'Public'];
- const joinRuleText = [
- 'Private (invite only)',
- 'Restricted (space member can join)',
- 'Public (anyone can join)',
- ];
- const jrRoomIC = [HashLockIC, HashIC, HashGlobeIC];
- const jrSpaceIC = [SpaceLockIC, SpaceIC, SpaceGlobeIC];
- const handleJoinRule = (evt) => {
- openReusableContextMenu('bottom', getEventCords(evt, '.btn-surface'), (closeMenu) => (
- <>
- Visibility (who can join)
- {joinRules.map((rule) => (
-
- ))}
-
- ));
- };
-
- return (
-
- );
-}
-CreateRoomContent.defaultProps = {
- parentId: null,
-};
-CreateRoomContent.propTypes = {
- isSpace: PropTypes.bool.isRequired,
- parentId: PropTypes.string,
- onRequestClose: PropTypes.func.isRequired,
-};
-
-function useWindowToggle() {
- const [create, setCreate] = useState(null);
-
- useEffect(() => {
- const handleOpen = (isSpace, parentId) => {
- setCreate({
- isSpace,
- parentId,
- });
- };
- navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
- return () => {
- navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, handleOpen);
- };
- }, []);
-
- const onRequestClose = () => setCreate(null);
-
- return [create, onRequestClose];
-}
-
-function CreateRoom() {
- const [create, onRequestClose] = useWindowToggle();
- const { isSpace, parentId } = create ?? {};
- const mx = useMatrixClient();
- const room = mx.getRoom(parentId);
-
- return (
-
- );
-}
-
-export default CreateRoom;
diff --git a/src/app/organisms/create-room/CreateRoom.scss b/src/app/organisms/create-room/CreateRoom.scss
deleted file mode 100644
index ccd3ea3b..00000000
--- a/src/app/organisms/create-room/CreateRoom.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-
-.create-room {
- margin: var(--sp-normal);
- @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
-
- &__form > * {
- margin-top: var(--sp-normal);
- &:first-child {
- margin-top: var(--sp-extra-tight);
- }
- }
-
- & .segment-btn {
- padding: var(--sp-ultra-tight) 0;
- &__base {
- padding: 0 var(--sp-tight);
- }
- }
-
- &__address {
- display: flex;
- &__label {
- color: var(--tc-surface-low);
- margin-bottom: var(--sp-ultra-tight);
- }
- &__tip {
- margin-top: var(--sp-ultra-tight);
- @include dir.side(margin, 46px, 0);
- }
- & .text {
- display: flex;
- align-items: center;
- padding: 0 var(--sp-normal);
- border: 1px solid var(--bg-surface-border);
- border-radius: var(--bo-radius);
- color: var(--tc-surface-low);
- }
- & *:nth-child(2) {
- flex: 1;
- min-width: 0;
- & .input {
- border-radius: 0;
- }
- }
- & .text:first-child {
- @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
- @include dir.prop(
- border-radius,
- var(--bo-radius) 0 0 var(--bo-radius),
- 0 var(--bo-radius) var(--bo-radius) 0,
- );
- }
- & .text:last-child {
- @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
- @include dir.prop(
- border-radius,
- 0 var(--bo-radius) var(--bo-radius) 0,
- var(--bo-radius) 0 0 var(--bo-radius),
- );
- }
- }
-
- &__name-wrapper {
- display: flex;
- align-items: flex-end;
-
- & .input-container {
- flex: 1;
- min-width: 0;
- @include dir.side(margin, 0, var(--sp-normal));
- }
- & .btn-primary {
- padding-top: 11px;
- padding-bottom: 11px;
- }
- }
-
- &__loading {
- @extend .cp-fx__row--c-c;
- & .text {
- @include dir.side(margin, var(--sp-normal), 0);
- }
- }
- &__error {
- text-align: center;
- color: var(--bg-danger) !important;
- }
-}
\ No newline at end of file
diff --git a/src/app/organisms/emoji-board/custom-emoji.js b/src/app/organisms/emoji-board/custom-emoji.js
deleted file mode 100644
index 4ca2088f..00000000
--- a/src/app/organisms/emoji-board/custom-emoji.js
+++ /dev/null
@@ -1,142 +0,0 @@
-// https://github.com/Sorunome/matrix-doc/blob/soru/emotes/proposals/2545-emotes.md
-
-export class ImagePack {
- static parsePack(eventId, packContent) {
- if (!eventId || typeof packContent?.images !== 'object') {
- return null;
- }
-
- return new ImagePack(eventId, packContent);
- }
-
- constructor(eventId, content) {
- this.id = eventId;
- this.content = JSON.parse(JSON.stringify(content));
-
- this.applyPack(content);
- this.applyImages(content);
- }
-
- applyPack(content) {
- const pack = content.pack ?? {};
-
- this.displayName = pack.display_name;
- this.avatarUrl = pack.avatar_url;
- this.usage = pack.usage ?? ['emoticon', 'sticker'];
- this.attribution = pack.attribution;
- }
-
- applyImages(content) {
- this.images = new Map();
- this.emoticons = [];
- this.stickers = [];
-
- Object.entries(content.images).forEach(([shortcode, data]) => {
- const mxc = data.url;
- const body = data.body ?? shortcode;
- const usage = data.usage ?? this.usage;
- const { info } = data;
-
- if (!mxc) return;
- const image = {
- shortcode, mxc, body, usage, info,
- };
-
- this.images.set(shortcode, image);
- if (usage.includes('emoticon')) {
- this.emoticons.push(image);
- }
- if (usage.includes('sticker')) {
- this.stickers.push(image);
- }
- });
- }
-
- getImages() {
- return this.images;
- }
-
- getEmojis() {
- return this.emoticons;
- }
-
- getStickers() {
- return this.stickers;
- }
-
- getContent() {
- return this.content;
- }
-
- _updatePackProperty(property, value) {
- if (this.content.pack === undefined) {
- this.content.pack = {};
- }
- this.content.pack[property] = value;
- this.applyPack(this.content);
- }
-
- setAvatarUrl(avatarUrl) {
- this._updatePackProperty('avatar_url', avatarUrl);
- }
-
- setDisplayName(displayName) {
- this._updatePackProperty('display_name', displayName);
- }
-
- setAttribution(attribution) {
- this._updatePackProperty('attribution', attribution);
- }
-
- setUsage(usage) {
- this._updatePackProperty('usage', usage);
- }
-
- addImage(key, imgContent) {
- this.content.images = {
- [key]: imgContent,
- ...this.content.images,
- };
- this.applyImages(this.content);
- }
-
- removeImage(key) {
- if (this.content.images[key] === undefined) return;
- delete this.content.images[key];
- this.applyImages(this.content);
- }
-
- updateImageKey(key, newKey) {
- if (this.content.images[key] === undefined) return;
- const copyImages = {};
- Object.keys(this.content.images).forEach((imgKey) => {
- copyImages[imgKey === key ? newKey : imgKey] = this.content.images[imgKey];
- });
- this.content.images = copyImages;
- this.applyImages(this.content);
- }
-
- _updateImageProperty(key, property, value) {
- if (this.content.images[key] === undefined) return;
- this.content.images[key][property] = value;
- this.applyImages(this.content);
- }
-
- setImageUrl(key, url) {
- this._updateImageProperty(key, 'url', url);
- }
-
- setImageBody(key, body) {
- this._updateImageProperty(key, 'body', body);
- }
-
- setImageInfo(key, info) {
- this._updateImageProperty(key, 'info', info);
- }
-
- setImageUsage(key, usage) {
- this._updateImageProperty(key, 'usage', usage);
- }
-}
-
-
diff --git a/src/app/organisms/invite-user/InviteUser.jsx b/src/app/organisms/invite-user/InviteUser.jsx
deleted file mode 100644
index 271c22a9..00000000
--- a/src/app/organisms/invite-user/InviteUser.jsx
+++ /dev/null
@@ -1,315 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './InviteUser.scss';
-
-import * as roomActions from '../../../client/action/room';
-import { hasDevices } from '../../../util/matrixUtil';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import IconButton from '../../atoms/button/IconButton';
-import Spinner from '../../atoms/spinner/Spinner';
-import Input from '../../atoms/input/Input';
-import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import RoomTile from '../../molecules/room-tile/RoomTile';
-
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import UserIC from '../../../../public/res/ic/outlined/user.svg';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { getDMRoomFor } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-
-function InviteUser({ isOpen, roomId, searchTerm, onRequestClose }) {
- const [isSearching, updateIsSearching] = useState(false);
- const [searchQuery, updateSearchQuery] = useState({});
- const [users, updateUsers] = useState([]);
- const useAuthentication = useMediaAuthentication();
-
- const [procUsers, updateProcUsers] = useState(new Set()); // proc stands for processing.
- const [procUserError, updateUserProcError] = useState(new Map());
-
- const [createdDM, updateCreatedDM] = useState(new Map());
- const [roomIdToUserId, updateRoomIdToUserId] = useState(new Map());
-
- const [invitedUserIds, updateInvitedUserIds] = useState(new Set());
-
- const usernameRef = useRef(null);
-
- const mx = useMatrixClient();
- const { navigateRoom } = useRoomNavigate();
-
- function getMapCopy(myMap) {
- const newMap = new Map();
- myMap.forEach((data, key) => {
- newMap.set(key, data);
- });
- return newMap;
- }
- function addUserToProc(userId) {
- procUsers.add(userId);
- updateProcUsers(new Set(Array.from(procUsers)));
- }
- function deleteUserFromProc(userId) {
- procUsers.delete(userId);
- updateProcUsers(new Set(Array.from(procUsers)));
- }
-
- function onDMCreated(newRoomId) {
- const myDMPartnerId = roomIdToUserId.get(newRoomId);
- if (typeof myDMPartnerId === 'undefined') return;
-
- createdDM.set(myDMPartnerId, newRoomId);
- roomIdToUserId.delete(newRoomId);
-
- deleteUserFromProc(myDMPartnerId);
- updateCreatedDM(getMapCopy(createdDM));
- updateRoomIdToUserId(getMapCopy(roomIdToUserId));
- }
-
- async function searchUser(username) {
- const inputUsername = username.trim();
- if (isSearching || inputUsername === '' || inputUsername === searchQuery.username) return;
- const isInputUserId = inputUsername[0] === '@' && inputUsername.indexOf(':') > 1;
- updateIsSearching(true);
- updateSearchQuery({ username: inputUsername });
-
- if (isInputUserId) {
- try {
- const result = await mx.getProfileInfo(inputUsername);
- updateUsers([
- {
- user_id: inputUsername,
- display_name: result.displayname,
- avatar_url: result.avatar_url,
- },
- ]);
- } catch (e) {
- updateSearchQuery({ error: `${inputUsername} not found!` });
- }
- } else {
- try {
- const result = await mx.searchUserDirectory({
- term: inputUsername,
- limit: 20,
- });
- if (result.results.length === 0) {
- updateSearchQuery({ error: `No matches found for "${inputUsername}"!` });
- updateIsSearching(false);
- return;
- }
- updateUsers(result.results);
- } catch (e) {
- updateSearchQuery({ error: 'Something went wrong!' });
- }
- }
- updateIsSearching(false);
- }
-
- async function createDM(userId) {
- if (mx.getUserId() === userId) return;
- const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
- if (dmRoomId) {
- navigateRoom(dmRoomId);
- onRequestClose();
- return;
- }
-
- try {
- addUserToProc(userId);
- procUserError.delete(userId);
- updateUserProcError(getMapCopy(procUserError));
-
- const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
- roomIdToUserId.set(result.room_id, userId);
- updateRoomIdToUserId(getMapCopy(roomIdToUserId));
- onDMCreated(result.room_id);
- } catch (e) {
- deleteUserFromProc(userId);
- if (typeof e.message === 'string') procUserError.set(userId, e.message);
- else procUserError.set(userId, 'Something went wrong!');
- updateUserProcError(getMapCopy(procUserError));
- }
- }
-
- async function inviteToRoom(userId) {
- if (typeof roomId === 'undefined') return;
- try {
- addUserToProc(userId);
- procUserError.delete(userId);
- updateUserProcError(getMapCopy(procUserError));
-
- await mx.invite(roomId, userId);
-
- invitedUserIds.add(userId);
- updateInvitedUserIds(new Set(Array.from(invitedUserIds)));
- deleteUserFromProc(userId);
- } catch (e) {
- deleteUserFromProc(userId);
- if (typeof e.message === 'string') procUserError.set(userId, e.message);
- else procUserError.set(userId, 'Something went wrong!');
- updateUserProcError(getMapCopy(procUserError));
- }
- }
-
- function renderUserList() {
- const renderOptions = (userId) => {
- const messageJSX = (message, isPositive) => (
-
-
- {message}
-
-
- );
-
- if (mx.getUserId() === userId) return null;
- if (procUsers.has(userId)) {
- return ;
- }
- if (createdDM.has(userId)) {
- // eslint-disable-next-line max-len
- return (
-
- );
- }
- if (invitedUserIds.has(userId)) {
- return messageJSX('Invited', true);
- }
- if (typeof roomId === 'string') {
- const member = mx.getRoom(roomId).getMember(userId);
- if (member !== null) {
- const userMembership = member.membership;
- switch (userMembership) {
- case 'join':
- return messageJSX('Already joined', true);
- case 'invite':
- return messageJSX('Already Invited', true);
- case 'ban':
- return messageJSX('Banned', false);
- default:
- }
- }
- }
- return typeof roomId === 'string' ? (
-
- ) : (
-
- );
- };
- const renderError = (userId) => {
- if (!procUserError.has(userId)) return null;
- return (
-
- {procUserError.get(userId)}
-
- );
- };
-
- return users.map((user) => {
- const userId = user.user_id;
- const name = typeof user.display_name === 'string' ? user.display_name : userId;
- return (
-
- );
- });
- }
-
- useEffect(() => {
- if (isOpen && typeof searchTerm === 'string') searchUser(searchTerm);
- return () => {
- updateIsSearching(false);
- updateSearchQuery({});
- updateUsers([]);
- updateProcUsers(new Set());
- updateUserProcError(new Map());
- updateCreatedDM(new Map());
- updateRoomIdToUserId(new Map());
- updateInvitedUserIds(new Set());
- };
- }, [isOpen, searchTerm]);
-
- return (
- }
- onRequestClose={onRequestClose}
- >
-
-
-
- {typeof searchQuery.username !== 'undefined' && isSearching && (
-
-
- {`Searching for user "${searchQuery.username}"...`}
-
- )}
- {typeof searchQuery.username !== 'undefined' && !isSearching && (
-
{`Search result for user "${searchQuery.username}"`}
- )}
- {searchQuery.error && (
-
- {searchQuery.error}
-
- )}
-
- {users.length !== 0 &&
{renderUserList()}
}
-
- {canIKick && (
-
- )}
- {canIBan && (
-
- )}
-
- );
-}
-ModerationTools.propTypes = {
- roomId: PropTypes.string.isRequired,
- userId: PropTypes.string.isRequired,
-};
-
-function SessionInfo({ userId }) {
- const [devices, setDevices] = useState(null);
- const [isVisible, setIsVisible] = useState(false);
- const mx = useMatrixClient();
-
- useEffect(() => {
- let isUnmounted = false;
-
- async function loadDevices() {
- try {
- const crypto = mx.getCrypto();
- const userToDevices = await crypto.getUserDeviceInfo([userId], true);
- const myDevices = Array.from(userToDevices.get(userId).values());
-
- if (isUnmounted) return;
- setDevices(myDevices);
- } catch {
- setDevices([]);
- }
- }
- loadDevices();
-
- return () => {
- isUnmounted = true;
- };
- }, [mx, userId]);
-
- function renderSessionChips() {
- if (!isVisible) return null;
- return (
-
- {devices === null && Loading sessions...}
- {devices?.length === 0 && No session found.}
- {devices !== null &&
- devices.map((device) => (
-
- ))}
-
- );
- }
-
- return (
-
-
- {renderSessionChips()}
-
- );
-}
-
-SessionInfo.propTypes = {
- userId: PropTypes.string.isRequired,
-};
-
-function ProfileFooter({ roomId, userId, onRequestClose }) {
- const [isCreatingDM, setIsCreatingDM] = useState(false);
- const [isIgnoring, setIsIgnoring] = useState(false);
- const mx = useMatrixClient();
- const [isUserIgnored, setIsUserIgnored] = useState(mx.isUserIgnored(userId));
-
- const isMountedRef = useRef(true);
- const { navigateRoom } = useRoomNavigate();
- const room = mx.getRoom(roomId);
- const member = room.getMember(userId);
- const isInvitable = member?.membership !== 'join' && member?.membership !== 'ban';
-
- const [isInviting, setIsInviting] = useState(false);
- const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
-
- const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
- const userPL = room.getMember(userId)?.powerLevel || 0;
- const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
-
- const canIKick =
- roomState?.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
-
- const isBanned = member?.membership === 'ban';
-
- const onCreated = (dmRoomId) => {
- if (isMountedRef.current === false) return;
- setIsCreatingDM(false);
- navigateRoom(dmRoomId);
- onRequestClose();
- };
-
- useEffect(() => {
- setIsUserIgnored(mx.isUserIgnored(userId));
- setIsIgnoring(false);
- setIsInviting(false);
- }, [mx, userId]);
-
- const openDM = async () => {
- // Check and open if user already have a DM with userId.
- const dmRoomId = getDMRoomFor(mx, userId)?.roomId;
- if (dmRoomId) {
- navigateRoom(dmRoomId);
- onRequestClose();
- return;
- }
-
- // Create new DM
- try {
- setIsCreatingDM(true);
- const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
- onCreated(result.room_id);
- } catch {
- if (isMountedRef.current === false) return;
- setIsCreatingDM(false);
- }
- };
-
- const toggleIgnore = async () => {
- const isIgnored = mx.getIgnoredUsers().includes(userId);
-
- try {
- setIsIgnoring(true);
- if (isIgnored) {
- await roomActions.unignore(mx, [userId]);
- } else {
- await roomActions.ignore(mx, [userId]);
- }
-
- if (isMountedRef.current === false) return;
- setIsUserIgnored(!isIgnored);
- setIsIgnoring(false);
- } catch {
- setIsIgnoring(false);
- }
- };
-
- const toggleInvite = async () => {
- try {
- setIsInviting(true);
- let isInviteSent = false;
- if (isInvited) await mx.kick(roomId, userId);
- else {
- await mx.invite(roomId, userId);
- isInviteSent = true;
- }
- if (isMountedRef.current === false) return;
- setIsInvited(isInviteSent);
- setIsInviting(false);
- } catch {
- setIsInviting(false);
- }
- };
-
- return (
-
-
- {isBanned && canIKick && (
-
- )}
- {(isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
-
- )}
-
-
- );
-}
-ProfileFooter.propTypes = {
- roomId: PropTypes.string.isRequired,
- userId: PropTypes.string.isRequired,
- onRequestClose: PropTypes.func.isRequired,
-};
-
-function useToggleDialog() {
- const [isOpen, setIsOpen] = useState(false);
- const [roomId, setRoomId] = useState(null);
- const [userId, setUserId] = useState(null);
-
- useEffect(() => {
- const loadProfile = (uId, rId) => {
- setIsOpen(true);
- setUserId(uId);
- setRoomId(rId);
- };
- navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
- return () => {
- navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
- };
- }, []);
-
- const closeDialog = () => setIsOpen(false);
-
- const afterClose = () => {
- setUserId(null);
- setRoomId(null);
- };
-
- return [isOpen, roomId, userId, closeDialog, afterClose];
-}
-
-function useRerenderOnProfileChange(roomId, userId) {
- const mx = useMatrixClient();
- const [, forceUpdate] = useForceUpdate();
- useEffect(() => {
- const handleProfileChange = (mEvent, member) => {
- if (
- mEvent.getRoomId() === roomId &&
- (member.userId === userId || member.userId === mx.getUserId())
- ) {
- forceUpdate();
- }
- };
- mx.on('RoomMember.powerLevel', handleProfileChange);
- mx.on('RoomMember.membership', handleProfileChange);
- return () => {
- mx.removeListener('RoomMember.powerLevel', handleProfileChange);
- mx.removeListener('RoomMember.membership', handleProfileChange);
- };
- }, [mx, roomId, userId]);
-}
-
-function ProfileViewer() {
- const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
- useRerenderOnProfileChange(roomId, userId);
- const useAuthentication = useMediaAuthentication();
-
- const mx = useMatrixClient();
- const room = mx.getRoom(roomId);
-
- const renderProfile = () => {
- const roomMember = room.getMember(userId);
- const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(mx, userId);
- const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
- const avatarUrl =
- avatarMxc && avatarMxc !== 'null'
- ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop', undefined, undefined, useAuthentication)
- : null;
-
- const powerLevel = roomMember?.powerLevel || 0;
- const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-
- const roomState = room.getLiveTimeline().getState(EventTimeline.FORWARDS);
- const canChangeRole =
- roomState?.maySendEvent('m.room.power_levels', mx.getUserId()) &&
- (powerLevel < myPowerLevel || userId === mx.getUserId());
-
- const handleChangePowerLevel = async (newPowerLevel) => {
- if (newPowerLevel === powerLevel) return;
- const SHARED_POWER_MSG =
- 'You will not be able to undo this change as you are promoting the user to have the same power level as yourself. Are you sure?';
- const DEMOTING_MYSELF_MSG =
- 'You will not be able to undo this change as you are demoting yourself. Are you sure?';
-
- const isSharedPower = newPowerLevel === myPowerLevel;
- const isDemotingMyself = userId === mx.getUserId();
- if (isSharedPower || isDemotingMyself) {
- const isConfirmed = await confirmDialog(
- 'Change power level',
- isSharedPower ? SHARED_POWER_MSG : DEMOTING_MYSELF_MSG,
- 'Change',
- 'caution'
- );
- if (!isConfirmed) return;
- roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
- } else {
- roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
- }
- };
-
- const handlePowerSelector = (e) => {
- openReusableContextMenu('bottom', getEventCords(e, '.btn-surface'), (closeMenu) => (
- {
- closeMenu();
- handleChangePowerLevel(pl);
- }}
- />
- ));
- };
-
- return (
-
-
-
-
-
- {username}
-
- {userId}
-
-
- Role
-
-
-
-
-
- {userId !== mx.getUserId() && (
-
- )}
-
-
-
-
-
- {Array.isArray(result?.chunk) && result.chunk.map(renderRoomSelector)}
-
-
-
-
- Type # for rooms, @ for DMs and * for spaces. Hotkey: Ctrl + k
-
-