Message scrolling

src/organisms/RoomView.js

@@ -17,6 +17,7 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+        this.atBottom = true;
     },
 
     componentWillUnmount: function() {
@@ -25,14 +26,16 @@ module.exports = React.createClass({
         }
     },
 
-    componentWillReceiveProps: function(props) {
-        this.setState({
-            room: MatrixClientPeg.get().getRoom(props.roomId)
-        });
-    },
+    // MatrixRoom still showing the messages from the old room?
+    // Set the key to the room_id. Sadly you can no longer get at
+    // the key from inside the component, or we'd check this in code.
+    /*componentWillReceiveProps: function(props) {
+    },*/
 
     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;
         this.setState({
             room: MatrixClientPeg.get().getRoom(this.props.roomId)
         });
@@ -50,12 +53,24 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomView">
                 <RoomHeader room={this.state.room} />
-                <ul>
+                <ul ref="messageList">
                     {this.getMessageTiles()}
                 </ul>
                 <MessageComposer roomId={this.props.roomId} />
             </div>
         );
     },
+    
+    componentDidMount: function() {
+        var messageUl = this.refs.messageList.getDOMNode();
+        messageUl.scrollTop = messageUl.scrollHeight;
+    },
+
+    componentDidUpdate: function() {
+        if (this.atBottom) {
+            var messageUl = this.refs.messageList.getDOMNode();
+            messageUl.scrollTop = messageUl.scrollHeight;
+        }
+    }
 });
 

src/pages/MatrixChat.js

@@ -77,7 +77,7 @@ module.exports = React.createClass({
                         <MatrixToolbar />
                         <RoomList selectedRoom={this.state.currentRoom} />
                     </div>
-                    <RoomView roomId={this.state.currentRoom} />
+                    <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
                 </div>
             );
         } else if (this.state.logged_in) {