handle room invites

css/molecules/RoomTile.css

@@ -27,6 +27,10 @@
     background-color: #66e;
 }
 
+.mx_RoomTile.invited {
+    background-color: #6e6;
+}
+
 .mx_RoomTile:hover {
     background-color: #ff8;
 }

css/organisms/RoomView.css

@@ -24,6 +24,17 @@
     list-style-type: none;
 }
 
+.mx_RoomView .mx_RoomView_invitePrompt {
+    text-align: center;
+    background-color: #ddd;
+    border: 1px solid black;
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 200px;
+    padding: 50px;
+}
+
 .mx_RoomView .mx_MemberList {
     position: absolute;
     top: 35px;

src/controllers/organisms/RoomView.js

@@ -26,23 +26,44 @@ module.exports = {
 
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
         if (room.roomId != this.props.roomId) return;
-        var messageUl = this.refs.messageList.getDOMNode();
+        
-        this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight;
+        if (this.refs.messageList) {
+            var messageUl = this.refs.messageList.getDOMNode();
+            this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight;
+        }
         this.setState({
             room: MatrixClientPeg.get().getRoom(this.props.roomId)
         });
     },
 
     componentDidMount: function() {
-        var messageUl = this.refs.messageList.getDOMNode();
+        if (this.refs.messageList) {
-        messageUl.scrollTop = messageUl.scrollHeight;
-    },
-
-    componentDidUpdate: function() {
-        if (this.atBottom) {
             var messageUl = this.refs.messageList.getDOMNode();
             messageUl.scrollTop = messageUl.scrollHeight;
         }
+    },
+
+    componentDidUpdate: function() {
+        if (this.refs.messageList && this.atBottom) {
+            var messageUl = this.refs.messageList.getDOMNode();
+            messageUl.scrollTop = messageUl.scrollHeight;
+        }
+    },
+
+    onJoinButtonClicked: function(ev) {
+        MatrixClientPeg.get().joinRoom(this.props.roomId).then(function() {
+            this.setState({
+                joining: undefined
+            });
+        }, function(error) {
+            this.setState({
+                joining: undefined,
+                joinError: error
+            });
+        });
+        this.setState({
+            joining: true
+        });
     }
 };
 

src/views/molecules/RoomTile.js

@@ -3,14 +3,18 @@ var classNames = require('classnames');
 
 var RoomTileController = require("../../controllers/molecules/RoomTile");
 
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
 module.exports = React.createClass({
     displayName: 'RoomTile',
     mixins: [RoomTileController],
     render: function() {
+        var myUserId = MatrixClientPeg.get().credentials.userId;
         var classes = classNames({
             'mx_RoomTile': true,
             'selected': this.props.selected,
-            'unread': this.props.unread
+            'unread': this.props.unread,
+            'invited': this.props.room.currentState.members[myUserId].membership == 'invite'
         });
         return (
             <div className={classes} onClick={this.onClick}>

src/views/organisms/RoomView.js

@@ -1,5 +1,7 @@
 var React = require('react');
 
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
 var ComponentBroker = require('../../ComponentBroker');
 
 var MessageTile = ComponentBroker.get('molecules/MessageTile');
@@ -9,6 +11,8 @@ var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
 
 var RoomViewController = require("../../controllers/organisms/RoomView");
 
+var Loader = require("react-loader");
+
 
 module.exports = React.createClass({
     displayName: 'RoomView',
@@ -23,18 +27,42 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        return (
+        var myUserId = MatrixClientPeg.get().credentials.userId;
-            <div className="mx_RoomView">
+        if (this.state.room.currentState.members[myUserId].membership == 'invite') {
-                <RoomHeader room={this.state.room} />
+            if (this.state.joining) {
-                <div className="mx_RoomView_HSplit">
+                return (
-                    <ul className="mx_RoomView_MessageList" ref="messageList">
+                    <div className="mx_RoomView">
-                        {this.getMessageTiles()}
+                        <Loader />
-                    </ul>
+                    </div>
-                    <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+                );
+            } else {
+                var inviteEvent = this.state.room.currentState.members[myUserId].events.member.event;
+                // XXX: Leaving this intentionally basic for now because invites are about to change totally
+                var joinErrorText = this.state.joinError ? "Failed to join room!" : "";
+                return (
+                    <div className="mx_RoomView">
+                        <div className="mx_RoomView_invitePrompt">
+                            <div>{inviteEvent.user_id} has invited you to a room</div>
+                            <button ref="joinButton" onClick={this.onJoinButtonClicked}>Join</button>
+                            <div className="error">{joinErrorText}</div>
+                        </div>
+                    </div>
+                );
+            }
+        } else {
+            return (
+                <div className="mx_RoomView">
+                    <RoomHeader room={this.state.room} />
+                    <div className="mx_RoomView_HSplit">
+                        <ul className="mx_RoomView_MessageList" ref="messageList">
+                            {this.getMessageTiles()}
+                        </ul>
+                        <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+                    </div>
+                    <MessageComposer roomId={this.props.roomId} />
                 </div>
-                <MessageComposer roomId={this.props.roomId} />
+            );
-            </div>
+        }
-        );
     },
 });