From 9541fc1033490c13a52fabc4eebd50474d0b855d Mon Sep 17 00:00:00 2001
From: Sylvia van Os <sylvia@hackerchick.me>
Date: Sun, 25 Jun 2017 22:13:00 +0200
Subject: [PATCH 01/14] Mirror local video feed

---
 .../vector/css/matrix-react-sdk/views/voip/_VideoView.scss     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
index 8f23ef6ba9..eb4353835b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
@@ -42,4 +42,5 @@ limitations under the License.
 .mx_VideoView_localVideoFeed video {
     width: auto;
     height: 100%;
-}
\ No newline at end of file
+    transform: scale(-1, 1);
+}

From 84d1f838f01480987981786c6cfca4a568058489 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 23 Oct 2017 11:39:21 +0100
Subject: [PATCH 02/14] make filtering case-insensitive

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 9c5948b4a0..9300a1855c 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -237,7 +237,7 @@ class RoomStateExplorer extends React.Component {
         if (this.state.eventType === null) {
             Object.keys(this.roomStateEvents).forEach((evType) => {
                 // Skip this entry if does not contain search query
-                if (this.state.query && !evType.includes(this.state.query)) return;
+                if (this.state.query && !evType.toLowerCase().includes(this.state.query.toLocaleLowerCase())) return;
 
                 const stateGroup = this.roomStateEvents[evType];
                 const stateKeys = Object.keys(stateGroup);
@@ -258,7 +258,7 @@ class RoomStateExplorer extends React.Component {
             const stateGroup = this.roomStateEvents[evType];
             Object.keys(stateGroup).forEach((stateKey) => {
                 // Skip this entry if does not contain search query
-                if (this.state.query && !stateKey.includes(this.state.query)) return;
+                if (this.state.query && !stateKey.toLowerCase().includes(this.state.query.toLocaleLowerCase())) return;
 
                 const ev = stateGroup[stateKey];
                 rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={stateKey}

From eb45b00b32b1dbc7d8a2612ab0265c9342a24d7a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 23 Oct 2017 11:40:25 +0100
Subject: [PATCH 03/14] fix bad tab completion

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 9300a1855c..7c61e4623d 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -237,7 +237,7 @@ class RoomStateExplorer extends React.Component {
         if (this.state.eventType === null) {
             Object.keys(this.roomStateEvents).forEach((evType) => {
                 // Skip this entry if does not contain search query
-                if (this.state.query && !evType.toLowerCase().includes(this.state.query.toLocaleLowerCase())) return;
+                if (this.state.query && !evType.toLowerCase().includes(this.state.query.toLowerCase())) return;
 
                 const stateGroup = this.roomStateEvents[evType];
                 const stateKeys = Object.keys(stateGroup);
@@ -258,7 +258,7 @@ class RoomStateExplorer extends React.Component {
             const stateGroup = this.roomStateEvents[evType];
             Object.keys(stateGroup).forEach((stateKey) => {
                 // Skip this entry if does not contain search query
-                if (this.state.query && !stateKey.toLowerCase().includes(this.state.query.toLocaleLowerCase())) return;
+                if (this.state.query && !stateKey.toLowerCase().includes(this.state.query.toLowerCase())) return;
 
                 const ev = stateGroup[stateKey];
                 rows.push(<button className="mx_DevTools_RoomStateExplorer_button" key={stateKey}

From b16d4280b7b3103cd8bc2934223bbebb992c7198 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 23 Oct 2017 11:42:06 +0100
Subject: [PATCH 04/14] delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/dialogs/DevtoolsDialog.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js
index 7c61e4623d..7760ea8418 100644
--- a/src/components/views/dialogs/DevtoolsDialog.js
+++ b/src/components/views/dialogs/DevtoolsDialog.js
@@ -57,7 +57,7 @@ class SendCustomEvent extends React.Component {
     _buttons() {
         return <div className="mx_Dialog_buttons">
             <button onClick={this.onBack}>{ _t('Back') }</button>
-            {!this.state.message && <button onClick={this._send}>{ _t('Send') }</button>}
+            { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
         </div>;
     }
 
@@ -83,7 +83,7 @@ class SendCustomEvent extends React.Component {
     }
 
     _additionalFields() {
-        return <div/>;
+        return <div />;
     }
 
     _onChange(e) {
@@ -94,15 +94,15 @@ class SendCustomEvent extends React.Component {
         if (this.state.message) {
             return <div>
                 <div className="mx_Dialog_content">
-                    {this.state.message}
+                    { this.state.message }
                 </div>
-                {this._buttons()}
+                { this._buttons() }
             </div>;
         }
 
         return <div>
             <div className="mx_Dialog_content">
-                {this._additionalFields()}
+                { this._additionalFields() }
                 <div className="mx_TextInputDialog_label">
                     <label htmlFor="eventType"> { _t('Event Type') } </label>
                 </div>
@@ -117,7 +117,7 @@ class SendCustomEvent extends React.Component {
                     <textarea id="evContent" onChange={this._onChange} value={this.state.input_evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
                 </div>
             </div>
-            {this._buttons()}
+            { this._buttons() }
         </div>;
     }
 }
@@ -223,7 +223,7 @@ class RoomStateExplorer extends React.Component {
         if (this.state.event) {
             return <div className="mx_ViewSource">
                 <div className="mx_Dialog_content">
-                    <pre>{JSON.stringify(this.state.event.event, null, 2)}</pre>
+                    <pre>{ JSON.stringify(this.state.event.event, null, 2) }</pre>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -271,7 +271,7 @@ class RoomStateExplorer extends React.Component {
         return <div>
             <div className="mx_Dialog_content">
                 <input onChange={this.onQuery} placeholder={_t('Filter results')} size="64" className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" value={this.state.query} />
-                {rows}
+                { rows }
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>

From b5629ac3e6b3459236874e0b5fa8fe657ecf87e1 Mon Sep 17 00:00:00 2001
From: lub <github@lubiland.de>
Date: Tue, 24 Oct 2017 11:43:15 +0200
Subject: [PATCH 05/14] fix comma error of features example
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Körner <github@lubiland.de>
---
 config.sample.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config.sample.json b/config.sample.json
index ca5c020a9d..9cb2b5e727 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -6,8 +6,8 @@
     "integrations_rest_url": "https://scalar.vector.im/api",
     "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
     "features": {
-        "feature_groups": "labs"
-        "feature_pinning": "labs",
+        "feature_groups": "labs",
+        "feature_pinning": "labs"
     },
     "default_federate": true,
     "roomDirectory": {

From bd15a88c89d2a11eecb638984b1cac51cf93a84e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Oct 2017 17:10:29 +0100
Subject: [PATCH 06/14] Use CSS to stop greyed Right/LeftPanel UI from being
 interactable

---
 src/components/structures/LeftPanel.js  | 11 +++++++++--
 src/components/structures/RightPanel.js |  7 ++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 1988dc5ef9..b48d03be1b 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -182,8 +182,15 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}
-                   onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+            <aside className={classes}
+                style={{
+                    opacity: this.props.opacity,
+                    pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
+                }}
+                onKeyDown={ this._onKeyDown }
+                onFocus={ this._onFocus }
+                onBlur={ this._onBlur }
+            >
                 { topBox }
                 <CallPreview ConferenceHandler={VectorConferenceHandler} />
                 <RoomList
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 0225f7655d..c32c064641 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -351,7 +351,12 @@ module.exports = React.createClass({
         }
 
         return (
-            <aside className={classes} style={{ opacity: this.props.opacity }}>
+            <aside className={classes}
+                style={{
+                    opacity: this.props.opacity,
+                    pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
+                }}
+            >
                 <div className="mx_RightPanel_header">
                     <div className="mx_RightPanel_headerButtonGroup">
                         {headerButtons}

From 0561c5bd4f785d1f2f1d7ccc3399823e9205c0ad Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 10:29:57 +0100
Subject: [PATCH 07/14] Swap ui_opacity for panel_disabled

Simplify the API for disabling panels in the UI. `mx_fadable_faded` is applied instead of setting opacity.
---
 src/components/structures/LeftPanel.js     | 24 +++++++++-------------
 src/components/structures/RightPanel.js    | 19 ++++++++---------
 src/components/structures/RoomDirectory.js | 12 +++++------
 src/skins/vector/css/_common.scss          |  5 +++++
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index b48d03be1b..60f07a62c8 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -19,6 +19,7 @@ limitations under the License.
 import React from 'react';
 import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
+import classNames from 'classnames';
 import KeyCode from 'matrix-react-sdk/lib/KeyCode';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
@@ -55,7 +56,7 @@ var LeftPanel = React.createClass({
         // We just need to update if any of these things change.
         if (
             this.props.collapsed !== nextProps.collapsed ||
-            this.props.opacity !== nextProps.opacity
+            this.props.disabled !== nextProps.disabled
         ) {
             return true;
         }
@@ -176,21 +177,16 @@ var LeftPanel = React.createClass({
             topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
         }
 
-        let classes = "mx_LeftPanel mx_fadable";
-        if (this.props.collapsed) {
-            classes += " collapsed";
-        }
+        let classes = classNames(
+            "mx_LeftPanel", "mx_fadable",
+            {
+                "collapsed": this.props.collapsed,
+                "mx_fadable_faded": this.props.disabled,
+            }
+        );
 
         return (
-            <aside className={classes}
-                style={{
-                    opacity: this.props.opacity,
-                    pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
-                }}
-                onKeyDown={ this._onKeyDown }
-                onFocus={ this._onFocus }
-                onBlur={ this._onBlur }
-            >
+            <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                 { topBox }
                 <CallPreview ConferenceHandler={VectorConferenceHandler} />
                 <RoomList
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index c32c064641..6b025ac916 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 import sdk from 'matrix-react-sdk';
 import dis from 'matrix-react-sdk/lib/dispatcher';
@@ -345,18 +346,16 @@ module.exports = React.createClass({
             );
         }
 
-        let classes = "mx_RightPanel mx_fadable";
-        if (this.props.collapsed) {
-            classes += " collapsed";
-        }
+        let classes = classNames(
+            "mx_RightPanel", "mx_fadable",
+            {
+                "collapsed": this.props.collapsed,
+                "mx_fadable_faded": this.props.disabled,
+            }
+        );
 
         return (
-            <aside className={classes}
-                style={{
-                    opacity: this.props.opacity,
-                    pointerEvents: this.props.opacity < 1.0 ? 'none' : undefined,
-                }}
-            >
+            <aside className={classes}>
                 <div className="mx_RightPanel_header">
                     <div className="mx_RightPanel_headerButtonGroup">
                         {headerButtons}
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index cd9ac565ab..323af86c5f 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -89,17 +89,17 @@ module.exports = React.createClass({
         });
 
         // dis.dispatch({
-        //     action: 'ui_opacity',
-        //     sideOpacity: 0.3,
-        //     middleOpacity: 0.3,
+        //     action: 'panel_disable',
+        //     sideDisabled: true,
+        //     middleDisabled: true,
         // });
     },
 
     componentWillUnmount: function() {
         // dis.dispatch({
-        //     action: 'ui_opacity',
-        //     sideOpacity: 1.0,
-        //     middleOpacity: 1.0,
+        //     action: 'panel_disable',
+        //     sideDisabled: false,
+        //     middleDisabled: false,
         // });
         if (this.filterTimeout) {
             clearTimeout(this.filterTimeout);
diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index bf742cd0c5..a9b8092848 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -87,6 +87,11 @@ textarea {
     transition: opacity 0.2s ease-in-out;
 }
 
+.mx_fadable.mx_fadable_faded {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
    Stop the scrollbar view from pushing out the container's overall sizing, which causes
    flexbox to adapt to the new size and cause the view to keep growing.

From 967905126956c896223d4a9fe772a9edd7f53693 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 15:16:28 +0100
Subject: [PATCH 08/14] Introduce mx_RoomView_body for fadable things in the
 RoomView

Part of simplifying use of mx_fadable
---
 .../structures/_RoomView.scss                 | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index faed5b8b7a..dfd91885f8 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -80,17 +80,32 @@ limitations under the License.
     max-width: 1920px ! important;
 }
 
-.mx_RoomView_topUnreadMessagesBar {
+
+.mx_RoomView_body {
+    order: 3;
+    flex: 1 1 0;
+    flex-direction: column;
+    display: flex;
+}
+
+.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
+    order: 1;
+}
+
+.mx_RoomView_body .mx_RoomView_messagePanel {
+    order: 2;
+}
+
+.mx_RoomView_body .mx_RoomView_statusArea {
     order: 3;
 }
 
-.mx_RoomView_messagePanel {
+.mx_RoomView_body .mx_MessageComposer {
     order: 4;
+}
 
-    flex: 1 1 0;
-
+.mx_RoomView_messagePanel {
     width: 100%;
-
     overflow-y: auto;
 }
 
@@ -131,18 +146,6 @@ limitations under the License.
     clear: both;
 }
 
-.mx_RoomView_invitePrompt {
-    order: 2;
-
-    min-width: 0px;
-    max-width: 960px;
-    width: 100%;
-    margin: auto;
-
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
 li.mx_RoomView_myReadMarker_container {
     height: 0px;
     margin: 0px;
@@ -160,8 +163,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_statusArea {
-    order: 5;
-
     width: 100%;
     flex: 0 0 auto;
 
@@ -236,8 +237,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView .mx_MessageComposer {
-    order: 6;
-
     width: 100%;
     flex: 0 0 auto;
     margin-right: 2px;

From cd0888ce5a983429c867f5266daf2606a15d529c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 15:27:23 +0100
Subject: [PATCH 09/14] Highlight group members icon in group member info

---
 src/components/structures/RightPanel.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 0225f7655d..5ee27fb213 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -248,6 +248,11 @@ module.exports = React.createClass({
             }
         }
 
+        const isPhaseGroup = [
+            this.Phase.GroupMemberInfo,
+            this.Phase.GroupMemberList
+        ].includes(this.state.phase);
+
         let headerButtons = [];
         if (this.props.roomId) {
             headerButtons = [
@@ -271,7 +276,7 @@ module.exports = React.createClass({
         } else if (this.props.groupId) {
             headerButtons = [
                 <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc="img/icons-people.svg"
-                    isHighlighted={this.state.phase === this.Phase.GroupMemberList}
+                    isHighlighted={isPhaseGroup}
                     clickPhase={this.Phase.GroupMemberList}
                     analytics={['Right Panel', 'Group Member List Button', 'click']}
                 />,
@@ -325,10 +330,7 @@ module.exports = React.createClass({
         if (this.props.groupId &&
             GroupStoreCache.getGroupStore(this.context.matrixClient, this.props.groupId).isUserPrivileged()
         ) {
-            inviteGroup =  [
-                this.Phase.GroupMemberInfo,
-                this.Phase.GroupMemberList,
-            ].includes(this.state.phase) ? (
+            inviteGroup = isPhaseGroup ? (
                 <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
                     <div className="mx_RightPanel_icon" >
                         <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />

From 044519f9ea2a021a2fc4dbb5b97879f575d6bc4c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Oct 2017 18:18:37 +0100
Subject: [PATCH 10/14] Add more specific css class to allow for optional
 flipping

---
 .../vector/css/matrix-react-sdk/views/voip/_VideoView.scss     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
index eb4353835b..feb60f4763 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
@@ -42,5 +42,8 @@ limitations under the License.
 .mx_VideoView_localVideoFeed video {
     width: auto;
     height: 100%;
+}
+
+.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video {
     transform: scale(-1, 1);
 }

From 7588814ec5358a2f9c2384e0517321ff8825700d Mon Sep 17 00:00:00 2001
From: Vicky Koblinski <vickykoblinski@gmail.com>
Date: Thu, 26 Oct 2017 20:37:15 -0400
Subject: [PATCH 11/14] Leverages ES6 and fixes typo

---
 .../views/settings/Notifications.js           | 271 +++++++++---------
 1 file changed, 135 insertions(+), 136 deletions(-)

diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index a58b5d580e..3c01742171 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -15,15 +15,15 @@ limitations under the License.
 */
 
 'use strict';
-var React = require('react');
+const React = require('react');
 import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
 import Promise from 'bluebird';
-var sdk = require('matrix-react-sdk');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
-var Modal = require('matrix-react-sdk/lib/Modal');
+const sdk = require('matrix-react-sdk');
+const MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+const UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
+const Modal = require('matrix-react-sdk/lib/Modal');
 
-var notifications = require('../../../notifications');
+const notifications = require('../../../notifications');
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
@@ -31,17 +31,17 @@ var notifications = require('../../../notifications');
 // TODO: this component also does a lot of direct poking into this.state, which
 // is VERY NAUGHTY.
 
-var NotificationUtils = notifications.NotificationUtils;
-var VectorPushRulesDefinitions = notifications.VectorPushRulesDefinitions;
-var PushRuleVectorState = notifications.PushRuleVectorState;
-var ContentRules = notifications.ContentRules;
+const NotificationUtils = notifications.NotificationUtils;
+const VectorPushRulesDefinitions = notifications.VectorPushRulesDefinitions;
+const PushRuleVectorState = notifications.PushRuleVectorState;
+const ContentRules = notifications.ContentRules;
 
 /**
  * Rules that Vector used to set in order to override the actions of default rules.
  * These are used to port peoples existing overrides to match the current API.
  * These can be removed and forgotten once everyone has moved to the new client.
  */
-var LEGACY_RULES = {
+const LEGACY_RULES = {
     "im.vector.rule.contains_display_name": ".m.rule.contains_display_name",
     "im.vector.rule.room_one_to_one": ".m.rule.room_one_to_one",
     "im.vector.rule.room_message": ".m.rule.message",
@@ -51,7 +51,7 @@ var LEGACY_RULES = {
 };
 
 function portLegacyActions(actions) {
-    var decoded = NotificationUtils.decodeActions(actions);
+    const decoded = NotificationUtils.decodeActions(actions);
     if (decoded !== null) {
         return NotificationUtils.encodeActions(decoded);
     } else {
@@ -62,7 +62,7 @@ function portLegacyActions(actions) {
 }
 
 module.exports = React.createClass({
-    displayName: 'Notififications',
+    displayName: 'Notifications',
 
     phases: {
         LOADING: "LOADING", // The component is loading or sending data to the hs
@@ -102,7 +102,7 @@ module.exports = React.createClass({
     },
 
     onEnableNotificationsChange: function(event) {
-        var self = this;
+        const self = this;
         this.setState({
             phase: this.phases.LOADING
         });
@@ -117,20 +117,20 @@ module.exports = React.createClass({
     },
 
     onEnableEmailNotificationsChange: function(address, event) {
-        var emailPusherPromise;
+        let emailPusherPromise;
         if (event.target.checked) {
-            var data = {}
+            const data = {}
             data['brand'] = this.props.brand || 'Riot';
             emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
         } else {
-            var emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
+            const emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
             emailPusher.kind = null;
             emailPusherPromise = MatrixClientPeg.get().setPusher(emailPusher);
         }
         emailPusherPromise.done(() => {
             this._refreshFromServer();
         }, (error) => {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Error saving email notification preferences', '', ErrorDialog, {
                 title: _t('Error saving email notification preferences'),
                 description: _t('An error occurred whilst saving your email notification preferences.'),
@@ -140,14 +140,14 @@ module.exports = React.createClass({
 
     onNotifStateButtonClicked: function(event) {
         // FIXME: use .bind() rather than className metadata here surely
-        var vectorRuleId = event.target.className.split("-")[0];
-        var newPushRuleVectorState = event.target.className.split("-")[1];
+        const vectorRuleId = event.target.className.split("-")[0];
+        const newPushRuleVectorState = event.target.className.split("-")[1];
 
         if ("_keywords" === vectorRuleId) {
             this._setKeywordsPushRuleVectorState(newPushRuleVectorState)
         }
         else {
-            var rule = this.getRule(vectorRuleId);
+            const rule = this.getRule(vectorRuleId);
             if (rule) {
                 this._setPushRuleVectorState(rule, newPushRuleVectorState);
             }
@@ -155,12 +155,12 @@ module.exports = React.createClass({
     },
 
     onKeywordsClicked: function(event) {
-        var self = this;
+        const self = this;
 
         // Compute the keywords list to display
-        var keywords = [];
-        for (var i in this.state.vectorContentRules.rules) {
-            var rule = this.state.vectorContentRules.rules[i];
+        let keywords = [];
+        for (let i in this.state.vectorContentRules.rules) {
+            const rule = this.state.vectorContentRules.rules[i];
             keywords.push(rule.pattern);
         }
         if (keywords.length) {
@@ -174,7 +174,7 @@ module.exports = React.createClass({
             keywords = "";
         }
 
-        var TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+        const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
         Modal.createTrackedDialog('Keywords Dialog', '', TextInputDialog, {
             title: _t('Keywords'),
             description: _t('Enter keywords separated by a comma:'),
@@ -183,8 +183,8 @@ module.exports = React.createClass({
             onFinished: function onFinished(should_leave, newValue) {
 
                 if (should_leave && newValue !== keywords) {
-                    var newKeywords = newValue.split(',');
-                    for (var i in newKeywords) {
+                    let newKeywords = newValue.split(',');
+                    for (let i in newKeywords) {
                         newKeywords[i] = newKeywords[i].trim();
                     }
 
@@ -203,8 +203,8 @@ module.exports = React.createClass({
     },
 
     getRule: function(vectorRuleId) {
-        for (var i in this.state.vectorPushRules) {
-            var rule = this.state.vectorPushRules[i];
+        for (let i in this.state.vectorPushRules) {
+            const rule = this.state.vectorPushRules[i];
             if (rule.vectorRuleId === vectorRuleId) {
                 return rule;
             }
@@ -218,13 +218,13 @@ module.exports = React.createClass({
                 phase: this.phases.LOADING
             });
 
-            var self = this;
-            var cli = MatrixClientPeg.get();
-            var deferreds = [];
-            var ruleDefinition = VectorPushRulesDefinitions[rule.vectorRuleId];
+            const self = this;
+            const cli = MatrixClientPeg.get();
+            const deferreds = [];
+            const ruleDefinition = VectorPushRulesDefinitions[rule.vectorRuleId];
 
             if (rule.rule) {
-                var actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState];
+                const actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState];
 
                 if (!actions) {
                     // The new state corresponds to disabling the rule.
@@ -239,7 +239,7 @@ module.exports = React.createClass({
             Promise.all(deferreds).done(function() {
                 self._refreshFromServer();
             }, function(error) {
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Failed to change settings: " + error);
                 Modal.createTrackedDialog('Failed to change settings', '', ErrorDialog, {
                     title: _t('Failed to change settings'),
@@ -257,19 +257,19 @@ module.exports = React.createClass({
             return;
         }
 
-        var self = this;
-        var cli = MatrixClientPeg.get();
+        const self = this;
+        const cli = MatrixClientPeg.get();
 
         this.setState({
             phase: this.phases.LOADING
         });
 
         // Update all rules in self.state.vectorContentRules
-        var deferreds = [];
-        for (var i in this.state.vectorContentRules.rules) {
-            var rule = this.state.vectorContentRules.rules[i];
+        const deferreds = [];
+        for (let i in this.state.vectorContentRules.rules) {
+            const rule = this.state.vectorContentRules.rules[i];
 
-            var enabled, actions;
+            let enabled, actions;
             switch (newPushRuleVectorState) {
                 case PushRuleVectorState.ON:
                     if (rule.actions.length !== 1) {
@@ -309,7 +309,7 @@ module.exports = React.createClass({
         Promise.all(deferreds).done(function(resps) {
             self._refreshFromServer();
         }, function(error) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Can't update user notification settings: " + error);
             Modal.createTrackedDialog('Can\'t update user notifcation settings', '', ErrorDialog, {
                 title: _t('Can\'t update user notification settings'),
@@ -324,14 +324,14 @@ module.exports = React.createClass({
             phase: this.phases.LOADING
         });
 
-        var self = this;
-        var cli = MatrixClientPeg.get();
-        var removeDeferreds = [];
+        const self = this;
+        const cli = MatrixClientPeg.get();
+        const removeDeferreds = [];
 
         // Remove per-word push rules of keywords that are no more in the list
-        var vectorContentRulesPatterns = [];
-        for (var i in self.state.vectorContentRules.rules) {
-            var rule = self.state.vectorContentRules.rules[i];
+        const vectorContentRulesPatterns = [];
+        for (let i in self.state.vectorContentRules.rules) {
+            const rule = self.state.vectorContentRules.rules[i];
 
             vectorContentRulesPatterns.push(rule.pattern);
 
@@ -342,16 +342,16 @@ module.exports = React.createClass({
 
         // If the keyword is part of `externalContentRules`, remove the rule
         // before recreating it in the right Vector path
-        for (var i in self.state.externalContentRules) {
-            var rule = self.state.externalContentRules[i];
+        for (let i in self.state.externalContentRules) {
+            const rule = self.state.externalContentRules[i];
 
             if (newKeywords.indexOf(rule.pattern) >= 0) {
                 removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
             }
         }
 
-        var onError = function(error) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const onError = function(error) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to update keywords: " + error);
             Modal.createTrackedDialog('Failed to update keywords', '', ErrorDialog, {
                 title: _t('Failed to update keywords'),
@@ -362,9 +362,9 @@ module.exports = React.createClass({
 
         // Then, add the new ones
         Promise.all(removeDeferreds).done(function(resps) {
-            var deferreds = [];
+            const deferreds = [];
 
-            var pushRuleVectorStateKind = self.state.vectorContentRules.vectorState;
+            let pushRuleVectorStateKind = self.state.vectorContentRules.vectorState;
             if (pushRuleVectorStateKind === PushRuleVectorState.OFF) {
                 // When the current global keywords rule is OFF, we need to look at
                 // the flavor of rules in 'vectorContentRules' to apply the same actions
@@ -379,8 +379,8 @@ module.exports = React.createClass({
                 }
             }
 
-            for (var i in newKeywords) {
-                var keyword = newKeywords[i];
+            for (let i in newKeywords) {
+                const keyword = newKeywords[i];
 
                 if (vectorContentRulesPatterns.indexOf(keyword) < 0) {
                     if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
@@ -407,31 +407,31 @@ module.exports = React.createClass({
 
     // Create a push rule but disabled
     _addDisabledPushRule: function(scope, kind, ruleId, body) {
-        var cli = MatrixClientPeg.get();
-        return cli.addPushRule(scope, kind, ruleId, body).then(function() {
-            return cli.setPushRuleEnabled(scope, kind, ruleId, false);
-        });
+        const cli = MatrixClientPeg.get();
+        return cli.addPushRule(scope, kind, ruleId, body).then(() =>
+            cli.setPushRuleEnabled(scope, kind, ruleId, false)
+        );
     },
 
     // Check if any legacy im.vector rules need to be ported to the new API
     // for overriding the actions of default rules.
     _portRulesToNewAPI: function(rulesets) {
-        var self = this;
-        var needsUpdate = [];
-        var cli = MatrixClientPeg.get();
+        const self = this;
+        const needsUpdate = [];
+        const cli = MatrixClientPeg.get();
 
-        for (var kind in rulesets.global) {
-            var ruleset = rulesets.global[kind];
-            for (var i = 0; i < ruleset.length; ++i) {
-                var rule = ruleset[i];
+        for (let kind in rulesets.global) {
+            const ruleset = rulesets.global[kind];
+            for (let i = 0; i < ruleset.length; ++i) {
+                const rule = ruleset[i];
                 if (rule.rule_id in LEGACY_RULES) {
                     console.log("Porting legacy rule", rule);
                     needsUpdate.push( function(kind, rule) {
                         return cli.setPushRuleActions(
                             'global', kind, LEGACY_RULES[rule.rule_id], portLegacyActions(rule.actions)
-                        ).then( function() {
-                            return cli.deletePushRule('global', kind, rule.rule_id);
-                        }).catch( (e) => {
+                        ).then(() => 
+                            cli.deletePushRule('global', kind, rule.rule_id)
+                        ).catch( (e) => {
                             console.warn(`Error when porting legacy rule: ${e}`);
                         });
                     }(kind, rule));
@@ -442,9 +442,9 @@ module.exports = React.createClass({
         if (needsUpdate.length > 0) {
             // If some of the rules need to be ported then wait for the porting
             // to happen and then fetch the rules again.
-            return Promise.all(needsUpdate).then( function() {
-                return cli.getPushRules();
-            });
+            return Promise.all(needsUpdate).then(() => 
+                cli.getPushRules()
+            );
         } else {
             // Otherwise return the rules that we already have.
             return rulesets;
@@ -452,15 +452,14 @@ module.exports = React.createClass({
     },
 
     _refreshFromServer: function() {
-        var self = this;
-        var pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
-            //console.log("resolving pushRulesPromise");
+        const self = this;
+        const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
 
             /// XXX seriously? wtf is this?
             MatrixClientPeg.get().pushRules = rulesets;
 
             // Get homeserver default rules and triage them by categories
-            var rule_categories = {
+            const rule_categories = {
                 // The master rule (all notifications disabling)
                 '.m.rule.master': 'master',
 
@@ -478,12 +477,12 @@ module.exports = React.createClass({
             };
 
             // HS default rules
-            var defaultRules = {master: [], vector: {}, others: []};
+            const defaultRules = {master: [], vector: {}, others: []};
 
-            for (var kind in rulesets.global) {
-                for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
-                    var r = rulesets.global[kind][i];
-                    var cat = rule_categories[r.rule_id];
+            for (let kind in rulesets.global) {
+                for (let i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
+                    const r = rulesets.global[kind][i];
+                    const cat = rule_categories[r.rule_id];
                     r.kind = kind;
 
                     if (r.rule_id[0] === '.') {
@@ -506,7 +505,7 @@ module.exports = React.createClass({
             }
 
             // parse the keyword rules into our state
-            var contentRules = ContentRules.parseContentRules(rulesets);
+            const contentRules = ContentRules.parseContentRules(rulesets);
             self.state.vectorContentRules = {
                 vectorState: contentRules.vectorState,
                 rules: contentRules.rules,
@@ -517,7 +516,7 @@ module.exports = React.createClass({
             self.state.vectorPushRules = [];
             self.state.externalPushRules = [];
 
-            var vectorRuleIds = [
+            const vectorRuleIds = [
                 '.m.rule.contains_display_name',
                 '.m.rule.contains_user_name',
                 '_keywords',
@@ -528,8 +527,8 @@ module.exports = React.createClass({
                 '.m.rule.call',
                 '.m.rule.suppress_notices'
             ];
-            for (var i in vectorRuleIds) {
-                var vectorRuleId = vectorRuleIds[i];
+            for (let i in vectorRuleIds) {
+                const vectorRuleId = vectorRuleIds[i];
 
                 if (vectorRuleId === '_keywords') {
                     // keywords needs a special handling
@@ -541,9 +540,8 @@ module.exports = React.createClass({
                             <span>
                             { _tJsx('Messages containing <span>keywords</span>',
                                 /<span>(.*?)<\/span>/,
-                                (sub) => {
-                                    return <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>;
-                                }
+                                (sub) =>
+                                    <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>
                             )}
                             </span>
                         ),
@@ -551,10 +549,10 @@ module.exports = React.createClass({
                     });
                 }
                 else {
-                    var ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
-                    var rule = defaultRules.vector[vectorRuleId];
+                    const ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
+                    const rule = defaultRules.vector[vectorRuleId];
 
-                    var vectorState = ruleDefinition.ruleToVectorState(rule);
+                    const vectorState = ruleDefinition.ruleToVectorState(rule);
 
                     //console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState);
 
@@ -574,14 +572,14 @@ module.exports = React.createClass({
             }
 
             // Build the rules not managed by Vector UI
-            var otherRulesDescriptions = {
+            const otherRulesDescriptions = {
                 '.m.rule.message': _t('Notify for all other messages/rooms'),
                 '.m.rule.fallback': _t('Notify me for anything else'),
             };
 
-            for (var i in defaultRules.others) {
-                var rule = defaultRules.others[i];
-                var ruleDescription = otherRulesDescriptions[rule.rule_id];
+            for (let i in defaultRules.others) {
+                const rule = defaultRules.others[i];
+                const ruleDescription = otherRulesDescriptions[rule.rule_id];
 
                 // Show enabled default rules that was modified by the user
                 if (ruleDescription && rule.enabled && !rule.default) {
@@ -591,8 +589,7 @@ module.exports = React.createClass({
             }
         });
 
-        var pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
-            //console.log("resolving pushersPromise");
+        const pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
             self.setState({pushers: resp.pushers});
         });
 
@@ -618,7 +615,7 @@ module.exports = React.createClass({
     },
 
     _updatePushRuleActions: function(rule, actions, enabled) {
-        var cli = MatrixClientPeg.get();
+        const cli = MatrixClientPeg.get();
 
         return cli.setPushRuleActions(
             'global', rule.kind, rule.rule_id, actions
@@ -664,9 +661,9 @@ module.exports = React.createClass({
     },
 
     renderNotifRulesTableRows: function() {
-        var rows = [];
-        for (var i in this.state.vectorPushRules) {
-            var rule = this.state.vectorPushRules[i];
+        const rows = [];
+        for (let i in this.state.vectorPushRules) {
+            const rule = this.state.vectorPushRules[i];
             //console.log("rendering: " + rule.description + ", " + rule.vectorRuleId + ", " + rule.vectorState);
             rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
         }
@@ -692,30 +689,32 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var self = this;
-
-        var spinner;
+        const self = this;
+        
+        let spinner;
         if (this.state.phase === this.phases.LOADING) {
-            var Loader = sdk.getComponent("elements.Spinner");
+            const Loader = sdk.getComponent("elements.Spinner");
             spinner = <Loader />;
         }
-
+        
+        let masterPushRuleDiv;
         if (this.state.masterPushRule) {
-            var masterPushRuleDiv = (
+            masterPushRuleDiv = (
                 <div className="mx_UserNotifSettings_tableRow">
-                        <div className="mx_UserNotifSettings_inputCell">
-                            <input id="enableNotifications"
-                                ref="enableNotifications"
-                                type="checkbox"
-                                checked={ !this.state.masterPushRule.enabled }
-                                onChange={ this.onEnableNotificationsChange } />
-                        </div>
-                        <div className="mx_UserNotifSettings_labelCell">
-                            <label htmlFor="enableNotifications">
-                                { _t('Enable notifications for this account') }
-                            </label>
-                        </div>
+                    <div className="mx_UserNotifSettings_inputCell">
+                        <input id="enableNotifications"
+                            ref="enableNotifications"
+                            type="checkbox"
+                            checked={ !this.state.masterPushRule.enabled }
+                            onChange={ this.onEnableNotificationsChange } 
+                        />
                     </div>
+                    <div className="mx_UserNotifSettings_labelCell">
+                        <label htmlFor="enableNotifications">
+                            { _t('Enable notifications for this account') }
+                        </label>
+                    </div>
+                </div>
             );
         }
 
@@ -743,29 +742,29 @@ module.exports = React.createClass({
             // This only supports the first email address in your profile for now
             emailNotificationsRow = this.emailNotificationsRow(
                 emailThreepids[0].address,
-                _t('Enable email notifications') + ' (' + emailThreepids[0].address + ')'
+                `${_t('Enable email notifications')} (${emailThreepids[0].address})`
             );
         }
 
         // Build external push rules
-        var externalRules = [];
-        for (var i in this.state.externalPushRules) {
-            var rule = this.state.externalPushRules[i];
+        const externalRules = [];
+        for (let i in this.state.externalPushRules) {
+            const rule = this.state.externalPushRules[i];
             externalRules.push(<li>{ _t(rule.description) }</li>);
         }
 
         // Show keywords not displayed by the vector UI as a single external push rule
-        var externalKeyWords = [];
-        for (var i in this.state.externalContentRules) {
-            var rule = this.state.externalContentRules[i];
-            externalKeyWords.push(rule.pattern);
+        let externalKeywords = [];
+        for (let i in this.state.externalContentRules) {
+            const rule = this.state.externalContentRules[i];
+            externalKeywords.push(rule.pattern);
         }
-        if (externalKeyWords.length) {
-            externalKeyWords = externalKeyWords.join(", ");
-            externalRules.push(<li>{ _t('Notifications on the following keywords follow rules which can’t be displayed here:') } { externalKeyWords }</li>);
+        if (externalKeywords.length) {
+            externalKeywords = externalKeywords.join(", ");
+            externalRules.push(<li>{ _t('Notifications on the following keywords follow rules which can’t be displayed here:') } { externalKeywords }</li>);
         }
 
-        var devicesSection;
+        let devicesSection;
         if (this.state.pushers === undefined) {
             devicesSection = <div className="error">{ _t('Unable to fetch notification target list') }</div>
         } else if (this.state.pushers.length == 0) {
@@ -773,8 +772,8 @@ module.exports = React.createClass({
         } else {
             // TODO: It would be great to be able to delete pushers from here too,
             // and this wouldn't be hard to add.
-            var rows = [];
-            for (var i = 0; i < this.state.pushers.length; ++i) {
+            const rows = [];
+            for (let i = 0; i < this.state.pushers.length; ++i) {
                 rows.push(<tr key={ i }>
                     <td>{this.state.pushers[i].app_display_name}</td>
                     <td>{this.state.pushers[i].device_display_name}</td>
@@ -793,7 +792,7 @@ module.exports = React.createClass({
             </div>);
         }
 
-        var advancedSettings;
+        let advancedSettings;
         if (externalRules.length) {
             advancedSettings = (
                 <div>

From d188fdb9fea056db32eeea499ec983c669110381 Mon Sep 17 00:00:00 2001
From: Vicky Koblinski <vickykoblinski@gmail.com>
Date: Thu, 26 Oct 2017 21:23:16 -0400
Subject: [PATCH 12/14] Changes requires to imports for consistancy, removes
 'use strict'

---
 .../views/settings/Notifications.js           | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/views/settings/Notifications.js b/src/components/views/settings/Notifications.js
index 3c01742171..afc465d484 100644
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
@@ -14,16 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-const React = require('react');
-import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
+import React from 'react';
 import Promise from 'bluebird';
-const sdk = require('matrix-react-sdk');
-const MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-const UserSettingsStore = require('matrix-react-sdk/lib/UserSettingsStore');
-const Modal = require('matrix-react-sdk/lib/Modal');
-
-const notifications = require('../../../notifications');
+import sdk from 'matrix-react-sdk';
+import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import {
+    NotificationUtils, 
+    VectorPushRulesDefinitions, 
+    PushRuleVectorState, 
+    ContentRules
+} from '../../../notifications';
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
@@ -31,10 +34,6 @@ const notifications = require('../../../notifications');
 // TODO: this component also does a lot of direct poking into this.state, which
 // is VERY NAUGHTY.
 
-const NotificationUtils = notifications.NotificationUtils;
-const VectorPushRulesDefinitions = notifications.VectorPushRulesDefinitions;
-const PushRuleVectorState = notifications.PushRuleVectorState;
-const ContentRules = notifications.ContentRules;
 
 /**
  * Rules that Vector used to set in order to override the actions of default rules.

From 7bae7fe9e5e0cb0877e1038a1efbe2acbe105399 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 27 Oct 2017 14:23:45 +0100
Subject: [PATCH 13/14] Use correct group store state when rendering "Invite to
 this community"

This required slight rework of how RightPanel uses the group store, and now it knows an unfortunate amount about the group store. Food for thought on stores in general, I think.
---
 src/components/structures/RightPanel.js | 43 ++++++++++++++++++-------
 1 file changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index e6bfea83ef..18567b57fb 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -100,6 +100,7 @@ module.exports = React.createClass({
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context.matrixClient;
         cli.on("RoomState.members", this.onRoomStateMember);
+        this._initGroupStore(this.props.groupId);
     },
 
     componentWillUnmount: function() {
@@ -107,20 +108,42 @@ module.exports = React.createClass({
         if (this.context.matrixClient) {
             this.context.matrixClient.removeListener("RoomState.members", this.onRoomStateMember);
         }
+        this._unregisterGroupStore();
     },
 
     getInitialState: function() {
-        if (this.props.groupId) {
-            return {
-                phase: this.Phase.GroupMemberList,
-            };
-        } else {
-            return {
-                phase: this.Phase.RoomMemberList,
-            };
+        return {
+            phase: this.props.groupId ? this.Phase.GroupMemberList : this.Phase.RoomMemberList,
+            isUserPrivilegedInGroup: null,
         }
     },
 
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore();
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    _initGroupStore(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(
+            this.context.matrixClient, this.props.groupId,
+        );
+        this._groupStore.registerListener(this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore() {
+        if (this._groupStore) {
+            this._groupStore.unregisterListener(this.onGroupStoreUpdated);
+        }
+    },
+
+    onGroupStoreUpdated: function(){
+        this.setState({
+            isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(),
+        });
+    },
+
     onCollapseClick: function() {
         dis.dispatch({
             action: 'hide_right_panel',
@@ -328,9 +351,7 @@ module.exports = React.createClass({
             panel = <div className="mx_RightPanel_blank"></div>;
         }
 
-        if (this.props.groupId &&
-            GroupStoreCache.getGroupStore(this.context.matrixClient, this.props.groupId).isUserPrivileged()
-        ) {
+        if (this.props.groupId && this.state.isUserPrivilegedInGroup) {
             inviteGroup = isPhaseGroup ? (
                 <AccessibleButton className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
                     <div className="mx_RightPanel_icon" >

From 3dcc397f6746ae931a8fb66d357973c1d3ee895d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 27 Oct 2017 15:40:03 +0100
Subject: [PATCH 14/14] Fix AuxPanel floating in the middle

When there is no RoomView_body to push it to the top of the flex container
---
 src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index dfd91885f8..7944d01dc0 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -68,7 +68,7 @@ limitations under the License.
     min-width: 0px;
     max-width: 960px;
     width: 100%;
-    margin: auto;
+    margin: 0px auto;
 
     overflow: auto;
     border-bottom: 1px solid $primary-hairline-color;