From d3cf78ff5abd3297cb1f51a3017d5236db114af5 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 14:17:49 +0100
Subject: [PATCH 01/18] Control currently viewied event via RoomViewStore

Fix for https://github.com/vector-im/riot-web/issues/4224

Due to the way `MatrixChat` does a state update when the `view_room` dispatch fires and a second update when `RoomViewStore` sends an update, the current event ID and room ID were becoming out of sync. The solution devised was to have the event ID managed by the `RoomViewStore` itself and do any defaulting there (for when we revisit a room that we saved scroll state for previously).

This required a few changes:
 - The addition of `update_scroll_state` in `RoomViewStore` allows the `RoomView` to save scroll state for a room before swapping to another one. Previously the caching of scroll state was done in `RoomView`.
 - The `view_room` dispatch now accepts an `event_id`, which dictates which event is supposed to be scrolled to in the `MessagePanel` when a new room is viewed. It also accepts `event_offset`, but currently, this isn't passed in by a dispatch in the app, but it is clobbered when loading the default position when an `event_id` isn't specified. Finally, `highlighted` was added to distinguish whether the initial event being scrolled to is also highlighted. This flag is also used by `viewRoom` in `MatrixChat` in order to decide whether to `notifyNewScreen` with the specified `event_id`.
---
 src/components/structures/LoggedInView.js |  2 -
 src/components/structures/MatrixChat.js   | 19 +----
 src/components/structures/RoomView.js     | 93 +++++++++--------------
 src/components/views/rooms/EventTile.js   |  1 +
 src/stores/RoomViewStore.js               | 72 +++++++++++++++++-
 5 files changed, 109 insertions(+), 78 deletions(-)

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index a201a0bea7..8fa35e84d7 100644
--- a/src/components/structures/LoggedInView.js
+++ b/src/components/structures/LoggedInView.js
@@ -223,10 +223,8 @@ export default React.createClass({
                         ref='roomView'
                         autoJoin={this.props.autoJoin}
                         onRegistered={this.props.onRegistered}
-                        eventId={this.props.initialEventId}
                         thirdPartyInvite={this.props.thirdPartyInvite}
                         oobData={this.props.roomOobData}
-                        highlightedEventId={this.props.highlightedEventId}
                         eventPixelOffset={this.props.initialEventPixelOffset}
                         key={this.props.currentRoomId || 'roomview'}
                         opacity={this.props.middleOpacity}
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index efb2b38d6e..b65fa0be1c 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -618,9 +618,6 @@ module.exports = React.createClass({
         this.focusComposer = true;
 
         const newState = {
-            initialEventId: roomInfo.event_id,
-            highlightedEventId: roomInfo.event_id,
-            initialEventPixelOffset: undefined,
             page_type: PageTypes.RoomView,
             thirdPartyInvite: roomInfo.third_party_invite,
             roomOobData: roomInfo.oob_data,
@@ -632,18 +629,6 @@ module.exports = React.createClass({
             newState.currentRoomId = roomInfo.room_id;
         }
 
-        // if we aren't given an explicit event id, look for one in the
-        // scrollStateMap.
-        //
-        // TODO: do this in RoomView rather than here
-        if (!roomInfo.event_id && this.refs.loggedInView) {
-            const scrollState = this.refs.loggedInView.getScrollStateForRoom(roomInfo.room_id);
-            if (scrollState) {
-                newState.initialEventId = scrollState.focussedEvent;
-                newState.initialEventPixelOffset = scrollState.pixelOffset;
-            }
-        }
-
         // Wait for the first sync to complete so that if a room does have an alias,
         // it would have been retrieved.
         let waitFor = q(null);
@@ -669,7 +654,7 @@ module.exports = React.createClass({
                 }
             }
 
-            if (roomInfo.event_id) {
+            if (roomInfo.event_id && roomInfo.highlighted) {
                 presentedId += "/" + roomInfo.event_id;
             }
             this.notifyNewScreen('room/' + presentedId);
@@ -1124,8 +1109,10 @@ module.exports = React.createClass({
             };
 
             const payload = {
+                id: '#mylovelyid',
                 action: 'view_room',
                 event_id: eventId,
+                highlighted: Boolean(eventId),
                 third_party_invite: thirdPartyInvite,
                 oob_data: oobData,
             };
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index df21715d75..a4c589187b 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -83,36 +83,8 @@ module.exports = React.createClass({
         //  *                      invited us tovthe room
         oobData: React.PropTypes.object,
 
-        // id of an event to jump to. If not given, will go to the end of the
-        // live timeline.
-        eventId: React.PropTypes.string,
-
-        // where to position the event given by eventId, in pixels from the
-        // bottom of the viewport. If not given, will try to put the event
-        // 1/3 of the way down the viewport.
-        eventPixelOffset: React.PropTypes.number,
-
-        // ID of an event to highlight. If undefined, no event will be highlighted.
-        // Typically this will either be the same as 'eventId', or undefined.
-        highlightedEventId: React.PropTypes.string,
-
         // is the RightPanel collapsed?
         collapsedRhs: React.PropTypes.bool,
-
-        // a map from room id to scroll state, which will be updated on unmount.
-        //
-        // If there is no special scroll state (ie, we are following the live
-        // timeline), the scroll state is null. Otherwise, it is an object with
-        // the following properties:
-        //
-        //    focussedEvent: the ID of the 'focussed' event. Typically this is
-        //        the last event fully visible in the viewport, though if we
-        //        have done an explicit scroll to an explicit event, it will be
-        //        that event.
-        //
-        //    pixelOffset: the number of pixels the window is scrolled down
-        //        from the focussedEvent.
-        scrollStateMap: React.PropTypes.object,
     },
 
     getInitialState: function() {
@@ -180,13 +152,28 @@ module.exports = React.createClass({
         if (this.unmounted) {
             return;
         }
-        this.setState({
+        const newState = {
             roomId: RoomViewStore.getRoomId(),
             roomAlias: RoomViewStore.getRoomAlias(),
             roomLoading: RoomViewStore.isRoomLoading(),
             roomLoadError: RoomViewStore.getRoomLoadError(),
             joining: RoomViewStore.isJoining(),
-        }, () => {
+            eventId: RoomViewStore.getEventId(),
+            eventPixelOffset: RoomViewStore.getEventPixelOffset(),
+            isEventHighlighted: RoomViewStore.isEventHighlighted(),
+        };
+
+        if (this.state.eventId !== newState.eventId) {
+            newState.searchResults = null;
+        }
+
+        // Store the scroll state for the previous room so that we can return to this
+        // position when viewing this room in future.
+        if (this.state.roomId !== newState.roomId) {
+            this._updateScrollMap(this.state.roomId);
+        }
+
+        this.setState(newState, () => {
             this._onHaveRoom();
             this.onRoom(MatrixClientPeg.get().getRoom(this.state.roomId));
         });
@@ -287,13 +274,6 @@ module.exports = React.createClass({
         }
     },
 
-    componentWillReceiveProps: function(newProps) {
-        if (newProps.eventId != this.props.eventId) {
-            // when we change focussed event id, hide the search results.
-            this.setState({searchResults: null});
-        }
-    },
-
     shouldComponentUpdate: function(nextProps, nextState) {
         return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
                 !ObjectUtils.shallowEqual(this.state, nextState));
@@ -319,7 +299,7 @@ module.exports = React.createClass({
         this.unmounted = true;
 
         // update the scroll map before we get unmounted
-        this._updateScrollMap();
+        this._updateScrollMap(this.state.roomId);
 
         if (this.refs.roomView) {
             // disconnect the D&D event listeners from the room view. This
@@ -598,6 +578,14 @@ module.exports = React.createClass({
         });
     },
 
+    _updateScrollMap(roomId) {
+        dis.dispatch({
+            action: 'update_scroll_state',
+            room_id: roomId,
+            scroll_state: this._getScrollState(),
+        });
+    },
+
     onRoom: function(room) {
         if (!room || room.roomId !== this.state.roomId) {
             return;
@@ -1240,21 +1228,6 @@ module.exports = React.createClass({
         }
     },
 
-    // update scrollStateMap on unmount
-    _updateScrollMap: function() {
-        if (!this.state.room) {
-            // we were instantiated on a room alias and haven't yet joined the room.
-            return;
-        }
-        if (!this.props.scrollStateMap) return;
-
-        var roomId = this.state.room.roomId;
-
-        var state = this._getScrollState();
-        this.props.scrollStateMap[roomId] = state;
-    },
-
-
     // get the current scroll position of the room, so that it can be
     // restored when we switch back to it.
     //
@@ -1677,6 +1650,14 @@ module.exports = React.createClass({
             hideMessagePanel = true;
         }
 
+        const shouldHighlight = this.state.isEventHighlighted;
+        let highlightedEventId = null;
+        if (this.state.forwardingEvent) {
+            highlightedEventId = this.state.forwardingEvent.getId();
+        } else if (shouldHighlight) {
+            highlightedEventId = this.state.eventId;
+        }
+
         // console.log("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
         var messagePanel = (
             <TimelinePanel ref={this._gatherTimelinePanelRef}
@@ -1684,9 +1665,9 @@ module.exports = React.createClass({
                 manageReadReceipts={!UserSettingsStore.getSyncedSetting('hideReadReceipts', false)}
                 manageReadMarkers={true}
                 hidden={hideMessagePanel}
-                highlightedEventId={this.state.forwardingEvent ? this.state.forwardingEvent.getId() : this.props.highlightedEventId}
-                eventId={this.props.eventId}
-                eventPixelOffset={this.props.eventPixelOffset}
+                highlightedEventId={highlightedEventId}
+                eventId={this.state.eventId}
+                eventPixelOffset={this.state.eventPixelOffset}
                 onScroll={ this.onMessageListScroll }
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
                 showUrlPreview = { this.state.showUrlPreview }
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index e527f53170..80f66e600d 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -381,6 +381,7 @@ module.exports = WithMatrixClient(React.createClass({
         dis.dispatch({
             action: 'view_room',
             event_id: this.props.mxEvent.getId(),
+            highlighted: true,
             room_id: this.props.mxEvent.getRoomId(),
         });
     },
diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index cc8959af7a..0529824a4b 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -27,12 +27,32 @@ const INITIAL_STATE = {
     joinError: null,
     // The room ID of the room
     roomId: null,
+    // The event being viewed
+    eventId: null,
+    // The offset to display the event at (see scrollStateMap)
+    eventPixelOffset: null,
+    // Whether to highlight the event
+    isEventHighlighted: false,
     // The room alias of the room (or null if not originally specified in view_room)
     roomAlias: null,
     // Whether the current room is loading
     roomLoading: false,
     // Any error that has occurred during loading
     roomLoadError: null,
+    // A map from room id to scroll state.
+    //
+    // If there is no special scroll state (ie, we are following the live
+    // timeline), the scroll state is null. Otherwise, it is an object with
+    // the following properties:
+    //
+    //    focussedEvent: the ID of the 'focussed' event. Typically this is
+    //        the last event fully visible in the viewport, though if we
+    //        have done an explicit scroll to an explicit event, it will be
+    //        that event.
+    //
+    //    pixelOffset: the number of pixels the window is scrolled down
+    //        from the focussedEvent.
+    scrollStateMap: {},
 };
 
 /**
@@ -56,8 +76,11 @@ class RoomViewStore extends Store {
     __onDispatch(payload) {
         switch (payload.action) {
             // view_room:
-            //      - room_alias: '#somealias:matrix.org'
-            //      - room_id:    '!roomid123:matrix.org'
+            //      - room_alias:   '#somealias:matrix.org'
+            //      - room_id:      '!roomid123:matrix.org'
+            //      - event_id:     '$213456782:matrix.org'
+            //      - event_offset: 100
+            //      - highlighted:  true
             case 'view_room':
                 this._viewRoom(payload);
                 break;
@@ -88,20 +111,39 @@ class RoomViewStore extends Store {
             case 'on_logged_out':
                 this.reset();
                 break;
+            case 'update_scroll_state':
+                this._updateScrollState(payload);
+                break;
         }
     }
 
     _viewRoom(payload) {
-        // Always set the room ID if present
         if (payload.room_id) {
+            // If an event ID wasn't specified, default to the one saved for this room
+            // via update_scroll_state. Also assume event_offset should be set.
+            if (!payload.event_id) {
+                const roomScrollState = this._state.scrollStateMap[payload.room_id];
+                if (roomScrollState) {
+                    payload.event_id = roomScrollState.focussedEvent;
+                    payload.event_offset = roomScrollState.pixelOffset;
+                }
+            }
+
             this._setState({
                 roomId: payload.room_id,
+                eventId: payload.event_id,
+                eventPixelOffset: payload.event_offset,
+                isEventHighlighted: payload.highlighted,
                 roomLoading: false,
                 roomLoadError: null,
             });
         } else if (payload.room_alias) {
+            // Resolve the alias and then do a second dispatch with the room ID acquired
             this._setState({
                 roomId: null,
+                eventId: null,
+                eventPixelOffset: null,
+                isEventHighlighted: null,
                 roomAlias: payload.room_alias,
                 roomLoading: true,
                 roomLoadError: null,
@@ -111,6 +153,8 @@ class RoomViewStore extends Store {
                 dis.dispatch({
                     action: 'view_room',
                     room_id: result.room_id,
+                    event_id: payload.event_id,
+                    highlighted: payload.highlighted,
                     room_alias: payload.room_alias,
                 });
             }, (err) => {
@@ -168,6 +212,15 @@ class RoomViewStore extends Store {
         });
     }
 
+    _updateScrollState(payload) {
+        // Clobber existing scroll state for the given room ID
+        const newScrollStateMap = this._state.scrollStateMap;
+        newScrollStateMap[payload.room_id] = payload.scroll_state;
+        this._setState({
+            scrollStateMap: newScrollStateMap,
+        });
+    }
+
     reset() {
         this._state = Object.assign({}, INITIAL_STATE);
     }
@@ -176,6 +229,18 @@ class RoomViewStore extends Store {
         return this._state.roomId;
     }
 
+    getEventId() {
+        return this._state.eventId;
+    }
+
+    getEventPixelOffset() {
+        return this._state.eventPixelOffset;
+    }
+
+    isEventHighlighted() {
+        return this._state.isEventHighlighted;
+    }
+
     getRoomAlias() {
         return this._state.roomAlias;
     }
@@ -195,7 +260,6 @@ class RoomViewStore extends Store {
     getJoinError() {
         return this._state.joinError;
     }
-
 }
 
 let singletonRoomViewStore = null;

From f320f7d475465f0fa1fae3e15f2c666a2d14c678 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 14:30:45 +0100
Subject: [PATCH 02/18] Remove redundant action id

---
 src/components/structures/MatrixChat.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index b65fa0be1c..1f9d2f6bb8 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1109,7 +1109,6 @@ module.exports = React.createClass({
             };
 
             const payload = {
-                id: '#mylovelyid',
                 action: 'view_room',
                 event_id: eventId,
                 highlighted: Boolean(eventId),

From aa20ad706e0f6110801a6e30c884f21be46d76a1 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:30:43 +0100
Subject: [PATCH 03/18] Remove redundant `currentRoomAlias`

---
 src/components/structures/MatrixChat.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index a115e89062..0493456e0e 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -621,7 +621,6 @@ module.exports = React.createClass({
             page_type: PageTypes.RoomView,
             thirdPartyInvite: roomInfo.third_party_invite,
             roomOobData: roomInfo.oob_data,
-            currentRoomAlias: roomInfo.room_alias,
             autoJoin: roomInfo.auto_join,
         };
 

From 8ddc38c9b107ddd3d143e0269f7609c2444e4bbd Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:32:31 +0100
Subject: [PATCH 04/18] Doc _viewRoom highlighted

---
 src/components/structures/MatrixChat.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 0493456e0e..f34cc8b0ef 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -607,6 +607,7 @@ module.exports = React.createClass({
     // @param {boolean=} roomInfo.show_settings Makes RoomView show the room settings dialog.
     // @param {string=} roomInfo.event_id ID of the event in this room to show: this will cause a switch to the
     //                                    context of that particular event.
+    // @param {boolean=} roomInfo.highlighted If true, add event_id to the hash of the URL
     // @param {Object=} roomInfo.third_party_invite Object containing data about the third party
     //                                    we received to join the room, if any.
     // @param {string=} roomInfo.third_party_invite.inviteSignUrl 3pid invite sign URL

From 2e82bf40fb7996f909b68ab8ad4fdc94ef489c47 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:34:20 +0100
Subject: [PATCH 05/18] Explain setting of highlighted in room/$eventId
 showScreen handling.

---
 src/components/structures/MatrixChat.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index f34cc8b0ef..5f13f53d0b 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1118,6 +1118,7 @@ module.exports = React.createClass({
             const payload = {
                 action: 'view_room',
                 event_id: eventId,
+                // If an event ID is set (truthy), mark it as highlighted
                 highlighted: Boolean(eventId),
                 third_party_invite: thirdPartyInvite,
                 oob_data: oobData,

From dca2be632591c64914421329a3a9743232019ec6 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:37:30 +0100
Subject: [PATCH 06/18] Add RoomView initial state and docs

---
 src/components/structures/RoomView.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index a4c589187b..f5db36a581 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -94,6 +94,13 @@ module.exports = React.createClass({
             roomLoading: true,
             peekLoading: false,
 
+            // The event to be scrolled to initially
+            eventId: null,
+            // The offset in pixels from the event with which to scroll vertically
+            eventPixelOffset: null,
+            // Whether to highlight the event scrolled to
+            isEventHighlighted: null,
+
             forwardingEvent: null,
             editingRoomSettings: false,
             uploadingRoomSettings: false,

From e58e4db628c17e54d396570f4d6cf7e216eb11d6 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:38:58 +0100
Subject: [PATCH 07/18] Explain why search results are cleared when eventId
 changes

---
 src/components/structures/RoomView.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index f5db36a581..180e6ebc89 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -170,6 +170,8 @@ module.exports = React.createClass({
             isEventHighlighted: RoomViewStore.isEventHighlighted(),
         };
 
+        // Clear the search results when clicking a search result (which changes the
+        // currently scrolled to event, this.state.eventId).
         if (this.state.eventId !== newState.eventId) {
             newState.searchResults = null;
         }

From 59e649f326aaff78253ae40cb824f78969b3b611 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:43:45 +0100
Subject: [PATCH 08/18] Add comment about roomId potentially not being resolved
 following an update from RoomViewStore

---
 src/components/structures/RoomView.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 180e6ebc89..cfa4038114 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -183,6 +183,8 @@ module.exports = React.createClass({
         }
 
         this.setState(newState, () => {
+            // At this point, this.state.roomId could be null (e.g. the alias might not
+            // have been resolved yet) so anything called here must handle this case.
             this._onHaveRoom();
             this.onRoom(MatrixClientPeg.get().getRoom(this.state.roomId));
         });

From 1792fa45f4732aae292f85a85903d1199be87a65 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:45:50 +0100
Subject: [PATCH 09/18] Null-guard roomId before sending a dispatch to update
 scroll state

Otherwise we pointlessly assign the null key to something
---
 src/components/structures/RoomView.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index cfa4038114..06e65589d1 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -590,6 +590,10 @@ module.exports = React.createClass({
     },
 
     _updateScrollMap(roomId) {
+        // No point updating scroll state if the room ID hasn't been resolved yet
+        if (!roomId) {
+            return;
+        }
         dis.dispatch({
             action: 'update_scroll_state',
             room_id: roomId,

From 000a045e3523ed7154fb3817e06d3ee5cf343439 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:47:41 +0100
Subject: [PATCH 10/18] Rename RVS state (event -> initialEvent) and redocument

---
 src/components/structures/RoomView.js | 18 ++++++-------
 src/stores/RoomViewStore.js           | 38 ++++++++++++++-------------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 06e65589d1..942e3c8e07 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -165,14 +165,14 @@ module.exports = React.createClass({
             roomLoading: RoomViewStore.isRoomLoading(),
             roomLoadError: RoomViewStore.getRoomLoadError(),
             joining: RoomViewStore.isJoining(),
-            eventId: RoomViewStore.getEventId(),
-            eventPixelOffset: RoomViewStore.getEventPixelOffset(),
-            isEventHighlighted: RoomViewStore.isEventHighlighted(),
+            initialEventId: RoomViewStore.getInitialEventId(),
+            initialEventPixelOffset: RoomViewStore.getInitialEventPixelOffset(),
+            isInitialEventHighlighted: RoomViewStore.isInitialEventHighlighted(),
         };
 
         // Clear the search results when clicking a search result (which changes the
-        // currently scrolled to event, this.state.eventId).
-        if (this.state.eventId !== newState.eventId) {
+        // currently scrolled to event, this.state.initialEventId).
+        if (this.state.initialEventId !== newState.initialEventId) {
             newState.searchResults = null;
         }
 
@@ -1665,12 +1665,12 @@ module.exports = React.createClass({
             hideMessagePanel = true;
         }
 
-        const shouldHighlight = this.state.isEventHighlighted;
+        const shouldHighlight = this.state.isInitialEventHighlighted;
         let highlightedEventId = null;
         if (this.state.forwardingEvent) {
             highlightedEventId = this.state.forwardingEvent.getId();
         } else if (shouldHighlight) {
-            highlightedEventId = this.state.eventId;
+            highlightedEventId = this.state.initialEventId;
         }
 
         // console.log("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
@@ -1681,8 +1681,8 @@ module.exports = React.createClass({
                 manageReadMarkers={true}
                 hidden={hideMessagePanel}
                 highlightedEventId={highlightedEventId}
-                eventId={this.state.eventId}
-                eventPixelOffset={this.state.eventPixelOffset}
+                eventId={this.state.initialEventId}
+                eventPixelOffset={this.state.initialEventPixelOffset}
                 onScroll={ this.onMessageListScroll }
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
                 showUrlPreview = { this.state.showUrlPreview }
diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index 0529824a4b..8277aeda97 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -27,12 +27,14 @@ const INITIAL_STATE = {
     joinError: null,
     // The room ID of the room
     roomId: null,
-    // The event being viewed
-    eventId: null,
-    // The offset to display the event at (see scrollStateMap)
-    eventPixelOffset: null,
-    // Whether to highlight the event
-    isEventHighlighted: false,
+
+    // The event to scroll to initially
+    initialEventId: null,
+    // The offset to display the initial event at (see scrollStateMap)
+    initialEventPixelOffset: null,
+    // Whether to highlight the initial event
+    isInitialEventHighlighted: false,
+
     // The room alias of the room (or null if not originally specified in view_room)
     roomAlias: null,
     // Whether the current room is loading
@@ -131,9 +133,9 @@ class RoomViewStore extends Store {
 
             this._setState({
                 roomId: payload.room_id,
-                eventId: payload.event_id,
-                eventPixelOffset: payload.event_offset,
-                isEventHighlighted: payload.highlighted,
+                initialEventId: payload.event_id,
+                initialEventPixelOffset: payload.event_offset,
+                isInitialEventHighlighted: payload.highlighted,
                 roomLoading: false,
                 roomLoadError: null,
             });
@@ -141,9 +143,9 @@ class RoomViewStore extends Store {
             // Resolve the alias and then do a second dispatch with the room ID acquired
             this._setState({
                 roomId: null,
-                eventId: null,
-                eventPixelOffset: null,
-                isEventHighlighted: null,
+                initialEventId: null,
+                initialEventPixelOffset: null,
+                isInitialEventHighlighted: null,
                 roomAlias: payload.room_alias,
                 roomLoading: true,
                 roomLoadError: null,
@@ -229,16 +231,16 @@ class RoomViewStore extends Store {
         return this._state.roomId;
     }
 
-    getEventId() {
-        return this._state.eventId;
+    getInitialEventId() {
+        return this._state.initialEventId;
     }
 
-    getEventPixelOffset() {
-        return this._state.eventPixelOffset;
+    getInitialEventPixelOffset() {
+        return this._state.initialEventPixelOffset;
     }
 
-    isEventHighlighted() {
-        return this._state.isEventHighlighted;
+    isInitialEventHighlighted() {
+        return this._state.isInitialEventHighlighted;
     }
 
     getRoomAlias() {

From 36f72cccb51d4be536509b8879321660b604d90c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 15:54:23 +0100
Subject: [PATCH 11/18] Don't alter members of payload (when defaulting an
 event to scroll to), alter a copy

---
 src/stores/RoomViewStore.js | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index 8277aeda97..a0c9ccc33f 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -121,24 +121,26 @@ class RoomViewStore extends Store {
 
     _viewRoom(payload) {
         if (payload.room_id) {
-            // If an event ID wasn't specified, default to the one saved for this room
-            // via update_scroll_state. Also assume event_offset should be set.
-            if (!payload.event_id) {
-                const roomScrollState = this._state.scrollStateMap[payload.room_id];
-                if (roomScrollState) {
-                    payload.event_id = roomScrollState.focussedEvent;
-                    payload.event_offset = roomScrollState.pixelOffset;
-                }
-            }
-
-            this._setState({
+            const newState = {
                 roomId: payload.room_id,
                 initialEventId: payload.event_id,
                 initialEventPixelOffset: payload.event_offset,
                 isInitialEventHighlighted: payload.highlighted,
                 roomLoading: false,
                 roomLoadError: null,
-            });
+            };
+
+            // If an event ID wasn't specified, default to the one saved for this room
+            // via update_scroll_state. Assume initialEventPixelOffset should be set.
+            if (!newState.initialEventId) {
+                const roomScrollState = this._state.scrollStateMap[payload.room_id];
+                if (roomScrollState) {
+                    newState.initialEventId = roomScrollState.focussedEvent;
+                    newState.initialEventPixelOffset = roomScrollState.pixelOffset;
+                }
+            }
+
+            this._setState(newState);
         } else if (payload.room_alias) {
             // Resolve the alias and then do a second dispatch with the room ID acquired
             this._setState({

From 1ff2be189605c5827dbeedc462446b29b388361b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 16:00:12 +0100
Subject: [PATCH 12/18] Update docs for RVS

---
 src/stores/RoomViewStore.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index a0c9ccc33f..e2a3f574ed 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -23,9 +23,9 @@ import { _t } from '../languageHandler';
 const INITIAL_STATE = {
     // Whether we're joining the currently viewed room
     joining: false,
-    // Any error occurred during joining
+    // Any error that has occurred during joining
     joinError: null,
-    // The room ID of the room
+    // The room ID of the room currently being viewed
     roomId: null,
 
     // The event to scroll to initially
@@ -229,38 +229,47 @@ class RoomViewStore extends Store {
         this._state = Object.assign({}, INITIAL_STATE);
     }
 
+    // The room ID of the room currently being viewed
     getRoomId() {
         return this._state.roomId;
     }
 
+    // The event to scroll to initially
     getInitialEventId() {
         return this._state.initialEventId;
     }
 
+    // The offset to display the initial event at (see scrollStateMap)
     getInitialEventPixelOffset() {
         return this._state.initialEventPixelOffset;
     }
 
+    // Whether to highlight the initial event
     isInitialEventHighlighted() {
         return this._state.isInitialEventHighlighted;
     }
 
+    // The room alias of the room (or null if not originally specified in view_room)
     getRoomAlias() {
         return this._state.roomAlias;
     }
 
+    // Whether the current room is loading (true whilst resolving an alias)
     isRoomLoading() {
         return this._state.roomLoading;
     }
 
+    // Any error that has occurred during loading
     getRoomLoadError() {
         return this._state.roomLoadError;
     }
 
+    // Whether we're joining the currently viewed room
     isJoining() {
         return this._state.joining;
     }
 
+    // Any error that has occurred during joining
     getJoinError() {
         return this._state.joinError;
     }

From c02dbd1cdcde8b82db68e1ef9e2ff6d285ad3789 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 17:26:08 +0100
Subject: [PATCH 13/18] Rename initial state variables

---
 src/components/structures/RoomView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 942e3c8e07..79420e776a 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -95,11 +95,11 @@ module.exports = React.createClass({
             peekLoading: false,
 
             // The event to be scrolled to initially
-            eventId: null,
+            initialEventId: null,
             // The offset in pixels from the event with which to scroll vertically
-            eventPixelOffset: null,
+            initialEventPixelOffset: null,
             // Whether to highlight the event scrolled to
-            isEventHighlighted: null,
+            isInitialEventHighlighted: null,
 
             forwardingEvent: null,
             editingRoomSettings: false,

From 8cfdb4ce091dc947ffe3f9b4a8a98c04b236f208 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 17:27:04 +0100
Subject: [PATCH 14/18] Clarify initial event

---
 src/stores/RoomViewStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index e2a3f574ed..ec1a86b0e4 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -28,7 +28,7 @@ const INITIAL_STATE = {
     // The room ID of the room currently being viewed
     roomId: null,
 
-    // The event to scroll to initially
+    // The event to scroll to when the room is first viewed
     initialEventId: null,
     // The offset to display the initial event at (see scrollStateMap)
     initialEventPixelOffset: null,

From cd8093d953abf69784aca82bbb1b076773a6cd28 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 17:28:21 +0100
Subject: [PATCH 15/18] Explicit undefined initialEventPixelOffset

---
 src/stores/RoomViewStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index ec1a86b0e4..ec545dcfd5 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -124,7 +124,7 @@ class RoomViewStore extends Store {
             const newState = {
                 roomId: payload.room_id,
                 initialEventId: payload.event_id,
-                initialEventPixelOffset: payload.event_offset,
+                initialEventPixelOffset: undefined,
                 isInitialEventHighlighted: payload.highlighted,
                 roomLoading: false,
                 roomLoadError: null,

From c72edab7267dc408fbd2d4900f9deb7fefeb16d4 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 17:28:56 +0100
Subject: [PATCH 16/18] Update doc for getInitialEventId

---
 src/stores/RoomViewStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js
index ec545dcfd5..15a46894a1 100644
--- a/src/stores/RoomViewStore.js
+++ b/src/stores/RoomViewStore.js
@@ -234,7 +234,7 @@ class RoomViewStore extends Store {
         return this._state.roomId;
     }
 
-    // The event to scroll to initially
+    // The event to scroll to when the room is first viewed
     getInitialEventId() {
         return this._state.initialEventId;
     }

From 9892566007f2790e2e8295b7e7093977f61672d5 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 17:54:41 +0100
Subject: [PATCH 17/18] Highlighted means highlighted

---
 src/components/structures/MatrixChat.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 5f13f53d0b..b803b676f7 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -608,6 +608,7 @@ module.exports = React.createClass({
     // @param {string=} roomInfo.event_id ID of the event in this room to show: this will cause a switch to the
     //                                    context of that particular event.
     // @param {boolean=} roomInfo.highlighted If true, add event_id to the hash of the URL
+    //                                        and alter the EventTile to appear highlighted.
     // @param {Object=} roomInfo.third_party_invite Object containing data about the third party
     //                                    we received to join the room, if any.
     // @param {string=} roomInfo.third_party_invite.inviteSignUrl 3pid invite sign URL

From 5588e115eb9be9a1cf10fe4c7e33b9a3e44cbc86 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 8 Jun 2017 17:57:37 +0100
Subject: [PATCH 18/18] Clarify doc for highlighted

---
 src/components/structures/MatrixChat.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index b803b676f7..b6e3552a95 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1119,7 +1119,9 @@ module.exports = React.createClass({
             const payload = {
                 action: 'view_room',
                 event_id: eventId,
-                // If an event ID is set (truthy), mark it as highlighted
+                // If an event ID is given in the URL hash, notify RoomViewStore to mark
+                // it as highlighted, which will propagate to RoomView and highlight the
+                // associated EventTile.
                 highlighted: Boolean(eventId),
                 third_party_invite: thirdPartyInvite,
                 oob_data: oobData,