Split out render methods into 'views' leaving UI logic in 'controllers'. Hopefully should make it easier to skin / customise.

src/controllers/organisms/RoomList.js

@@ -0,0 +1,59 @@
+var React = require("react");
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+var ComponentBroker = require('../../ComponentBroker');
+
+var RoomTile = ComponentBroker.get("molecules/RoomTile");
+
+module.exports = {
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("Room.timeline", this.onRoomTimeline);
+
+        this.setState({
+            roomList: cli.getRooms(),
+            activityMap: {}
+        });
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+        }
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this.state.activityMap[newProps.selectedRoom] = undefined;
+        this.setState({
+            activityMap: this.state.activityMap
+        });
+    },
+
+    onRoomTimeline: function(ev, room, toStartOfTimeline) {
+        if (room.roomId == this.props.selectedRoom) return;
+        if (ev.getSender() == MatrixClientPeg.get().credentials.userId) return;
+
+        // obviously this won't deep copy but we this shouldn't be necessary
+        var amap = this.state.activityMap;
+        amap[room.roomId] = 1;
+        this.setState({
+            roomMap: amap
+        });
+    },
+
+    makeRoomTiles: function() {
+        var that = this;
+        return this.state.roomList.map(function(room) {
+            var selected = room.roomId == that.props.selectedRoom;
+            return (
+                <RoomTile
+                    room={room}
+                    key={room.roomId}
+                    selected={selected}
+                    unread={that.state.activityMap[room.roomId] === 1}
+                />
+            );
+        });
+    },
+};
+

src/controllers/organisms/RoomView.js

@@ -0,0 +1,48 @@
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
+module.exports = {
+    getInitialState: function() {
+        return {
+            room: MatrixClientPeg.get().getRoom(this.props.roomId)
+        }
+    },
+
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+        this.atBottom = true;
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+        }
+    },
+
+    // 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)
+        });
+    },
+
+    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;
+        }
+    }
+};
+