mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-14 03:00:29 +03:00
Add option to create room/space
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
parent
2eee3736df
commit
79afc7649d
10 changed files with 365 additions and 208 deletions
|
|
@ -2,79 +2,87 @@ import React, { useState, useEffect, useRef } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import './CreateRoom.scss';
|
||||
|
||||
import { twemojify } from '../../../util/twemojify';
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import { isRoomAliasAvailable } from '../../../util/matrixUtil';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
import { selectRoom, openReusableContextMenu } from '../../../client/action/navigation';
|
||||
import * as roomActions from '../../../client/action/room';
|
||||
import { selectRoom } from '../../../client/action/navigation';
|
||||
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 PopupWindow from '../../molecules/popup-window/PopupWindow';
|
||||
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';
|
||||
|
||||
function CreateRoom({ isOpen, onRequestClose }) {
|
||||
const [isPublic, togglePublic] = useState(false);
|
||||
const [isEncrypted, toggleEncrypted] = useState(true);
|
||||
const [isValidAddress, updateIsValidAddress] = useState(null);
|
||||
const [isCreatingRoom, updateIsCreatingRoom] = useState(false);
|
||||
const [creatingError, updateCreatingError] = useState(null);
|
||||
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 [titleValue, updateTitleValue] = useState(undefined);
|
||||
const [topicValue, updateTopicValue] = useState(undefined);
|
||||
const [addressValue, updateAddressValue] = useState(undefined);
|
||||
const [isValidAddress, setIsValidAddress] = useState(null);
|
||||
const [addressValue, setAddressValue] = useState(undefined);
|
||||
const [roleIndex, setRoleIndex] = useState(0);
|
||||
|
||||
const addressRef = useRef(null);
|
||||
const topicRef = useRef(null);
|
||||
const nameRef = useRef(null);
|
||||
|
||||
const userId = initMatrix.matrixClient.getUserId();
|
||||
const hsString = userId.slice(userId.indexOf(':'));
|
||||
|
||||
function resetForm() {
|
||||
togglePublic(false);
|
||||
toggleEncrypted(true);
|
||||
updateIsValidAddress(null);
|
||||
updateIsCreatingRoom(false);
|
||||
updateCreatingError(null);
|
||||
updateTitleValue(undefined);
|
||||
updateTopicValue(undefined);
|
||||
updateAddressValue(undefined);
|
||||
setRoleIndex(0);
|
||||
}
|
||||
|
||||
const onCreated = (roomId) => {
|
||||
resetForm();
|
||||
selectRoom(roomId);
|
||||
onRequestClose();
|
||||
};
|
||||
const mx = initMatrix.matrixClient;
|
||||
const userHs = getIdServer(mx.getUserId());
|
||||
|
||||
useEffect(() => {
|
||||
const { roomList } = initMatrix;
|
||||
const onCreated = (roomId) => {
|
||||
setJoinRule(false);
|
||||
setIsEncrypted(true);
|
||||
setIsValidAddress(null);
|
||||
setIsCreatingRoom(false);
|
||||
setCreatingError(null);
|
||||
setAddressValue(undefined);
|
||||
setRoleIndex(0);
|
||||
|
||||
if (!mx.getRoom(roomId)?.isSpaceRoom()) {
|
||||
selectRoom(roomId);
|
||||
}
|
||||
onRequestClose();
|
||||
};
|
||||
roomList.on(cons.events.roomList.ROOM_CREATED, onCreated);
|
||||
return () => {
|
||||
roomList.removeListener(cons.events.roomList.ROOM_CREATED, onCreated);
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function createRoom() {
|
||||
const handleSubmit = async (evt) => {
|
||||
evt.preventDefault();
|
||||
const { target } = evt;
|
||||
|
||||
if (isCreatingRoom) return;
|
||||
updateIsCreatingRoom(true);
|
||||
updateCreatingError(null);
|
||||
const name = nameRef.current.value;
|
||||
let topic = topicRef.current.value;
|
||||
setIsCreatingRoom(true);
|
||||
setCreatingError(null);
|
||||
|
||||
const name = target.name.value;
|
||||
let topic = target.topic.value;
|
||||
if (topic.trim() === '') topic = undefined;
|
||||
let roomAlias;
|
||||
if (isPublic) {
|
||||
if (joinRule === 'public') {
|
||||
roomAlias = addressRef?.current?.value;
|
||||
if (roomAlias.trim() === '') roomAlias = undefined;
|
||||
}
|
||||
|
|
@ -82,115 +90,217 @@ function CreateRoom({ isOpen, onRequestClose }) {
|
|||
const powerLevel = roleIndex === 1 ? 101 : undefined;
|
||||
|
||||
try {
|
||||
await roomActions.create({
|
||||
name, topic, isPublic, roomAlias, isEncrypted, powerLevel,
|
||||
await roomActions.createRoom({
|
||||
name,
|
||||
topic,
|
||||
joinRule,
|
||||
alias: roomAlias,
|
||||
isEncrypted: (isSpace || joinRule === 'public') ? false : isEncrypted,
|
||||
powerLevel,
|
||||
isSpace,
|
||||
parentId,
|
||||
});
|
||||
} catch (e) {
|
||||
if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
|
||||
updateCreatingError('ERROR: Invalid characters in room address');
|
||||
updateIsValidAddress(false);
|
||||
setCreatingError('ERROR: Invalid characters in address');
|
||||
setIsValidAddress(false);
|
||||
} else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
|
||||
updateCreatingError('ERROR: Room address is already in use');
|
||||
updateIsValidAddress(false);
|
||||
} else updateCreatingError(e.message);
|
||||
updateIsCreatingRoom(false);
|
||||
setCreatingError('ERROR: This address is already in use');
|
||||
setIsValidAddress(false);
|
||||
} else setCreatingError(e.message);
|
||||
setIsCreatingRoom(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function validateAddress(e) {
|
||||
const validateAddress = (e) => {
|
||||
const myAddress = e.target.value;
|
||||
updateIsValidAddress(null);
|
||||
updateAddressValue(e.target.value);
|
||||
updateCreatingError(null);
|
||||
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}${hsString}`;
|
||||
const roomAddress = `#${roomAlias}:${userHs}`;
|
||||
|
||||
if (await isRoomAliasAvailable(roomAddress)) {
|
||||
updateIsValidAddress(true);
|
||||
setIsValidAddress(true);
|
||||
} else {
|
||||
updateIsValidAddress(false);
|
||||
setIsValidAddress(false);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
function handleTitleChange(e) {
|
||||
if (e.target.value.trim() === '') updateTitleValue(undefined);
|
||||
updateTitleValue(e.target.value);
|
||||
}
|
||||
function handleTopicChange(e) {
|
||||
if (e.target.value.trim() === '') updateTopicValue(undefined);
|
||||
updateTopicValue(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
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) => (
|
||||
<>
|
||||
<MenuHeader>Visibility (who can join)</MenuHeader>
|
||||
{
|
||||
joinRules.map((rule) => (
|
||||
<MenuItem
|
||||
key={rule}
|
||||
variant={rule === joinRule ? 'positive' : 'surface'}
|
||||
iconSrc={
|
||||
isSpace
|
||||
? jrSpaceIC[joinRules.indexOf(rule)]
|
||||
: jrRoomIC[joinRules.indexOf(rule)]
|
||||
}
|
||||
onClick={() => { closeMenu(); setJoinRule(rule); }}
|
||||
disabled={!parentId && rule === 'restricted'}
|
||||
>
|
||||
{ joinRuleText[joinRules.indexOf(rule)] }
|
||||
</MenuItem>
|
||||
))
|
||||
}
|
||||
</>
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<PopupWindow
|
||||
isOpen={isOpen}
|
||||
title="Create room"
|
||||
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
|
||||
onRequestClose={onRequestClose}
|
||||
>
|
||||
<div className="create-room">
|
||||
<form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
|
||||
<SettingTile
|
||||
title="Make room public"
|
||||
options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
|
||||
content={<Text variant="b3">Public room can be joined by anyone.</Text>}
|
||||
/>
|
||||
{isPublic && (
|
||||
<div>
|
||||
<Text className="create-room__address__label" variant="b2">Room address</Text>
|
||||
<div className="create-room__address">
|
||||
<Text variant="b1">#</Text>
|
||||
<Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required />
|
||||
<Text variant="b1">{hsString}</Text>
|
||||
</div>
|
||||
{isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
|
||||
</div>
|
||||
<div className="create-room">
|
||||
<form className="create-room__form" onSubmit={handleSubmit}>
|
||||
<SettingTile
|
||||
title="Visibility"
|
||||
options={(
|
||||
<Button onClick={handleJoinRule} iconSrc={ChevronBottomIC}>
|
||||
{joinRuleShortText[joinRules.indexOf(joinRule)]}
|
||||
</Button>
|
||||
)}
|
||||
{!isPublic && (
|
||||
<SettingTile
|
||||
title="Enable end-to-end encryption"
|
||||
options={<Toggle isActive={isEncrypted} onToggle={toggleEncrypted} />}
|
||||
content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
|
||||
content={<Text variant="b3">{`Select who can join this ${isSpace ? 'space' : 'room'}.`}</Text>}
|
||||
/>
|
||||
{joinRule === 'public' && (
|
||||
<div>
|
||||
<Text className="create-room__address__label" variant="b2">{isSpace ? 'Space address' : 'Room address'}</Text>
|
||||
<div className="create-room__address">
|
||||
<Text variant="b1">#</Text>
|
||||
<Input
|
||||
value={addressValue}
|
||||
onChange={validateAddress}
|
||||
state={(isValidAddress === false) ? 'error' : 'normal'}
|
||||
forwardRef={addressRef}
|
||||
placeholder="my_address"
|
||||
required
|
||||
/>
|
||||
<Text variant="b1">{`:${userHs}`}</Text>
|
||||
</div>
|
||||
{isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}:${userHs} is already in use`}</span></Text>}
|
||||
</div>
|
||||
)}
|
||||
{!isSpace && joinRule !== 'public' && (
|
||||
<SettingTile
|
||||
title="Enable end-to-end encryption"
|
||||
options={<Toggle isActive={isEncrypted} onToggle={setIsEncrypted} />}
|
||||
content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
|
||||
/>
|
||||
)}
|
||||
<SettingTile
|
||||
title="Select your role"
|
||||
options={(
|
||||
<SegmentControl
|
||||
selected={roleIndex}
|
||||
segments={[{ text: 'Admin' }, { text: 'Founder' }]}
|
||||
onSelect={setRoleIndex}
|
||||
/>
|
||||
)}
|
||||
<SettingTile
|
||||
title="Select your role"
|
||||
options={(
|
||||
<SegmentControl
|
||||
selected={roleIndex}
|
||||
segments={[{ text: 'Admin' }, { text: 'Founder' }]}
|
||||
onSelect={setRoleIndex}
|
||||
/>
|
||||
)}
|
||||
content={(
|
||||
<Text variant="b3">Override the default (100) power level.</Text>
|
||||
)}
|
||||
/>
|
||||
<Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
|
||||
<div className="create-room__name-wrapper">
|
||||
<Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
|
||||
<Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button>
|
||||
</div>
|
||||
{isCreatingRoom && (
|
||||
<div className="create-room__loading">
|
||||
<Spinner size="small" />
|
||||
<Text>Creating room...</Text>
|
||||
</div>
|
||||
content={(
|
||||
<Text variant="b3">Override the default (100) power level.</Text>
|
||||
)}
|
||||
{typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
|
||||
</form>
|
||||
</div>
|
||||
</PopupWindow>
|
||||
/>
|
||||
<Input name="topic" minHeight={174} resizable label="Topic (optional)" />
|
||||
<div className="create-room__name-wrapper">
|
||||
<Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />
|
||||
<Button
|
||||
disabled={isValidAddress === false || isCreatingRoom}
|
||||
iconSrc={isSpace ? SpacePlusIC : HashPlusIC}
|
||||
type="submit"
|
||||
variant="primary"
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
{isCreatingRoom && (
|
||||
<div className="create-room__loading">
|
||||
<Spinner size="small" />
|
||||
<Text>{`Creating ${isSpace ? 'space' : 'room'}...`}</Text>
|
||||
</div>
|
||||
)}
|
||||
{typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
CreateRoom.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
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 = initMatrix.matrixClient;
|
||||
const room = mx.getRoom(parentId);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
isOpen={create !== null}
|
||||
title={(
|
||||
<Text variant="s1" weight="medium" primary>
|
||||
{parentId ? twemojify(room.name) : 'Home'}
|
||||
<span style={{ color: 'var(--tc-surface-low)' }}>
|
||||
{` — create ${isSpace ? 'space' : 'room'}`}
|
||||
</span>
|
||||
</Text>
|
||||
)}
|
||||
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
|
||||
onRequestClose={onRequestClose}
|
||||
>
|
||||
{
|
||||
create
|
||||
? (
|
||||
<CreateRoomContent
|
||||
isSpace={isSpace}
|
||||
parentId={parentId}
|
||||
onRequestClose={onRequestClose}
|
||||
/>
|
||||
) : <div />
|
||||
}
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateRoom;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue