From f11505a9de646ca17ff31fe1b8d80f1fbec25411 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 20 Feb 2019 12:45:55 +0100
Subject: [PATCH 1/5] bring back user page

Adds a UserView that contains a MainSplit with an empty div
and a RightPanel, preset to the given member.

UserView fetches the profile and creates a fake member, which
it passed on to the RightPanel.

this doesn't use the view_user action on purpose, to avoid any
interference of the UserView when trying to view a room member.
---
 res/css/_components.scss                  |  1 +
 res/css/structures/_MainSplit.scss        | 21 +++++++
 res/css/views/rooms/_MemberInfo.scss      |  7 ++-
 src/components/structures/LoggedInView.js |  5 +-
 src/components/structures/MatrixChat.js   | 12 ++--
 src/components/structures/RightPanel.js   | 16 ++++-
 src/components/structures/UserView.js     | 77 +++++++++++++++++++++++
 src/components/views/rooms/MemberInfo.js  | 13 ++--
 8 files changed, 134 insertions(+), 18 deletions(-)
 create mode 100644 res/css/structures/_MainSplit.scss
 create mode 100644 src/components/structures/UserView.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 18c3597db0..6aed78a627 100644
--- a/res/css/_components.scss
+++ b/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";
diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
new file mode 100644
index 0000000000..d822247f56
--- /dev/null
+++ b/res/css/structures/_MainSplit.scss
@@ -0,0 +1,21 @@
+/*
+Copyright 2015, 2016 OpenMarket 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;
+}
diff --git a/res/css/views/rooms/_MemberInfo.scss b/res/css/views/rooms/_MemberInfo.scss
index 60faf3ef13..8f89b83003 100644
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/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 {
diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 2e1b91fe0e..c6c1be67ec 100644
--- a/src/components/structures/LoggedInView.js
+++ b/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
-                // TODO: fix/remove UserView
-                // right_panel = <RightPanel disabled={this.props.rightDisabled} />;
+                pageElement = <UserView userId={this.props.currentUserId} />;
                 break;
             case PageTypes.GroupView:
                 pageElement = <GroupView
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 8bc1fbdd07..ef0cc33fdc 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1574,13 +1574,11 @@ export default React.createClass({
                     return;
                 }
 
-                this._setPage(PageTypes.UserView);
-                this.notifyNewScreen('user/' + userId);
-                const member = new Matrix.RoomMember(null, userId);
-                dis.dispatch({
-                    action: 'view_user',
-                    member: member,
-                });
+                // get profile info here somehow
+
+            this.notifyNewScreen('user/' + userId);
+            this.setState({currentUserId: userId});
+            this._setPage(PageTypes.UserView);
             });
         } else if (screen.indexOf('group/') == 0) {
             const groupId = screen.substring(6);
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index be40957673..5c745b04cc 100644
--- a/src/components/structures/RightPanel.js
+++ b/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() {
diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js
new file mode 100644
index 0000000000..4321aaccb9
--- /dev/null
+++ b/src/components/structures/UserView.js
@@ -0,0 +1,77 @@
+/*
+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";
+
+
+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) {
+            // show dialog or error or something
+            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 />);
+        }
+    }
+}
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index c7ea54a4c8..b4af5398f6 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/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"
-                            onClick={this.onCancel}
-                            title={_t('Close')}
-                        />
+                        { backButton }
                         { e2eIconElement }
                         <EmojiText element="h2">{ memberName }</EmojiText>
                     </div>

From 23bcbc50e31c29b9dfff0529a9a45b3d290592b8 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 20 Feb 2019 12:52:29 +0100
Subject: [PATCH 2/5] show dialog when failing to load profile info

---
 src/components/structures/UserView.js | 9 +++++++--
 src/i18n/strings/en_EN.json           | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/UserView.js b/src/components/structures/UserView.js
index 4321aaccb9..2fe9c0937c 100644
--- a/src/components/structures/UserView.js
+++ b/src/components/structures/UserView.js
@@ -18,7 +18,8 @@ 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() {
@@ -51,7 +52,11 @@ export default class UserView extends React.Component {
         try {
             profileInfo = await cli.getProfileInfo(this.props.userId);
         } catch (err) {
-            // show dialog or error or something
+            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;
         }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5c813b1ae6..d5fb42160b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1402,6 +1402,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.",

From b364c9cb8eab3ffaa1e99215e8c5c206fbbfad46 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 21 Feb 2019 10:50:30 +0100
Subject: [PATCH 3/5] update copyright header

---
 res/css/structures/_MainSplit.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
index d822247f56..28c89fe7ca 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+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.

From ef704085f9cf278b1e1b4bcd9f7faccf624e6c5a Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 21 Feb 2019 10:50:41 +0100
Subject: [PATCH 4/5] remove display: flex declarations now present on
 mx_MainSplit itself

---
 res/css/structures/_GroupView.scss | 1 -
 res/css/structures/_RoomView.scss  | 1 -
 2 files changed, 2 deletions(-)

diff --git a/res/css/structures/_GroupView.scss b/res/css/structures/_GroupView.scss
index 1c477a959a..bfbc92ca05 100644
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@@ -170,7 +170,6 @@ limitations under the License.
 
 .mx_GroupView > .mx_MainSplit {
     flex: 1;
-    display: flex;
 }
 
 .mx_GroupView_body  {
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 77b868e391..8e3eb75608 100644
--- a/res/css/structures/_RoomView.scss
+++ b/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 {

From d9b8b0f988a111bebe2c9e212d52e41edc9bb0de Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 21 Feb 2019 10:51:09 +0100
Subject: [PATCH 5/5] fix indentation

---
 src/components/structures/MatrixChat.js  | 9 +++------
 src/components/views/rooms/MemberInfo.js | 6 +++---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index ef0cc33fdc..d6b074ef47 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1573,12 +1573,9 @@ export default React.createClass({
                     this._chatCreateOrReuse(userId);
                     return;
                 }
-
-                // get profile info here somehow
-
-            this.notifyNewScreen('user/' + userId);
-            this.setState({currentUserId: userId});
-            this._setPage(PageTypes.UserView);
+                this.notifyNewScreen('user/' + userId);
+                this.setState({currentUserId: userId});
+                this._setPage(PageTypes.UserView);
             });
         } else if (screen.indexOf('group/') == 0) {
             const groupId = screen.substring(6);
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index b4af5398f6..d7726c8fe8 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -983,9 +983,9 @@ module.exports = withMatrixClient(React.createClass({
         let backButton;
         if (this.props.member.roomId) {
             backButton = (<AccessibleButton className="mx_MemberInfo_cancel"
-                            onClick={this.onCancel}
-                            title={_t('Close')}
-                        />);
+                onClick={this.onCancel}
+                title={_t('Close')}
+            />);
         }
 
         return (