Merge pull request #2666 from matrix-org/bwindels/userview

Bring back user view

res/css/_components.scss

@@ -10,6 +10,7 @@
 @import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";
+@import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NotificationPanel.scss";

res/css/structures/_GroupView.scss

@@ -170,7 +170,6 @@ limitations under the License.
 
 .mx_GroupView > .mx_MainSplit {
     flex: 1;
-    display: flex;
 }
 
 .mx_GroupView_body  {

res/css/structures/_MainSplit.scss

@@ -0,0 +1,21 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+.mx_MainSplit {
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+}

res/css/structures/_RoomView.scss

@@ -77,7 +77,6 @@ limitations under the License.
 
 .mx_RoomView .mx_MainSplit {
     flex: 1 1 0;
-    display: flex;
 }
 
 .mx_RoomView_body {

res/css/views/rooms/_MemberInfo.scss

@@ -32,11 +32,12 @@ limitations under the License.
 
 .mx_MemberInfo_cancel {
     height: 16px;
-    padding: 10px 15px;
+    width: 16px;
+    padding: 10px 0 10px 10px;
     cursor: pointer;
     mask-image: url('$(res)/img/minimise.svg');
     mask-repeat: no-repeat;
-    mask-position: center;
+    mask-position: 16px center;
     background-color: $rightpanel-button-color;
 }
 
@@ -47,7 +48,7 @@ limitations under the License.
 .mx_MemberInfo h2 {
     font-size: 18px;
     font-weight: 600;
-    margin: 16px 0;
+    margin: 16px 0 16px 15px;
 }
 
 .mx_MemberInfo_container {

src/components/structures/LoggedInView.js

@@ -421,6 +421,7 @@ const LoggedInView = React.createClass({
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
+        const UserView = sdk.getComponent('structures.UserView');
         const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
@@ -469,9 +470,7 @@ const LoggedInView = React.createClass({
                 break;
 
             case PageTypes.UserView:
-                pageElement = null; // deliberately null for now
+                pageElement = <UserView userId={this.props.currentUserId} />;
-                // TODO: fix/remove UserView
-                // right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
             case PageTypes.GroupView:
                 pageElement = <GroupView

src/components/structures/MatrixChat.js

@@ -1573,14 +1573,9 @@ export default React.createClass({
                     this._chatCreateOrReuse(userId);
                     return;
                 }
-
-                this._setPage(PageTypes.UserView);
                 this.notifyNewScreen('user/' + userId);
-                const member = new Matrix.RoomMember(null, userId);
+                this.setState({currentUserId: userId});
-                dis.dispatch({
+                this._setPage(PageTypes.UserView);
-                    action: 'view_user',
-                    member: member,
-                });
             });
         } else if (screen.indexOf('group/') == 0) {
             const groupId = screen.substring(6);

src/components/structures/RightPanel.js

@@ -32,6 +32,7 @@ export default class RightPanel extends React.Component {
         return {
             roomId: React.PropTypes.string, // if showing panels for a given room, this is set
             groupId: React.PropTypes.string, // if showing panels for a given group, this is set
+            user: React.PropTypes.object,
         };
     }
 
@@ -55,7 +56,7 @@ export default class RightPanel extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {
-            phase: this.props.groupId ? RightPanel.Phase.GroupMemberList : RightPanel.Phase.RoomMemberList,
+            phase: this._getPhaseFromProps(),
             isUserPrivilegedInGroup: null,
         };
         this.onAction = this.onAction.bind(this);
@@ -69,11 +70,24 @@ export default class RightPanel extends React.Component {
         }, 500);
     }
 
+    _getPhaseFromProps() {
+        if (this.props.groupId) {
+            return RightPanel.Phase.GroupMemberList;
+        } else if (this.props.user) {
+            return RightPanel.Phase.RoomMemberInfo;
+        } else {
+            return RightPanel.Phase.RoomMemberList;
+        }
+    }
+
     componentWillMount() {
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context.matrixClient;
         cli.on("RoomState.members", this.onRoomStateMember);
         this._initGroupStore(this.props.groupId);
+        if (this.props.user) {
+            this.setState({member: this.props.user});
+        }
     }
 
     componentWillUnmount() {

src/components/structures/UserView.js

@@ -0,0 +1,82 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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 Matrix from "matrix-js-sdk";
+import MatrixClientPeg from "../../MatrixClientPeg";
+import sdk from "../../index";
+import Modal from '../../Modal';
+import { _t } from '../../languageHandler';
+
+export default class UserView extends React.Component {
+    static get propTypes() {
+        return {
+            userId: React.PropTypes.string,
+        };
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    componentWillMount() {
+        if (this.props.userId) {
+            this._loadProfileInfo();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.userId !== this.props.userId) {
+            this._loadProfileInfo();
+        }
+    }
+
+    async _loadProfileInfo() {
+        const cli = MatrixClientPeg.get();
+        this.setState({loading: true});
+        let profileInfo;
+        try {
+            profileInfo = await cli.getProfileInfo(this.props.userId);
+        } catch (err) {
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            Modal.createTrackedDialog(_t('Could not load user profile'), '', ErrorDialog, {
+                title: _t('Could not load user profile'),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+            this.setState({loading: false});
+            return;
+        }
+        const fakeEvent = new Matrix.MatrixEvent({type: "m.room.member", content: profileInfo});
+        const member = new Matrix.RoomMember(null, this.props.userId);
+        member.setMembershipEvent(fakeEvent);
+        this.setState({member, loading: false});
+    }
+
+    render() {
+        if (this.state.loading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        } else if (this.state.member) {
+            const RightPanel = sdk.getComponent('structures.RightPanel');
+            const MainSplit = sdk.getComponent('structures.MainSplit');
+            const panel = <RightPanel user={this.state.member} />;
+            return (<MainSplit panel={panel}><div style={{flex: "1"}} /></MainSplit>);
+        } else {
+            return (<div />);
+        }
+    }
+}

src/components/views/rooms/MemberInfo.js

@@ -980,13 +980,18 @@ module.exports = withMatrixClient(React.createClass({
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         const EmojiText = sdk.getComponent('elements.EmojiText');
 
+        let backButton;
+        if (this.props.member.roomId) {
+            backButton = (<AccessibleButton className="mx_MemberInfo_cancel"
+                onClick={this.onCancel}
+                title={_t('Close')}
+            />);
+        }
+
         return (
             <div className="mx_MemberInfo">
                     <div className="mx_MemberInfo_name">
-                        <AccessibleButton className="mx_MemberInfo_cancel"
+                        { backButton }
-                            onClick={this.onCancel}
-                            title={_t('Close')}
-                        />
                         { e2eIconElement }
                         <EmojiText element="h2">{ memberName }</EmojiText>
                     </div>

src/i18n/strings/en_EN.json

@@ -1401,6 +1401,7 @@
     "Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",
     "Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
     "Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
+    "Could not load user profile": "Could not load user profile",
     "Failed to send email": "Failed to send email",
     "The email address linked to your account must be entered.": "The email address linked to your account must be entered.",
     "A new password must be entered.": "A new password must be entered.",