From 0fd0b0c5f3adcaf740662f1e6815a862746b3666 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 22 Apr 2016 17:05:48 +0100
Subject: [PATCH 1/4] Whitespace fixes

Fix some trailing whitespace
---
 src/components/structures/MatrixChat.js |  2 +-
 src/components/structures/RoomView.js   | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 09583951fc..fca688ee15 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1181,7 +1181,7 @@ module.exports = React.createClass({
                     defaultIsUrl={this.props.config.default_is_url}
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
-                    onForgotPasswordClick={this.onForgotPasswordClick} 
+                    onForgotPasswordClick={this.onForgotPasswordClick}
                     onLoginAsGuestClick={this.props.enableGuest && this.props.config && this.props.config.default_hs_url ? this._registerAsGuest.bind(this, true) : undefined}
                     onCancelClick={ this.state.guestCreds ? this.onReturnToGuestClick : null }
                     />
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index ac848030af..9b8322f69e 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -210,7 +210,7 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
 
-        window.removeEventListener('resize', this.onResize);        
+        window.removeEventListener('resize', this.onResize);
 
         // no need to do this as Dir & Settings are now overlays. It just burnt CPU.
         // console.log("Tinter.tint from RoomView.unmount");
@@ -878,7 +878,7 @@ module.exports = React.createClass({
         this.setState({
             uploadingRoomSettings: true,
         });
-        
+
         var newName = this.refs.header.getEditedName();
         if (newName !== undefined) {
             this.refs.room_settings.setName(newName);
@@ -887,7 +887,7 @@ module.exports = React.createClass({
         if (newTopic !== undefined) {
             this.refs.room_settings.setTopic(newTopic);
         }
-        
+
         this.refs.room_settings.save().then((results) => {
             var fails = results.filter(function(result) { return result.state !== "fulfilled" });
             console.log("Settings saved with %s errors", fails.length);
@@ -1229,7 +1229,7 @@ module.exports = React.createClass({
                                 rightPanelCollapsed={ this.props.rightPanelCollapsed }
                             />
                             <div className="mx_RoomView_auxPanel">
-                                <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } 
+                                <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
                                                 onRejectClick={ this.onRejectThreepidInviteButtonClicked }
                                                 canJoin={ true } canPreview={ false }
                                                 spinner={this.state.joining}
@@ -1266,7 +1266,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomView">
                         <RoomHeader ref="header" room={this.state.room}/>
                         <div className="mx_RoomView_auxPanel">
-                            <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked } 
+                            <RoomPreviewBar onJoinClick={ this.onJoinButtonClicked }
                                             onRejectClick={ this.onRejectButtonClicked }
                                             inviterName={ inviterName }
                                             canJoin={ true } canPreview={ false }
@@ -1402,8 +1402,8 @@ module.exports = React.createClass({
             }
             voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
-                    <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"} 
-                         alt={call.isMicrophoneMuted() ? "Click to unmute audio" : "Click to mute audio"} 
+                    <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
+                         alt={call.isMicrophoneMuted() ? "Click to unmute audio" : "Click to mute audio"}
                          width="21" height="26"/>
                 </div>
 

From ca0c697b6e3e1fcdb2b95f8cdd00757c546866d2 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 22 Apr 2016 17:03:15 +0100
Subject: [PATCH 2/4] Avoid rerendering during Room unmount

might speed up room changing by a few milliseconds
---
 src/components/structures/MessagePanel.js       | 11 +++++++++++
 src/components/views/rooms/EventTile.js         |  7 +++++++
 src/components/views/rooms/ReadReceiptMarker.js | 12 ++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 49f4783eaa..16b4892bc0 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -85,6 +85,12 @@ module.exports = React.createClass({
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
         // to manage its animations
         this._readReceiptMap = {};
+
+        this._isMounted = true;
+    },
+
+    componentWillUnmount: function() {
+        this._isMounted = false;
     },
 
     /* get the DOM node representing the given event */
@@ -201,6 +207,10 @@ module.exports = React.createClass({
         }
     },
 
+    _isUnmounting: function() {
+        return !this._isMounted;
+    },
+
     _getEventTiles: function() {
         var EventTile = sdk.getComponent('rooms.EventTile');
 
@@ -351,6 +361,7 @@ module.exports = React.createClass({
                         onWidgetLoad={this._onWidgetLoad}
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
+                        checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.status}
                         last={last} isSelectedEvent={highlight}/>
                 </li>
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 5c70c9da10..7db8af9312 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -116,6 +116,12 @@ module.exports = React.createClass({
          */
         readReceiptMap: React.PropTypes.object,
 
+        /* A function which is used to check if the parent panel is being
+         * unmounted, to avoid unnecessary work. Should return true if we
+         * are being unmounted.
+         */
+        checkUnmounting: React.PropTypes.func,
+
         /* the status of this event - ie, mxEvent.status. Denormalised to here so
          * that we can tell when it changes. */
         eventSendStatus: React.PropTypes.string,
@@ -261,6 +267,7 @@ module.exports = React.createClass({
                 <ReadReceiptMarker key={userId} member={member}
                     leftOffset={left} hidden={hidden}
                     readReceiptInfo={readReceiptInfo}
+                    checkUnmounting={this.props.checkUnmounting}
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                 />
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index bc433b8bd0..d40b2f5f8d 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -53,6 +53,11 @@ module.exports = React.createClass({
         // this room
         readReceiptInfo: React.PropTypes.object,
 
+        // A function which is used to check if the parent panel is being
+        // unmounted, to avoid unnecessary work. Should return true if we
+        // are being unmounted.
+        checkUnmounting: React.PropTypes.func,
+
         // callback for clicks on this RR
         onClick: React.PropTypes.func,
     },
@@ -81,6 +86,13 @@ module.exports = React.createClass({
             return;
         }
 
+        // checking the DOM properties can force a re-layout, which can be
+        // quite expensive; so if the parent messagepanel is being unmounted,
+        // then don't bother with this.
+        if (this.props.checkUnmounting && this.props.checkUnmounting()) {
+            return;
+        }
+
         var avatarNode = ReactDOM.findDOMNode(this);
         rrInfo.top = avatarNode.offsetTop;
         rrInfo.left = avatarNode.offsetLeft;

From bccee9b8a07e4d20ca6dc8f106466177137df369 Mon Sep 17 00:00:00 2001
From: Ruben Barkow <rubo77@users.noreply.github.com>
Date: Sat, 23 Apr 2016 11:00:48 +0200
Subject: [PATCH 3/4] Correct Readme instructions how to customize the UI

As at the moment the Readme does not explain the structure of the code any more, the Readme has to be actualized.

(This is just a draft, to keep track of this Issue)
---
 README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2b38265713..ae1cd17c9a 100644
--- a/README.md
+++ b/README.md
@@ -25,9 +25,14 @@ You can use matrix-react-sdk directly, but to do this you would have to provide
 How to customise the SDK
 ========================
 
-The SDK uses the 'atomic' design pattern as seen at http://patternlab.io to
+The SDK formerly used the 'atomic' design pattern as seen at http://patternlab.io to
 encourage a very modular and reusable architecture, making it easy to
 customise and use UI widgets independently of the rest of the SDK and your app.
+
+So unfortunately at the moment this document does not describe how to customize your UI!
+
+###This is the old description for the atomic design pattern:
+
 In practice this means:
 
  * The UI of the app is strictly split up into a hierarchy of components.

From 3cf12f8626abf6a63182170671ae9c47ec837753 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 28 Apr 2016 15:43:36 +0100
Subject: [PATCH 4/4] fix typo

---
 src/components/views/rooms/RoomPreviewBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index 9f095143d1..93f5b5161c 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -97,7 +97,7 @@ module.exports = React.createClass({
                             </div>
                             <div className="mx_RoomPreviewBar_warningText">
                                 This invitation was sent to <b><span className="email">{this.props.invitedEmail}</span></b>, which is not associated with this account.<br/>
-                                You may wish to login with a different account, or add this email to your this account.
+                                You may wish to login with a different account, or add this email to this account.
                             </div>
                         </div>
                 }