2021-03-01 21:10:17 +03:00
|
|
|
/*
|
|
|
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React, {RefObject, useContext, useRef, useState} from "react";
|
2021-03-02 17:37:28 +03:00
|
|
|
import {EventType, RoomType} from "matrix-js-sdk/src/@types/event";
|
2021-03-01 21:10:17 +03:00
|
|
|
import {Room} from "matrix-js-sdk/src/models/room";
|
|
|
|
|
|
|
|
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
|
|
|
import RoomAvatar from "../views/avatars/RoomAvatar";
|
|
|
|
import {_t} from "../../languageHandler";
|
|
|
|
import AccessibleButton from "../views/elements/AccessibleButton";
|
|
|
|
import RoomName from "../views/elements/RoomName";
|
|
|
|
import RoomTopic from "../views/elements/RoomTopic";
|
2021-03-02 17:37:28 +03:00
|
|
|
import InlineSpinner from "../views/elements/InlineSpinner";
|
2021-03-01 21:10:17 +03:00
|
|
|
import FormButton from "../views/elements/FormButton";
|
2021-03-02 13:07:43 +03:00
|
|
|
import {inviteMultipleToRoom, showRoomInviteDialog} from "../../RoomInvite";
|
2021-03-01 21:10:17 +03:00
|
|
|
import {useRoomMembers} from "../../hooks/useRoomMembers";
|
|
|
|
import createRoom, {IOpts, Preset} from "../../createRoom";
|
|
|
|
import Field from "../views/elements/Field";
|
|
|
|
import {useEventEmitter} from "../../hooks/useEventEmitter";
|
|
|
|
import StyledRadioGroup from "../views/elements/StyledRadioGroup";
|
|
|
|
import withValidation from "../views/elements/Validation";
|
|
|
|
import * as Email from "../../email";
|
|
|
|
import defaultDispatcher from "../../dispatcher/dispatcher";
|
|
|
|
import {Action} from "../../dispatcher/actions";
|
|
|
|
import ResizeNotifier from "../../utils/ResizeNotifier"
|
|
|
|
import MainSplit from './MainSplit';
|
|
|
|
import ErrorBoundary from "../views/elements/ErrorBoundary";
|
|
|
|
import {ActionPayload} from "../../dispatcher/payloads";
|
|
|
|
import RightPanel from "./RightPanel";
|
|
|
|
import RightPanelStore from "../../stores/RightPanelStore";
|
|
|
|
import {EventSubscription} from "fbemitter";
|
|
|
|
import {RightPanelPhases} from "../../stores/RightPanelStorePhases";
|
|
|
|
import {SetRightPanelPhasePayload} from "../../dispatcher/payloads/SetRightPanelPhasePayload";
|
|
|
|
import {useStateArray} from "../../hooks/useStateArray";
|
|
|
|
import SpacePublicShare from "../views/spaces/SpacePublicShare";
|
2021-03-02 16:32:24 +03:00
|
|
|
import {showAddExistingRooms, showCreateNewRoom, shouldShowSpaceSettings, showSpaceSettings} from "../../utils/space";
|
2021-03-02 17:37:28 +03:00
|
|
|
import {HierarchyLevel, ISpaceSummaryEvent, ISpaceSummaryRoom, showRoom} from "./SpaceRoomDirectory";
|
|
|
|
import {useAsyncMemo} from "../../hooks/useAsyncMemo";
|
|
|
|
import {EnhancedMap} from "../../utils/maps";
|
|
|
|
import AutoHideScrollbar from "./AutoHideScrollbar";
|
2021-03-01 21:10:17 +03:00
|
|
|
import MemberAvatar from "../views/avatars/MemberAvatar";
|
2021-03-02 17:37:28 +03:00
|
|
|
import {useStateToggle} from "../../hooks/useStateToggle";
|
2021-03-01 21:10:17 +03:00
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
space: Room;
|
|
|
|
justCreatedOpts?: IOpts;
|
|
|
|
resizeNotifier: ResizeNotifier;
|
|
|
|
onJoinButtonClicked(): void;
|
|
|
|
onRejectButtonClicked(): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
|
|
|
phase: Phase;
|
|
|
|
showRightPanel: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
enum Phase {
|
|
|
|
Landing,
|
|
|
|
PublicCreateRooms,
|
|
|
|
PublicShare,
|
|
|
|
PrivateScope,
|
|
|
|
PrivateInvite,
|
|
|
|
PrivateCreateRooms,
|
|
|
|
PrivateExistingRooms,
|
|
|
|
}
|
|
|
|
|
|
|
|
const RoomMemberCount = ({ room, children }) => {
|
|
|
|
const members = useRoomMembers(room);
|
|
|
|
const count = members.length;
|
|
|
|
|
|
|
|
if (children) return children(count);
|
|
|
|
return count;
|
|
|
|
};
|
|
|
|
|
|
|
|
const useMyRoomMembership = (room: Room) => {
|
|
|
|
const [membership, setMembership] = useState(room.getMyMembership());
|
|
|
|
useEventEmitter(room, "Room.myMembership", () => {
|
|
|
|
setMembership(room.getMyMembership());
|
|
|
|
});
|
|
|
|
return membership;
|
|
|
|
};
|
|
|
|
|
2021-03-11 14:49:43 +03:00
|
|
|
const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
|
2021-03-01 21:10:17 +03:00
|
|
|
const cli = useContext(MatrixClientContext);
|
|
|
|
const myMembership = useMyRoomMembership(space);
|
|
|
|
|
2021-03-11 14:49:43 +03:00
|
|
|
let inviterSection;
|
2021-03-01 21:10:17 +03:00
|
|
|
let joinButtons;
|
|
|
|
if (myMembership === "invite") {
|
2021-03-11 14:49:43 +03:00
|
|
|
const inviteSender = space.getMember(cli.getUserId())?.events.member?.getSender();
|
|
|
|
const inviter = inviteSender && space.getMember(inviteSender);
|
|
|
|
|
|
|
|
if (inviteSender) {
|
|
|
|
inviterSection = <div className="mx_SpaceRoomView_preview_inviter">
|
|
|
|
<MemberAvatar member={inviter} width={32} height={32} />
|
|
|
|
<div>
|
|
|
|
<div className="mx_SpaceRoomView_preview_inviter_name">
|
|
|
|
{ _t("<inviter/> invites you", {}, {
|
|
|
|
inviter: () => <b>{ inviter.name || inviteSender }</b>,
|
|
|
|
}) }
|
|
|
|
</div>
|
|
|
|
{ inviter ? <div className="mx_SpaceRoomView_preview_inviter_mxid">
|
|
|
|
{ inviteSender }
|
|
|
|
</div> : null }
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
joinButtons = <>
|
|
|
|
<FormButton label={_t("Reject")} kind="secondary" onClick={onRejectButtonClicked} />
|
|
|
|
<FormButton label={_t("Accept")} onClick={onJoinButtonClicked} />
|
|
|
|
</>;
|
|
|
|
} else {
|
|
|
|
joinButtons = <FormButton label={_t("Join")} onClick={onJoinButtonClicked} />
|
|
|
|
}
|
|
|
|
|
|
|
|
let visibilitySection;
|
|
|
|
if (space.getJoinRule() === "public") {
|
|
|
|
visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
|
|
|
|
{ _t("Public space") }
|
|
|
|
</span>;
|
|
|
|
} else {
|
|
|
|
visibilitySection = <span className="mx_SpaceRoomView_preview_info_private">
|
|
|
|
{ _t("Private space") }
|
|
|
|
</span>;
|
2021-03-01 21:10:17 +03:00
|
|
|
}
|
|
|
|
|
2021-03-11 14:49:43 +03:00
|
|
|
return <div className="mx_SpaceRoomView_preview">
|
|
|
|
{ inviterSection }
|
|
|
|
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
|
|
|
|
<h1 className="mx_SpaceRoomView_preview_name">
|
|
|
|
<RoomName room={space} />
|
|
|
|
</h1>
|
|
|
|
<div className="mx_SpaceRoomView_preview_info">
|
|
|
|
{ visibilitySection }
|
|
|
|
<RoomMemberCount room={space}>
|
|
|
|
{(count) => count > 0 ? (
|
|
|
|
<AccessibleButton
|
|
|
|
className="mx_SpaceRoomView_preview_memberCount"
|
|
|
|
kind="link"
|
|
|
|
onClick={() => {
|
|
|
|
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.RoomMemberList,
|
|
|
|
refireParams: { space },
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{ _t("%(count)s members", { count }) }
|
|
|
|
</AccessibleButton>
|
|
|
|
) : null}
|
|
|
|
</RoomMemberCount>
|
|
|
|
</div>
|
|
|
|
<RoomTopic room={space}>
|
|
|
|
{(topic, ref) =>
|
|
|
|
<div className="mx_SpaceRoomView_preview_topic" ref={ref}>
|
|
|
|
{ topic }
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</RoomTopic>
|
|
|
|
<div className="mx_SpaceRoomView_preview_joinButtons">
|
|
|
|
{ joinButtons }
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
const SpaceLanding = ({ space }) => {
|
|
|
|
const cli = useContext(MatrixClientContext);
|
|
|
|
const myMembership = useMyRoomMembership(space);
|
|
|
|
const userId = cli.getUserId();
|
|
|
|
|
2021-03-02 13:07:43 +03:00
|
|
|
let inviteButton;
|
|
|
|
if (myMembership === "join" && space.canInvite(userId)) {
|
|
|
|
inviteButton = (
|
|
|
|
<AccessibleButton className="mx_SpaceRoomView_landing_inviteButton" onClick={() => {
|
|
|
|
showRoomInviteDialog(space.roomId);
|
|
|
|
}}>
|
|
|
|
{ _t("Invite people") }
|
|
|
|
</AccessibleButton>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-03-02 16:28:05 +03:00
|
|
|
const canAddRooms = myMembership === "join" && space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
|
|
|
|
|
2021-03-02 17:37:28 +03:00
|
|
|
const [_, forceUpdate] = useStateToggle(false); // TODO
|
|
|
|
|
2021-03-02 16:28:05 +03:00
|
|
|
let addRoomButtons;
|
|
|
|
if (canAddRooms) {
|
|
|
|
addRoomButtons = <React.Fragment>
|
2021-03-02 16:32:24 +03:00
|
|
|
<AccessibleButton className="mx_SpaceRoomView_landing_addButton" onClick={async () => {
|
|
|
|
const [added] = await showAddExistingRooms(cli, space);
|
|
|
|
if (added) {
|
2021-03-02 17:37:28 +03:00
|
|
|
forceUpdate();
|
2021-03-02 16:32:24 +03:00
|
|
|
}
|
|
|
|
}}>
|
|
|
|
{ _t("Add existing rooms & spaces") }
|
|
|
|
</AccessibleButton>
|
2021-03-02 16:28:05 +03:00
|
|
|
<AccessibleButton className="mx_SpaceRoomView_landing_createButton" onClick={() => {
|
|
|
|
showCreateNewRoom(cli, space);
|
|
|
|
}}>
|
|
|
|
{ _t("Create a new room") }
|
|
|
|
</AccessibleButton>
|
|
|
|
</React.Fragment>;
|
|
|
|
}
|
|
|
|
|
2021-03-02 13:34:28 +03:00
|
|
|
let settingsButton;
|
|
|
|
if (shouldShowSpaceSettings(cli, space)) {
|
|
|
|
settingsButton = <AccessibleButton className="mx_SpaceRoomView_landing_settingsButton" onClick={() => {
|
|
|
|
showSpaceSettings(cli, space);
|
|
|
|
}}>
|
|
|
|
{ _t("Settings") }
|
|
|
|
</AccessibleButton>;
|
|
|
|
}
|
|
|
|
|
2021-03-02 17:37:28 +03:00
|
|
|
const [loading, roomsMap, relations, numRooms] = useAsyncMemo(async () => {
|
|
|
|
try {
|
|
|
|
const data = await cli.getSpaceSummary(space.roomId, undefined, myMembership !== "join");
|
|
|
|
|
|
|
|
const parentChildRelations = new EnhancedMap<string, string[]>();
|
|
|
|
data.events.map((ev: ISpaceSummaryEvent) => {
|
|
|
|
if (ev.type === EventType.SpaceChild) {
|
|
|
|
parentChildRelations.getOrCreate(ev.room_id, []).push(ev.state_key);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const roomsMap = new Map<string, ISpaceSummaryRoom>(data.rooms.map(r => [r.room_id, r]));
|
|
|
|
const numRooms = data.rooms.filter(r => r.room_type !== RoomType.Space).length;
|
|
|
|
return [false, roomsMap, parentChildRelations, numRooms];
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e); // TODO
|
|
|
|
}
|
|
|
|
|
|
|
|
return [false];
|
|
|
|
}, [space, _], [true]);
|
|
|
|
|
|
|
|
let previewRooms;
|
|
|
|
if (roomsMap) {
|
|
|
|
previewRooms = <AutoHideScrollbar className="mx_SpaceRoomDirectory_list">
|
|
|
|
<div className="mx_SpaceRoomDirectory_roomCount">
|
|
|
|
<h3>{ myMembership === "join" ? _t("Rooms") : _t("Default Rooms")}</h3>
|
|
|
|
<span>{ numRooms }</span>
|
|
|
|
</div>
|
|
|
|
<HierarchyLevel
|
|
|
|
spaceId={space.roomId}
|
|
|
|
rooms={roomsMap}
|
|
|
|
editing={false}
|
|
|
|
relations={relations}
|
|
|
|
parents={new Set()}
|
|
|
|
onPreviewClick={roomId => {
|
|
|
|
showRoom(roomsMap.get(roomId), [], false); // TODO
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</AutoHideScrollbar>;
|
|
|
|
} else if (loading) {
|
|
|
|
previewRooms = <InlineSpinner />;
|
|
|
|
} else {
|
|
|
|
previewRooms = <p>{_t("Your server does not support showing space hierarchies.")}</p>;
|
|
|
|
}
|
|
|
|
|
2021-03-01 21:10:17 +03:00
|
|
|
return <div className="mx_SpaceRoomView_landing">
|
|
|
|
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
|
|
|
|
<div className="mx_SpaceRoomView_landing_name">
|
|
|
|
<RoomName room={space}>
|
|
|
|
{(name) => {
|
|
|
|
const tags = { name: () => <div className="mx_SpaceRoomView_landing_nameRow">
|
|
|
|
<h1>{ name }</h1>
|
|
|
|
<RoomMemberCount room={space}>
|
|
|
|
{(count) => count > 0 ? (
|
|
|
|
<AccessibleButton
|
|
|
|
className="mx_SpaceRoomView_landing_memberCount"
|
|
|
|
kind="link"
|
|
|
|
onClick={() => {
|
|
|
|
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.RoomMemberList,
|
|
|
|
refireParams: { space },
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{ _t("%(count)s members", { count }) }
|
|
|
|
</AccessibleButton>
|
|
|
|
) : null}
|
|
|
|
</RoomMemberCount>
|
|
|
|
</div> };
|
2021-03-11 14:49:43 +03:00
|
|
|
if (shouldShowSpaceSettings(cli, space)) {
|
2021-03-01 21:10:17 +03:00
|
|
|
if (space.getJoinRule() === "public") {
|
|
|
|
return _t("Your public space <name/>", {}, tags) as JSX.Element;
|
|
|
|
} else {
|
|
|
|
return _t("Your private space <name/>", {}, tags) as JSX.Element;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return _t("Welcome to <name/>", {}, tags) as JSX.Element;
|
|
|
|
}}
|
|
|
|
</RoomName>
|
|
|
|
</div>
|
|
|
|
<div className="mx_SpaceRoomView_landing_topic">
|
|
|
|
<RoomTopic room={space} />
|
|
|
|
</div>
|
2021-03-02 13:07:43 +03:00
|
|
|
<div className="mx_SpaceRoomView_landing_adminButtons">
|
|
|
|
{ inviteButton }
|
2021-03-02 16:28:05 +03:00
|
|
|
{ addRoomButtons }
|
2021-03-02 13:34:28 +03:00
|
|
|
{ settingsButton }
|
2021-03-02 13:07:43 +03:00
|
|
|
</div>
|
2021-03-02 17:37:28 +03:00
|
|
|
|
|
|
|
{ previewRooms }
|
2021-03-01 21:10:17 +03:00
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
const SpaceSetupFirstRooms = ({ space, title, description, onFinished }) => {
|
|
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const [error, setError] = useState("");
|
|
|
|
const numFields = 3;
|
|
|
|
const placeholders = [_t("General"), _t("Random"), _t("Support")];
|
|
|
|
// TODO vary default prefills for "Just Me" spaces
|
|
|
|
const [roomNames, setRoomName] = useStateArray(numFields, [_t("General"), _t("Random"), ""]);
|
|
|
|
const fields = new Array(numFields).fill(0).map((_, i) => {
|
|
|
|
const name = "roomName" + i;
|
|
|
|
return <Field
|
|
|
|
key={name}
|
|
|
|
name={name}
|
|
|
|
type="text"
|
|
|
|
label={_t("Room name")}
|
|
|
|
placeholder={placeholders[i]}
|
|
|
|
value={roomNames[i]}
|
|
|
|
onChange={ev => setRoomName(i, ev.target.value)}
|
|
|
|
/>;
|
|
|
|
});
|
|
|
|
|
|
|
|
const onNextClick = async () => {
|
|
|
|
setError("");
|
|
|
|
setBusy(true);
|
|
|
|
try {
|
|
|
|
await Promise.all(roomNames.map(name => name.trim()).filter(Boolean).map(name => {
|
|
|
|
return createRoom({
|
|
|
|
createOpts: {
|
|
|
|
preset: space.getJoinRule() === "public" ? Preset.PublicChat : Preset.PrivateChat,
|
|
|
|
name,
|
|
|
|
},
|
|
|
|
spinner: false,
|
|
|
|
encryption: false,
|
|
|
|
andView: false,
|
|
|
|
inlineErrors: true,
|
|
|
|
parentSpace: space,
|
|
|
|
});
|
|
|
|
}));
|
|
|
|
onFinished();
|
|
|
|
} catch (e) {
|
|
|
|
console.error("Failed to create initial space rooms", e);
|
|
|
|
setError(_t("Failed to create initial space rooms"));
|
|
|
|
}
|
|
|
|
setBusy(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
let onClick = onFinished;
|
|
|
|
let buttonLabel = _t("Skip for now");
|
|
|
|
if (roomNames.some(name => name.trim())) {
|
|
|
|
onClick = onNextClick;
|
2021-03-16 14:39:06 +03:00
|
|
|
buttonLabel = busy ? _t("Creating rooms...") : _t("Continue")
|
2021-03-01 21:10:17 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
return <div>
|
|
|
|
<h1>{ title }</h1>
|
|
|
|
<div className="mx_SpaceRoomView_description">{ description }</div>
|
|
|
|
|
|
|
|
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
|
|
|
|
{ fields }
|
|
|
|
|
|
|
|
<div className="mx_SpaceRoomView_buttons">
|
|
|
|
<FormButton
|
|
|
|
label={buttonLabel}
|
|
|
|
disabled={busy}
|
|
|
|
onClick={onClick}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
const SpaceSetupPublicShare = ({ space, onFinished }) => {
|
|
|
|
return <div className="mx_SpaceRoomView_publicShare">
|
2021-03-16 14:39:06 +03:00
|
|
|
<h1>{ _t("Invite people") }</h1>
|
|
|
|
<div className="mx_SpaceRoomView_description">
|
|
|
|
{
|
|
|
|
_t("It's just you at the moment.")
|
|
|
|
} {
|
|
|
|
_t("%(spaceName)s will be even better with others", { spaceName: space.name })
|
|
|
|
}
|
|
|
|
</div>
|
2021-03-01 21:10:17 +03:00
|
|
|
|
|
|
|
<SpacePublicShare space={space} onFinished={onFinished} />
|
|
|
|
|
|
|
|
<div className="mx_SpaceRoomView_buttons">
|
|
|
|
<FormButton label={_t("Finish")} onClick={onFinished} />
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
const SpaceSetupPrivateScope = ({ onFinished }) => {
|
|
|
|
const [option, setOption] = useState<string>(null);
|
|
|
|
|
|
|
|
return <div className="mx_SpaceRoomView_privateScope">
|
|
|
|
<h1>{ _t("Who are you working with?") }</h1>
|
|
|
|
<div className="mx_SpaceRoomView_description">{ _t("Ensure the right people have access to the space.") }</div>
|
|
|
|
|
|
|
|
<StyledRadioGroup
|
|
|
|
name="privateSpaceScope"
|
|
|
|
value={option}
|
|
|
|
onChange={setOption}
|
|
|
|
definitions={[
|
|
|
|
{
|
|
|
|
value: "justMe",
|
|
|
|
className: "mx_SpaceRoomView_privateScope_justMeButton",
|
|
|
|
label: <React.Fragment>
|
|
|
|
<h3>{ _t("Just Me") }</h3>
|
|
|
|
<div>{ _t("A private space just for you") }</div>
|
|
|
|
</React.Fragment>,
|
|
|
|
}, {
|
|
|
|
value: "meAndMyTeammates",
|
|
|
|
className: "mx_SpaceRoomView_privateScope_meAndMyTeammatesButton",
|
|
|
|
label: <React.Fragment>
|
|
|
|
<h3>{ _t("Me and my teammates") }</h3>
|
|
|
|
<div>{ _t("A private space for you and your teammates") }</div>
|
|
|
|
</React.Fragment>,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div className="mx_SpaceRoomView_buttons">
|
|
|
|
<FormButton label={_t("Next")} disabled={!option} onClick={() => onFinished(option !== "justMe")} />
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
const validateEmailRules = withValidation({
|
|
|
|
rules: [{
|
|
|
|
key: "email",
|
|
|
|
test: ({ value }) => !value || Email.looksValid(value),
|
|
|
|
invalid: () => _t("Doesn't look like a valid email address"),
|
|
|
|
}],
|
|
|
|
});
|
|
|
|
|
|
|
|
const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
|
|
|
|
const [busy, setBusy] = useState(false);
|
|
|
|
const [error, setError] = useState("");
|
|
|
|
const numFields = 3;
|
|
|
|
const fieldRefs: RefObject<Field>[] = [useRef(), useRef(), useRef()];
|
|
|
|
const [emailAddresses, setEmailAddress] = useStateArray(numFields, "");
|
|
|
|
const fields = new Array(numFields).fill(0).map((_, i) => {
|
|
|
|
const name = "emailAddress" + i;
|
|
|
|
return <Field
|
|
|
|
key={name}
|
|
|
|
name={name}
|
|
|
|
type="text"
|
|
|
|
label={_t("Email address")}
|
|
|
|
placeholder={_t("Email")}
|
|
|
|
value={emailAddresses[i]}
|
|
|
|
onChange={ev => setEmailAddress(i, ev.target.value)}
|
|
|
|
ref={fieldRefs[i]}
|
|
|
|
onValidate={validateEmailRules}
|
|
|
|
/>;
|
|
|
|
});
|
|
|
|
|
|
|
|
const onNextClick = async () => {
|
|
|
|
setError("");
|
|
|
|
for (let i = 0; i < fieldRefs.length; i++) {
|
|
|
|
const fieldRef = fieldRefs[i];
|
|
|
|
const valid = await fieldRef.current.validate({ allowEmpty: true });
|
|
|
|
|
|
|
|
if (valid === false) { // true/null are allowed
|
|
|
|
fieldRef.current.focus();
|
|
|
|
fieldRef.current.validate({ allowEmpty: true, focused: true });
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setBusy(true);
|
|
|
|
const targetIds = emailAddresses.map(name => name.trim()).filter(Boolean);
|
|
|
|
try {
|
|
|
|
const result = await inviteMultipleToRoom(space.roomId, targetIds);
|
|
|
|
|
|
|
|
const failedUsers = Object.keys(result.states).filter(a => result.states[a] === "error");
|
|
|
|
if (failedUsers.length > 0) {
|
|
|
|
console.log("Failed to invite users to space: ", result);
|
|
|
|
setError(_t("Failed to invite the following users to your space: %(csvUsers)s", {
|
|
|
|
csvUsers: failedUsers.join(", "),
|
|
|
|
}));
|
|
|
|
} else {
|
|
|
|
onFinished();
|
|
|
|
}
|
|
|
|
} catch (err) {
|
|
|
|
console.error("Failed to invite users to space: ", err);
|
|
|
|
setError(_t("We couldn't invite those users. Please check the users you want to invite and try again."));
|
|
|
|
}
|
|
|
|
setBusy(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
return <div className="mx_SpaceRoomView_inviteTeammates">
|
|
|
|
<h1>{ _t("Invite your teammates") }</h1>
|
|
|
|
<div className="mx_SpaceRoomView_description">{ _t("Ensure the right people have access to the space.") }</div>
|
|
|
|
|
|
|
|
{ error && <div className="mx_SpaceRoomView_errorText">{ error }</div> }
|
|
|
|
{ fields }
|
|
|
|
|
|
|
|
<div className="mx_SpaceRoomView_inviteTeammates_buttons">
|
|
|
|
<AccessibleButton
|
|
|
|
className="mx_SpaceRoomView_inviteTeammates_inviteDialogButton"
|
2021-03-02 13:07:43 +03:00
|
|
|
onClick={() => showRoomInviteDialog(space.roomId)}
|
2021-03-01 21:10:17 +03:00
|
|
|
>
|
|
|
|
{ _t("Invite by username") }
|
|
|
|
</AccessibleButton>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="mx_SpaceRoomView_buttons">
|
|
|
|
<AccessibleButton onClick={onFinished} kind="link">{_t("Skip for now")}</AccessibleButton>
|
|
|
|
<FormButton label={busy ? _t("Inviting...") : _t("Next")} disabled={busy} onClick={onNextClick} />
|
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
|
|
|
|
static contextType = MatrixClientContext;
|
|
|
|
|
|
|
|
private readonly creator: string;
|
|
|
|
private readonly dispatcherRef: string;
|
|
|
|
private readonly rightPanelStoreToken: EventSubscription;
|
|
|
|
|
|
|
|
constructor(props, context) {
|
|
|
|
super(props, context);
|
|
|
|
|
|
|
|
let phase = Phase.Landing;
|
|
|
|
|
|
|
|
this.creator = this.props.space.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
|
|
|
|
const showSetup = this.props.justCreatedOpts && this.context.getUserId() === this.creator;
|
|
|
|
|
|
|
|
if (showSetup) {
|
|
|
|
phase = this.props.justCreatedOpts.createOpts.preset === Preset.PublicChat
|
|
|
|
? Phase.PublicCreateRooms : Phase.PrivateScope;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
phase,
|
|
|
|
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
|
|
|
|
};
|
|
|
|
|
|
|
|
this.dispatcherRef = defaultDispatcher.register(this.onAction);
|
|
|
|
this.rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelStoreUpdate);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
defaultDispatcher.unregister(this.dispatcherRef);
|
|
|
|
this.rightPanelStoreToken.remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
private onRightPanelStoreUpdate = () => {
|
|
|
|
this.setState({
|
|
|
|
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onAction = (payload: ActionPayload) => {
|
|
|
|
if (payload.action !== Action.ViewUser && payload.action !== "view_3pid_invite") return;
|
|
|
|
|
|
|
|
if (payload.action === Action.ViewUser && payload.member) {
|
|
|
|
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.SpaceMemberInfo,
|
|
|
|
refireParams: {
|
|
|
|
space: this.props.space,
|
|
|
|
member: payload.member,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
} else if (payload.action === "view_3pid_invite" && payload.event) {
|
|
|
|
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.Space3pidMemberInfo,
|
|
|
|
refireParams: {
|
|
|
|
space: this.props.space,
|
|
|
|
event: payload.event,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.SpaceMemberList,
|
|
|
|
refireParams: { space: this.props.space },
|
|
|
|
});
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
private renderBody() {
|
|
|
|
switch (this.state.phase) {
|
|
|
|
case Phase.Landing:
|
2021-03-11 14:49:43 +03:00
|
|
|
if (this.props.space.getMyMembership() === "join") {
|
|
|
|
return <SpaceLanding space={this.props.space} />;
|
|
|
|
} else {
|
|
|
|
return <SpacePreview
|
|
|
|
space={this.props.space}
|
|
|
|
onJoinButtonClicked={this.props.onJoinButtonClicked}
|
|
|
|
onRejectButtonClicked={this.props.onRejectButtonClicked}
|
|
|
|
/>;
|
|
|
|
}
|
2021-03-01 21:10:17 +03:00
|
|
|
case Phase.PublicCreateRooms:
|
|
|
|
return <SpaceSetupFirstRooms
|
|
|
|
space={this.props.space}
|
2021-03-03 14:34:29 +03:00
|
|
|
title={_t("What are some things you want to discuss?")}
|
2021-03-16 14:39:06 +03:00
|
|
|
description={_t("We'll create a room for each of them. You can add more later too.")}
|
2021-03-01 21:10:17 +03:00
|
|
|
onFinished={() => this.setState({ phase: Phase.PublicShare })}
|
|
|
|
/>;
|
|
|
|
case Phase.PublicShare:
|
|
|
|
return <SpaceSetupPublicShare
|
|
|
|
space={this.props.space}
|
|
|
|
onFinished={() => this.setState({ phase: Phase.Landing })}
|
|
|
|
/>;
|
|
|
|
|
|
|
|
case Phase.PrivateScope:
|
|
|
|
return <SpaceSetupPrivateScope
|
|
|
|
onFinished={(invite: boolean) => {
|
|
|
|
this.setState({ phase: invite ? Phase.PrivateInvite : Phase.PrivateCreateRooms });
|
|
|
|
}}
|
|
|
|
/>;
|
|
|
|
case Phase.PrivateInvite:
|
|
|
|
return <SpaceSetupPrivateInvite
|
|
|
|
space={this.props.space}
|
|
|
|
onFinished={() => this.setState({ phase: Phase.PrivateCreateRooms })}
|
|
|
|
/>;
|
|
|
|
case Phase.PrivateCreateRooms:
|
|
|
|
return <SpaceSetupFirstRooms
|
|
|
|
space={this.props.space}
|
|
|
|
title={_t("What projects are you working on?")}
|
|
|
|
description={_t("We'll create rooms for each of them. You can add existing rooms after setup.")}
|
|
|
|
onFinished={() => this.setState({ phase: Phase.Landing })}
|
|
|
|
/>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const rightPanel = this.state.showRightPanel && this.state.phase === Phase.Landing
|
|
|
|
? <RightPanel room={this.props.space} resizeNotifier={this.props.resizeNotifier} />
|
|
|
|
: null;
|
|
|
|
|
|
|
|
return <main className="mx_SpaceRoomView">
|
|
|
|
<ErrorBoundary>
|
|
|
|
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
|
|
|
|
{ this.renderBody() }
|
|
|
|
</MainSplit>
|
|
|
|
</ErrorBoundary>
|
|
|
|
</main>;
|
|
|
|
}
|
|
|
|
}
|