Renamed channels to rooms (#30)
This commit is contained in:
unknown
parent
b5dfc337ec
commit
705910d9e0
31 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ import Button from '../../atoms/button/Button';
|
|||
import IconButton from '../../atoms/button/IconButton';
|
||||
import Spinner from '../../atoms/spinner/Spinner';
|
||||
import PopupWindow from '../../molecules/popup-window/PopupWindow';
|
||||
import ChannelTile from '../../molecules/channel-tile/ChannelTile';
|
||||
import RoomTile from '../../molecules/room-tile/RoomTile';
|
||||
|
||||
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
||||
|
||||
|
|
@ -47,13 +47,13 @@ function InviteList({ isOpen, onRequestClose }) {
|
|||
};
|
||||
}, [procInvite]);
|
||||
|
||||
function renderChannelTile(roomId) {
|
||||
function renderRoomTile(roomId) {
|
||||
const myRoom = initMatrix.matrixClient.getRoom(roomId);
|
||||
const roomName = myRoom.name;
|
||||
let roomAlias = myRoom.getCanonicalAlias();
|
||||
if (roomAlias === null) roomAlias = myRoom.roomId;
|
||||
return (
|
||||
<ChannelTile
|
||||
<RoomTile
|
||||
key={myRoom.roomId}
|
||||
name={roomName}
|
||||
avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
|
||||
|
|
@ -91,7 +91,7 @@ function InviteList({ isOpen, onRequestClose }) {
|
|||
const myRoom = initMatrix.matrixClient.getRoom(roomId);
|
||||
const roomName = myRoom.name;
|
||||
return (
|
||||
<ChannelTile
|
||||
<RoomTile
|
||||
key={myRoom.roomId}
|
||||
name={roomName}
|
||||
id={myRoom.getDMInviter()}
|
||||
|
|
@ -114,14 +114,14 @@ function InviteList({ isOpen, onRequestClose }) {
|
|||
<Text variant="b3">Spaces</Text>
|
||||
</div>
|
||||
)}
|
||||
{ Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) }
|
||||
{ Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
|
||||
|
||||
{ initMatrix.roomList.inviteRooms.size !== 0 && (
|
||||
<div className="invites-content__subheading">
|
||||
<Text variant="b3">Channels</Text>
|
||||
<Text variant="b3">Rooms</Text>
|
||||
</div>
|
||||
)}
|
||||
{ Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) }
|
||||
{ Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
|
||||
</div>
|
||||
</PopupWindow>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& .channel-tile {
|
||||
& .room-tile {
|
||||
margin-top: var(--sp-normal);
|
||||
&__options {
|
||||
align-self: flex-end;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ 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 ChannelTile from '../../molecules/channel-tile/ChannelTile';
|
||||
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';
|
||||
|
|
@ -188,7 +188,7 @@ function InviteUser({
|
|||
const userId = user.user_id;
|
||||
const name = typeof user.display_name === 'string' ? user.display_name : userId;
|
||||
return (
|
||||
<ChannelTile
|
||||
<RoomTile
|
||||
key={userId}
|
||||
avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
|
||||
name={name}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
border-top: 1px solid var(--bg-surface-border);
|
||||
}
|
||||
|
||||
& .channel-tile {
|
||||
& .room-tile {
|
||||
margin-top: var(--sp-normal);
|
||||
&__options {
|
||||
align-self: flex-end;
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ function Drawer() {
|
|||
<DrawerHeader activeTab={activeTab} />
|
||||
<div className="drawer__content-wrapper">
|
||||
<DrawerBradcrumb />
|
||||
<div className="channels__wrapper">
|
||||
<div className="rooms__wrapper">
|
||||
<ScrollView autoHide>
|
||||
<div className="channels-container">
|
||||
<div className="rooms-container">
|
||||
{
|
||||
activeTab === 'home'
|
||||
? <Home />
|
||||
|
|
|
|||
|
|
@ -28,14 +28,14 @@
|
|||
display: none;
|
||||
height: var(--header-height);
|
||||
}
|
||||
.channels__wrapper {
|
||||
.rooms__wrapper {
|
||||
@extend .drawer-flexItem;
|
||||
}
|
||||
|
||||
.channels-container {
|
||||
.rooms-container {
|
||||
padding-bottom: var(--sp-extra-loose);
|
||||
|
||||
& > .channel-selector {
|
||||
& > .room-selector {
|
||||
width: calc(100% - var(--sp-extra-tight));
|
||||
margin-left: auto;
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
}
|
||||
|
||||
& > .channel-selector:first-child {
|
||||
& > .room-selector:first-child {
|
||||
margin-top: var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
openPublicChannels, openCreateChannel, openInviteUser,
|
||||
openPublicRooms, openCreateRoom, openInviteUser,
|
||||
} from '../../../client/action/navigation';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
|
|
@ -26,22 +26,22 @@ function DrawerHeader({ activeTab }) {
|
|||
<ContextMenu
|
||||
content={(hideMenu) => (
|
||||
<>
|
||||
<MenuHeader>Add channel</MenuHeader>
|
||||
<MenuHeader>Add room</MenuHeader>
|
||||
<MenuItem
|
||||
iconSrc={HashPlusIC}
|
||||
onClick={() => { hideMenu(); openCreateChannel(); }}
|
||||
onClick={() => { hideMenu(); openCreateRoom(); }}
|
||||
>
|
||||
Create new channel
|
||||
Create new room
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
iconSrc={HashSearchIC}
|
||||
onClick={() => { hideMenu(); openPublicChannels(); }}
|
||||
onClick={() => { hideMenu(); openPublicRooms(); }}
|
||||
>
|
||||
Add Public channel
|
||||
Add public room
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
|
||||
render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
|
||||
/>
|
||||
)}
|
||||
{/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ function Home() {
|
|||
/>
|
||||
))}
|
||||
|
||||
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
|
||||
{ roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
|
||||
{ roomIds.map((id) => (
|
||||
<Selector
|
||||
key={id}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { doesRoomHaveUnread } from '../../../util/matrixUtil';
|
|||
import { selectRoom } from '../../../client/action/navigation';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
|
||||
import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
|
||||
import RoomSelector from '../../molecules/room-selector/RoomSelector';
|
||||
|
||||
import HashIC from '../../../../public/res/ic/outlined/hash.svg';
|
||||
import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
|
||||
|
|
@ -39,7 +39,7 @@ function Selector({ roomId, isDM, drawerPostie }) {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<ChannelSelector
|
||||
<RoomSelector
|
||||
key={roomId}
|
||||
name={room.name}
|
||||
roomId={roomId}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import cons from '../../../client/state/cons';
|
|||
import colorMXID from '../../../util/colorMXID';
|
||||
import logout from '../../../client/action/logout';
|
||||
import {
|
||||
changeTab, openInviteList, openPublicChannels, openSettings,
|
||||
changeTab, openInviteList, openPublicRooms, openSettings,
|
||||
} from '../../../client/action/navigation';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
|
||||
|
|
@ -92,8 +92,8 @@ function SideBar() {
|
|||
<div className="scrollable-content">
|
||||
<div className="featured-container">
|
||||
<SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
|
||||
<SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
|
||||
<SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
|
||||
<SidebarAvatar active={activeTab === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
|
||||
<SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
|
||||
</div>
|
||||
<div className="sidebar-divider" />
|
||||
<div className="space-container" />
|
||||
|
|
|
|||
287
src/app/organisms/public-rooms/PublicRooms.jsx
Normal file
287
src/app/organisms/public-rooms/PublicRooms.jsx
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './PublicRooms.scss';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import cons from '../../../client/state/cons';
|
||||
import { selectRoom } from '../../../client/action/navigation';
|
||||
import * as roomActions from '../../../client/action/room';
|
||||
|
||||
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 HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
|
||||
|
||||
const SEARCH_LIMIT = 20;
|
||||
|
||||
function TryJoinWithAlias({ alias, onRequestClose }) {
|
||||
const [status, setStatus] = useState({
|
||||
isJoining: false,
|
||||
error: null,
|
||||
roomId: null,
|
||||
tempRoomId: null,
|
||||
});
|
||||
function handleOnRoomAdded(roomId) {
|
||||
if (status.tempRoomId !== null && status.tempRoomId !== roomId) return;
|
||||
setStatus({
|
||||
isJoining: false, error: null, roomId, tempRoomId: null,
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
|
||||
return () => {
|
||||
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
async function joinWithAlias() {
|
||||
setStatus({
|
||||
isJoining: true, error: null, roomId: null, tempRoomId: null,
|
||||
});
|
||||
try {
|
||||
const roomId = await roomActions.join(alias, false);
|
||||
setStatus({
|
||||
isJoining: true, error: null, roomId: null, tempRoomId: roomId,
|
||||
});
|
||||
} catch (e) {
|
||||
setStatus({
|
||||
isJoining: false,
|
||||
error: `Unable to join ${alias}. Either room is private or doesn't exist.`,
|
||||
roomId: null,
|
||||
tempRoomId: null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="try-join-with-alias">
|
||||
{status.roomId === null && !status.isJoining && status.error === null && (
|
||||
<Button onClick={() => joinWithAlias()}>{`Try joining ${alias}`}</Button>
|
||||
)}
|
||||
{status.isJoining && (
|
||||
<>
|
||||
<Spinner size="small" />
|
||||
<Text>{`Joining ${alias}...`}</Text>
|
||||
</>
|
||||
)}
|
||||
{status.roomId !== null && (
|
||||
<Button onClick={() => { onRequestClose(); selectRoom(status.roomId); }}>Open</Button>
|
||||
)}
|
||||
{status.error !== null && <Text variant="b2"><span style={{ color: 'var(--bg-danger)' }}>{status.error}</span></Text>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
TryJoinWithAlias.propTypes = {
|
||||
alias: PropTypes.string.isRequired,
|
||||
onRequestClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
|
||||
const [isSearching, updateIsSearching] = useState(false);
|
||||
const [isViewMore, updateIsViewMore] = useState(false);
|
||||
const [publicRooms, updatePublicRooms] = useState([]);
|
||||
const [nextBatch, updateNextBatch] = useState(undefined);
|
||||
const [searchQuery, updateSearchQuery] = useState({});
|
||||
const [joiningRooms, updateJoiningRooms] = useState(new Set());
|
||||
|
||||
const roomNameRef = useRef(null);
|
||||
const hsRef = useRef(null);
|
||||
const userId = initMatrix.matrixClient.getUserId();
|
||||
|
||||
async function searchRooms(viewMore) {
|
||||
let inputRoomName = roomNameRef?.current?.value || searchTerm;
|
||||
let isInputAlias = false;
|
||||
if (typeof inputRoomName === 'string') {
|
||||
isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
|
||||
}
|
||||
const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null;
|
||||
let inputHs = hsFromAlias || hsRef?.current?.value;
|
||||
|
||||
if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
|
||||
if (typeof inputRoomName !== 'string') inputRoomName = '';
|
||||
|
||||
if (isSearching) return;
|
||||
if (viewMore !== true
|
||||
&& inputRoomName === searchQuery.name
|
||||
&& inputHs === searchQuery.homeserver
|
||||
) return;
|
||||
|
||||
updateSearchQuery({
|
||||
name: inputRoomName,
|
||||
homeserver: inputHs,
|
||||
});
|
||||
if (isViewMore !== viewMore) updateIsViewMore(viewMore);
|
||||
updateIsSearching(true);
|
||||
|
||||
try {
|
||||
const result = await initMatrix.matrixClient.publicRooms({
|
||||
server: inputHs,
|
||||
limit: SEARCH_LIMIT,
|
||||
since: viewMore ? nextBatch : undefined,
|
||||
include_all_networks: true,
|
||||
filter: {
|
||||
generic_search_term: inputRoomName,
|
||||
},
|
||||
});
|
||||
|
||||
const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
|
||||
updatePublicRooms(totalRooms);
|
||||
updateNextBatch(result.next_batch);
|
||||
updateIsSearching(false);
|
||||
updateIsViewMore(false);
|
||||
if (totalRooms.length === 0) {
|
||||
updateSearchQuery({
|
||||
error: `No result found for "${inputRoomName}" on ${inputHs}`,
|
||||
alias: isInputAlias ? inputRoomName : null,
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
updatePublicRooms([]);
|
||||
updateSearchQuery({
|
||||
error: 'Something went wrong!',
|
||||
alias: isInputAlias ? inputRoomName : null,
|
||||
});
|
||||
updateIsSearching(false);
|
||||
updateNextBatch(undefined);
|
||||
updateIsViewMore(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) searchRooms();
|
||||
}, [isOpen]);
|
||||
|
||||
function handleOnRoomAdded(roomId) {
|
||||
if (joiningRooms.has(roomId)) {
|
||||
joiningRooms.delete(roomId);
|
||||
updateJoiningRooms(new Set(Array.from(joiningRooms)));
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
|
||||
return () => {
|
||||
initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
|
||||
};
|
||||
}, [joiningRooms]);
|
||||
|
||||
function handleViewRoom(roomId) {
|
||||
selectRoom(roomId);
|
||||
onRequestClose();
|
||||
}
|
||||
|
||||
function joinRoom(roomIdOrAlias) {
|
||||
joiningRooms.add(roomIdOrAlias);
|
||||
updateJoiningRooms(new Set(Array.from(joiningRooms)));
|
||||
roomActions.join(roomIdOrAlias, false);
|
||||
}
|
||||
|
||||
function renderRoomList(rooms) {
|
||||
return rooms.map((room) => {
|
||||
const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
|
||||
const name = typeof room.name === 'string' ? room.name : alias;
|
||||
const isJoined = initMatrix.roomList.rooms.has(room.room_id);
|
||||
return (
|
||||
<RoomTile
|
||||
key={room.room_id}
|
||||
avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
|
||||
name={name}
|
||||
id={alias}
|
||||
memberCount={room.num_joined_members}
|
||||
desc={typeof room.topic === 'string' ? room.topic : null}
|
||||
options={(
|
||||
<>
|
||||
{isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
|
||||
{!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<PopupWindow
|
||||
isOpen={isOpen}
|
||||
title="Public rooms"
|
||||
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
|
||||
onRequestClose={onRequestClose}
|
||||
>
|
||||
<div className="public-rooms">
|
||||
<form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
|
||||
<div className="public-rooms__input-wrapper">
|
||||
<Input value={searchTerm} forwardRef={roomNameRef} label="Room name or alias" />
|
||||
<Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
|
||||
</div>
|
||||
<Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
|
||||
</form>
|
||||
<div className="public-rooms__search-status">
|
||||
{
|
||||
typeof searchQuery.name !== 'undefined' && isSearching && (
|
||||
searchQuery.name === ''
|
||||
? (
|
||||
<div className="flex--center">
|
||||
<Spinner size="small" />
|
||||
<Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className="flex--center">
|
||||
<Spinner size="small" />
|
||||
<Text variant="b2">{`Searching for "${searchQuery.name}" on ${searchQuery.homeserver}...`}</Text>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
typeof searchQuery.name !== 'undefined' && !isSearching && (
|
||||
searchQuery.name === ''
|
||||
? <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
|
||||
: <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
|
||||
)
|
||||
}
|
||||
{ searchQuery.error && (
|
||||
<>
|
||||
<Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
|
||||
{typeof searchQuery.alias === 'string' && (
|
||||
<TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{ publicRooms.length !== 0 && (
|
||||
<div className="public-rooms__content">
|
||||
{ renderRoomList(publicRooms) }
|
||||
</div>
|
||||
)}
|
||||
{ publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
|
||||
<div className="public-rooms__view-more">
|
||||
{ isViewMore !== true && (
|
||||
<Button onClick={() => searchRooms(true)}>View more</Button>
|
||||
)}
|
||||
{ isViewMore && <Spinner /> }
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopupWindow>
|
||||
);
|
||||
}
|
||||
|
||||
PublicRooms.defaultProps = {
|
||||
searchTerm: undefined,
|
||||
};
|
||||
|
||||
PublicRooms.propTypes = {
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
searchTerm: PropTypes.string,
|
||||
onRequestClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default PublicRooms;
|
||||
100
src/app/organisms/public-rooms/PublicRooms.scss
Normal file
100
src/app/organisms/public-rooms/PublicRooms.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
.public-rooms {
|
||||
margin: 0 var(--sp-normal);
|
||||
margin-right: var(--sp-extra-tight);
|
||||
margin-top: var(--sp-extra-tight);
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
& .btn-primary {
|
||||
padding: {
|
||||
top: 11px;
|
||||
bottom: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__input-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
margin-right: var(--sp-normal);
|
||||
[dir=rtl] & {
|
||||
margin-right: 0;
|
||||
margin-left: var(--sp-normal);
|
||||
}
|
||||
|
||||
& > div:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
& .input {
|
||||
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
|
||||
[dir=rtl] & {
|
||||
border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > div:last-child .input {
|
||||
width: 120px;
|
||||
border-left-width: 0;
|
||||
border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
|
||||
[dir=rtl] & {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 0;
|
||||
border-radius: var(--bo-radius) 0 0 var(--bo-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__search-status {
|
||||
margin-top: var(--sp-extra-loose);
|
||||
margin-bottom: var(--sp-tight);
|
||||
& .donut-spinner {
|
||||
margin: 0 var(--sp-tight);
|
||||
}
|
||||
|
||||
.try-join-with-alias {
|
||||
margin-top: var(--sp-normal);
|
||||
}
|
||||
}
|
||||
&__search-error {
|
||||
color: var(--bg-danger);
|
||||
}
|
||||
&__content {
|
||||
border-top: 1px solid var(--bg-surface-border);
|
||||
}
|
||||
&__view-more {
|
||||
margin-top: var(--sp-loose);
|
||||
margin-left: calc(var(--av-normal) + var(--sp-normal));
|
||||
[dir=rtl] & {
|
||||
margin-left: 0;
|
||||
margin-right: calc(var(--av-normal) + var(--sp-normal));
|
||||
}
|
||||
}
|
||||
|
||||
& .room-tile {
|
||||
margin-top: var(--sp-normal);
|
||||
&__options {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
[dir=rtl] & {
|
||||
margin: {
|
||||
left: var(--sp-extra-tight);
|
||||
right: var(--sp-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.try-join-with-alias {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& >.text:nth-child(2) {
|
||||
margin: 0 var(--sp-normal);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,17 +4,17 @@ import cons from '../../../client/state/cons';
|
|||
import navigation from '../../../client/state/navigation';
|
||||
|
||||
import InviteList from '../invite-list/InviteList';
|
||||
import PublicChannels from '../public-channels/PublicChannels';
|
||||
import CreateChannel from '../create-channel/CreateChannel';
|
||||
import PublicRooms from '../public-rooms/PublicRooms';
|
||||
import CreateRoom from '../create-room/CreateRoom';
|
||||
import InviteUser from '../invite-user/InviteUser';
|
||||
import Settings from '../settings/Settings';
|
||||
|
||||
function Windows() {
|
||||
const [isInviteList, changeInviteList] = useState(false);
|
||||
const [publicChannels, changePublicChannels] = useState({
|
||||
const [publicRooms, changePublicRooms] = useState({
|
||||
isOpen: false, searchTerm: undefined,
|
||||
});
|
||||
const [isCreateChannel, changeCreateChannel] = useState(false);
|
||||
const [isCreateRoom, changeCreateRoom] = useState(false);
|
||||
const [inviteUser, changeInviteUser] = useState({
|
||||
isOpen: false, roomId: undefined, term: undefined,
|
||||
});
|
||||
|
|
@ -23,14 +23,14 @@ function Windows() {
|
|||
function openInviteList() {
|
||||
changeInviteList(true);
|
||||
}
|
||||
function openPublicChannels(searchTerm) {
|
||||
changePublicChannels({
|
||||
function openPublicRooms(searchTerm) {
|
||||
changePublicRooms({
|
||||
isOpen: true,
|
||||
searchTerm,
|
||||
});
|
||||
}
|
||||
function openCreateChannel() {
|
||||
changeCreateChannel(true);
|
||||
function openCreateRoom() {
|
||||
changeCreateRoom(true);
|
||||
}
|
||||
function openInviteUser(roomId, searchTerm) {
|
||||
changeInviteUser({
|
||||
|
|
@ -45,14 +45,14 @@ function Windows() {
|
|||
|
||||
useEffect(() => {
|
||||
navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
|
||||
navigation.on(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
|
||||
navigation.on(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
|
||||
navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
|
||||
navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
|
||||
navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
|
||||
navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
|
||||
return () => {
|
||||
navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
|
||||
navigation.removeListener(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
|
||||
navigation.removeListener(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
|
||||
navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
|
||||
navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
|
||||
navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
|
||||
navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
|
||||
};
|
||||
|
|
@ -64,14 +64,14 @@ function Windows() {
|
|||
isOpen={isInviteList}
|
||||
onRequestClose={() => changeInviteList(false)}
|
||||
/>
|
||||
<PublicChannels
|
||||
isOpen={publicChannels.isOpen}
|
||||
searchTerm={publicChannels.searchTerm}
|
||||
onRequestClose={() => changePublicChannels({ isOpen: false, searchTerm: undefined })}
|
||||
<PublicRooms
|
||||
isOpen={publicRooms.isOpen}
|
||||
searchTerm={publicRooms.searchTerm}
|
||||
onRequestClose={() => changePublicRooms({ isOpen: false, searchTerm: undefined })}
|
||||
/>
|
||||
<CreateChannel
|
||||
isOpen={isCreateChannel}
|
||||
onRequestClose={() => changeCreateChannel(false)}
|
||||
<CreateRoom
|
||||
isOpen={isCreateRoom}
|
||||
onRequestClose={() => changeCreateRoom(false)}
|
||||
/>
|
||||
<InviteUser
|
||||
isOpen={inviteUser.isOpen}
|
||||
|
|
|
|||
138
src/app/organisms/room/PeopleDrawer.jsx
Normal file
138
src/app/organisms/room/PeopleDrawer.jsx
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './PeopleDrawer.scss';
|
||||
|
||||
import initMatrix from '../../../client/initMatrix';
|
||||
import { getUsernameOfRoomMember } from '../../../util/matrixUtil';
|
||||
import colorMXID from '../../../util/colorMXID';
|
||||
import { openInviteUser } from '../../../client/action/navigation';
|
||||
|
||||
import Text from '../../atoms/text/Text';
|
||||
import Header, { TitleWrapper } from '../../atoms/header/Header';
|
||||
import IconButton from '../../atoms/button/IconButton';
|
||||
import Button from '../../atoms/button/Button';
|
||||
import ScrollView from '../../atoms/scroll/ScrollView';
|
||||
import Input from '../../atoms/input/Input';
|
||||
import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
|
||||
|
||||
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
|
||||
|
||||
function getPowerLabel(powerLevel) {
|
||||
switch (powerLevel) {
|
||||
case 100:
|
||||
return 'Admin';
|
||||
case 50:
|
||||
return 'Mod';
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
function compare(m1, m2) {
|
||||
let aName = m1.name;
|
||||
let bName = m2.name;
|
||||
|
||||
// remove "#" from the room name
|
||||
// To ignore it in sorting
|
||||
aName = aName.replaceAll('#', '');
|
||||
bName = bName.replaceAll('#', '');
|
||||
|
||||
if (aName.toLowerCase() < bName.toLowerCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (aName.toLowerCase() > bName.toLowerCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
function sortByPowerLevel(m1, m2) {
|
||||
let pl1 = String(m1.powerLevel);
|
||||
let pl2 = String(m2.powerLevel);
|
||||
|
||||
if (pl1 === '100') pl1 = '90.9';
|
||||
if (pl2 === '100') pl2 = '90.9';
|
||||
|
||||
if (pl1.toLowerCase() > pl2.toLowerCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (pl1.toLowerCase() < pl2.toLowerCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function PeopleDrawer({ roomId }) {
|
||||
const PER_PAGE_MEMBER = 50;
|
||||
const room = initMatrix.matrixClient.getRoom(roomId);
|
||||
const totalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
|
||||
const [memberList, updateMemberList] = useState([]);
|
||||
let isRoomChanged = false;
|
||||
|
||||
function loadMorePeople() {
|
||||
updateMemberList(totalMemberList.slice(0, memberList.length + PER_PAGE_MEMBER));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
updateMemberList(totalMemberList.slice(0, PER_PAGE_MEMBER));
|
||||
room.loadMembersIfNeeded().then(() => {
|
||||
if (isRoomChanged) return;
|
||||
const newTotalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
|
||||
updateMemberList(newTotalMemberList.slice(0, PER_PAGE_MEMBER));
|
||||
});
|
||||
|
||||
return () => {
|
||||
isRoomChanged = true;
|
||||
};
|
||||
}, [roomId]);
|
||||
|
||||
return (
|
||||
<div className="people-drawer">
|
||||
<Header>
|
||||
<TitleWrapper>
|
||||
<Text variant="s1">
|
||||
People
|
||||
<Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
|
||||
</Text>
|
||||
</TitleWrapper>
|
||||
<IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} />
|
||||
</Header>
|
||||
<div className="people-drawer__content-wrapper">
|
||||
<div className="people-drawer__scrollable">
|
||||
<ScrollView autoHide>
|
||||
<div className="people-drawer__content">
|
||||
{
|
||||
memberList.map((member) => (
|
||||
<PeopleSelector
|
||||
key={member.userId}
|
||||
onClick={() => alert('Viewing profile is yet to be implemented')}
|
||||
avatarSrc={member.getAvatarUrl(initMatrix.matrixClient.baseUrl, 24, 24, 'crop')}
|
||||
name={getUsernameOfRoomMember(member)}
|
||||
color={colorMXID(member.userId)}
|
||||
peopleRole={getPowerLabel(member.powerLevel)}
|
||||
/>
|
||||
))
|
||||
}
|
||||
<div className="people-drawer__load-more">
|
||||
{
|
||||
memberList.length !== totalMemberList.length && (
|
||||
<Button onClick={loadMorePeople}>View more</Button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollView>
|
||||
</div>
|
||||
<div className="people-drawer__sticky">
|
||||
<form onSubmit={(e) => e.preventDefault()} className="people-search">
|
||||
<Input type="text" placeholder="Search" required />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
PeopleDrawer.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default PeopleDrawer;
|
||||
75
src/app/organisms/room/PeopleDrawer.scss
Normal file
75
src/app/organisms/room/PeopleDrawer.scss
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
.people-drawer-flexBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.people-drawer-flexItem {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.people-drawer {
|
||||
@extend .people-drawer-flexBox;
|
||||
width: var(--people-drawer-width);
|
||||
background-color: var(--bg-surface-low);
|
||||
border-left: 1px solid var(--bg-surface-border);
|
||||
|
||||
[dir=rtl] & {
|
||||
border: {
|
||||
left: none;
|
||||
right: 1px solid var(--bg-surface-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&__member-count {
|
||||
color: var(--tc-surface-low);
|
||||
}
|
||||
|
||||
&__content-wrapper {
|
||||
@extend .people-drawer-flexItem;
|
||||
@extend .people-drawer-flexBox;
|
||||
}
|
||||
|
||||
&__scrollable {
|
||||
@extend .people-drawer-flexItem;
|
||||
}
|
||||
|
||||
&__sticky {
|
||||
display: none;
|
||||
|
||||
& .people-search {
|
||||
min-height: 48px;
|
||||
|
||||
margin: 0 var(--sp-normal);
|
||||
|
||||
position: relative;
|
||||
bottom: var(--sp-normal);
|
||||
|
||||
& .input {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.people-drawer__content {
|
||||
padding-top: var(--sp-extra-tight);
|
||||
padding-bottom: calc( var(--sp-extra-tight) + var(--sp-normal));
|
||||
}
|
||||
.people-drawer__load-more {
|
||||
padding: var(--sp-normal);
|
||||
padding: {
|
||||
bottom: 0;
|
||||
right: var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
[dir=rtl] & {
|
||||
padding-right: var(--sp-normal);
|
||||
padding-left: var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
& .btn-surface {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
40
src/app/organisms/room/Room.jsx
Normal file
40
src/app/organisms/room/Room.jsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import './Room.scss';
|
||||
|
||||
import cons from '../../../client/state/cons';
|
||||
import navigation from '../../../client/state/navigation';
|
||||
|
||||
import Welcome from '../welcome/Welcome';
|
||||
import RoomView from './RoomView';
|
||||
import PeopleDrawer from './PeopleDrawer';
|
||||
|
||||
function Room() {
|
||||
const [selectedRoomId, changeSelectedRoomId] = useState(null);
|
||||
const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
|
||||
useEffect(() => {
|
||||
const handleRoomSelected = (roomId) => {
|
||||
changeSelectedRoomId(roomId);
|
||||
};
|
||||
const handleDrawerToggling = (visiblity) => {
|
||||
toggleDrawerVisiblity(visiblity);
|
||||
};
|
||||
navigation.on(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
|
||||
navigation.on(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
|
||||
|
||||
return () => {
|
||||
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, handleRoomSelected);
|
||||
navigation.removeListener(cons.events.navigation.PEOPLE_DRAWER_TOGGLED, handleDrawerToggling);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (selectedRoomId === null) return <Welcome />;
|
||||
|
||||
return (
|
||||
<div className="room-container">
|
||||
<RoomView roomId={selectedRoomId} />
|
||||
{ isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Room;
|
||||
4
src/app/organisms/room/Room.scss
Normal file
4
src/app/organisms/room/Room.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.room-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
150
src/app/organisms/room/RoomView.jsx
Normal file
150
src/app/organisms/room/RoomView.jsx
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RoomView.scss';
|
||||
|
||||
import EventEmitter from 'events';
|
||||
|
||||
import RoomTimeline from '../../../client/state/RoomTimeline';
|
||||
|
||||
import ScrollView from '../../atoms/scroll/ScrollView';
|
||||
|
||||
import RoomViewHeader from './RoomViewHeader';
|
||||
import RoomViewContent from './RoomViewContent';
|
||||
import RoomViewFloating from './RoomViewFloating';
|
||||
import RoomViewInput from './RoomViewInput';
|
||||
import RoomViewCmdBar from './RoomViewCmdBar';
|
||||
|
||||
import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
|
||||
|
||||
const viewEvent = new EventEmitter();
|
||||
|
||||
let lastScrollTop = 0;
|
||||
let lastScrollHeight = 0;
|
||||
let isReachedBottom = true;
|
||||
let isReachedTop = false;
|
||||
function RoomView({ roomId }) {
|
||||
const [roomTimeline, updateRoomTimeline] = useState(null);
|
||||
const timelineSVRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
roomTimeline?.removeInternalListeners();
|
||||
updateRoomTimeline(new RoomTimeline(roomId));
|
||||
isReachedBottom = true;
|
||||
isReachedTop = false;
|
||||
}, [roomId]);
|
||||
|
||||
const timelineScroll = {
|
||||
reachBottom() {
|
||||
scrollToBottom(timelineSVRef);
|
||||
},
|
||||
autoReachBottom() {
|
||||
autoScrollToBottom(timelineSVRef);
|
||||
},
|
||||
tryRestoringScroll() {
|
||||
const sv = timelineSVRef.current;
|
||||
const { scrollHeight } = sv;
|
||||
|
||||
if (lastScrollHeight === scrollHeight) return;
|
||||
|
||||
if (lastScrollHeight < scrollHeight) {
|
||||
sv.scrollTop = lastScrollTop + (scrollHeight - lastScrollHeight);
|
||||
} else {
|
||||
timelineScroll.reachBottom();
|
||||
}
|
||||
},
|
||||
enableSmoothScroll() {
|
||||
timelineSVRef.current.style.scrollBehavior = 'smooth';
|
||||
},
|
||||
disableSmoothScroll() {
|
||||
timelineSVRef.current.style.scrollBehavior = 'auto';
|
||||
},
|
||||
isScrollable() {
|
||||
const oHeight = timelineSVRef.current.offsetHeight;
|
||||
const sHeight = timelineSVRef.current.scrollHeight;
|
||||
if (sHeight > oHeight) return true;
|
||||
return false;
|
||||
},
|
||||
};
|
||||
|
||||
function onTimelineScroll(e) {
|
||||
const { scrollTop, scrollHeight, offsetHeight } = e.target;
|
||||
const scrollBottom = scrollTop + offsetHeight;
|
||||
lastScrollTop = scrollTop;
|
||||
lastScrollHeight = scrollHeight;
|
||||
|
||||
const PLACEHOLDER_HEIGHT = 96;
|
||||
const PLACEHOLDER_COUNT = 3;
|
||||
|
||||
const topPagKeyPoint = PLACEHOLDER_COUNT * PLACEHOLDER_HEIGHT;
|
||||
const bottomPagKeyPoint = scrollHeight - (offsetHeight / 2);
|
||||
|
||||
if (!isReachedBottom && isAtBottom(timelineSVRef)) {
|
||||
isReachedBottom = true;
|
||||
viewEvent.emit('toggle-reached-bottom', true);
|
||||
}
|
||||
if (isReachedBottom && !isAtBottom(timelineSVRef)) {
|
||||
isReachedBottom = false;
|
||||
viewEvent.emit('toggle-reached-bottom', false);
|
||||
}
|
||||
// TOP of timeline
|
||||
if (scrollTop < topPagKeyPoint && isReachedTop === false) {
|
||||
isReachedTop = true;
|
||||
viewEvent.emit('reached-top');
|
||||
return;
|
||||
}
|
||||
isReachedTop = false;
|
||||
|
||||
// BOTTOM of timeline
|
||||
if (scrollBottom > bottomPagKeyPoint) {
|
||||
// TODO:
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="room-view">
|
||||
<RoomViewHeader roomId={roomId} />
|
||||
<div className="room-view__content-wrapper">
|
||||
<div className="room-view__scrollable">
|
||||
<ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
|
||||
{roomTimeline !== null && (
|
||||
<RoomViewContent
|
||||
roomId={roomId}
|
||||
roomTimeline={roomTimeline}
|
||||
timelineScroll={timelineScroll}
|
||||
viewEvent={viewEvent}
|
||||
/>
|
||||
)}
|
||||
</ScrollView>
|
||||
{roomTimeline !== null && (
|
||||
<RoomViewFloating
|
||||
roomId={roomId}
|
||||
roomTimeline={roomTimeline}
|
||||
timelineScroll={timelineScroll}
|
||||
viewEvent={viewEvent}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{roomTimeline !== null && (
|
||||
<div className="room-view__sticky">
|
||||
<RoomViewInput
|
||||
roomId={roomId}
|
||||
roomTimeline={roomTimeline}
|
||||
timelineScroll={timelineScroll}
|
||||
viewEvent={viewEvent}
|
||||
/>
|
||||
<RoomViewCmdBar
|
||||
roomId={roomId}
|
||||
roomTimeline={roomTimeline}
|
||||
viewEvent={viewEvent}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
RoomView.propTypes = {
|
||||
roomId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default RoomView;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue