mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-18 13:10:29 +03:00
Renamed channels to rooms (#30)
This commit is contained in:
unknown
parent
b5dfc337ec
commit
705910d9e0
42 changed files with 291 additions and 291 deletions
165
src/app/organisms/create-room/CreateRoom.jsx
Normal file
165
src/app/organisms/create-room/CreateRoom.jsx
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './CreateRoom.scss';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import { isRoomAliasAvailable } from '../../../util/matrixUtil';
|
||||
import * as roomActions from '../../../client/action/room';
|
||||
|
||||
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 Input from '../../atoms/input/Input';
|
||||
import Spinner from '../../atoms/spinner/Spinner';
|
||||
import PopupWindow from '../../molecules/popup-window/PopupWindow';
|
||||
import SettingTile from '../../molecules/setting-tile/SettingTile';
|
||||
|
||||
import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.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);
|
||||
|
||||
const [titleValue, updateTitleValue] = useState(undefined);
|
||||
const [topicValue, updateTopicValue] = useState(undefined);
|
||||
const [addressValue, updateAddressValue] = useState(undefined);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function createRoom() {
|
||||
if (isCreatingRoom) return;
|
||||
updateIsCreatingRoom(true);
|
||||
updateCreatingError(null);
|
||||
const name = nameRef.current.value;
|
||||
let topic = topicRef.current.value;
|
||||
if (topic.trim() === '') topic = undefined;
|
||||
let roomAlias;
|
||||
if (isPublic) {
|
||||
roomAlias = addressRef?.current?.value;
|
||||
if (roomAlias.trim() === '') roomAlias = undefined;
|
||||
}
|
||||
|
||||
try {
|
||||
await roomActions.create({
|
||||
name, topic, isPublic, roomAlias, isEncrypted,
|
||||
});
|
||||
|
||||
resetForm();
|
||||
onRequestClose();
|
||||
} catch (e) {
|
||||
if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
|
||||
updateCreatingError('ERROR: Invalid characters in room address');
|
||||
updateIsValidAddress(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);
|
||||
}
|
||||
|
||||
function validateAddress(e) {
|
||||
const myAddress = e.target.value;
|
||||
updateIsValidAddress(null);
|
||||
updateAddressValue(e.target.value);
|
||||
updateCreatingError(null);
|
||||
|
||||
setTimeout(async () => {
|
||||
if (myAddress !== addressRef.current.value) return;
|
||||
const roomAlias = addressRef.current.value;
|
||||
if (roomAlias === '') return;
|
||||
const roomAddress = `#${roomAlias}${hsString}`;
|
||||
|
||||
if (await isRoomAliasAvailable(roomAddress)) {
|
||||
updateIsValidAddress(true);
|
||||
} else {
|
||||
updateIsValidAddress(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);
|
||||
}
|
||||
|
||||
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>
|
||||
)}
|
||||
{!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>}
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
)}
|
||||
{typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
|
||||
</form>
|
||||
</div>
|
||||
</PopupWindow>
|
||||
);
|
||||
}
|
||||
|
||||
CreateRoom.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onRequestClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default CreateRoom;
|
||||
103
src/app/organisms/create-room/CreateRoom.scss
Normal file
103
src/app/organisms/create-room/CreateRoom.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
.create-room {
|
||||
margin: 0 var(--sp-normal);
|
||||
margin-right: var(--sp-extra-tight);
|
||||
|
||||
&__form > * {
|
||||
margin-top: var(--sp-normal);
|
||||
&:first-child {
|
||||
margin-top: var(--sp-extra-tight);
|
||||
}
|
||||
}
|
||||
|
||||
&__address {
|
||||
display: flex;
|
||||
&__label {
|
||||
color: var(--tc-surface-low);
|
||||
margin-bottom: var(--sp-ultra-tight);
|
||||
}
|
||||
&__tip {
|
||||
margin-left: 46px;
|
||||
margin-top: var(--sp-ultra-tight);
|
||||
[dir=rtl] & {
|
||||
margin-left: 0;
|
||||
margin-right: 46px;
|
||||
}
|
||||
}
|
||||
& .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 {
|
||||
border-right-width: 0;
|
||||
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
|
||||
}
|
||||
& .text:last-child {
|
||||
border-left-width: 0;
|
||||
border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
|
||||
}
|
||||
[dir=rtl] & {
|
||||
& .text:first-child {
|
||||
border-left-width: 0;
|
||||
border-right-width: 1px;
|
||||
border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
|
||||
}
|
||||
& .text:last-child {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__name-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
& .input-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: var(--sp-normal);
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--sp-normal);
|
||||
}
|
||||
}
|
||||
& .btn-primary {
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&__loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& .text {
|
||||
margin-left: var(--sp-normal);
|
||||
[dir=rtl] & {
|
||||
margin-left: 0;
|
||||
margin-right: var(--sp-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__error {
|
||||
text-align: center;
|
||||
color: var(--bg-danger) !important;
|
||||
}
|
||||
|
||||
[dir=rtl] & {
|
||||
margin-right: var(--sp-normal);
|
||||
margin-left: var(--sp-extra-tight);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue