2018-04-12 01:58:04 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
|
|
|
Copyright 2017 Vector Creations Ltd
|
2019-12-06 01:31:01 +03:00
|
|
|
Copyright 2017, 2018 New Vector Ltd
|
2019-07-31 14:19:29 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2019-12-06 01:31:01 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
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 from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classNames from 'classnames';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from '../../index';
|
2018-04-13 02:43:44 +03:00
|
|
|
import dis from '../../dispatcher';
|
|
|
|
import RateLimitedFunc from '../../ratelimitedfunc';
|
|
|
|
import { showGroupInviteDialog, showGroupAddRoomDialog } from '../../GroupAddressPicker';
|
2018-05-01 13:18:45 +03:00
|
|
|
import GroupStore from '../../stores/GroupStore';
|
2019-10-07 18:52:50 +03:00
|
|
|
import SettingsStore from "../../settings/SettingsStore";
|
2019-12-06 09:48:05 +03:00
|
|
|
import {RIGHT_PANEL_PHASES, RIGHT_PANEL_PHASES_NO_ARGS} from "../../stores/RightPanelStorePhases";
|
|
|
|
import RightPanelStore from "../../stores/RightPanelStore";
|
2019-12-17 20:26:12 +03:00
|
|
|
import MatrixClientContext from "../../contexts/MatrixClientContext";
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
export default class RightPanel extends React.Component {
|
|
|
|
static get propTypes() {
|
|
|
|
return {
|
2019-07-31 14:19:29 +03:00
|
|
|
roomId: PropTypes.string, // if showing panels for a given room, this is set
|
|
|
|
groupId: PropTypes.string, // if showing panels for a given group, this is set
|
2019-12-07 01:04:44 +03:00
|
|
|
user: PropTypes.object, // used if we know the user ahead of opening the panel
|
2018-10-30 19:15:19 +03:00
|
|
|
};
|
2018-04-12 01:58:04 +03:00
|
|
|
}
|
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
static contextType = MatrixClientContext;
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2019-12-17 20:26:12 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2018-10-30 19:15:19 +03:00
|
|
|
this.state = {
|
2019-02-20 14:45:55 +03:00
|
|
|
phase: this._getPhaseFromProps(),
|
2018-10-30 19:15:19 +03:00
|
|
|
isUserPrivilegedInGroup: null,
|
2019-12-07 01:04:44 +03:00
|
|
|
member: this._getUserForPanel(),
|
2020-01-29 19:56:12 +03:00
|
|
|
verificationRequest: RightPanelStore.getSharedInstance().roomPanelPhaseParams.verificationRequest,
|
2018-10-30 19:15:19 +03:00
|
|
|
};
|
|
|
|
this.onAction = this.onAction.bind(this);
|
|
|
|
this.onRoomStateMember = this.onRoomStateMember.bind(this);
|
|
|
|
this.onGroupStoreUpdated = this.onGroupStoreUpdated.bind(this);
|
|
|
|
this.onInviteToGroupButtonClick = this.onInviteToGroupButtonClick.bind(this);
|
|
|
|
this.onAddRoomToGroupButtonClick = this.onAddRoomToGroupButtonClick.bind(this);
|
|
|
|
|
|
|
|
this._delayedUpdate = new RateLimitedFunc(() => {
|
|
|
|
this.forceUpdate();
|
|
|
|
}, 500);
|
|
|
|
}
|
|
|
|
|
2019-12-07 01:04:44 +03:00
|
|
|
// Helper function to split out the logic for _getPhaseFromProps() and the constructor
|
|
|
|
// as both are called at the same time in the constructor.
|
|
|
|
_getUserForPanel() {
|
|
|
|
if (this.state && this.state.member) return this.state.member;
|
|
|
|
const lastParams = RightPanelStore.getSharedInstance().roomPanelPhaseParams;
|
|
|
|
return this.props.user || lastParams['member'];
|
|
|
|
}
|
|
|
|
|
2020-01-29 19:56:12 +03:00
|
|
|
// gets the current phase from the props and also maybe the store
|
2019-02-20 14:45:55 +03:00
|
|
|
_getPhaseFromProps() {
|
2019-12-06 09:48:05 +03:00
|
|
|
const rps = RightPanelStore.getSharedInstance();
|
2020-01-29 19:56:12 +03:00
|
|
|
const userForPanel = this._getUserForPanel();
|
2019-02-20 14:45:55 +03:00
|
|
|
if (this.props.groupId) {
|
2019-12-06 09:48:05 +03:00
|
|
|
if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.groupPanelPhase)) {
|
2019-12-07 00:52:31 +03:00
|
|
|
dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.GroupMemberList});
|
2019-12-06 09:48:05 +03:00
|
|
|
return RIGHT_PANEL_PHASES.GroupMemberList;
|
|
|
|
}
|
|
|
|
return rps.groupPanelPhase;
|
2020-01-29 19:56:12 +03:00
|
|
|
} else if (userForPanel) {
|
|
|
|
// XXX FIXME AAAAAARGH: What is going on with this class!? It takes some of its state
|
|
|
|
// from its props and some from a store, expect if the contents of the store changes
|
|
|
|
// while it's mounted in which case it replaces all of its state with that of the store,
|
|
|
|
// expect it uses a dispatch instead of a normal store listener?
|
|
|
|
// Unfortunately rewriting this would almost certainly break showing the right panel
|
|
|
|
// in some of the many cases, and I don't have time to re-architect it and test all
|
|
|
|
// the flows now, so adding yet another special case so if the store thinks there is
|
|
|
|
// a verification going on for the member we're displaying, we show that, otherwise
|
|
|
|
// we race if a verification is started while the panel isn't displayed because we're
|
|
|
|
// not mounted in time to get the dispatch.
|
|
|
|
// Until then, let this code serve as a warning from history.
|
|
|
|
if (
|
|
|
|
userForPanel.userId === rps.roomPanelPhaseParams.member.userId &&
|
|
|
|
rps.roomPanelPhaseParams.verificationRequest
|
|
|
|
) {
|
|
|
|
return rps.roomPanelPhase;
|
|
|
|
}
|
2019-12-06 09:35:12 +03:00
|
|
|
return RIGHT_PANEL_PHASES.RoomMemberInfo;
|
2019-02-20 14:45:55 +03:00
|
|
|
} else {
|
2019-12-06 09:48:05 +03:00
|
|
|
if (!RIGHT_PANEL_PHASES_NO_ARGS.includes(rps.roomPanelPhase)) {
|
2019-12-07 00:52:31 +03:00
|
|
|
dis.dispatch({action: "set_right_panel_phase", phase: RIGHT_PANEL_PHASES.RoomMemberList});
|
2019-12-06 09:48:05 +03:00
|
|
|
return RIGHT_PANEL_PHASES.RoomMemberList;
|
|
|
|
}
|
|
|
|
return rps.roomPanelPhase;
|
2019-02-20 14:45:55 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
componentWillMount() {
|
2018-04-12 01:58:04 +03:00
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
2019-12-17 20:26:12 +03:00
|
|
|
const cli = this.context;
|
2018-04-12 01:58:04 +03:00
|
|
|
cli.on("RoomState.members", this.onRoomStateMember);
|
|
|
|
this._initGroupStore(this.props.groupId);
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
componentWillUnmount() {
|
2018-04-12 01:58:04 +03:00
|
|
|
dis.unregister(this.dispatcherRef);
|
2019-12-17 20:26:12 +03:00
|
|
|
if (this.context) {
|
|
|
|
this.context.removeListener("RoomState.members", this.onRoomStateMember);
|
2018-04-12 01:58:04 +03:00
|
|
|
}
|
2018-05-01 13:18:45 +03:00
|
|
|
this._unregisterGroupStore(this.props.groupId);
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
componentWillReceiveProps(newProps) {
|
|
|
|
if (newProps.groupId !== this.props.groupId) {
|
2018-05-01 13:18:45 +03:00
|
|
|
this._unregisterGroupStore(this.props.groupId);
|
2018-04-12 01:58:04 +03:00
|
|
|
this._initGroupStore(newProps.groupId);
|
|
|
|
}
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
_initGroupStore(groupId) {
|
|
|
|
if (!groupId) return;
|
2018-05-01 13:18:45 +03:00
|
|
|
GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
|
|
|
_unregisterGroupStore() {
|
2018-05-01 13:18:45 +03:00
|
|
|
GroupStore.unregisterListener(this.onGroupStoreUpdated);
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
onGroupStoreUpdated() {
|
2018-04-12 01:58:04 +03:00
|
|
|
this.setState({
|
2018-05-01 13:18:45 +03:00
|
|
|
isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
|
2018-04-12 01:58:04 +03:00
|
|
|
});
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
onInviteToGroupButtonClick() {
|
2018-04-12 01:58:04 +03:00
|
|
|
showGroupInviteDialog(this.props.groupId).then(() => {
|
|
|
|
this.setState({
|
2019-12-06 09:35:12 +03:00
|
|
|
phase: RIGHT_PANEL_PHASES.GroupMemberList,
|
2018-04-12 01:58:04 +03:00
|
|
|
});
|
|
|
|
});
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
onAddRoomToGroupButtonClick() {
|
2018-04-12 01:58:04 +03:00
|
|
|
showGroupAddRoomDialog(this.props.groupId).then(() => {
|
|
|
|
this.forceUpdate();
|
|
|
|
});
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
onRoomStateMember(ev, state, member) {
|
2018-09-07 15:16:26 +03:00
|
|
|
if (member.roomId !== this.props.roomId) {
|
|
|
|
return;
|
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
// redraw the badge on the membership list
|
2019-12-06 09:35:12 +03:00
|
|
|
if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberList && member.roomId === this.props.roomId) {
|
2018-04-12 01:58:04 +03:00
|
|
|
this._delayedUpdate();
|
2019-12-06 09:35:12 +03:00
|
|
|
} else if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo && member.roomId === this.props.roomId &&
|
2018-04-12 01:58:04 +03:00
|
|
|
member.userId === this.state.member.userId) {
|
|
|
|
// refresh the member info (e.g. new power level)
|
|
|
|
this._delayedUpdate();
|
|
|
|
}
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
onAction(payload) {
|
2019-12-06 09:40:18 +03:00
|
|
|
if (payload.action === "after_right_panel_phase_change") {
|
2018-04-12 01:58:04 +03:00
|
|
|
this.setState({
|
|
|
|
phase: payload.phase,
|
2018-12-10 18:52:45 +03:00
|
|
|
groupRoomId: payload.groupRoomId,
|
|
|
|
groupId: payload.groupId,
|
2018-10-30 19:15:19 +03:00
|
|
|
member: payload.member,
|
2019-03-29 05:38:15 +03:00
|
|
|
event: payload.event,
|
2019-12-10 19:53:51 +03:00
|
|
|
verificationRequest: payload.verificationRequest,
|
2018-04-12 01:58:04 +03:00
|
|
|
});
|
|
|
|
}
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
2018-04-12 01:58:04 +03:00
|
|
|
|
2018-10-30 19:15:19 +03:00
|
|
|
render() {
|
2018-04-12 01:58:04 +03:00
|
|
|
const MemberList = sdk.getComponent('rooms.MemberList');
|
|
|
|
const MemberInfo = sdk.getComponent('rooms.MemberInfo');
|
2019-10-07 18:52:50 +03:00
|
|
|
const UserInfo = sdk.getComponent('right_panel.UserInfo');
|
2019-03-29 05:38:15 +03:00
|
|
|
const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
|
2018-04-12 01:58:04 +03:00
|
|
|
const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
|
|
|
|
const FilePanel = sdk.getComponent('structures.FilePanel');
|
|
|
|
|
|
|
|
const GroupMemberList = sdk.getComponent('groups.GroupMemberList');
|
|
|
|
const GroupMemberInfo = sdk.getComponent('groups.GroupMemberInfo');
|
|
|
|
const GroupRoomList = sdk.getComponent('groups.GroupRoomList');
|
|
|
|
const GroupRoomInfo = sdk.getComponent('groups.GroupRoomInfo');
|
|
|
|
|
|
|
|
let panel = <div />;
|
|
|
|
|
2020-01-29 02:43:09 +03:00
|
|
|
switch (this.state.phase) {
|
|
|
|
case RIGHT_PANEL_PHASES.RoomMemberList:
|
|
|
|
if (this.props.roomId) {
|
|
|
|
panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.GroupMemberList:
|
|
|
|
if (this.props.groupId) {
|
|
|
|
panel = <GroupMemberList groupId={this.props.groupId} key={this.props.groupId} />;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.GroupRoomList:
|
|
|
|
panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.RoomMemberInfo:
|
|
|
|
case RIGHT_PANEL_PHASES.EncryptionPanel:
|
|
|
|
if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
|
|
|
|
const onClose = () => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: "view_user",
|
|
|
|
member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
panel = <UserInfo
|
|
|
|
user={this.state.member}
|
|
|
|
roomId={this.props.roomId}
|
|
|
|
key={this.props.roomId || this.state.member.userId}
|
|
|
|
onClose={onClose}
|
|
|
|
phase={this.state.phase}
|
|
|
|
verificationRequest={this.state.verificationRequest}
|
|
|
|
/>;
|
|
|
|
} else {
|
|
|
|
panel = <MemberInfo
|
|
|
|
member={this.state.member}
|
|
|
|
key={this.props.roomId || this.state.member.userId}
|
|
|
|
/>;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.Room3pidMemberInfo:
|
|
|
|
panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.GroupMemberInfo:
|
|
|
|
if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
|
|
|
|
const onClose = () => {
|
|
|
|
dis.dispatch({
|
|
|
|
action: "view_user",
|
|
|
|
member: null,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
panel = <UserInfo
|
|
|
|
user={this.state.member}
|
2019-10-07 18:52:50 +03:00
|
|
|
groupId={this.props.groupId}
|
2020-01-29 02:43:09 +03:00
|
|
|
key={this.state.member.userId}
|
|
|
|
onClose={onClose} />;
|
|
|
|
} else {
|
|
|
|
panel = (
|
|
|
|
<GroupMemberInfo
|
|
|
|
groupMember={this.state.member}
|
|
|
|
groupId={this.props.groupId}
|
|
|
|
key={this.state.member.user_id}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.GroupRoomInfo:
|
|
|
|
panel = <GroupRoomInfo
|
|
|
|
groupRoomId={this.state.groupRoomId}
|
|
|
|
groupId={this.props.groupId}
|
|
|
|
key={this.state.groupRoomId} />;
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.NotificationPanel:
|
|
|
|
panel = <NotificationPanel />;
|
|
|
|
break;
|
|
|
|
case RIGHT_PANEL_PHASES.FilePanel:
|
|
|
|
panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
|
|
|
|
break;
|
2018-04-12 01:58:04 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
const classes = classNames("mx_RightPanel", "mx_fadable", {
|
|
|
|
"collapsed": this.props.collapsed,
|
|
|
|
"mx_fadable_faded": this.props.disabled,
|
2018-11-06 17:29:47 +03:00
|
|
|
"dark-panel": true,
|
2018-04-12 01:58:04 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<aside className={classes}>
|
|
|
|
{ panel }
|
|
|
|
</aside>
|
|
|
|
);
|
2018-10-30 19:15:19 +03:00
|
|
|
}
|
|
|
|
}
|