From a63299aae05ba35933309f968962df52b584b884 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 18 Jun 2015 11:23:35 +0100
Subject: [PATCH] Message scrolling

---
 src/organisms/RoomView.js | 27 +++++++++++++++++++++------
 src/pages/MatrixChat.js   |  2 +-
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/organisms/RoomView.js b/src/organisms/RoomView.js
index 8422ac4935..f8ecbdf959 100644
--- a/src/organisms/RoomView.js
+++ b/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;
+        }
+    }
 });
 
diff --git a/src/pages/MatrixChat.js b/src/pages/MatrixChat.js
index 12b49af6d8..3990ec0be3 100644
--- a/src/pages/MatrixChat.js
+++ b/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) {