Add basic group view

src/components/structures/GroupView.js

@@ -0,0 +1,130 @@
+/*
+Copyright 2017 Vector Creations 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 MatrixClientPeg from '../../MatrixClientPeg';
+import sdk from '../../index';
+import sanitizeHtml from "sanitize-html";
+import { sanitizeHtmlParams } from '../../HtmlUtils';
+
+
+module.exports = React.createClass({
+    displayName: 'GroupView',
+
+    propTypes: {
+        groupId: React.PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            phase: "GroupView.LOADING",  // LOADING / DISPLAY / ERROR / NOT_FOUND
+            summary: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this.setState({
+            phase: "GroupView.LOADING",
+            summary: null,
+        })
+        this._loadGroupFromServer(this.props.groupId)
+    },
+
+    componentWillReceiveProps: function(new_props) {
+        if (this.props.groupId != new_props.groupId) {
+            this.setState({
+                phase: "GroupView.LOADING",
+                summary: null,
+            })
+            this._loadGroupFromServer(new_props.groupId);
+        }
+    },
+
+    _loadGroupFromServer: function(groupId) {
+        const self = this;
+        MatrixClientPeg.get().getGroupSummary(groupId).done(function(res) {
+            self.setState({
+                phase: "GroupView.DISPLAY",
+                summary: res,
+            });
+        }, function(err) {
+            self.setState({
+                phase: err.errcode == 404 ? "GroupView.NOT_FOUND" :"GroupView.ERROR",
+                summary: null,
+            });
+        });
+    },
+
+    render: function() {
+        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        var Loader = sdk.getComponent("elements.Spinner");
+
+        if (this.state.phase == "GroupView.LOADING") {
+            return (
+                <div style={{margin: "auto"}}>
+                    <Loader />
+                </div>
+            );
+        } else if (this.state.phase == "GroupView.DISPLAY") {
+            const summary = this.state.summary;
+            let avatar_url = null;
+            if (summary.profile.avatar_url) {
+                avatar_url = MatrixClientPeg.get().mxcUrlToHttp(summary.profile.avatar_url);
+            }
+            let description = null;
+            if (summary.profile.long_description) {
+                description = sanitizeHtml(summary.profile.long_description);
+            }
+            return (
+                <div style={{maxWidth: "960px", width: "100%", "margin": "20px auto"}}>
+                    <div className="mx_RoomHeader">
+                        <div className="mx_RoomHeader_wrapper">
+                            <div className="mx_RoomHeader_avatar">
+                                <BaseAvatar url={avatar_url} name={summary.profile.name}
+                                    width={48} height={48} />
+                            </div>
+                            <div className="mx_RoomHeader_info">
+                                <div className="mx_RoomHeader_name">
+                                    <span>{summary.profile.name}</span>
+                                    <span style={{
+                                        fontWeight: "normal",
+                                        fontSize: "initial",
+                                        paddingLeft: "10px",
+                                    }}>
+                                        ({this.props.groupId})
+                                    </span>
+                                </div>
+                                <div className="mx_RoomHeader_topic">
+                                    {summary.profile.short_description}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div dangerouslySetInnerHTML={{ __html: description }} />
+                </div>
+            );
+        } else if (this.state.phase == "GroupView.NOT_FOUND") {
+            <div style={{margin: "auto"}}>
+                Group {this.props.groupId} not found
+            </div>
+        } else {
+            return (
+                <div style={{margin: "auto"}}>
+                    Failed to load {this.props.groupId}
+                </div>
+            );
+        }
+    },
+});

src/components/structures/LoggedInView.js

@@ -179,6 +179,7 @@ export default React.createClass({
         const CreateRoom = sdk.getComponent('structures.CreateRoom');
         const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
         const HomePage = sdk.getComponent('structures.HomePage');
+        const GroupView = sdk.getComponent('structures.GroupView');
         const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
         const GuestWarningBar = sdk.getComponent('globals.GuestWarningBar');
         const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
@@ -247,6 +248,12 @@ export default React.createClass({
                 page_element = null; // deliberately null for now
                 right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.rightOpacity} />;
                 break;
+            case PageTypes.GroupView:
+                // TODO
+                page_element = <GroupView
+                    groupId={this.props.currentGroupId}
+                />
+                break;
         }
 
         var topBar;

src/components/structures/MatrixChat.js

@@ -261,6 +261,9 @@ module.exports = React.createClass({
         if (this.onUserClick) {
             linkifyMatrix.onUserClick = this.onUserClick;
         }
+        if (this.onGroupClick) {
+            linkifyMatrix.onGroupClick = this.onGroupClick;
+        }
 
         window.addEventListener('resize', this.handleResize);
         this.handleResize();
@@ -458,6 +461,12 @@ module.exports = React.createClass({
                 this._setPage(PageTypes.RoomDirectory);
                 this.notifyNewScreen('directory');
                 break;
+            case 'view_group':
+                const groupId = payload.group_id;
+                this.setState({currentGroupId: groupId});
+                this._setPage(PageTypes.GroupView);
+                this.notifyNewScreen('group/' + groupId);
+                break;
             case 'view_home_page':
                 if (!this._teamToken) {
                     dis.dispatch({action: 'view_room_directory'});
@@ -1001,6 +1010,15 @@ module.exports = React.createClass({
                     member: member,
                 });
             }
+        } else if (screen.indexOf('group/') == 0) {
+            const groupId = screen.substring(6);
+
+            // TODO: Check valid group ID
+
+            dis.dispatch({
+                action: 'view_group',
+                group_id: groupId,
+            });
         } else {
             console.info("Ignoring showScreen for '%s'", screen);
         }
@@ -1029,6 +1047,11 @@ module.exports = React.createClass({
         });
     },
 
+    onGroupClick: function(event, groupId) {
+        event.preventDefault();
+        dis.dispatch({action: 'view_group', group_id: groupId});
+    },
+
     onLogoutClick: function(event) {
         dis.dispatch({
             action: 'logout',