Merge branch 'develop' into dialog-a11y

src/components/views/avatars/BaseAvatar.js

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
 import AvatarLogic from '../../../Avatar';
 import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -23,16 +25,20 @@ module.exports = React.createClass({
     displayName: 'BaseAvatar',
 
     propTypes: {
-        name: React.PropTypes.string.isRequired, // The name (first initial used as default)
-        idName: React.PropTypes.string, // ID for generating hash colours
-        title: React.PropTypes.string, // onHover title text
-        url: React.PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-        urls: React.PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
+        name: PropTypes.string.isRequired, // The name (first initial used as default)
+        idName: PropTypes.string, // ID for generating hash colours
+        title: PropTypes.string, // onHover title text
+        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+        width: PropTypes.number,
+        height: PropTypes.number,
         // XXX resizeMethod not actually used.
-        resizeMethod: React.PropTypes.string,
-        defaultToInitialLetter: React.PropTypes.bool, // true to add default url
+        resizeMethod: PropTypes.string,
+        defaultToInitialLetter: PropTypes.bool, // true to add default url
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
     },
 
     getDefaultProps: function() {
@@ -48,6 +54,16 @@ module.exports = React.createClass({
         return this._getState(this.props);
     },
 
+    componentWillMount() {
+        this.unmounted = false;
+        this.context.matrixClient.on('sync', this.onClientSync);
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        this.context.matrixClient.removeListener('sync', this.onClientSync);
+    },
+
     componentWillReceiveProps: function(nextProps) {
         // work out if we need to call setState (if the image URLs array has changed)
         const newState = this._getState(nextProps);
@@ -66,6 +82,23 @@ module.exports = React.createClass({
         }
     },
 
+    onClientSync(syncState, prevState) {
+        if (this.unmounted) return;
+
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING or PREPARED.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected &&
+            // Did we fall back?
+            this.state.urlsIndex > 0
+        ) {
+            // Start from the highest priority URL again
+            this.setState({
+                urlsIndex: 0,
+            });
+        }
+    },
+
     _getState: function(props) {
         // work out the full set of urls to try to load. This is formed like so:
         // imageUrls: [ props.url, props.urls, default image ]

src/components/views/avatars/MemberAvatar.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const Avatar = require('../../../Avatar');
 const sdk = require("../../../index");
 const dispatcher = require("../../../dispatcher");
@@ -25,15 +26,15 @@ module.exports = React.createClass({
     displayName: 'MemberAvatar',
 
     propTypes: {
-        member: React.PropTypes.object.isRequired,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string,
+        member: PropTypes.object.isRequired,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
         // The onClick to give the avatar
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
         // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
-        viewUserOnClick: React.PropTypes.bool,
-        title: React.PropTypes.string,
+        viewUserOnClick: PropTypes.bool,
+        title: PropTypes.string,
     },
 
     getDefaultProps: function() {

src/components/views/avatars/MemberPresenceAvatar.js

@@ -17,6 +17,7 @@
 'use strict';
 
 import React from "react";
+import PropTypes from 'prop-types';
 import * as sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import AccessibleButton from '../elements/AccessibleButton';
@@ -30,10 +31,10 @@ module.exports = React.createClass({
     displayName: 'MemberPresenceAvatar',
 
     propTypes: {
-        member: React.PropTypes.object.isRequired,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string,
+        member: PropTypes.object.isRequired,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
     },
 
     getDefaultProps: function() {

src/components/views/avatars/RoomAvatar.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from "react";
+import PropTypes from 'prop-types';
 import {ContentRepo} from "matrix-js-sdk";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import sdk from "../../../index";
@@ -25,11 +26,11 @@ module.exports = React.createClass({
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     propTypes: {
-        room: React.PropTypes.object,
-        oobData: React.PropTypes.object,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string,
+        room: PropTypes.object,
+        oobData: PropTypes.object,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
     },
 
     getDefaultProps: function() {

src/components/views/create_room/CreateRoomButton.js

@@ -17,11 +17,12 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 module.exports = React.createClass({
     displayName: 'CreateRoomButton',
     propTypes: {
-        onCreateRoom: React.PropTypes.func,
+        onCreateRoom: PropTypes.func,
     },
 
     getDefaultProps: function() {

src/components/views/create_room/Presets.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 const Presets = {
@@ -28,8 +29,8 @@ const Presets = {
 module.exports = React.createClass({
     displayName: 'CreateRoomPresets',
     propTypes: {
-        onChange: React.PropTypes.func,
-        preset: React.PropTypes.string,
+        onChange: PropTypes.func,
+        preset: PropTypes.string,
     },
 
     Presets: Presets,

src/components/views/create_room/RoomAlias.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 const React = require('react');
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
@@ -22,9 +23,9 @@ module.exports = React.createClass({
     propTypes: {
         // Specifying a homeserver will make magical things happen when you,
         // e.g. start typing in the room alias box.
-        homeserver: React.PropTypes.string,
-        alias: React.PropTypes.string,
-        onChange: React.PropTypes.func,
+        homeserver: PropTypes.string,
+        alias: PropTypes.string,
+        onChange: PropTypes.func,
     },
 
     getDefaultProps: function() {

src/components/views/dialogs/AddressPickerDialog.js

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import AccessibleButton from '../elements/AccessibleButton';
 import Promise from 'bluebird';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
@@ -507,7 +506,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
@@ -580,14 +580,8 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
-                <div className="mx_Dialog_title">
-                    { this.props.title }
-                </div>
-                <AccessibleButton className="mx_ChatInviteDialog_cancel"
-                        onClick={this.onCancel} >
-                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </AccessibleButton>
+            <BaseDialog className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}
+                onFinished={this.props.onFinished} title={this.props.title}>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
@@ -597,12 +591,10 @@ module.exports = React.createClass({
                     { addressSelector }
                     { this.props.extraNode }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
-                        { this.props.button }
-                    </button>
-                </div>
-            </div>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onButtonClick}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
         );
     },
 });

src/components/views/dialogs/BaseDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import FocusTrap from 'focus-trap-react';
+import PropTypes from 'prop-types';
 
 import { KeyCode } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
@@ -32,17 +33,20 @@ export default React.createClass({
 
     propTypes: {
         // onFinished callback to call when Escape is pressed
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
+
+        // called when a key is pressed
+        onKeyDown: PropTypes.func,
 
         // CSS class to apply to dialog div
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         // Title for the dialog.
         // (could probably actually be something more complicated than a string if desired)
-        title: React.PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
 
         // children should be the content of the dialog
-        children: React.PropTypes.node,
+        children: PropTypes.node,
 
         // Id of content element
         // If provided, this is used to add a aria-describedby attribute
@@ -50,6 +54,9 @@ export default React.createClass({
     },
 
     _onKeyDown: function(e) {
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(e);
+        }
         if (e.keyCode === KeyCode.ESCAPE) {
             e.stopPropagation();
             e.preventDefault();
@@ -76,7 +83,7 @@ export default React.createClass({
                 >
                     <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
                 </AccessibleButton>
-                <div className='mx_Dialog_title' id='mx_BaseDialog_title'>
+                <div className={'mx_Dialog_title ' + this.props.titleClass} id='mx_BaseDialog_title'>
                     { this.props.title }
                 </div>
                 { this.props.children }

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -137,6 +138,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
         } else {
             // Show the avatar, name and a button to confirm that a new chat is requested
             const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const Spinner = sdk.getComponent('elements.Spinner');
             title = _t('Start chatting');
 
@@ -166,11 +168,8 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                     </p>
                     { profile }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick} autoFocus="true">
-                        { _t('Start Chatting') }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={_t('Start Chatting')}
+                    onPrimaryButtonClick={this.props.onNewDMClick} focus="true" />
             </div>;
         }
 
@@ -187,10 +186,10 @@ export default class ChatCreateOrReuseDialog extends React.Component {
     }
 }
 
-ChatCreateOrReuseDialog.propTypes = {
-    userId: React.PropTypes.string.isRequired,
+ChatCreateOrReuseDialog.propTyps = {
+    userId: PropTypes.string.isRequired,
     // Called when clicking outside of the dialog
-    onFinished: React.PropTypes.func.isRequired,
-    onNewDMClick: React.PropTypes.func.isRequired,
-    onExistingRoomSelected: React.PropTypes.func.isRequired,
+    onFinished: PropTypes.func.isRequired,
+    onNewDMClick: PropTypes.func.isRequired,
+    onExistingRoomSelected: PropTypes.func.isRequired,
 };

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -15,10 +15,10 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import classnames from 'classnames';
 import { GroupMemberType } from '../../../groups';
 
 /*
@@ -33,20 +33,20 @@ export default React.createClass({
     displayName: 'ConfirmUserActionDialog',
     propTypes: {
         // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
-        member: React.PropTypes.object,
+        member: PropTypes.object,
         // group member object. Supply either this or 'member'
         groupMember: GroupMemberType,
         // needed if a group member is specified
-        matrixClient: React.PropTypes.instanceOf(MatrixClient),
-        action: React.PropTypes.string.isRequired, // eg. 'Ban'
-        title: React.PropTypes.string.isRequired, // eg. 'Ban this user?'
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+        action: PropTypes.string.isRequired, // eg. 'Ban'
+        title: PropTypes.string.isRequired, // eg. 'Ban this user?'
 
         // Whether to display a text field for a reason
         // If true, the second argument to onFinished will
         // be the string entered.
-        askReason: React.PropTypes.bool,
-        danger: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        askReason: PropTypes.bool,
+        danger: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     defaultProps: {
@@ -76,13 +76,11 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
         const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
-        const confirmButtonClass = classnames({
-            'mx_Dialog_primary': true,
-            'danger': this.props.danger,
-        });
+        const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;
         if (this.props.askReason) {
@@ -127,17 +125,11 @@ export default React.createClass({
                     <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
                 </div>
                 { reasonBox }
-                <div className="mx_Dialog_buttons">
-                    <button className={confirmButtonClass}
-                        onClick={this.onOk} autoFocus={!this.props.askReason}
-                    >
-                        { this.props.action }
-                    </button>
-
-                    <button onClick={this.onCancel}>
-                        { _t("Cancel") }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={this.props.action}
+                    onPrimaryButtonClick={this.onOk}
+                    primaryButtonClass={confirmButtonClass}
+                    focus={!this.props.askReason}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

src/components/views/dialogs/CreateGroupDialog.js

@@ -55,11 +55,15 @@ export default React.createClass({
 
     _checkGroupId: function(e) {
         let error = null;
-        if (!/^[a-z0-9=_\-\.\/]*$/.test(this.state.groupId)) {
+        if (!this.state.groupId) {
+            error = _t("Community IDs cannot not be empty.");
+        } else if (!/^[a-z0-9=_\-\.\/]*$/.test(this.state.groupId)) {
             error = _t("Community IDs may only contain characters a-z, 0-9, or '=_-./'");
         }
         this.setState({
             groupIdError: error,
+            // Reset createError to get rid of now stale error message
+            createError: null,
         });
         return error;
     },
@@ -158,10 +162,10 @@ export default React.createClass({
                         { createErrorNode }
                     </div>
                     <div className="mx_Dialog_buttons">
+                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
                         <button onClick={this._onCancel}>
                             { _t("Cancel") }
                         </button>
-                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
                     </div>
                 </form>
             </BaseDialog>

src/components/views/dialogs/CreateRoomDialog.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import { _t } from '../../../languageHandler';
@@ -22,7 +23,7 @@ import { _t } from '../../../languageHandler';
 export default React.createClass({
     displayName: 'CreateRoomDialog',
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     componentDidMount: function() {
@@ -41,6 +42,7 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
                 title={_t('Create Room')}
@@ -53,27 +55,11 @@ export default React.createClass({
                         <div>
                             <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} size="64" />
                         </div>
-                        <br />
-
-                        <details className="mx_CreateRoomDialog_details">
-                            <summary className="mx_CreateRoomDialog_details_summary">{ _t('Advanced options') }</summary>
-                            <div>
-                                <input type="checkbox" id="checkbox" ref="checkbox" defaultChecked={this.defaultNoFederate} />
-                                <label htmlFor="checkbox">
-                                    { _t('Block users on other matrix homeservers from joining this room') }
-                                    <br />
-                                    ({ _t('This setting cannot be changed later!') })
-                                </label>
-                            </div>
-                        </details>
-                    </div>
-                    <div className="mx_Dialog_buttons">
-                        <button onClick={this.onCancel}>
-                            { _t('Cancel') }
-                        </button>
-                        <input type="submit" className="mx_Dialog_primary" value={_t('Create Room')} />
                     </div>
                 </form>
+                <DialogButtons primaryButton={_t('Create Room')}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import Analytics from '../../../Analytics';
@@ -77,6 +78,7 @@ export default class DeactivateAccountDialog extends React.Component {
     }
 
     render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Loader = sdk.getComponent("elements.Spinner");
         let passwordBoxClass = '';
 
@@ -99,10 +101,11 @@ export default class DeactivateAccountDialog extends React.Component {
         }
 
         return (
-            <div className="mx_DeactivateAccountDialog">
-                <div className="mx_Dialog_title danger">
-                    { _t("Deactivate Account") }
-                </div>
+            <BaseDialog className="mx_DeactivateAccountDialog"
+                onFinished={this.props.onFinished}
+                onEnterPressed={this.onOk}
+                titleClass="danger"
+                title={_t("Deactivate Account")}>
                 <div className="mx_Dialog_content">
                     <p>{ _t("This will make your account permanently unusable. You will not be able to re-register the same user ID.") }</p>
 
@@ -130,11 +133,11 @@ export default class DeactivateAccountDialog extends React.Component {
 
                     { cancelButton }
                 </div>
-            </div>
+            </BaseDialog>
         );
     }
 }
 
 DeactivateAccountDialog.propTypes = {
-    onFinished: React.PropTypes.func.isRequired,
+    onFinished: PropTypes.func.isRequired,
 };

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
@@ -71,7 +72,7 @@ export default function DeviceVerifyDialog(props) {
 }
 
 DeviceVerifyDialog.propTypes = {
-    userId: React.PropTypes.string.isRequired,
-    device: React.PropTypes.object.isRequired,
-    onFinished: React.PropTypes.func.isRequired,
+    userId: PropTypes.string.isRequired,
+    device: PropTypes.object.isRequired,
+    onFinished: PropTypes.func.isRequired,
 };

src/components/views/dialogs/ErrorDialog.js

@@ -26,20 +26,21 @@ limitations under the License.
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'ErrorDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
+        title: PropTypes.string,
+        description: PropTypes.oneOfType([
+            PropTypes.element,
+            PropTypes.string,
         ]),
-        button: React.PropTypes.string,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        button: PropTypes.string,
+        focus: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -27,22 +28,22 @@ export default React.createClass({
 
     propTypes: {
         // matrix client to use for UI auth requests
-        matrixClient: React.PropTypes.object.isRequired,
+        matrixClient: PropTypes.object.isRequired,
 
         // response from initial request. If not supplied, will do a request on
         // mount.
-        authData: React.PropTypes.shape({
-            flows: React.PropTypes.array,
-            params: React.PropTypes.object,
-            session: React.PropTypes.string,
+        authData: PropTypes.shape({
+            flows: PropTypes.array,
+            params: PropTypes.object,
+            session: PropTypes.string,
         }),
 
         // callback
-        makeRequest: React.PropTypes.func.isRequired,
+        makeRequest: PropTypes.func.isRequired,
 
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
 
-        title: React.PropTypes.string,
+        title: PropTypes.string,
     },
 
     getInitialState: function() {

src/components/views/dialogs/KeyShareDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import Modal from '../../../Modal';
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 
 import { _t, _td } from '../../../languageHandler';
@@ -30,10 +31,10 @@ import { _t, _td } from '../../../languageHandler';
  */
 export default React.createClass({
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        userId: React.PropTypes.string.isRequired,
-        deviceId: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        matrixClient: PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        deviceId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {

src/components/views/dialogs/QuestionDialog.js

@@ -16,20 +16,20 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import classnames from 'classnames';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.node,
-        extraButtons: React.PropTypes.node,
-        button: React.PropTypes.string,
-        danger: React.PropTypes.bool,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        title: PropTypes.string,
+        description: PropTypes.node,
+        extraButtons: PropTypes.node,
+        button: PropTypes.string,
+        danger: PropTypes.bool,
+        focus: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -53,15 +53,11 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const cancelButton = this.props.hasCancelButton ? (
-            <button onClick={this.onCancel}>
-                { _t("Cancel") }
-            </button>
-        ) : null;
-        const buttonClasses = classnames({
-            mx_Dialog_primary: true,
-            danger: this.props.danger,
-        });
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        let primaryButtonClass = "";
+        if (this.props.danger) {
+            primaryButtonClass = "danger";
+        }
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 title={this.props.title}
@@ -70,13 +66,14 @@ export default React.createClass({
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     { this.props.description }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}>
-                        { this.props.button || _t('OK') }
-                    </button>
+                <DialogButtons primaryButton={this.props.button || _t('OK')}
+                    onPrimaryButtonClick={this.onOk}
+                    primaryButtonClass={primaryButtonClass}
+                    focus={this.props.focus}
+                    onCancel={this.onCancel}
+                >
                     { this.props.extraButtons }
-                    { cancelButton }
-                </div>
+                </DialogButtons>
             </BaseDialog>
         );
     },

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
@@ -25,8 +26,8 @@ export default React.createClass({
     displayName: 'SessionRestoreErrorDialog',
 
     propTypes: {
-        error: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        error: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     componentDidMount: function() {
@@ -46,6 +47,7 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         let bugreport;
 
         if (SdkConfig.get().bug_report_endpoint_url) {
@@ -78,11 +80,9 @@ export default React.createClass({
 
                     { bugreport }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this._continueClicked} autoFocus={shouldFocusContinueButton}>
-                        { _t("Continue anyway") }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={_t("Continue anyway")}
+                    onPrimaryButtonClick={this._continueClicked} focus={shouldFocusContinueButton}
+                    onCancel={this.props.onFinished} />
             </BaseDialog>
         );
     },

src/components/views/dialogs/SetEmailDialog.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
@@ -30,7 +31,7 @@ import Modal from '../../../Modal';
 export default React.createClass({
     displayName: 'SetEmailDialog',
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {

src/components/views/dialogs/SetMxIdDialog.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 import Promise from 'bluebird';
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import classnames from 'classnames';
@@ -35,11 +36,11 @@ const USERNAME_CHECK_DEBOUNCE_MS = 250;
 export default React.createClass({
     displayName: 'SetMxIdDialog',
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
         // Called when the user requests to register with a different homeserver
-        onDifferentServerClicked: React.PropTypes.func.isRequired,
+        onDifferentServerClicked: PropTypes.func.isRequired,
         // Called if the user wants to switch to login instead
-        onLoginClick: React.PropTypes.func.isRequired,
+        onLoginClick: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {

src/components/views/dialogs/TextInputDialog.js

@@ -15,21 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'TextInputDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
+        title: PropTypes.string,
+        description: PropTypes.oneOfType([
+            PropTypes.element,
+            PropTypes.string,
         ]),
-        value: React.PropTypes.string,
-        button: React.PropTypes.string,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        value: PropTypes.string,
+        button: PropTypes.string,
+        focus: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -58,6 +58,7 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className="mx_TextInputDialog" onFinished={this.props.onFinished}
                 title={this.props.title}
@@ -71,13 +72,10 @@ export default React.createClass({
                             <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" />
                         </div>
                     </div>
-                    <div className="mx_Dialog_buttons">
-                        <button onClick={this.onCancel}>
-                            { _t("Cancel") }
-                        </button>
-                        <input type="submit" className="mx_Dialog_primary" value={this.props.button} />
-                    </div>
                 </form>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -23,14 +23,7 @@ import GeminiScrollbar from 'react-gemini-scrollbar';
 import Resend from '../../../Resend';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
-
-function markAllDevicesKnown(devices) {
-    Object.keys(devices).forEach((userId) => {
-        Object.keys(devices[userId]).map((deviceId) => {
-            MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
-        });
-    });
-}
+import { markAllDevicesKnown } from '../../../cryptodevices';
 
 function DeviceListEntry(props) {
     const {userId, device} = props;
@@ -141,7 +134,7 @@ export default React.createClass({
     },
 
     _onSendAnywayClicked: function() {
-        markAllDevicesKnown(this.props.devices);
+        markAllDevicesKnown(MatrixClientPeg.get(), this.props.devices);
 
         this.props.onFinished();
         this.props.onSend();
@@ -187,18 +180,11 @@ export default React.createClass({
                 }
             });
         });
-        let sendButton;
-        if (haveUnknownDevices) {
-            sendButton = <button onClick={this._onSendAnywayClicked}>
-                { this.props.sendAnywayLabel }
-            </button>;
-        } else {
-            sendButton = <button onClick={this._onSendClicked}>
-                { this.props.sendLabel }
-            </button>;
-        }
+        const sendButtonOnClick = haveUnknownDevices ? this._onSendAnywayClicked : this._onSendClicked;
+        const sendButtonLabel = haveUnknownDevices ? this.props.sendAnywayLabel : this.props.sendAnywayLabel;
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className='mx_UnknownDeviceDialog'
                 onFinished={this.props.onFinished}
@@ -214,14 +200,9 @@ export default React.createClass({
 
                     <UnknownDeviceList devices={this.props.devices} />
                 </GeminiScrollbar>
-                <div className="mx_Dialog_buttons">
-                    {sendButton}
-                    <button className="mx_Dialog_primary" autoFocus={true}
-                        onClick={this._onDismissClicked}
-                    >
-                        {_t("Dismiss")}
-                    </button>
-                </div>
+                <DialogButtons primaryButton={sendButtonLabel}
+                    onPrimaryButtonClick={sendButtonOnClick}
+                    onCancel={this._onDismissClicked} />
             </BaseDialog>
         );
         // XXX: do we want to give the user the option to enable blacklistUnverifiedDevices for this room (or globally) at this point?

src/components/views/elements/AccessibleButton.js

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { KeyCode } from '../../../Keyboard';
 
@@ -72,9 +73,9 @@ export default function AccessibleButton(props) {
  *           implemented exactly like a normal onClick handler.
  */
 AccessibleButton.propTypes = {
-    children: React.PropTypes.node,
-    element: React.PropTypes.string,
-    onClick: React.PropTypes.func.isRequired,
+    children: PropTypes.node,
+    element: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
 };
 
 AccessibleButton.defaultProps = {

src/components/views/elements/AddressSelector.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
@@ -26,17 +27,17 @@ export default React.createClass({
     displayName: 'AddressSelector',
 
     propTypes: {
-        onSelected: React.PropTypes.func.isRequired,
+        onSelected: PropTypes.func.isRequired,
 
         // List of the addresses to display
-        addressList: React.PropTypes.arrayOf(UserAddressType).isRequired,
+        addressList: PropTypes.arrayOf(UserAddressType).isRequired,
         // Whether to show the address on the address tiles
-        showAddress: React.PropTypes.bool,
-        truncateAt: React.PropTypes.number.isRequired,
-        selected: React.PropTypes.number,
+        showAddress: PropTypes.bool,
+        truncateAt: PropTypes.number.isRequired,
+        selected: PropTypes.number,
 
         // Element to put as a header on top of the list
-        header: React.PropTypes.node,
+        header: PropTypes.node,
     },
 
     getInitialState: function() {

src/components/views/elements/AddressTile.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
@@ -28,9 +29,9 @@ export default React.createClass({
 
     propTypes: {
         address: UserAddressType.isRequired,
-        canDismiss: React.PropTypes.bool,
-        onDismissed: React.PropTypes.func,
-        justified: React.PropTypes.bool,
+        canDismiss: PropTypes.bool,
+        onDismissed: PropTypes.func,
+        justified: PropTypes.bool,
     },
 
     getDefaultProps: function() {

src/components/views/elements/AppTile.js

@@ -19,6 +19,7 @@ limitations under the License.
 import url from 'url';
 import qs from 'querystring';
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
@@ -40,19 +41,19 @@ export default React.createClass({
     displayName: 'AppTile',
 
     propTypes: {
-        id: React.PropTypes.string.isRequired,
-        url: React.PropTypes.string.isRequired,
-        name: React.PropTypes.string.isRequired,
-        room: React.PropTypes.object.isRequired,
-        type: React.PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        url: PropTypes.string.isRequired,
+        name: PropTypes.string.isRequired,
+        room: PropTypes.object.isRequired,
+        type: PropTypes.string.isRequired,
         // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
         // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
-        fullWidth: React.PropTypes.bool,
+        fullWidth: PropTypes.bool,
         // UserId of the current user
-        userId: React.PropTypes.string.isRequired,
+        userId: PropTypes.string.isRequired,
         // UserId of the entity that added / modified the widget
-        creatorUserId: React.PropTypes.string,
-        waitForIframeLoad: React.PropTypes.bool,
+        creatorUserId: PropTypes.string,
+        waitForIframeLoad: PropTypes.bool,
     },
 
     getDefaultProps() {

src/components/views/elements/DNDTagTile.js

@@ -0,0 +1,43 @@
+/* eslint new-cap: "off" */
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import TagTile from './TagTile';
+
+import { Draggable } from 'react-beautiful-dnd';
+
+export default function DNDTagTile(props) {
+    return <div>
+        <Draggable
+            key={props.tag}
+            draggableId={props.tag}
+            index={props.index}
+        >
+            { (provided, snapshot) => (
+                <div>
+                    <div
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                    >
+                        <TagTile {...props} />
+                    </div>
+                    { provided.placeholder }
+                </div>
+            ) }
+        </Draggable>
+    </div>;
+}

src/components/views/elements/DeviceVerifyButtons.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
@@ -24,8 +25,8 @@ export default React.createClass({
     displayName: 'DeviceVerifyButtons',
 
     propTypes: {
-        userId: React.PropTypes.string.isRequired,
-        device: React.PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {

src/components/views/elements/DialogButtons.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2017 Aidan Gauland
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+"use strict";
+
+import React from "react";
+import PropTypes from "prop-types";
+import { _t } from '../../../languageHandler';
+
+/**
+ * Basic container for buttons in modal dialogs.
+ */
+module.exports = React.createClass({
+    displayName: "DialogButtons",
+
+    propTypes: {
+        // The primary button which is styled differently and has default focus.
+        primaryButton: PropTypes.node.isRequired,
+
+        // onClick handler for the primary button.
+        onPrimaryButtonClick: PropTypes.func.isRequired,
+
+        // onClick handler for the cancel button.
+        onCancel: PropTypes.func.isRequired,
+
+        focus: PropTypes.bool,
+    },
+
+    render: function() {
+        let primaryButtonClassName = "mx_Dialog_primary";
+        if (this.props.primaryButtonClass) {
+            primaryButtonClassName += " " + this.props.primaryButtonClass;
+        }
+        return (
+            <div className="mx_Dialog_buttons">
+                <button className={primaryButtonClassName}
+                    onClick={this.props.onPrimaryButtonClick}
+                    autoFocus={this.props.focus}
+                >
+                    { this.props.primaryButton }
+                </button>
+                { this.props.children }
+                <button onClick={this.props.onCancel}>
+                    { _t("Cancel") }
+                </button>
+            </div>
+        );
+    },
+});

src/components/views/elements/DirectorySearchBox.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DirectorySearchBox extends React.Component {
@@ -105,10 +106,10 @@ export default class DirectorySearchBox extends React.Component {
 }
 
 DirectorySearchBox.propTypes = {
-    className: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    onClear: React.PropTypes.func,
-    onJoinClick: React.PropTypes.func,
-    placeholder: React.PropTypes.string,
-    showJoinButton: React.PropTypes.bool,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    onJoinClick: PropTypes.func,
+    placeholder: PropTypes.string,
+    showJoinButton: PropTypes.bool,
 };

src/components/views/elements/Dropdown.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
@@ -56,14 +57,14 @@ class MenuOption extends React.Component {
 }
 
 MenuOption.propTypes = {
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.arrayOf(React.PropTypes.node),
-      React.PropTypes.node,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(React.PropTypes.node),
+      PropTypes.node,
     ]),
-    highlighted: React.PropTypes.bool,
-    dropdownKey: React.PropTypes.string,
-    onClick: React.PropTypes.func.isRequired,
-    onMouseEnter: React.PropTypes.func.isRequired,
+    highlighted: PropTypes.bool,
+    dropdownKey: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    onMouseEnter: PropTypes.func.isRequired,
 };
 
 /*
@@ -322,20 +323,20 @@ Dropdown.propTypes = {
     // The width that the dropdown should be. If specified,
     // the dropped-down part of the menu will be set to this
     // width.
-    menuWidth: React.PropTypes.number,
+    menuWidth: PropTypes.number,
     // Called when the selected option changes
-    onOptionChange: React.PropTypes.func.isRequired,
+    onOptionChange: PropTypes.func.isRequired,
     // Called when the value of the search field changes
-    onSearchChange: React.PropTypes.func,
-    searchEnabled: React.PropTypes.bool,
+    onSearchChange: PropTypes.func,
+    searchEnabled: PropTypes.bool,
     // Function that, given the key of an option, returns
     // a node representing that option to be displayed in the
     // box itself as the currently-selected option (ie. as
     // opposed to in the actual dropped-down part). If
     // unspecified, the appropriate child element is used as
     // in the dropped-down menu.
-    getShortOption: React.PropTypes.func,
-    value: React.PropTypes.string,
+    getShortOption: PropTypes.func,
+    value: PropTypes.string,
     // negative for consistency with HTML
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
 };

src/components/views/elements/EditableText.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
@@ -26,18 +27,18 @@ module.exports = React.createClass({
     displayName: 'EditableText',
 
     propTypes: {
-        onValueChanged: React.PropTypes.func,
-        initialValue: React.PropTypes.string,
-        label: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
-        className: React.PropTypes.string,
-        labelClassName: React.PropTypes.string,
-        placeholderClassName: React.PropTypes.string,
+        onValueChanged: PropTypes.func,
+        initialValue: PropTypes.string,
+        label: PropTypes.string,
+        placeholder: PropTypes.string,
+        className: PropTypes.string,
+        labelClassName: PropTypes.string,
+        placeholderClassName: PropTypes.string,
         // Overrides blurToSubmit if true
-        blurToCancel: React.PropTypes.bool,
+        blurToCancel: PropTypes.bool,
         // Will cause onValueChanged(value, true) to fire on blur
-        blurToSubmit: React.PropTypes.bool,
-        editable: React.PropTypes.bool,
+        blurToSubmit: PropTypes.bool,
+        editable: PropTypes.bool,
     },
 
     Phases: {

src/components/views/elements/EditableTextContainer.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import Promise from 'bluebird';
 
@@ -126,21 +127,21 @@ export default class EditableTextContainer extends React.Component {
 
 EditableTextContainer.propTypes = {
     /* callback to retrieve the initial value. */
-    getInitialValue: React.PropTypes.func,
+    getInitialValue: PropTypes.func,
 
     /* initial value; used if getInitialValue is not given */
-    initialValue: React.PropTypes.string,
+    initialValue: PropTypes.string,
 
     /* placeholder text to use when the value is empty (and not being
      * edited) */
-    placeholder: React.PropTypes.string,
+    placeholder: PropTypes.string,
 
     /* callback to update the value. Called with a single argument: the new
      * value. */
-    onSubmit: React.PropTypes.func,
+    onSubmit: PropTypes.func,
 
     /* should the input submit when focus is lost? */
-    blurToSubmit: React.PropTypes.bool,
+    blurToSubmit: PropTypes.bool,
 };
 
 

src/components/views/elements/EmojiText.js

@@ -16,6 +16,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {emojifyText, containsEmoji} from '../../../HtmlUtils';
 
 export default function EmojiText(props) {
@@ -32,8 +33,8 @@ export default function EmojiText(props) {
 }
 
 EmojiText.propTypes = {
-    element: React.PropTypes.string,
-    children: React.PropTypes.string.isRequired,
+    element: PropTypes.string,
+    children: PropTypes.string.isRequired,
 };
 
 EmojiText.defaultProps = {

src/components/views/elements/Flair.js

@@ -63,7 +63,7 @@ FlairAvatar.propTypes = {
 };
 
 FlairAvatar.contextTypes = {
-    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
 };
 
 export default class Flair extends React.Component {
@@ -107,7 +107,11 @@ export default class Flair extends React.Component {
         }
         const profiles = await this._getGroupProfiles(groups);
         if (!this.unmounted) {
-            this.setState({profiles: profiles.filter((profile) => {return profile.avatarUrl;})});
+            this.setState({
+                profiles: profiles.filter((profile) => {
+                    return profile ? profile.avatarUrl : false;
+                }),
+            });
         }
     }
 
@@ -134,5 +138,5 @@ Flair.propTypes = {
 // this.context.matrixClient everywhere instead of this.props.matrixClient.
 // See https://github.com/vector-im/riot-web/issues/4951.
 Flair.contextTypes = {
-    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
 };

src/components/views/elements/LanguageDropdown.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import * as languageHandler from '../../../languageHandler';
@@ -114,7 +115,7 @@ export default class LanguageDropdown extends React.Component {
 }
 
 LanguageDropdown.propTypes = {
-    className: React.PropTypes.string,
-    onOptionChange: React.PropTypes.func.isRequired,
-    value: React.PropTypes.string,
+    className: PropTypes.string,
+    onOptionChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
 };

src/components/views/elements/MemberEventListSummary.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 const MemberAvatar = require('../avatars/MemberAvatar.js');
 import { _t } from '../../../languageHandler';
@@ -23,19 +24,19 @@ module.exports = React.createClass({
 
     propTypes: {
         // An array of member events to summarise
-        events: React.PropTypes.array.isRequired,
+        events: PropTypes.array.isRequired,
         // An array of EventTiles to render when expanded
-        children: React.PropTypes.array.isRequired,
+        children: PropTypes.array.isRequired,
         // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
-        summaryLength: React.PropTypes.number,
+        summaryLength: PropTypes.number,
         // The maximum number of avatars to display in the summary
-        avatarsMaxLength: React.PropTypes.number,
+        avatarsMaxLength: PropTypes.number,
         // The minimum number of events needed to trigger summarisation
-        threshold: React.PropTypes.number,
+        threshold: PropTypes.number,
         // Called when the MELS expansion is toggled
-        onToggle: React.PropTypes.func,
+        onToggle: PropTypes.func,
         // Whether or not to begin with state.expanded=true
-        startExpanded: React.PropTypes.bool,
+        startExpanded: PropTypes.bool,
     },
 
     getInitialState: function() {

src/components/views/elements/Pill.js

@@ -17,7 +17,7 @@ import React from 'react';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room, RoomMember, MatrixClient } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
@@ -61,6 +61,17 @@ const Pill = React.createClass({
         shouldShowPillAvatar: PropTypes.bool,
     },
 
+
+    childContextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getChildContext() {
+        return {
+            matrixClient: this._matrixClient,
+        };
+    },
+
     getInitialState() {
         return {
             // ID/alias of the room/user
@@ -135,6 +146,7 @@ const Pill = React.createClass({
 
     componentWillMount() {
         this._unmounted = false;
+        this._matrixClient = MatrixClientPeg.get();
         this.componentWillReceiveProps(this.props);
     },
 

src/components/views/elements/PowerSelector.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 
@@ -24,23 +25,23 @@ module.exports = React.createClass({
     displayName: 'PowerSelector',
 
     propTypes: {
-        value: React.PropTypes.number.isRequired,
+        value: PropTypes.number.isRequired,
         // The maximum value that can be set with the power selector
-        maxValue: React.PropTypes.number.isRequired,
+        maxValue: PropTypes.number.isRequired,
 
         // Default user power level for the room
-        usersDefault: React.PropTypes.number.isRequired,
+        usersDefault: PropTypes.number.isRequired,
 
         // if true, the <select/> should be a 'controlled' form element and updated by React
         // to reflect the current value, rather than left freeform.
         // MemberInfo uses controlled; RoomSettings uses non-controlled.
         //
         // ignored if disabled is truthy. false by default.
-        controlled: React.PropTypes.bool,
+        controlled: PropTypes.bool,
 
         // should the user be able to change the value? false by default.
-        disabled: React.PropTypes.bool,
-        onChange: React.PropTypes.func,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func,
     },
 
     getInitialState: function() {

src/components/views/elements/ProgressBar.js

@@ -17,12 +17,13 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 module.exports = React.createClass({
     displayName: 'ProgressBar',
     propTypes: {
-        value: React.PropTypes.number,
-        max: React.PropTypes.number,
+        value: PropTypes.number,
+        max: PropTypes.number,
     },
 
     render: function() {

src/components/views/elements/Quote.js

@@ -0,0 +1,188 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import sdk from '../../../index';
+import {_t} from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import {wantsDateSeparator} from '../../../DateUtils';
+import {MatrixEvent} from 'matrix-js-sdk';
+import {makeUserPermalink} from "../../../matrix-to";
+
+// For URLs of matrix.to links in the timeline which have been reformatted by
+// HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
+const REGEX_LOCAL_MATRIXTO = /^#\/room\/([\#\!][^\/]*)\/(\$[^\/]*)$/;
+
+export default class Quote extends React.Component {
+    static isMessageUrl(url) {
+        return !!REGEX_LOCAL_MATRIXTO.exec(url);
+    }
+
+    static childContextTypes = {
+        matrixClient: PropTypes.object,
+        addRichQuote: PropTypes.func,
+    };
+
+    static propTypes = {
+        // The matrix.to url of the event
+        url: PropTypes.string,
+        // The original node that was rendered
+        node: PropTypes.instanceOf(Element),
+        // The parent event
+        parentEv: PropTypes.instanceOf(MatrixEvent),
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            // The event related to this quote and their nested rich quotes
+            events: [],
+            // Whether the top (oldest) event should be shown or spoilered
+            show: true,
+            // Whether an error was encountered fetching nested older event, show node if it does
+            err: false,
+        };
+
+        this.onQuoteClick = this.onQuoteClick.bind(this);
+        this.addRichQuote = this.addRichQuote.bind(this);
+    }
+
+    getChildContext() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+            addRichQuote: this.addRichQuote,
+        };
+    }
+
+    parseUrl(url) {
+        if (!url) return;
+
+        // Default to the empty array if no match for simplicity
+        // resource and prefix will be undefined instead of throwing
+        const matrixToMatch = REGEX_LOCAL_MATRIXTO.exec(url) || [];
+
+        const [, roomIdentifier, eventId] = matrixToMatch;
+        return {roomIdentifier, eventId};
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const {roomIdentifier, eventId} = this.parseUrl(nextProps.url);
+        if (!roomIdentifier || !eventId) return;
+
+        const room = this.getRoom(roomIdentifier);
+        if (!room) return;
+
+        // Only try and load the event if we know about the room
+        // otherwise we just leave a `Quote` anchor which can be used to navigate/join the room manually.
+        this.setState({ events: [] });
+        if (room) this.getEvent(room, eventId, true);
+    }
+
+    componentWillMount() {
+        this.componentWillReceiveProps(this.props);
+    }
+
+    getRoom(id) {
+        const cli = MatrixClientPeg.get();
+        if (id[0] === '!') return cli.getRoom(id);
+
+        return cli.getRooms().find((r) => {
+            return r.getAliases().includes(id);
+        });
+    }
+
+    async getEvent(room, eventId, show) {
+        const event = room.findEventById(eventId);
+        if (event) {
+            this.addEvent(event, show);
+            return;
+        }
+
+        await MatrixClientPeg.get().getEventTimeline(room.getUnfilteredTimelineSet(), eventId);
+        this.addEvent(room.findEventById(eventId), show);
+    }
+
+    addEvent(event, show) {
+        const events = [event].concat(this.state.events);
+        this.setState({events, show});
+    }
+
+    // addRichQuote(roomId, eventId) {
+    addRichQuote(href) {
+        const {roomIdentifier, eventId} = this.parseUrl(href);
+        if (!roomIdentifier || !eventId) {
+            this.setState({ err: true });
+            return;
+        }
+
+        const room = this.getRoom(roomIdentifier);
+        if (!room) {
+            this.setState({ err: true });
+            return;
+        }
+
+        this.getEvent(room, eventId, false);
+    }
+
+    onQuoteClick() {
+        this.setState({ show: true });
+    }
+
+    render() {
+        const events = this.state.events.slice();
+        if (events.length) {
+            const evTiles = [];
+
+            if (!this.state.show) {
+                const oldestEv = events.shift();
+                const Pill = sdk.getComponent('elements.Pill');
+                const room = MatrixClientPeg.get().getRoom(oldestEv.getRoomId());
+
+                evTiles.push(<blockquote className="mx_Quote" key="load">
+                    {
+                        _t('<a>In reply to</a> <pill>', {}, {
+                            'a': (sub) => <a onClick={this.onQuoteClick} className="mx_Quote_show">{ sub }</a>,
+                            'pill': <Pill type={Pill.TYPE_USER_MENTION} room={room}
+                                          url={makeUserPermalink(oldestEv.getSender())} shouldShowPillAvatar={true} />,
+                        })
+                    }
+                </blockquote>);
+            }
+
+            const EventTile = sdk.getComponent('views.rooms.EventTile');
+            const DateSeparator = sdk.getComponent('messages.DateSeparator');
+            events.forEach((ev) => {
+                let dateSep = null;
+
+                if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) {
+                    dateSep = <a href={this.props.url}><DateSeparator ts={ev.getTs()} /></a>;
+                }
+
+                evTiles.push(<blockquote className="mx_Quote" key={ev.getId()}>
+                    { dateSep }
+                    <EventTile mxEvent={ev} tileShape="quote" />
+                </blockquote>);
+            });
+
+            return <div>{ evTiles }</div>;
+        }
+
+        // Deliberately render nothing if the URL isn't recognised
+        // in case we get an undefined/falsey node, replace it with null to make React happy
+        return this.props.node || null;
+    }
+}

src/components/views/elements/SettingsFlag.js

@@ -15,23 +15,24 @@ limitations under the License.
 */
 
 import React from "react";
+import PropTypes from 'prop-types';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'SettingsFlag',
     propTypes: {
-        name: React.PropTypes.string.isRequired,
-        level: React.PropTypes.string.isRequired,
-        roomId: React.PropTypes.string, // for per-room settings
-        label: React.PropTypes.string, // untranslated
-        onChange: React.PropTypes.func,
-        isExplicit: React.PropTypes.bool,
-        manualSave: React.PropTypes.bool,
+        name: PropTypes.string.isRequired,
+        level: PropTypes.string.isRequired,
+        roomId: PropTypes.string, // for per-room settings
+        label: PropTypes.string, // untranslated
+        onChange: PropTypes.func,
+        isExplicit: PropTypes.bool,
+        manualSave: PropTypes.bool,
 
         // If group is supplied, then this will create a radio button instead.
-        group: React.PropTypes.string,
-        value: React.PropTypes.any, // the value for the radio button
+        group: PropTypes.string,
+        value: PropTypes.any, // the value for the radio button
     },
 
     getInitialState: function() {

src/components/views/elements/TagTile.js

@@ -0,0 +1,119 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { MatrixClient } from 'matrix-js-sdk';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
+
+import FlairStore from '../../../stores/FlairStore';
+
+// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
+// a thing to click on for the user to filter the visible rooms in the RoomList to:
+//  - Rooms that are part of the group
+//  - Direct messages with members of the group
+// with the intention that this could be expanded to arbitrary tags in future.
+export default React.createClass({
+    displayName: 'TagTile',
+
+    propTypes: {
+        // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
+        // For now, only group IDs are handled.
+        tag: PropTypes.string,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    },
+
+    getInitialState() {
+        return {
+            // Whether the mouse is over the tile
+            hover: false,
+            // The profile data of the group if this.props.tag is a group ID
+            profile: null,
+        };
+    },
+
+    componentWillMount() {
+        this.unmounted = false;
+        if (this.props.tag[0] === '+') {
+            FlairStore.getGroupProfileCached(
+                this.context.matrixClient,
+                this.props.tag,
+            ).then((profile) => {
+                if (this.unmounted) return;
+                this.setState({profile});
+            }).catch((err) => {
+                console.warn('Could not fetch group profile for ' + this.props.tag, err);
+            });
+        }
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+    },
+
+    onClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch({
+            action: 'select_tag',
+            tag: this.props.tag,
+            ctrlOrCmdKey: isOnlyCtrlOrCmdIgnoreShiftKeyEvent(e),
+            shiftKey: e.shiftKey,
+        });
+    },
+
+    onMouseOver: function() {
+        this.setState({hover: true});
+    },
+
+    onMouseOut: function() {
+        this.setState({hover: false});
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+        const profile = this.state.profile || {};
+        const name = profile.name || this.props.tag;
+        const avatarHeight = 35;
+
+        const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
+            profile.avatarUrl, avatarHeight, avatarHeight, "crop",
+        ) : null;
+
+        const className = classNames({
+            mx_TagTile: true,
+            mx_TagTile_selected: this.props.selected,
+        });
+
+        const tip = this.state.hover ?
+            <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
+            <div />;
+        return <AccessibleButton className={className} onClick={this.onClick}>
+            <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
+                { tip }
+            </div>
+        </AccessibleButton>;
+    },
+});

src/components/views/elements/TintableSvg.js

@@ -18,16 +18,17 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require("react-dom");
+import PropTypes from 'prop-types';
 const Tinter = require("../../../Tinter");
 
 var TintableSvg = React.createClass({
     displayName: 'TintableSvg',
 
     propTypes: {
-        src: React.PropTypes.string.isRequired,
-        width: React.PropTypes.string.isRequired,
-        height: React.PropTypes.string.isRequired,
-        className: React.PropTypes.string,
+        src: PropTypes.string.isRequired,
+        width: PropTypes.string.isRequired,
+        height: PropTypes.string.isRequired,
+        className: PropTypes.string,
     },
 
     statics: {

src/components/views/elements/UserSelector.js

@@ -17,14 +17,15 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'UserSelector',
 
     propTypes: {
-        onChange: React.PropTypes.func,
-        selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
+        onChange: PropTypes.func,
+        selected_users: PropTypes.arrayOf(React.PropTypes.string),
     },
 
     getDefaultProps: function() {

src/components/views/groups/GroupRoomTile.js

@@ -66,7 +66,7 @@ const GroupRoomTile = React.createClass({
 });
 
 GroupRoomTile.contextTypes = {
-    matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
 };
 
 

src/components/views/groups/GroupTile.js

@@ -33,7 +33,7 @@ const GroupTile = React.createClass({
     },
 
     contextTypes: {
-        matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
     },
 
     getInitialState() {

src/components/views/login/CaptchaForm.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 const DIV_ID = 'mx_recaptcha';
@@ -29,10 +30,10 @@ module.exports = React.createClass({
     displayName: 'CaptchaForm',
 
     propTypes: {
-        sitePublicKey: React.PropTypes.string,
+        sitePublicKey: PropTypes.string,
 
         // called with the captcha response
-        onCaptchaResponse: React.PropTypes.func,
+        onCaptchaResponse: PropTypes.func,
     },
 
     getDefaultProps: function() {

src/components/views/login/CasLogin.js

@@ -17,13 +17,14 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'CasLogin',
 
     propTypes: {
-      onSubmit: React.PropTypes.func, // fn()
+      onSubmit: PropTypes.func, // fn()
     },
 
     render: function() {

src/components/views/login/CountryDropdown.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 
@@ -131,11 +132,11 @@ export default class CountryDropdown extends React.Component {
 }
 
 CountryDropdown.propTypes = {
-    className: React.PropTypes.string,
-    isSmall: React.PropTypes.bool,
+    className: PropTypes.string,
+    isSmall: PropTypes.bool,
     // if isSmall, show +44 in the selected value
-    showPrefix: React.PropTypes.bool,
-    onOptionChange: React.PropTypes.func.isRequired,
-    value: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
+    showPrefix: PropTypes.bool,
+    onOptionChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    disabled: PropTypes.bool,
 };

src/components/views/login/InteractiveAuthEntryComponents.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import url from 'url';
 import classnames from 'classnames';
 
@@ -69,12 +70,12 @@ export const PasswordAuthEntry = React.createClass({
     },
 
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        submitAuthDict: React.PropTypes.func.isRequired,
-        errorText: React.PropTypes.string,
+        matrixClient: PropTypes.object.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        errorText: PropTypes.string,
         // is the auth logic currently waiting for something to
         // happen?
-        busy: React.PropTypes.bool,
+        busy: PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -166,10 +167,10 @@ export const RecaptchaAuthEntry = React.createClass({
     },
 
     propTypes: {
-        submitAuthDict: React.PropTypes.func.isRequired,
-        stageParams: React.PropTypes.object.isRequired,
-        errorText: React.PropTypes.string,
-        busy: React.PropTypes.bool,
+        submitAuthDict: PropTypes.func.isRequired,
+        stageParams: PropTypes.object.isRequired,
+        errorText: PropTypes.string,
+        busy: PropTypes.bool,
     },
 
     _onCaptchaResponse: function(response) {
@@ -216,15 +217,15 @@ export const EmailIdentityAuthEntry = React.createClass({
     },
 
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        submitAuthDict: React.PropTypes.func.isRequired,
-        authSessionId: React.PropTypes.string.isRequired,
-        clientSecret: React.PropTypes.string.isRequired,
-        inputs: React.PropTypes.object.isRequired,
-        stageState: React.PropTypes.object.isRequired,
-        fail: React.PropTypes.func.isRequired,
-        setEmailSid: React.PropTypes.func.isRequired,
-        makeRegistrationUrl: React.PropTypes.func.isRequired,
+        matrixClient: PropTypes.object.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        authSessionId: PropTypes.string.isRequired,
+        clientSecret: PropTypes.string.isRequired,
+        inputs: PropTypes.object.isRequired,
+        stageState: PropTypes.object.isRequired,
+        fail: PropTypes.func.isRequired,
+        setEmailSid: PropTypes.func.isRequired,
+        makeRegistrationUrl: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -291,15 +292,15 @@ export const MsisdnAuthEntry = React.createClass({
     },
 
     propTypes: {
-        inputs: React.PropTypes.shape({
-            phoneCountry: React.PropTypes.string,
-            phoneNumber: React.PropTypes.string,
+        inputs: PropTypes.shape({
+            phoneCountry: PropTypes.string,
+            phoneNumber: PropTypes.string,
         }),
-        fail: React.PropTypes.func,
-        clientSecret: React.PropTypes.func,
-        submitAuthDict: React.PropTypes.func.isRequired,
-        matrixClient: React.PropTypes.object,
-        submitAuthDict: React.PropTypes.func,
+        fail: PropTypes.func,
+        clientSecret: PropTypes.func,
+        submitAuthDict: PropTypes.func.isRequired,
+        matrixClient: PropTypes.object,
+        submitAuthDict: PropTypes.func,
     },
 
     getInitialState: function() {
@@ -398,7 +399,7 @@ export const MsisdnAuthEntry = React.createClass({
             return (
                 <div>
                     <p>{ _t("A text message has been sent to %(msisdn)s",
-                        { msisdn: <i>this._msisdn</i> },
+                        { msisdn: <i>{ this._msisdn }</i> },
                     ) }
                     </p>
                     <p>{ _t("Please enter the code it contains:") }</p>
@@ -428,11 +429,11 @@ export const FallbackAuthEntry = React.createClass({
     displayName: 'FallbackAuthEntry',
 
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        authSessionId: React.PropTypes.string.isRequired,
-        loginType: React.PropTypes.string.isRequired,
-        submitAuthDict: React.PropTypes.func.isRequired,
-        errorText: React.PropTypes.string,
+        matrixClient: PropTypes.object.isRequired,
+        authSessionId: PropTypes.string.isRequired,
+        loginType: PropTypes.string.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        errorText: PropTypes.string,
     },
 
     componentWillMount: function() {

src/components/views/login/PasswordLogin.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -256,17 +257,17 @@ PasswordLogin.LOGIN_FIELD_MXID = "login_field_mxid";
 PasswordLogin.LOGIN_FIELD_PHONE = "login_field_phone";
 
 PasswordLogin.propTypes = {
-    onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
-    onForgotPasswordClick: React.PropTypes.func, // fn()
-    initialUsername: React.PropTypes.string,
-    initialPhoneCountry: React.PropTypes.string,
-    initialPhoneNumber: React.PropTypes.string,
-    initialPassword: React.PropTypes.string,
-    onUsernameChanged: React.PropTypes.func,
-    onPhoneCountryChanged: React.PropTypes.func,
-    onPhoneNumberChanged: React.PropTypes.func,
-    onPasswordChanged: React.PropTypes.func,
-    loginIncorrect: React.PropTypes.bool,
+    onSubmit: PropTypes.func.isRequired, // fn(username, password)
+    onForgotPasswordClick: PropTypes.func, // fn()
+    initialUsername: PropTypes.string,
+    initialPhoneCountry: PropTypes.string,
+    initialPhoneNumber: PropTypes.string,
+    initialPassword: PropTypes.string,
+    onUsernameChanged: PropTypes.func,
+    onPhoneCountryChanged: PropTypes.func,
+    onPhoneNumberChanged: PropTypes.func,
+    onPasswordChanged: PropTypes.func,
+    loginIncorrect: PropTypes.bool,
 };
 
 module.exports = PasswordLogin;

src/components/views/login/RegistrationForm.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { field_input_incorrect } from '../../../UiEffects';
 import sdk from '../../../index';
 import Email from '../../../email';
@@ -40,25 +41,25 @@ module.exports = React.createClass({
 
     propTypes: {
         // Values pre-filled in the input boxes when the component loads
-        defaultEmail: React.PropTypes.string,
-        defaultPhoneCountry: React.PropTypes.string,
-        defaultPhoneNumber: React.PropTypes.string,
-        defaultUsername: React.PropTypes.string,
-        defaultPassword: React.PropTypes.string,
-        teamsConfig: React.PropTypes.shape({
+        defaultEmail: PropTypes.string,
+        defaultPhoneCountry: PropTypes.string,
+        defaultPhoneNumber: PropTypes.string,
+        defaultUsername: PropTypes.string,
+        defaultPassword: PropTypes.string,
+        teamsConfig: PropTypes.shape({
             // Email address to request new teams
-            supportEmail: React.PropTypes.string,
-            teams: React.PropTypes.arrayOf(React.PropTypes.shape({
+            supportEmail: PropTypes.string,
+            teams: PropTypes.arrayOf(React.PropTypes.shape({
                 // The displayed name of the team
-                "name": React.PropTypes.string,
+                "name": PropTypes.string,
                 // The domain of team email addresses
-                "domain": React.PropTypes.string,
+                "domain": PropTypes.string,
             })).required,
         }),
 
-        minPasswordLength: React.PropTypes.number,
-        onError: React.PropTypes.func,
-        onRegisterClick: React.PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
+        minPasswordLength: PropTypes.number,
+        onError: PropTypes.func,
+        onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
     },
 
     getDefaultProps: function() {

src/components/views/login/ServerConfig.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const Modal = require('../../../Modal');
 const sdk = require('../../../index');
 import { _t } from '../../../languageHandler';
@@ -28,24 +29,24 @@ module.exports = React.createClass({
     displayName: 'ServerConfig',
 
     propTypes: {
-        onServerConfigChange: React.PropTypes.func,
+        onServerConfigChange: PropTypes.func,
 
         // default URLs are defined in config.json (or the hardcoded defaults)
         // they are used if the user has not overridden them with a custom URL.
         // In other words, if the custom URL is blank, the default is used.
-        defaultHsUrl: React.PropTypes.string, // e.g. https://matrix.org
-        defaultIsUrl: React.PropTypes.string, // e.g. https://vector.im
+        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
+        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
 
         // custom URLs are explicitly provided by the user and override the
         // default URLs.  The user enters them via the component's input fields,
         // which is reflected on these properties whenever on..UrlChanged fires.
         // They are persisted in localStorage by MatrixClientPeg, and so can
         // override the default URLs when the component initially loads.
-        customHsUrl: React.PropTypes.string,
-        customIsUrl: React.PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
 
-        withToggleButton: React.PropTypes.bool,
-        delayTimeMs: React.PropTypes.number, // time to wait before invoking onChanged
+        withToggleButton: PropTypes.bool,
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
     },
 
     getDefaultProps: function() {

src/components/views/messages/MFileBody.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import filesize from 'filesize';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
@@ -191,7 +192,7 @@ module.exports = React.createClass({
     },
 
     contextTypes: {
-        appConfig: React.PropTypes.object,
+        appConfig: PropTypes.object,
     },
 
     /**
@@ -294,7 +295,7 @@ module.exports = React.createClass({
 
                 return (
                     <span className="mx_MFileBody" ref="body">
-                        <div className="mx_MImageBody_download">
+                        <div className="mx_MFileBody_download">
                             <a href="javascript:void(0)" onClick={decrypt}>
                                 { _t("Decrypt %(text)s", { text: text }) }
                             </a>
@@ -326,7 +327,7 @@ module.exports = React.createClass({
             }
             return (
                 <span className="mx_MFileBody">
-                    <div className="mx_MImageBody_download">
+                    <div className="mx_MFileBody_download">
                         <div style={{display: "none"}}>
                             { /*
                               * Add dummy copy of the "a" tag
@@ -346,7 +347,7 @@ module.exports = React.createClass({
             if (this.props.tileShape === "file_grid") {
                 return (
                     <span className="mx_MFileBody">
-                        <div className="mx_MImageBody_download">
+                        <div className="mx_MFileBody_download">
                             <a className="mx_ImageBody_downloadLink" href={contentUrl} download={fileName} target="_blank">
                                 { fileName }
                             </a>
@@ -359,7 +360,7 @@ module.exports = React.createClass({
             } else {
                 return (
                     <span className="mx_MFileBody">
-                        <div className="mx_MImageBody_download">
+                        <div className="mx_MFileBody_download">
                             <a href={contentUrl} download={fileName} target="_blank" rel="noopener">
                                 <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage" />
                                 { _t("Download %(text)s", { text: text }) }

src/components/views/messages/MImageBody.js

@@ -17,8 +17,10 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
+
 import MFileBody from './MFileBody';
-import MatrixClientPeg from '../../../MatrixClientPeg';
 import ImageUtils from '../../../ImageUtils';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
@@ -33,10 +35,14 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* called when the image has loaded */
-        onWidgetLoad: React.PropTypes.func.isRequired,
+        onWidgetLoad: PropTypes.func.isRequired,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
     },
 
     getInitialState: function() {
@@ -45,9 +51,27 @@ module.exports = React.createClass({
             decryptedThumbnailUrl: null,
             decryptedBlob: null,
             error: null,
+            imgError: false,
         };
     },
 
+    componentWillMount() {
+        this.unmounted = false;
+        this.context.matrixClient.on('sync', this.onClientSync);
+    },
+
+    onClientSync(syncState, prevState) {
+        if (this.unmounted) return;
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING or PREPARED.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected && this.state.imgError) {
+            // Load the image again
+            this.setState({
+                imgError: false,
+            });
+        }
+    },
 
     onClick: function onClick(ev) {
         if (ev.button == 0 && !ev.metaKey) {
@@ -96,12 +120,18 @@ module.exports = React.createClass({
         imgElement.src = this._getThumbUrl();
     },
 
+    onImageError: function() {
+        this.setState({
+            imgError: true,
+        });
+    },
+
     _getContentUrl: function() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             return this.state.decryptedUrl;
         } else {
-            return MatrixClientPeg.get().mxcUrlToHttp(content.url);
+            return this.context.matrixClient.mxcUrlToHttp(content.url);
         }
     },
 
@@ -114,7 +144,7 @@ module.exports = React.createClass({
             }
             return this.state.decryptedUrl;
         } else {
-            return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600);
+            return this.context.matrixClient.mxcUrlToHttp(content.url, 800, 600);
         }
     },
 
@@ -155,7 +185,9 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
+        this.unmounted = true;
         dis.unregister(this.dispatcherRef);
+        this.context.matrixClient.removeListener('sync', this.onClientSync);
     },
 
     onAction: function(payload) {
@@ -216,6 +248,14 @@ module.exports = React.createClass({
             );
         }
 
+        if (this.state.imgError) {
+            return (
+                <span className="mx_MImageBody">
+                    { _t("This image cannot be displayed.") }
+                </span>
+            );
+        }
+
         const contentUrl = this._getContentUrl();
         let thumbUrl;
         if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
@@ -230,6 +270,7 @@ module.exports = React.createClass({
                     <a href={contentUrl} onClick={this.onClick}>
                         <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                             alt={content.body}
+                            onError={this.onImageError}
                             onLoad={this.props.onWidgetLoad}
                             onMouseEnter={this.onImageEnter}
                             onMouseLeave={this.onImageLeave} />

src/components/views/messages/MVideoBody.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MFileBody from './MFileBody';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
@@ -29,10 +30,10 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* called when the video has loaded */
-        onWidgetLoad: React.PropTypes.func.isRequired,
+        onWidgetLoad: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {

src/components/views/messages/MessageEvent.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -24,22 +25,22 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* a list of words to highlight */
-        highlights: React.PropTypes.array,
+        highlights: PropTypes.array,
 
         /* link URL for the highlights */
-        highlightLink: React.PropTypes.string,
+        highlightLink: PropTypes.string,
 
         /* should show URL previews for this event */
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         /* callback called when dynamic content in events are loaded */
-        onWidgetLoad: React.PropTypes.func,
+        onWidgetLoad: PropTypes.func,
 
         /* the shsape of the tile, used */
-        tileShape: React.PropTypes.string,
+        tileShape: PropTypes.string,
     },
 
     getEventTileOps: function() {

src/components/views/messages/RoomAvatarEvent.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { ContentRepo } from 'matrix-js-sdk';
 import { _t } from '../../../languageHandler';
@@ -27,7 +28,7 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
     },
 
     onAvatarClick: function(name) {

src/components/views/messages/TextualBody.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,6 +19,7 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
 import * as linkify from 'linkifyjs';
@@ -31,8 +33,6 @@ import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import ContextualMenu from '../../structures/ContextualMenu';
-import {RoomMember} from 'matrix-js-sdk';
-import classNames from 'classnames';
 import SettingsStore from "../../../settings/SettingsStore";
 import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
 
@@ -43,19 +43,26 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* a list of words to highlight */
-        highlights: React.PropTypes.array,
+        highlights: PropTypes.array,
 
         /* link URL for the highlights */
-        highlightLink: React.PropTypes.string,
+        highlightLink: PropTypes.string,
 
         /* should show URL previews for this event */
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         /* callback for when our widget has loaded */
-        onWidgetLoad: React.PropTypes.func,
+        onWidgetLoad: PropTypes.func,
+
+        /* the shape of the tile, used */
+        tileShape: PropTypes.string,
+    },
+
+    contextTypes: {
+        addRichQuote: PropTypes.func,
     },
 
     getInitialState: function() {
@@ -179,6 +186,7 @@ module.exports = React.createClass({
 
                 // If the link is a (localised) matrix.to link, replace it with a pill
                 const Pill = sdk.getComponent('elements.Pill');
+                const Quote = sdk.getComponent('elements.Quote');
                 if (Pill.isMessagePillUrl(href)) {
                     const pillContainer = document.createElement('span');
 
@@ -197,6 +205,21 @@ module.exports = React.createClass({
 
                     // update the current node with one that's now taken its place
                     node = pillContainer;
+                } else if (SettingsStore.isFeatureEnabled("feature_rich_quoting") && Quote.isMessageUrl(href)) {
+                    if (this.context.addRichQuote) { // We're already a Rich Quote so just append the next one above
+                        this.context.addRichQuote(href);
+                        node.remove();
+                    } else { // We're the first in the chain
+                        const quoteContainer = document.createElement('span');
+
+                        const quote =
+                            <Quote url={href} parentEv={this.props.mxEvent} node={node} />;
+
+                        ReactDOM.render(quote, quoteContainer);
+                        node.parentNode.replaceChild(quoteContainer, node);
+                        node = quoteContainer;
+                    }
+                    pillified = true;
                 }
             } else if (node.nodeType == Node.TEXT_NODE) {
                 const Pill = sdk.getComponent('elements.Pill');

src/components/views/messages/TextualEvent.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const TextForEvent = require('../../../TextForEvent');
 import sdk from '../../../index';
@@ -26,7 +27,7 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
     },
 
     render: function() {

src/components/views/room_settings/AliasSettings.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import Promise from 'bluebird';
 const React = require('react');
+import PropTypes from 'prop-types';
 const ObjectUtils = require("../../../ObjectUtils");
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
@@ -26,11 +27,11 @@ module.exports = React.createClass({
     displayName: 'AliasSettings',
 
     propTypes: {
-        roomId: React.PropTypes.string.isRequired,
-        canSetCanonicalAlias: React.PropTypes.bool.isRequired,
-        canSetAliases: React.PropTypes.bool.isRequired,
-        aliasEvents: React.PropTypes.array, // [MatrixEvent]
-        canonicalAliasEvent: React.PropTypes.object, // MatrixEvent
+        roomId: PropTypes.string.isRequired,
+        canSetCanonicalAlias: PropTypes.bool.isRequired,
+        canSetAliases: PropTypes.bool.isRequired,
+        aliasEvents: PropTypes.array, // [MatrixEvent]
+        canonicalAliasEvent: PropTypes.object, // MatrixEvent
     },
 
     getDefaultProps: function() {
@@ -57,8 +58,8 @@ module.exports = React.createClass({
 
         state.domainToAliases = this.aliasEventsToDictionary(aliasEvents);
 
-        state.remoteDomains = Object.keys(state.domainToAliases).filter((alias) => {
-            return alias !== localDomain;
+        state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
+            return domain !== localDomain && state.domainToAliases[domain].length > 0;
         });
 
         if (canonicalAliasEvent) {

src/components/views/room_settings/ColorSettings.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 import Promise from 'bluebird';
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const sdk = require('../../../index');
 const Tinter = require('../../../Tinter');
@@ -42,7 +43,7 @@ module.exports = React.createClass({
     displayName: 'ColorSettings',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {

src/components/views/room_settings/RelatedGroupSettings.js

@@ -15,10 +15,12 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
+import isEqual from 'lodash/isEqual';
 
 const GROUP_ID_REGEX = /\+\S+\:\S+/;
 
@@ -26,13 +28,13 @@ module.exports = React.createClass({
     displayName: 'RelatedGroupSettings',
 
     propTypes: {
-        roomId: React.PropTypes.string.isRequired,
-        canSetRelatedGroups: React.PropTypes.bool.isRequired,
-        relatedGroupsEvent: React.PropTypes.instanceOf(MatrixEvent),
+        roomId: PropTypes.string.isRequired,
+        canSetRelatedGroups: PropTypes.bool.isRequired,
+        relatedGroupsEvent: PropTypes.instanceOf(MatrixEvent),
     },
 
     contextTypes: {
-        matrixClient: React.PropTypes.instanceOf(MatrixClient),
+        matrixClient: PropTypes.instanceOf(MatrixClient),
     },
 
     getDefaultProps: function() {
@@ -43,13 +45,25 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            newGroupsList: this.props.relatedGroupsEvent ?
-                (this.props.relatedGroupsEvent.getContent().groups || []) : [],
+            newGroupsList: this.getInitialGroupList(),
             newGroupId: null,
         };
     },
 
+    getInitialGroupList: function() {
+        return this.props.relatedGroupsEvent ? (this.props.relatedGroupsEvent.getContent().groups || []) : [];
+    },
+
+    needsSaving: function() {
+        const cli = this.context.matrixClient;
+        const room = cli.getRoom(this.props.roomId);
+        if (!room.currentState.maySendStateEvent('m.room.related_groups', cli.getUserId())) return false;
+        return !isEqual(this.getInitialGroupList(), this.state.newGroupsList);
+    },
+
     saveSettings: function() {
+        if (!this.needsSaving()) return Promise.resolve();
+
         return this.context.matrixClient.sendStateEvent(
             this.props.roomId,
             'm.room.related_groups',
@@ -97,7 +111,7 @@ module.exports = React.createClass({
 
     onGroupDeleted: function(index) {
         const newGroupsList = this.state.newGroupsList.slice();
-        newGroupsList.splice(index, 1),
+        newGroupsList.splice(index, 1);
         this.setState({ newGroupsList });
     },
 

src/components/views/room_settings/UrlPreviewSettings.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const sdk = require("../../../index");
 import { _t, _td } from '../../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
@@ -25,7 +26,7 @@ module.exports = React.createClass({
     displayName: 'UrlPreviewSettings',
 
     propTypes: {
-        room: React.PropTypes.object,
+        room: PropTypes.object,
     },
 
     saveSettings: function() {

src/components/views/rooms/AppsDrawer.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import AppTile from '../elements/AppTile';
 import Modal from '../../../Modal';
@@ -27,6 +28,7 @@ import ScalarAuthClient from '../../../ScalarAuthClient';
 import ScalarMessaging from '../../../ScalarMessaging';
 import { _t } from '../../../languageHandler';
 import WidgetUtils from '../../../WidgetUtils';
+import SettingsStore from "../../../settings/SettingsStore";
 
 // The maximum number of widgets that can be added in a room
 const MAX_WIDGETS = 2;
@@ -35,7 +37,7 @@ module.exports = React.createClass({
     displayName: 'AppsDrawer',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {
@@ -131,6 +133,9 @@ module.exports = React.createClass({
             '$matrix_room_id': this.props.room.roomId,
             '$matrix_display_name': user ? user.displayName : this.props.userId,
             '$matrix_avatar_url': user ? MatrixClientPeg.get().mxcUrlToHttp(user.avatarUrl) : '',
+
+            // TODO: Namespace themes through some standard
+            '$theme': SettingsStore.getValue("theme"),
         };
 
         app.id = appId;

src/components/views/rooms/AuxPanel.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import sdk from '../../../index';
 import dis from "../../../dispatcher";
@@ -29,26 +30,26 @@ module.exports = React.createClass({
 
     propTypes: {
         // js-sdk room object
-        room: React.PropTypes.object.isRequired,
-        userId: React.PropTypes.string.isRequired,
-        showApps: React.PropTypes.bool,
+        room: PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        showApps: PropTypes.bool,
 
         // Conference Handler implementation
-        conferenceHandler: React.PropTypes.object,
+        conferenceHandler: PropTypes.object,
 
         // set to true to show the file drop target
-        draggingFile: React.PropTypes.bool,
+        draggingFile: PropTypes.bool,
 
         // set to true to show the 'active conf call' banner
-        displayConfCallNotification: React.PropTypes.bool,
+        displayConfCallNotification: PropTypes.bool,
 
         // maxHeight attribute for the aux panel and the video
         // therein
-        maxHeight: React.PropTypes.number,
+        maxHeight: PropTypes.number,
 
         // a callback which is called when the content of the aux panel changes
         // content in a way that is likely to make it change size.
-        onResize: React.PropTypes.func,
+        onResize: PropTypes.func,
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {

src/components/views/rooms/EntityTile.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require('../../../index');
@@ -51,18 +52,18 @@ const EntityTile = React.createClass({
     displayName: 'EntityTile',
 
     propTypes: {
-        name: React.PropTypes.string,
-        title: React.PropTypes.string,
-        avatarJsx: React.PropTypes.any, // <BaseAvatar />
-        className: React.PropTypes.string,
-        presenceState: React.PropTypes.string,
-        presenceLastActiveAgo: React.PropTypes.number,
-        presenceLastTs: React.PropTypes.number,
-        presenceCurrentlyActive: React.PropTypes.bool,
-        showInviteButton: React.PropTypes.bool,
-        shouldComponentUpdate: React.PropTypes.func,
-        onClick: React.PropTypes.func,
-        suppressOnHover: React.PropTypes.bool,
+        name: PropTypes.string,
+        title: PropTypes.string,
+        avatarJsx: PropTypes.any, // <BaseAvatar />
+        className: PropTypes.string,
+        presenceState: PropTypes.string,
+        presenceLastActiveAgo: PropTypes.number,
+        presenceLastTs: PropTypes.number,
+        presenceCurrentlyActive: PropTypes.bool,
+        showInviteButton: PropTypes.bool,
+        shouldComponentUpdate: PropTypes.func,
+        onClick: PropTypes.func,
+        suppressOnHover: PropTypes.bool,
     },
 
     getDefaultProps: function() {

src/components/views/rooms/EventTile.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,6 +19,7 @@ limitations under the License.
 
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const classNames = require("classnames");
 import { _t, _td } from '../../../languageHandler';
 const Modal = require('../../../Modal');
@@ -28,6 +30,7 @@ import withMatrixClient from '../../../wrappers/withMatrixClient';
 
 const ContextualMenu = require('../../structures/ContextualMenu');
 import dis from '../../../dispatcher';
+import {makeEventPermalink} from "../../../matrix-to";
 
 const ObjectUtils = require('../../../ObjectUtils');
 
@@ -75,65 +78,65 @@ module.exports = withMatrixClient(React.createClass({
 
     propTypes: {
         /* MatrixClient instance for sender verification etc */
-        matrixClient: React.PropTypes.object.isRequired,
+        matrixClient: PropTypes.object.isRequired,
 
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
          * might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
          * references the same this.props.mxEvent.
          */
-        isRedacted: React.PropTypes.bool,
+        isRedacted: PropTypes.bool,
 
         /* true if this is a continuation of the previous event (which has the
          * effect of not showing another avatar/displayname
          */
-        continuation: React.PropTypes.bool,
+        continuation: PropTypes.bool,
 
         /* true if this is the last event in the timeline (which has the effect
          * of always showing the timestamp)
          */
-        last: React.PropTypes.bool,
+        last: PropTypes.bool,
 
         /* true if this is search context (which has the effect of greying out
          * the text
          */
-        contextual: React.PropTypes.bool,
+        contextual: PropTypes.bool,
 
         /* a list of words to highlight, ordered by longest first */
-        highlights: React.PropTypes.array,
+        highlights: PropTypes.array,
 
         /* link URL for the highlights */
-        highlightLink: React.PropTypes.string,
+        highlightLink: PropTypes.string,
 
         /* should show URL previews for this event */
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         /* is this the focused event */
-        isSelectedEvent: React.PropTypes.bool,
+        isSelectedEvent: PropTypes.bool,
 
         /* callback called when dynamic content in events are loaded */
-        onWidgetLoad: React.PropTypes.func,
+        onWidgetLoad: PropTypes.func,
 
         /* a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'. */
-        readReceipts: React.PropTypes.arrayOf(React.PropTypes.object),
+        readReceipts: PropTypes.arrayOf(React.PropTypes.object),
 
         /* opaque readreceipt info for each userId; used by ReadReceiptMarker
          * to manage its animations. Should be an empty object when the room
          * first loads
          */
-        readReceiptMap: React.PropTypes.object,
+        readReceiptMap: 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,
+        checkUnmounting: 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,
+        eventSendStatus: PropTypes.string,
 
         /* the shape of the tile. by default, the layout is intended for the
          * normal room timeline.  alternative values are: "file_list", "file_grid"
@@ -142,10 +145,10 @@ module.exports = withMatrixClient(React.createClass({
          * boiilerplatey.  So just make the necessary render decisions conditional
          * for now.
          */
-        tileShape: React.PropTypes.string,
+        tileShape: PropTypes.string,
 
         // show twelve hour timestamps
-        isTwelveHour: React.PropTypes.bool,
+        isTwelveHour: PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -196,6 +199,8 @@ module.exports = withMatrixClient(React.createClass({
      */
     _onDecrypted: function() {
         // we need to re-verify the sending device.
+        // (we call onWidgetLoad in _verifyEvent to handle the case where decryption
+        // has caused a change in size of the event tile)
         this._verifyEvent(this.props.mxEvent);
         this.forceUpdate();
     },
@@ -214,6 +219,9 @@ module.exports = withMatrixClient(React.createClass({
         const verified = await this.props.matrixClient.isEventSenderVerified(mxEvent);
         this.setState({
             verified: verified,
+        }, () => {
+            // Decryption may have caused a change in size
+            this.props.onWidgetLoad();
         });
     },
 
@@ -471,9 +479,7 @@ module.exports = withMatrixClient(React.createClass({
             mx_EventTile_redacted: isRedacted,
         });
 
-        const permalink = "https://matrix.to/#/" +
-            this.props.mxEvent.getRoomId() + "/" +
-            this.props.mxEvent.getId();
+        const permalink = makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId());
 
         const readAvatars = this.getReadAvatars();
 
@@ -511,7 +517,7 @@ module.exports = withMatrixClient(React.createClass({
 
         if (needsSenderProfile) {
             let text = null;
-            if (!this.props.tileShape) {
+            if (!this.props.tileShape || this.props.tileShape === 'quote') {
                 if (msgtype === 'm.image') text = _td('%(senderName)s sent an image');
                 else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video');
                 else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
@@ -528,79 +534,104 @@ module.exports = withMatrixClient(React.createClass({
         const timestamp = this.props.mxEvent.getTs() ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
-        if (this.props.tileShape === "notif") {
-            const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
-            return (
-                <div className={classes}>
-                    <div className="mx_EventTile_roomName">
-                        <a href={permalink} onClick={this.onPermalinkClicked}>
-                            { room ? room.name : '' }
-                        </a>
-                    </div>
-                    <div className="mx_EventTile_senderDetails">
-                        { avatar }
-                        <a href={permalink} onClick={this.onPermalinkClicked}>
-                            { sender }
-                            { timestamp }
-                        </a>
-                    </div>
-                    <div className="mx_EventTile_line" >
-                        <EventTileType ref="tile"
-                            mxEvent={this.props.mxEvent}
-                            highlights={this.props.highlights}
-                            highlightLink={this.props.highlightLink}
-                            showUrlPreview={this.props.showUrlPreview}
-                            onWidgetLoad={this.props.onWidgetLoad} />
-                    </div>
-                </div>
-            );
-        } else if (this.props.tileShape === "file_grid") {
-            return (
-                <div className={classes}>
-                    <div className="mx_EventTile_line" >
-                        <EventTileType ref="tile"
-                            mxEvent={this.props.mxEvent}
-                            highlights={this.props.highlights}
-                            highlightLink={this.props.highlightLink}
-                            showUrlPreview={this.props.showUrlPreview}
-                            tileShape={this.props.tileShape}
-                            onWidgetLoad={this.props.onWidgetLoad} />
-                    </div>
-                    <a
-                        className="mx_EventTile_senderDetailsLink"
-                        href={permalink}
-                        onClick={this.onPermalinkClicked}
-                    >
+        switch (this.props.tileShape) {
+            case 'notif': {
+                const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
+                return (
+                    <div className={classes}>
+                        <div className="mx_EventTile_roomName">
+                            <a href={permalink} onClick={this.onPermalinkClicked}>
+                                { room ? room.name : '' }
+                            </a>
+                        </div>
                         <div className="mx_EventTile_senderDetails">
+                            { avatar }
+                            <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { sender }
                                 { timestamp }
+                            </a>
+                        </div>
+                        <div className="mx_EventTile_line" >
+                            <EventTileType ref="tile"
+                                           mxEvent={this.props.mxEvent}
+                                           highlights={this.props.highlights}
+                                           highlightLink={this.props.highlightLink}
+                                           showUrlPreview={this.props.showUrlPreview}
+                                           onWidgetLoad={this.props.onWidgetLoad} />
                         </div>
-                    </a>
-                </div>
-            );
-        } else {
-            return (
-                <div className={classes}>
-                    <div className="mx_EventTile_msgOption">
-                        { readAvatars }
                     </div>
-                    { avatar }
-                    { sender }
-                    <div className="mx_EventTile_line">
-                        <a href={permalink} onClick={this.onPermalinkClicked}>
-                            { timestamp }
+                );
+            }
+            case 'file_grid': {
+                return (
+                    <div className={classes}>
+                        <div className="mx_EventTile_line" >
+                            <EventTileType ref="tile"
+                                           mxEvent={this.props.mxEvent}
+                                           highlights={this.props.highlights}
+                                           highlightLink={this.props.highlightLink}
+                                           showUrlPreview={this.props.showUrlPreview}
+                                           tileShape={this.props.tileShape}
+                                           onWidgetLoad={this.props.onWidgetLoad} />
+                        </div>
+                        <a
+                            className="mx_EventTile_senderDetailsLink"
+                            href={permalink}
+                            onClick={this.onPermalinkClicked}
+                        >
+                            <div className="mx_EventTile_senderDetails">
+                                { sender }
+                                { timestamp }
+                            </div>
                         </a>
-                        { this._renderE2EPadlock() }
-                        <EventTileType ref="tile"
-                            mxEvent={this.props.mxEvent}
-                            highlights={this.props.highlights}
-                            highlightLink={this.props.highlightLink}
-                            showUrlPreview={this.props.showUrlPreview}
-                            onWidgetLoad={this.props.onWidgetLoad} />
-                        { editButton }
                     </div>
-                </div>
-            );
+                );
+            }
+            case 'quote': {
+                return (
+                    <div className={classes}>
+                        { avatar }
+                        { sender }
+                        <div className="mx_EventTile_line mx_EventTile_quote">
+                            <a href={permalink} onClick={this.onPermalinkClicked}>
+                                { timestamp }
+                            </a>
+                            { this._renderE2EPadlock() }
+                            <EventTileType ref="tile"
+                                           tileShape="quote"
+                                           mxEvent={this.props.mxEvent}
+                                           highlights={this.props.highlights}
+                                           highlightLink={this.props.highlightLink}
+                                           onWidgetLoad={this.props.onWidgetLoad}
+                                           showUrlPreview={false} />
+                        </div>
+                    </div>
+                );
+            }
+            default: {
+                return (
+                    <div className={classes}>
+                        <div className="mx_EventTile_msgOption">
+                            { readAvatars }
+                        </div>
+                        { avatar }
+                        { sender }
+                        <div className="mx_EventTile_line">
+                            <a href={permalink} onClick={this.onPermalinkClicked}>
+                                { timestamp }
+                            </a>
+                            { this._renderE2EPadlock() }
+                            <EventTileType ref="tile"
+                                           mxEvent={this.props.mxEvent}
+                                           highlights={this.props.highlights}
+                                           highlightLink={this.props.highlightLink}
+                                           showUrlPreview={this.props.showUrlPreview}
+                                           onWidgetLoad={this.props.onWidgetLoad} />
+                            { editButton }
+                        </div>
+                    </div>
+                );
+            }
         }
     },
 }));
@@ -653,3 +684,5 @@ function E2ePadlockUnencrypted(props) {
 function E2ePadlock(props) {
     return <img className="mx_EventTile_e2eIcon" {...props} />;
 }
+
+module.exports.getHandlerTile = getHandlerTile;

src/components/views/rooms/ForwardMessage.js

@@ -16,6 +16,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher';
 import { KeyCode } from '../../../Keyboard';
@@ -25,7 +26,7 @@ module.exports = React.createClass({
     displayName: 'ForwardMessage',
 
     propTypes: {
-        onCancelClick: React.PropTypes.func.isRequired,
+        onCancelClick: PropTypes.func.isRequired,
     },
 
     componentWillMount: function() {

src/components/views/rooms/LinkPreviewWidget.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
@@ -32,10 +33,10 @@ module.exports = React.createClass({
     displayName: 'LinkPreviewWidget',
 
     propTypes: {
-        link: React.PropTypes.string.isRequired, // the URL being previewed
-        mxEvent: React.PropTypes.object.isRequired, // the Event associated with the preview
-        onCancelClick: React.PropTypes.func, // called when the preview's cancel ('hide') button is clicked
-        onWidgetLoad: React.PropTypes.func, // called when the preview's contents has loaded
+        link: PropTypes.string.isRequired, // the URL being previewed
+        mxEvent: PropTypes.object.isRequired, // the Event associated with the preview
+        onCancelClick: PropTypes.func, // called when the preview's cancel ('hide') button is clicked
+        onWidgetLoad: PropTypes.func, // called when the preview's contents has loaded
     },
 
     getInitialState: function() {

src/components/views/rooms/MemberDeviceInfo.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
@@ -65,6 +66,6 @@ export default class MemberDeviceInfo extends React.Component {
 
 MemberDeviceInfo.displayName = 'MemberDeviceInfo';
 MemberDeviceInfo.propTypes = {
-    userId: React.PropTypes.string.isRequired,
-    device: React.PropTypes.object.isRequired,
+    userId: PropTypes.string.isRequired,
+    device: PropTypes.object.isRequired,
 };

src/components/views/rooms/MemberInfo.js

@@ -27,6 +27,7 @@ limitations under the License.
  * 'isTargetMod': boolean
  */
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
@@ -41,13 +42,12 @@ import AccessibleButton from '../elements/AccessibleButton';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import RoomViewStore from '../../../stores/RoomViewStore';
 
-
 module.exports = withMatrixClient(React.createClass({
     displayName: 'MemberInfo',
 
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        member: React.PropTypes.object.isRequired,
+        matrixClient: PropTypes.object.isRequired,
+        member: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {
@@ -440,40 +440,57 @@ module.exports = withMatrixClient(React.createClass({
         const roomId = this.props.member.roomId;
         const target = this.props.member.userId;
         const room = this.props.matrixClient.getRoom(roomId);
-        const self = this;
-        if (!room) {
-            return;
-        }
-        const powerLevelEvent = room.currentState.getStateEvents(
-            "m.room.power_levels", "",
-        );
-        if (!powerLevelEvent) {
-            return;
-        }
-        if (powerLevelEvent.getContent().users) {
-            const myPower = powerLevelEvent.getContent().users[this.props.matrixClient.credentials.userId];
-            if (parseInt(myPower) === parseInt(powerLevel)) {
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
-                    title: _t("Warning!"),
-                    description:
-                        <div>
-                            { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself.") }<br />
-                            { _t("Are you sure?") }
-                        </div>,
-                    button: _t("Continue"),
-                    onFinished: function(confirmed) {
-                        if (confirmed) {
-                            self._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-                        }
-                    },
-                });
-            } else {
-                this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
-            }
-        } else {
+        if (!room) return;
+
+        const powerLevelEvent = room.currentState.getStateEvents("m.room.power_levels", "");
+        if (!powerLevelEvent) return;
+
+        if (!powerLevelEvent.getContent().users) {
             this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+            return;
         }
+
+        const myUserId = this.props.matrixClient.getUserId();
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+        // If we are changing our own PL it can only ever be decreasing, which we cannot reverse.
+        if (myUserId === target) {
+            Modal.createTrackedDialog('Demoting Self', '', QuestionDialog, {
+                title: _t("Warning!"),
+                description:
+                    <div>
+                        { _t("You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.") }<br />
+                        { _t("Are you sure?") }
+                    </div>,
+                button: _t("Continue"),
+                onFinished: (confirmed) => {
+                    if (confirmed) {
+                        this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+                    }
+                },
+            });
+            return;
+        }
+
+        const myPower = powerLevelEvent.getContent().users[myUserId];
+        if (parseInt(myPower) === parseInt(powerLevel)) {
+            Modal.createTrackedDialog('Promote to PL100 Warning', '', QuestionDialog, {
+                title: _t("Warning!"),
+                description:
+                    <div>
+                        { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself.") }<br />
+                        { _t("Are you sure?") }
+                    </div>,
+                button: _t("Continue"),
+                onFinished: (confirmed) => {
+                    if (confirmed) {
+                        this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
+                    }
+                },
+            });
+            return;
+        }
+        this._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
     },
 
     onNewDMClick: function() {
@@ -713,6 +730,10 @@ module.exports = withMatrixClient(React.createClass({
 
         if (this.props.member.userId !== this.props.matrixClient.credentials.userId) {
             const dmRoomMap = new DMRoomMap(this.props.matrixClient);
+            // dmRooms will not include dmRooms that we have been invited into but did not join.
+            // Because DMRoomMap runs off account_data[m.direct] which is only set on join of dm room.
+            // XXX: we potentially want DMs we have been invited to, to also show up here :L
+            // especially as logic below concerns specially if we haven't joined but have been invited
             const dmRooms = dmRoomMap.getDMRoomsForUserId(this.props.member.userId);
 
             const RoomTile = sdk.getComponent("rooms.RoomTile");
@@ -722,10 +743,15 @@ module.exports = withMatrixClient(React.createClass({
                 const room = this.props.matrixClient.getRoom(roomId);
                 if (room) {
                     const me = room.getMember(this.props.matrixClient.credentials.userId);
-                    const highlight = (
-                        room.getUnreadNotificationCount('highlight') > 0 ||
-                        me.membership === "invite"
-                    );
+
+                    // not a DM room if we have are not joined
+                    if (!me.membership || me.membership !== 'join') continue;
+                    // not a DM room if they are not joined
+                    const them = this.props.member;
+                    if (!them.membership || them.membership !== 'join') continue;
+
+                    const highlight = room.getUnreadNotificationCount('highlight') > 0 || me.membership === 'invite';
+
                     tiles.push(
                         <RoomTile key={room.roomId} room={room}
                             collapsed={false}
@@ -831,8 +857,8 @@ module.exports = withMatrixClient(React.createClass({
         }
 
         const room = this.props.matrixClient.getRoom(this.props.member.roomId);
-        const poweLevelEvent = room ? room.currentState.getStateEvents("m.room.power_levels", "") : null;
-        const powerLevelUsersDefault = poweLevelEvent.getContent().users_default;
+        const powerLevelEvent = room ? room.currentState.getStateEvents("m.room.power_levels", "") : null;
+        const powerLevelUsersDefault = powerLevelEvent ? powerLevelEvent.getContent().users_default : 0;
 
         let roomMemberDetails = null;
         if (this.props.member.roomId) { // is in room

src/components/views/rooms/MemberList.js

@@ -315,6 +315,30 @@ module.exports = React.createClass({
         });
     },
 
+    _getPending3PidInvites: function() {
+        // include 3pid invites (m.room.third_party_invite) state events.
+        // The HS may have already converted these into m.room.member invites so
+        // we shouldn't add them if the 3pid invite state key (token) is in the
+        // member invite (content.third_party_invite.signed.token)
+        const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+
+        if (room) {
+            return room.currentState.getStateEvents("m.room.third_party_invite").filter(function(e) {
+                // any events without these keys are not valid 3pid invites, so we ignore them
+                const requiredKeys = ['key_validity_url', 'public_key', 'display_name'];
+                for (let i = 0; i < requiredKeys.length; ++i) {
+                    if (e.getContent()[requiredKeys[i]] === undefined) return false;
+                }
+
+                // discard all invites which have a m.room.member event since we've
+                // already added them.
+                const memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey());
+                if (memberEvent) return false;
+                return true;
+            });
+        }
+    },
+
     _makeMemberTiles: function(members, membership) {
         const MemberTile = sdk.getComponent("rooms.MemberTile");
 
@@ -329,33 +353,13 @@ module.exports = React.createClass({
         // Double XXX: Now it's really, really not the right home for this logic:
         // we shouldn't even be passing in the 'membership' param to this function.
         // Ew, ew, and ew.
+        // Triple XXX: This violates the size constraint, the output is expected/desired
+        // to be the same length as the members input array.
         if (membership === "invite") {
-            // include 3pid invites (m.room.third_party_invite) state events.
-            // The HS may have already converted these into m.room.member invites so
-            // we shouldn't add them if the 3pid invite state key (token) is in the
-            // member invite (content.third_party_invite.signed.token)
-            const room = MatrixClientPeg.get().getRoom(this.props.roomId);
             const EntityTile = sdk.getComponent("rooms.EntityTile");
-            if (room) {
-                room.currentState.getStateEvents("m.room.third_party_invite").forEach(
-                function(e) {
-                    // any events without these keys are not valid 3pid invites, so we ignore them
-                    const required_keys = ['key_validity_url', 'public_key', 'display_name'];
-                    for (let i = 0; i < required_keys.length; ++i) {
-                        if (e.getContent()[required_keys[i]] === undefined) return;
-                    }
-
-                    // discard all invites which have a m.room.member event since we've
-                    // already added them.
-                    const memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey());
-                    if (memberEvent) {
-                        return;
-                    }
-                    memberList.push(
-                        <EntityTile key={e.getStateKey()} name={e.getContent().display_name} suppressOnHover={true} />,
-                    );
-                });
-            }
+            memberList.push(...this._getPending3PidInvites().map((e) => {
+                return <EntityTile key={e.getStateKey()} name={e.getContent().display_name} suppressOnHover={true} />;
+            }));
         }
 
         return memberList;
@@ -374,7 +378,7 @@ module.exports = React.createClass({
     },
 
     _getChildCountInvited: function() {
-        return this.state.filteredInvitedMembers.length;
+        return this.state.filteredInvitedMembers.length + (this._getPending3PidInvites() || []).length;
     },
 
     render: function() {

src/components/views/rooms/MemberTile.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require('../../../index');
@@ -28,7 +29,7 @@ module.exports = React.createClass({
     displayName: 'MemberTile',
 
     propTypes: {
-        member: React.PropTypes.any.isRequired, // RoomMember
+        member: PropTypes.any.isRequired, // RoomMember
     },
 
     getInitialState: function() {

src/components/views/rooms/MessageComposer.js

@@ -15,13 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import CallHandler from '../../../CallHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
-import Autocomplete from './Autocomplete';
+import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 
 
@@ -42,6 +43,7 @@ export default class MessageComposer extends React.Component {
         this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
         this.onEvent = this.onEvent.bind(this);
+        this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
 
         this.state = {
             autocompleteQuery: '',
@@ -53,6 +55,7 @@ export default class MessageComposer extends React.Component {
                 wordCount: 0,
             },
             showFormatting: SettingsStore.getValue('MessageComposer.showFormatting'),
+            isQuoting: Boolean(RoomViewStore.getQuotingEvent()),
         };
     }
 
@@ -62,12 +65,16 @@ export default class MessageComposer extends React.Component {
         // marked as encrypted.
         // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
         MatrixClientPeg.get().on("event", this.onEvent);
+        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
     }
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("event", this.onEvent);
         }
+        if (this._roomStoreToken) {
+            this._roomStoreToken.remove();
+        }
     }
 
     onEvent(event) {
@@ -76,6 +83,12 @@ export default class MessageComposer extends React.Component {
         this.forceUpdate();
     }
 
+    _onRoomViewStoreUpdate() {
+        const isQuoting = Boolean(RoomViewStore.getQuotingEvent());
+        if (this.state.isQuoting === isQuoting) return;
+        this.setState({ isQuoting });
+    }
+
     onUploadClick(ev) {
         if (MatrixClientPeg.get().isGuest()) {
             dis.dispatch({action: 'view_set_mxid'});
@@ -325,8 +338,20 @@ export default class MessageComposer extends React.Component {
                      key="controls_formatting" />
             );
 
-            const placeholderText = roomIsEncrypted ?
-                _t('Send an encrypted message') + '…' : _t('Send a message (unencrypted)') + '…';
+            let placeholderText;
+            if (this.state.isQuoting) {
+                if (roomIsEncrypted) {
+                    placeholderText = _t('Send an encrypted reply…');
+                } else {
+                    placeholderText = _t('Send a reply (unencrypted)…');
+                }
+            } else {
+                if (roomIsEncrypted) {
+                    placeholderText = _t('Send an encrypted message…');
+                } else {
+                    placeholderText = _t('Send a message (unencrypted)…');
+                }
+            }
 
             controls.push(
                 <MessageComposerInput
@@ -399,17 +424,17 @@ export default class MessageComposer extends React.Component {
 MessageComposer.propTypes = {
     // a callback which is called when the height of the composer is
     // changed due to a change in content.
-    onResize: React.PropTypes.func,
+    onResize: PropTypes.func,
 
     // js-sdk Room object
-    room: React.PropTypes.object.isRequired,
+    room: PropTypes.object.isRequired,
 
     // string representing the current voip call state
-    callState: React.PropTypes.string,
+    callState: PropTypes.string,
 
     // callback when a file to upload is chosen
-    uploadFile: React.PropTypes.func.isRequired,
+    uploadFile: PropTypes.func.isRequired,
 
     // string representing the current room app drawer state
-    showApps: React.PropTypes.bool,
+    showApps: PropTypes.bool,
 };

src/components/views/rooms/MessageComposerInput.js

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import type SyntheticKeyboardEvent from 'react/lib/SyntheticKeyboardEvent';
 
 import {Editor, EditorState, RichUtils, CompositeDecorator, Modifier,
@@ -50,6 +51,10 @@ const REGEX_MATRIXTO_MARKDOWN_GLOBAL = new RegExp(MATRIXTO_MD_LINK_PATTERN, 'g')
 
 import {asciiRegexp, shortnameToUnicode, emojioneList, asciiList, mapUnicodeToShort} from 'emojione';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import {makeEventPermalink, makeUserPermalink} from "../../../matrix-to";
+import QuotePreview from "./QuotePreview";
+import RoomViewStore from '../../../stores/RoomViewStore';
+
 const EMOJI_SHORTNAMES = Object.keys(emojioneList);
 const EMOJI_UNICODE_TO_SHORTNAME = mapUnicodeToShort();
 const REGEX_EMOJI_WHITESPACE = new RegExp('(?:^|\\s)(' + asciiRegexp + ')\\s$');
@@ -86,15 +91,15 @@ export default class MessageComposerInput extends React.Component {
     static propTypes = {
         // a callback which is called when the height of the composer is
         // changed due to a change in content.
-        onResize: React.PropTypes.func,
+        onResize: PropTypes.func,
 
         // js-sdk Room object
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
 
         // called with current plaintext content (as a string) whenever it changes
-        onContentChanged: React.PropTypes.func,
+        onContentChanged: PropTypes.func,
 
-        onInputStateChanged: React.PropTypes.func,
+        onInputStateChanged: PropTypes.func,
     };
 
     static getKeyBinding(ev: SyntheticKeyboardEvent): string {
@@ -268,6 +273,7 @@ export default class MessageComposerInput extends React.Component {
         let contentState = this.state.editorState.getCurrentContent();
 
         switch (payload.action) {
+            case 'quote_event':
             case 'focus_composer':
                 editor.focus();
                 break;
@@ -281,12 +287,13 @@ export default class MessageComposerInput extends React.Component {
                 this.setDisplayedCompletion({
                     completion,
                     selection,
-                    href: `https://matrix.to/#/${payload.user_id}`,
+                    href: makeUserPermalink(payload.user_id),
                     suffix: selection.getStartOffset() === 0 ? ': ' : ' ',
                 });
             }
                 break;
-            case 'quote': {
+
+            case 'quote': { // old quoting, whilst rich quoting is in labs
                 /// XXX: Not doing rich-text quoting from formatted-body because draft-js
                 /// has regressed such that when links are quoted, errors are thrown. See
                 /// https://github.com/vector-im/riot-web/issues/4756.
@@ -512,7 +519,8 @@ export default class MessageComposerInput extends React.Component {
             // composer. For some reason the editor won't scroll automatically if we paste
             // blocks of text in or insert newlines.
             if (textContent.slice(selection.start).indexOf("\n") === -1) {
-                this.refs.editor.refs.editor.scrollTop = this.refs.editor.refs.editor.scrollHeight;
+                let editorRoot = this.refs.editor.refs.editor.parentNode.parentNode;
+                editorRoot.scrollTop = editorRoot.scrollHeight;
             }
         });
     }
@@ -652,7 +660,7 @@ export default class MessageComposerInput extends React.Component {
         }
 
         return false;
-    }
+    };
 
     onTextPasted(text: string, html?: string) {
         const currentSelection = this.state.editorState.getSelection();
@@ -715,6 +723,7 @@ export default class MessageComposerInput extends React.Component {
         const cmd = SlashCommands.processInput(this.props.room.roomId, commandText);
         if (cmd) {
             if (!cmd.error) {
+                this.historyManager.save(contentState, this.state.isRichtextEnabled ? 'html' : 'markdown');
                 this.setState({
                     editorState: this.createEditorState(),
                 });
@@ -742,9 +751,17 @@ export default class MessageComposerInput extends React.Component {
             return true;
         }
 
+        const quotingEv = RoomViewStore.getQuotingEvent();
+
         if (this.state.isRichtextEnabled) {
             // We should only send HTML if any block is styled or contains inline style
             let shouldSendHTML = false;
+
+            // If we are quoting we need HTML Content
+            if (quotingEv) {
+                shouldSendHTML = true;
+            }
+
             const blocks = contentState.getBlocksAsArray();
             if (blocks.some((block) => block.getType() !== 'unstyled')) {
                 shouldSendHTML = true;
@@ -802,7 +819,8 @@ export default class MessageComposerInput extends React.Component {
             }).join('\n');
 
             const md = new Markdown(pt);
-            if (md.isPlainText()) {
+            // if contains no HTML and we're not quoting (needing HTML)
+            if (md.isPlainText() && !quotingEv) {
                 contentText = md.toPlaintext();
             } else {
                 contentHTML = md.toHTML();
@@ -825,6 +843,24 @@ export default class MessageComposerInput extends React.Component {
             sendTextFn = this.client.sendEmoteMessage;
         }
 
+        if (quotingEv) {
+            const cli = MatrixClientPeg.get();
+            const room = cli.getRoom(quotingEv.getRoomId());
+            const sender = room.currentState.getMember(quotingEv.getSender());
+
+            const {body/*, formatted_body*/} = quotingEv.getContent();
+
+            const perma = makeEventPermalink(quotingEv.getRoomId(), quotingEv.getId());
+            contentText = `${sender.name}:\n> ${body}\n\n${contentText}`;
+            contentHTML = `<a href="${perma}">Quote<br></a>${contentHTML}`;
+
+            // we have finished quoting, clear the quotingEvent
+            dis.dispatch({
+                action: 'quote_event',
+                event: null,
+            });
+        }
+
         let sendMessagePromise;
         if (contentHTML) {
             sendMessagePromise = sendHtmlFn.call(
@@ -1137,6 +1173,7 @@ export default class MessageComposerInput extends React.Component {
         return (
             <div className="mx_MessageComposer_input_wrapper">
                 <div className="mx_MessageComposer_autocomplete_wrapper">
+                    { SettingsStore.isFeatureEnabled("feature_rich_quoting") && <QuotePreview /> }
                     <Autocomplete
                         ref={(e) => this.autocomplete = e}
                         room={this.props.room}
@@ -1177,15 +1214,15 @@ export default class MessageComposerInput extends React.Component {
 MessageComposerInput.propTypes = {
     // a callback which is called when the height of the composer is
     // changed due to a change in content.
-    onResize: React.PropTypes.func,
+    onResize: PropTypes.func,
 
     // js-sdk Room object
-    room: React.PropTypes.object.isRequired,
+    room: PropTypes.object.isRequired,
 
     // called with current plaintext content (as a string) whenever it changes
-    onContentChanged: React.PropTypes.func,
+    onContentChanged: PropTypes.func,
 
-    onFilesPasted: React.PropTypes.func,
+    onFilesPasted: PropTypes.func,
 
-    onInputStateChanged: React.PropTypes.func,
+    onInputStateChanged: PropTypes.func,
 };

src/components/views/rooms/PinnedEventTile.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import PropTypes from 'prop-types';
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -25,9 +26,9 @@ import { _t } from '../../../languageHandler';
 module.exports = React.createClass({
     displayName: 'PinnedEventTile',
     propTypes: {
-        mxRoom: React.PropTypes.object.isRequired,
-        mxEvent: React.PropTypes.object.isRequired,
-        onUnpinned: React.PropTypes.func,
+        mxRoom: PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
+        onUnpinned: PropTypes.func,
     },
     onTileClicked: function() {
         dis.dispatch({

src/components/views/rooms/PinnedEventsPanel.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import PropTypes from 'prop-types';
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import AccessibleButton from "../elements/AccessibleButton";
 import PinnedEventTile from "./PinnedEventTile";
@@ -25,9 +26,9 @@ module.exports = React.createClass({
     displayName: 'PinnedEventsPanel',
     propTypes: {
         // The Room from the js-sdk we're going to show pinned events for
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
 
-        onCancelClick: React.PropTypes.func,
+        onCancelClick: PropTypes.func,
     },
 
     getInitialState: function() {

src/components/views/rooms/PresenceLabel.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { _t } from '../../../languageHandler';
 
@@ -27,14 +28,14 @@ module.exports = React.createClass({
     propTypes: {
         // number of milliseconds ago this user was last active.
         // zero = unknown
-        activeAgo: React.PropTypes.number,
+        activeAgo: PropTypes.number,
 
         // if true, activeAgo is an approximation and "Now" should
         // be shown instead
-        currentlyActive: React.PropTypes.bool,
+        currentlyActive: PropTypes.bool,
 
         // offline, online, etc
-        presenceState: React.PropTypes.string,
+        presenceState: PropTypes.string,
     },
 
     getDefaultProps: function() {

src/components/views/rooms/QuotePreview.js

@@ -0,0 +1,78 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import RoomViewStore from '../../../stores/RoomViewStore';
+
+function cancelQuoting() {
+    dis.dispatch({
+        action: 'quote_event',
+        event: null,
+    });
+}
+
+export default class QuotePreview extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            event: null,
+        };
+
+        this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
+
+        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
+        this._onRoomViewStoreUpdate();
+    }
+
+    componentWillUnmount() {
+        // Remove RoomStore listener
+        if (this._roomStoreToken) {
+            this._roomStoreToken.remove();
+        }
+    }
+
+    _onRoomViewStoreUpdate() {
+        const event = RoomViewStore.getQuotingEvent();
+        if (this.state.event !== event) {
+            this.setState({ event });
+        }
+    }
+
+    render() {
+        if (!this.state.event) return null;
+
+        const EventTile = sdk.getComponent('rooms.EventTile');
+        const EmojiText = sdk.getComponent('views.elements.EmojiText');
+
+        return <div className="mx_QuotePreview">
+            <div className="mx_QuotePreview_section">
+                <EmojiText element="div" className="mx_QuotePreview_header mx_QuotePreview_title">
+                    { '💬 ' + _t('Replying') }
+                </EmojiText>
+                <div className="mx_QuotePreview_header mx_QuotePreview_cancel">
+                    <img className="mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
+                         onClick={cancelQuoting} />
+                </div>
+                <div className="mx_QuotePreview_clear" />
+                <EventTile mxEvent={this.state.event} last={true} tileShape="quote" />
+            </div>
+        </div>;
+    }
+}

src/components/views/rooms/ReadReceiptMarker.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require('react-dom');
+import PropTypes from 'prop-types';
 
 const sdk = require('../../../index');
 
@@ -25,7 +26,7 @@ const Velociraptor = require('../../../Velociraptor');
 require('../../../VelocityBounce');
 import { _t } from '../../../languageHandler';
 
-import DateUtils from '../../../DateUtils';
+import {formatDate} from '../../../DateUtils';
 
 let bounce = false;
 try {
@@ -40,35 +41,35 @@ module.exports = React.createClass({
 
     propTypes: {
         // the RoomMember to show the RR for
-        member: React.PropTypes.object.isRequired,
+        member: PropTypes.object.isRequired,
 
         // number of pixels to offset the avatar from the right of its parent;
         // typically a negative value.
-        leftOffset: React.PropTypes.number,
+        leftOffset: PropTypes.number,
 
         // true to hide the avatar (it will still be animated)
-        hidden: React.PropTypes.bool,
+        hidden: PropTypes.bool,
 
         // don't animate this RR into position
-        suppressAnimation: React.PropTypes.bool,
+        suppressAnimation: PropTypes.bool,
 
         // an opaque object for storing information about this user's RR in
         // this room
-        readReceiptInfo: React.PropTypes.object,
+        readReceiptInfo: 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,
+        checkUnmounting: PropTypes.func,
 
         // callback for clicks on this RR
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         // Timestamp when the receipt was read
-        timestamp: React.PropTypes.number,
+        timestamp: PropTypes.number,
 
         // True to show twelve hour format, false otherwise
-        showTwelveHour: React.PropTypes.bool,
+        showTwelveHour: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -186,7 +187,7 @@ module.exports = React.createClass({
         if (this.props.timestamp) {
             title = _t(
                 "Seen by %(userName)s at %(dateTime)s",
-                {userName: this.props.member.userId, dateTime: DateUtils.formatDate(new Date(this.props.timestamp), this.props.showTwelveHour)},
+                {userName: this.props.member.userId, dateTime: formatDate(new Date(this.props.timestamp), this.props.showTwelveHour)},
             );
         }
 

src/components/views/rooms/RoomDetailList.js

@@ -18,121 +18,40 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import linkifyString from 'linkifyjs/string';
-import sanitizeHtml from 'sanitize-html';
-import { ContentRepo } from 'matrix-js-sdk';
-import MatrixClientPeg from '../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-function getDisplayAliasForRoom(room) {
-    return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
-}
-
-const RoomDetailRow = React.createClass({
-    propTypes: {
-        room: PropTypes.shape({
-            name: PropTypes.string,
-            topic: PropTypes.string,
-            roomId: PropTypes.string,
-            avatarUrl: PropTypes.string,
-            numJoinedMembers: PropTypes.number,
-            canonicalAlias: PropTypes.string,
-            aliases: PropTypes.arrayOf(PropTypes.string),
-
-            worldReadable: PropTypes.bool,
-            guestCanJoin: PropTypes.bool,
-        }),
-    },
-
-    onClick: function(ev) {
-        ev.preventDefault();
-        dis.dispatch({
-            action: 'view_room',
-            room_id: this.props.room.roomId,
-            room_alias: this.props.room.canonicalAlias || (this.props.room.aliases || [])[0],
-        });
-    },
-
-    onTopicClick: function(ev) {
-        // When clicking a link in the topic, prevent the event being propagated
-        // to `onClick`.
-        ev.stopPropagation();
-    },
-
-    render: function() {
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-
-        const room = this.props.room;
-        const name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
-        const topic = linkifyString(sanitizeHtml(room.topic || ''));
-
-        const guestRead = room.worldReadable ? (
-                <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
-            ) : <div />;
-        const guestJoin = room.guestCanJoin ? (
-                <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
-            ) : <div />;
-
-        const perms = (guestRead || guestJoin) ? (<div className="mx_RoomDirectory_perms">
-            { guestRead }
-            { guestJoin }
-        </div>) : <div />;
-
-        return <tr key={room.roomId} onClick={this.onClick}>
-            <td className="mx_RoomDirectory_roomAvatar">
-                <BaseAvatar width={24} height={24} resizeMethod='crop'
-                    name={name} idName={name}
-                    url={ContentRepo.getHttpUriForMxc(
-                            MatrixClientPeg.get().getHomeserverUrl(),
-                            room.avatarUrl, 24, 24, "crop")} />
-            </td>
-            <td className="mx_RoomDirectory_roomDescription">
-                <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
-                { perms }
-                <div className="mx_RoomDirectory_topic"
-                     onClick={this.onTopicClick}
-                     dangerouslySetInnerHTML={{ __html: topic }} />
-                <div className="mx_RoomDirectory_alias">{ getDisplayAliasForRoom(room) }</div>
-            </td>
-            <td className="mx_RoomDirectory_roomMemberCount">
-                { room.numJoinedMembers }
-            </td>
-        </tr>;
-    },
-});
+import {roomShape} from './RoomDetailRow';
 
 export default React.createClass({
     displayName: 'RoomDetailList',
 
     propTypes: {
-        rooms: PropTypes.arrayOf(PropTypes.shape({
-            name: PropTypes.string,
-            topic: PropTypes.string,
-            roomId: PropTypes.string,
-            avatarUrl: PropTypes.string,
-            numJoinedMembers: PropTypes.number,
-            canonicalAlias: PropTypes.string,
-            aliases: PropTypes.arrayOf(PropTypes.string),
-
-            worldReadable: PropTypes.bool,
-            guestCanJoin: PropTypes.bool,
-        })),
-
+        rooms: PropTypes.arrayOf(roomShape),
         className: PropTypes.string,
     },
 
     getRows: function() {
         if (!this.props.rooms) return [];
+
+        const RoomDetailRow = sdk.getComponent('rooms.RoomDetailRow');
         return this.props.rooms.map((room, index) => {
-            return <RoomDetailRow key={index} room={room} />;
+            return <RoomDetailRow key={index} room={room} onClick={this.onDetailsClick} />;
+        });
+    },
+
+    onDetailsClick: function(ev, room) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: room.roomId,
+            room_alias: room.canonicalAlias || (room.aliases || [])[0],
         });
     },
 
     render() {
         const rows = this.getRows();
         let rooms;
-        if (rows.length == 0) {
+        if (rows.length === 0) {
             rooms = <i>{ _t('No rooms to show') }</i>;
         } else {
             rooms = <table ref="directory_table" className="mx_RoomDirectory_table">

src/components/views/rooms/RoomDetailRow.js

@@ -0,0 +1,120 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import sdk from '../../../index';
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import * as linkify from 'linkifyjs';
+import linkifyElement from 'linkifyjs/element';
+import linkifyMatrix from '../../../linkify-matrix';
+import { ContentRepo } from 'matrix-js-sdk';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import PropTypes from 'prop-types';
+
+linkifyMatrix(linkify);
+
+export function getDisplayAliasForRoom(room) {
+    return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
+}
+
+export const roomShape = PropTypes.shape({
+    name: PropTypes.string,
+    topic: PropTypes.string,
+    roomId: PropTypes.string,
+    avatarUrl: PropTypes.string,
+    numJoinedMembers: PropTypes.number,
+    canonicalAlias: PropTypes.string,
+    aliases: PropTypes.arrayOf(PropTypes.string),
+
+    worldReadable: PropTypes.bool,
+    guestCanJoin: PropTypes.bool,
+});
+
+export default React.createClass({
+    propTypes: {
+        room: roomShape,
+        // passes ev, room as args
+        onClick: PropTypes.func,
+        onMouseDown: PropTypes.func,
+    },
+
+    _linkifyTopic: function() {
+        if (this.refs.topic) {
+            linkifyElement(this.refs.topic, linkifyMatrix.options);
+        }
+    },
+
+    componentDidMount: function() {
+        this._linkifyTopic();
+    },
+
+    componentDidUpdate: function() {
+        this._linkifyTopic();
+    },
+
+    onClick: function(ev) {
+        ev.preventDefault();
+        if (this.props.onClick) {
+            this.props.onClick(ev, this.props.room);
+        }
+    },
+
+    onTopicClick: function(ev) {
+        // When clicking a link in the topic, prevent the event being propagated
+        // to `onClick`.
+        ev.stopPropagation();
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+
+        const room = this.props.room;
+        const name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');
+
+        const guestRead = room.worldReadable ? (
+                <div className="mx_RoomDirectory_perm">{ _t('World readable') }</div>
+            ) : <div />;
+        const guestJoin = room.guestCanJoin ? (
+                <div className="mx_RoomDirectory_perm">{ _t('Guests can join') }</div>
+            ) : <div />;
+
+        const perms = (guestRead || guestJoin) ? (<div className="mx_RoomDirectory_perms">
+            { guestRead }&nbsp;
+            { guestJoin }
+        </div>) : <div />;
+
+        return <tr key={room.roomId} onClick={this.onClick} onMouseDown={this.props.onMouseDown}>
+            <td className="mx_RoomDirectory_roomAvatar">
+                <BaseAvatar width={24} height={24} resizeMethod='crop'
+                    name={name} idName={name}
+                    url={ContentRepo.getHttpUriForMxc(
+                            MatrixClientPeg.get().getHomeserverUrl(),
+                            room.avatarUrl, 24, 24, "crop")} />
+            </td>
+            <td className="mx_RoomDirectory_roomDescription">
+                <div className="mx_RoomDirectory_name">{ name }</div>&nbsp;
+                { perms }
+                <div className="mx_RoomDirectory_topic" ref="topic" onClick={this.onTopicClick}>
+                    { room.topic }
+                </div>
+                <div className="mx_RoomDirectory_alias">{ getDisplayAliasForRoom(room) }</div>
+            </td>
+            <td className="mx_RoomDirectory_roomMemberCount">
+                { room.numJoinedMembers }
+            </td>
+        </tr>;
+    },
+});

src/components/views/rooms/RoomHeader.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -39,18 +40,18 @@ module.exports = React.createClass({
     displayName: 'RoomHeader',
 
     propTypes: {
-        room: React.PropTypes.object,
-        oobData: React.PropTypes.object,
-        editing: React.PropTypes.bool,
-        saving: React.PropTypes.bool,
-        inRoom: React.PropTypes.bool,
-        collapsedRhs: React.PropTypes.bool,
-        onSettingsClick: React.PropTypes.func,
-        onPinnedClick: React.PropTypes.func,
-        onSaveClick: React.PropTypes.func,
-        onSearchClick: React.PropTypes.func,
-        onLeaveClick: React.PropTypes.func,
-        onCancelClick: React.PropTypes.func,
+        room: PropTypes.object,
+        oobData: PropTypes.object,
+        editing: PropTypes.bool,
+        saving: PropTypes.bool,
+        inRoom: PropTypes.bool,
+        collapsedRhs: PropTypes.bool,
+        onSettingsClick: PropTypes.func,
+        onPinnedClick: PropTypes.func,
+        onSaveClick: PropTypes.func,
+        onSearchClick: PropTypes.func,
+        onLeaveClick: PropTypes.func,
+        onCancelClick: PropTypes.func,
     },
 
     getDefaultProps: function() {

src/components/views/rooms/RoomList.js

@@ -18,6 +18,8 @@ limitations under the License.
 'use strict';
 const React = require("react");
 const ReactDOM = require("react-dom");
+import { DragDropContext } from 'react-beautiful-dnd';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 const GeminiScrollbar = require('react-gemini-scrollbar');
 const MatrixClientPeg = require("../../../MatrixClientPeg");
@@ -28,9 +30,11 @@ const rate_limited_func = require('../../../ratelimitedfunc');
 const Rooms = require('../../../Rooms');
 import DMRoomMap from '../../../utils/DMRoomMap';
 const Receipt = require('../../../utils/Receipt');
-import FilterStore from '../../../stores/FilterStore';
+import TagOrderStore from '../../../stores/TagOrderStore';
 import GroupStoreCache from '../../../stores/GroupStoreCache';
 
+import Modal from '../../../Modal';
+
 const HIDE_CONFERENCE_CHANS = true;
 
 function phraseForSection(section) {
@@ -52,9 +56,9 @@ module.exports = React.createClass({
     displayName: 'RoomList',
 
     propTypes: {
-        ConferenceHandler: React.PropTypes.any,
-        collapsed: React.PropTypes.bool.isRequired,
-        searchFilter: React.PropTypes.string,
+        ConferenceHandler: PropTypes.any,
+        collapsed: PropTypes.bool.isRequired,
+        searchFilter: PropTypes.string,
     },
 
     getInitialState: function() {
@@ -71,6 +75,7 @@ module.exports = React.createClass({
         this.mounted = false;
 
         const cli = MatrixClientPeg.get();
+
         cli.on("Room", this.onRoom);
         cli.on("deleteRoom", this.onDeleteRoom);
         cli.on("Room.timeline", this.onRoomTimeline);
@@ -83,21 +88,34 @@ module.exports = React.createClass({
         cli.on("accountData", this.onAccountData);
         cli.on("Group.myMembership", this._onGroupMyMembership);
 
+        const dmRoomMap = DMRoomMap.shared();
         this._groupStores = {};
-        this._selectedTagsRoomIds = [];
-        this._selectedTagsUserIds = [];
+        this._groupStoreTokens = [];
+        // A map between tags which are group IDs and the room IDs of rooms that should be kept
+        // in the room list when filtering by that tag.
+        this._visibleRoomsForGroup = {
+            // $groupId: [$roomId1, $roomId2, ...],
+        };
+        // All rooms that should be kept in the room list when filtering.
+        // By default, show all rooms.
+        this._visibleRooms = MatrixClientPeg.get().getRooms();
         // When the selected tags are changed, initialise a group store if necessary
-        this._filterStoreToken = FilterStore.addListener(() => {
-            FilterStore.getSelectedTags().forEach((tag) => {
+        this._tagStoreToken = TagOrderStore.addListener(() => {
+            (TagOrderStore.getOrderedTags() || []).forEach((tag) => {
                 if (tag[0] !== '+' || this._groupStores[tag]) {
                     return;
                 }
                 this._groupStores[tag] = GroupStoreCache.getGroupStore(tag);
-                this._groupStores[tag].registerListener(() => {
-                    this.updateSelectedTagsEntities();
-                });
+                this._groupStoreTokens.push(
+                    this._groupStores[tag].registerListener(() => {
+                        // This group's rooms or members may have updated, update rooms for its tag
+                        this.updateVisibleRoomsForTag(dmRoomMap, tag);
+                        this.updateVisibleRooms();
+                    }),
+                );
             });
-            this.updateSelectedTagsEntities();
+            // Filters themselves have changed, refresh the selected tags
+            this.updateVisibleRooms();
         });
 
         this.refreshRoomList();
@@ -169,8 +187,13 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("Group.myMembership", this._onGroupMyMembership);
         }
 
-        if (this._filterStoreToken) {
-            this._filterStoreToken.remove();
+        if (this._tagStoreToken) {
+            this._tagStoreToken.remove();
+        }
+
+        if (this._groupStoreTokens.length > 0) {
+            // NB: GroupStore is not a Flux.Store
+            this._groupStoreTokens.forEach((token) => token.unregister());
         }
 
         // cancel any pending calls to the rate_limited_funcs
@@ -178,11 +201,11 @@ module.exports = React.createClass({
     },
 
     onRoom: function(room) {
-        this._delayedRefreshRoomList();
+        this.updateVisibleRooms();
     },
 
     onDeleteRoom: function(roomId) {
-        this._delayedRefreshRoomList();
+        this.updateVisibleRooms();
     },
 
     onArchivedHeaderClick: function(isHidden, scrollToPosition) {
@@ -255,43 +278,156 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    onRoomTileEndDrag: function(result) {
+        if (!result.destination) return;
+
+        let newTag = result.destination.droppableId.split('_')[1];
+        let prevTag = result.source.droppableId.split('_')[1];
+        if (newTag === 'undefined') newTag = undefined;
+        if (prevTag === 'undefined') prevTag = undefined;
+
+        const roomId = result.draggableId.split('_')[1];
+        const room = MatrixClientPeg.get().getRoom(roomId);
+
+        const newIndex = result.destination.index;
+
+        // Evil hack to get DMs behaving
+        if ((prevTag === undefined && newTag === 'im.vector.fake.direct') ||
+            (prevTag === 'im.vector.fake.direct' && newTag === undefined)
+        ) {
+            Rooms.guessAndSetDMRoom(
+                room, newTag === 'im.vector.fake.direct',
+            ).catch((err) => {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Failed to set direct chat tag " + err);
+                Modal.createTrackedDialog('Failed to set direct chat tag', '', ErrorDialog, {
+                    title: _t('Failed to set direct chat tag'),
+                    description: ((err && err.message) ? err.message : _t('Operation failed')),
+                });
+            });
+            return;
+        }
+
+        const hasChangedSubLists = result.source.droppableId !== result.destination.droppableId;
+
+        let newOrder = null;
+
+        // Is the tag ordered manually?
+        if (newTag && !newTag.match(/^(m\.lowpriority|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
+            const newList = this.state.lists[newTag];
+
+            // If the room was moved "down" (increasing index) in the same list we
+            // need to use the orders of the tiles with indices shifted by +1
+            const offset = (
+                newTag === prevTag && result.source.index < result.destination.index
+            ) ? 1 : 0;
+
+            const indexBefore = offset + newIndex - 1;
+            const indexAfter = offset + newIndex;
+
+            const prevOrder = indexBefore < 0 ?
+                0 : newList[indexBefore].tags[newTag].order;
+            const nextOrder = indexAfter >= newList.length ?
+                1 : newList[indexAfter].tags[newTag].order;
+
+            newOrder = {
+                order: (prevOrder + nextOrder) / 2.0,
+            };
+        }
+
+        // More evilness: We will still be dealing with moving to favourites/low prio,
+        // but we avoid ever doing a request with 'im.vector.fake.direct`.
+        //
+        // if we moved lists, remove the old tag
+        if (prevTag && prevTag !== 'im.vector.fake.direct' &&
+            hasChangedSubLists
+        ) {
+            // Optimistic update of what will happen to the room tags
+            delete room.tags[prevTag];
+
+            MatrixClientPeg.get().deleteRoomTag(roomId, prevTag).catch(function(err) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Failed to remove tag " + prevTag + " from room: " + err);
+                Modal.createTrackedDialog('Failed to remove tag from room', '', ErrorDialog, {
+                    title: _t('Failed to remove tag %(tagName)s from room', {tagName: prevTag}),
+                    description: ((err && err.message) ? err.message : _t('Operation failed')),
+                });
+            });
+        }
+
+        // if we moved lists or the ordering changed, add the new tag
+        if (newTag && newTag !== 'im.vector.fake.direct' &&
+            (hasChangedSubLists || newOrder)
+        ) {
+            // Optimistic update of what will happen to the room tags
+            room.tags[newTag] = newOrder;
+
+            MatrixClientPeg.get().setRoomTag(roomId, newTag, newOrder).catch(function(err) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Failed to add tag " + newTag + " to room: " + err);
+                Modal.createTrackedDialog('Failed to add tag to room', '', ErrorDialog, {
+                    title: _t('Failed to add tag %(tagName)s to room', {tagName: newTag}),
+                    description: ((err && err.message) ? err.message : _t('Operation failed')),
+                });
+            });
+        }
+
+        // Refresh to display the optimistic updates - this needs to be done in the
+        // same tick as the drag finishing otherwise the room will pop back to its
+        // previous position - hence no delayed refresh
+        this.refreshRoomList();
+    },
+
     _delayedRefreshRoomList: new rate_limited_func(function() {
         this.refreshRoomList();
     }, 500),
 
-    // Update which rooms and users should appear in RoomList as dictated by selected tags
-    updateSelectedTagsEntities: function() {
+    // Update which rooms and users should appear in RoomList for a given group tag
+    updateVisibleRoomsForTag: function(dmRoomMap, tag) {
         if (!this.mounted) return;
-        this._selectedTagsRoomIds = [];
-        this._selectedTagsUserIds = [];
-        FilterStore.getSelectedTags().forEach((tag) => {
-            this._selectedTagsRoomIds = this._selectedTagsRoomIds.concat(
-               this._groupStores[tag].getGroupRooms().map((room) => room.roomId),
-            );
-            // TODO: Check if room has been tagged to the group by the user
+        // For now, only handle group tags
+        const store = this._groupStores[tag];
+        if (!store) return;
 
-            this._selectedTagsUserIds = this._selectedTagsUserIds.concat(
-               this._groupStores[tag].getGroupMembers().map((member) => member.userId),
+        this._visibleRoomsForGroup[tag] = [];
+        store.getGroupRooms().forEach((room) => this._visibleRoomsForGroup[tag].push(room.roomId));
+        store.getGroupMembers().forEach((member) => {
+            if (member.userId === MatrixClientPeg.get().credentials.userId) return;
+            dmRoomMap.getDMRoomsForUserId(member.userId).forEach(
+                (roomId) => this._visibleRoomsForGroup[tag].push(roomId),
             );
         });
-        this.setState({
-            selectedTags: FilterStore.getSelectedTags(),
-        }, () => {
-            this.refreshRoomList();
-        });
+        // TODO: Check if room has been tagged to the group by the user
     },
 
-    isRoomInSelectedTags: function(room, me, dmRoomMap) {
-        // No selected tags = every room is visible in the list
-        if (this.state.selectedTags.length === 0) {
-            return true;
+    // Update which rooms and users should appear according to which tags are selected
+    updateVisibleRooms: function() {
+        const selectedTags = TagOrderStore.getSelectedTags();
+        const visibleGroupRooms = [];
+        selectedTags.forEach((tag) => {
+            (this._visibleRoomsForGroup[tag] || []).forEach(
+                (roomId) => visibleGroupRooms.push(roomId),
+            );
+        });
+
+        // If there are any tags selected, constrain the rooms listed to the
+        // visible rooms as determined by visibleGroupRooms. Here, we
+        // de-duplicate and filter out rooms that the client doesn't know
+        // about (hence the Set and the null-guard on `room`).
+        if (selectedTags.length > 0) {
+            const roomSet = new Set();
+            visibleGroupRooms.forEach((roomId) => {
+                const room = MatrixClientPeg.get().getRoom(roomId);
+                if (room) {
+                    roomSet.add(room);
+                }
+            });
+            this._visibleRooms = Array.from(roomSet);
+        } else {
+            // Show all rooms
+            this._visibleRooms = MatrixClientPeg.get().getRooms();
         }
-        if (this._selectedTagsRoomIds.includes(room.roomId)) {
-            return true;
-        }
-        const dmUserId = dmRoomMap.getUserIdForRoomId(room.roomId);
-        return dmUserId && dmUserId !== me.userId &&
-            this._selectedTagsUserIds.includes(dmUserId);
+        this._delayedRefreshRoomList();
     },
 
     refreshRoomList: function() {
@@ -307,6 +443,9 @@ module.exports = React.createClass({
         this.setState({
             lists: this.getRoomLists(),
             totalRoomCount: totalRooms,
+            // Do this here so as to not render every time the selected tags
+            // themselves change.
+            selectedTags: TagOrderStore.getSelectedTags(),
         });
 
         // this._lastRefreshRoomListTs = Date.now();
@@ -321,8 +460,9 @@ module.exports = React.createClass({
         lists["m.lowpriority"] = [];
         lists["im.vector.fake.archived"] = [];
 
-        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
-        MatrixClientPeg.get().getRooms().forEach((room) => {
+        const dmRoomMap = DMRoomMap.shared();
+
+        this._visibleRooms.forEach((room, index) => {
             const me = room.getMember(MatrixClientPeg.get().credentials.userId);
             if (!me) return;
 
@@ -339,12 +479,6 @@ module.exports = React.createClass({
                      (me.membership === "leave" && me.events.member.getSender() !== me.events.member.getStateKey())) {
                 // Used to split rooms via tags
                 const tagNames = Object.keys(room.tags);
-
-                // Apply TagPanel filtering, derived from FilterStore
-                if (!this.isRoomInSelectedTags(room, me, dmRoomMap)) {
-                    return;
-                }
-
                 if (tagNames.length) {
                     for (let i = 0; i < tagNames.length; i++) {
                         const tagName = tagNames[i];
@@ -618,121 +752,116 @@ module.exports = React.createClass({
 
         const self = this;
         return (
-            <GeminiScrollbar className="mx_RoomList_scrollbar"
-                 autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
-            <div className="mx_RoomList">
-                <RoomSubList list={[]}
-                             extraTiles={this._makeGroupInviteTiles()}
-                             label={_t('Community Invites')}
-                             editable={false}
-                             order="recent"
-                             isInvite={true}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                />
+            <DragDropContext onDragEnd={this.onRoomTileEndDrag}>
+                <GeminiScrollbar className="mx_RoomList_scrollbar"
+                     autoshow={true} onScroll={self._whenScrolling} ref="gemscroll">
+                <div className="mx_RoomList">
+                    <RoomSubList list={[]}
+                                 extraTiles={this._makeGroupInviteTiles()}
+                                 label={_t('Community Invites')}
+                                 editable={false}
+                                 order="recent"
+                                 isInvite={true}
+                                 collapsed={self.props.collapsed}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms}
+                    />
 
-                <RoomSubList list={self.state.lists['im.vector.fake.invite']}
-                             label={_t('Invites')}
-                             editable={false}
-                             order="recent"
-                             isInvite={true}
-                             selectedRoom={self.props.selectedRoom}
-                             incomingCall={self.state.incomingCall}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms}
-                />
+                    <RoomSubList list={self.state.lists['im.vector.fake.invite']}
+                                 label={_t('Invites')}
+                                 editable={false}
+                                 order="recent"
+                                 isInvite={true}
+                                 incomingCall={self.state.incomingCall}
+                                 collapsed={self.props.collapsed}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms}
+                    />
 
-                <RoomSubList list={self.state.lists['m.favourite']}
-                             label={_t('Favourites')}
-                             tagName="m.favourite"
-                             emptyContent={this._getEmptyContent('m.favourite')}
-                             editable={true}
-                             order="manual"
-                             selectedRoom={self.props.selectedRoom}
-                             incomingCall={self.state.incomingCall}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms} />
+                    <RoomSubList list={self.state.lists['m.favourite']}
+                                 label={_t('Favourites')}
+                                 tagName="m.favourite"
+                                 emptyContent={this._getEmptyContent('m.favourite')}
+                                 editable={true}
+                                 order="manual"
+                                 incomingCall={self.state.incomingCall}
+                                 collapsed={self.props.collapsed}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms} />
 
-                <RoomSubList list={self.state.lists['im.vector.fake.direct']}
-                             label={_t('People')}
-                             tagName="im.vector.fake.direct"
-                             emptyContent={this._getEmptyContent('im.vector.fake.direct')}
-                             headerItems={this._getHeaderItems('im.vector.fake.direct')}
-                             editable={true}
-                             order="recent"
-                             selectedRoom={self.props.selectedRoom}
-                             incomingCall={self.state.incomingCall}
-                             collapsed={self.props.collapsed}
-                             alwaysShowHeader={true}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms} />
+                    <RoomSubList list={self.state.lists['im.vector.fake.direct']}
+                                 label={_t('People')}
+                                 tagName="im.vector.fake.direct"
+                                 emptyContent={this._getEmptyContent('im.vector.fake.direct')}
+                                 headerItems={this._getHeaderItems('im.vector.fake.direct')}
+                                 editable={true}
+                                 order="recent"
+                                 incomingCall={self.state.incomingCall}
+                                 collapsed={self.props.collapsed}
+                                 alwaysShowHeader={true}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms} />
 
-                <RoomSubList list={self.state.lists['im.vector.fake.recent']}
-                             label={_t('Rooms')}
-                             editable={true}
-                             emptyContent={this._getEmptyContent('im.vector.fake.recent')}
-                             headerItems={this._getHeaderItems('im.vector.fake.recent')}
-                             order="recent"
-                             selectedRoom={self.props.selectedRoom}
-                             incomingCall={self.state.incomingCall}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms} />
+                    <RoomSubList list={self.state.lists['im.vector.fake.recent']}
+                                 label={_t('Rooms')}
+                                 editable={true}
+                                 emptyContent={this._getEmptyContent('im.vector.fake.recent')}
+                                 headerItems={this._getHeaderItems('im.vector.fake.recent')}
+                                 order="recent"
+                                 incomingCall={self.state.incomingCall}
+                                 collapsed={self.props.collapsed}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms} />
 
-                { Object.keys(self.state.lists).map((tagName) => {
-                    if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
-                        return <RoomSubList list={self.state.lists[tagName]}
-                             key={tagName}
-                             label={tagName}
-                             tagName={tagName}
-                             emptyContent={this._getEmptyContent(tagName)}
-                             editable={true}
-                             order="manual"
-                             selectedRoom={self.props.selectedRoom}
-                             incomingCall={self.state.incomingCall}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms} />;
-                    }
-                }) }
+                    { Object.keys(self.state.lists).map((tagName) => {
+                        if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|direct|archived))$/)) {
+                            return <RoomSubList list={self.state.lists[tagName]}
+                                 key={tagName}
+                                 label={tagName}
+                                 tagName={tagName}
+                                 emptyContent={this._getEmptyContent(tagName)}
+                                 editable={true}
+                                 order="manual"
+                                 incomingCall={self.state.incomingCall}
+                                 collapsed={self.props.collapsed}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms} />;
+                        }
+                    }) }
 
-                <RoomSubList list={self.state.lists['m.lowpriority']}
-                             label={_t('Low priority')}
-                             tagName="m.lowpriority"
-                             emptyContent={this._getEmptyContent('m.lowpriority')}
-                             editable={true}
-                             order="recent"
-                             selectedRoom={self.props.selectedRoom}
-                             incomingCall={self.state.incomingCall}
-                             collapsed={self.props.collapsed}
-                             searchFilter={self.props.searchFilter}
-                             onHeaderClick={self.onSubListHeaderClick}
-                             onShowMoreRooms={self.onShowMoreRooms} />
+                    <RoomSubList list={self.state.lists['m.lowpriority']}
+                                 label={_t('Low priority')}
+                                 tagName="m.lowpriority"
+                                 emptyContent={this._getEmptyContent('m.lowpriority')}
+                                 editable={true}
+                                 order="recent"
+                                 incomingCall={self.state.incomingCall}
+                                 collapsed={self.props.collapsed}
+                                 searchFilter={self.props.searchFilter}
+                                 onHeaderClick={self.onSubListHeaderClick}
+                                 onShowMoreRooms={self.onShowMoreRooms} />
 
-                <RoomSubList list={self.state.lists['im.vector.fake.archived']}
-                             label={_t('Historical')}
-                             editable={false}
-                             order="recent"
-                             selectedRoom={self.props.selectedRoom}
-                             collapsed={self.props.collapsed}
-                             alwaysShowHeader={true}
-                             startAsHidden={true}
-                             showSpinner={self.state.isLoadingLeftRooms}
-                             onHeaderClick= {self.onArchivedHeaderClick}
-                             incomingCall={self.state.incomingCall}
-                             searchFilter={self.props.searchFilter}
-                             onShowMoreRooms={self.onShowMoreRooms} />
-            </div>
-            </GeminiScrollbar>
+                    <RoomSubList list={self.state.lists['im.vector.fake.archived']}
+                                 label={_t('Historical')}
+                                 editable={false}
+                                 order="recent"
+                                 collapsed={self.props.collapsed}
+                                 alwaysShowHeader={true}
+                                 startAsHidden={true}
+                                 showSpinner={self.state.isLoadingLeftRooms}
+                                 onHeaderClick= {self.onArchivedHeaderClick}
+                                 incomingCall={self.state.incomingCall}
+                                 searchFilter={self.props.searchFilter}
+                                 onShowMoreRooms={self.onShowMoreRooms} />
+                </div>
+                </GeminiScrollbar>
+            </DragDropContext>
         );
     },
 });

src/components/views/rooms/RoomNameEditor.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 import { _t } from '../../../languageHandler';
@@ -25,7 +26,7 @@ module.exports = React.createClass({
     displayName: 'RoomNameEditor',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
     },
 
     componentWillMount: function() {

src/components/views/rooms/RoomPreviewBar.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 
@@ -27,29 +28,29 @@ module.exports = React.createClass({
     displayName: 'RoomPreviewBar',
 
     propTypes: {
-        onJoinClick: React.PropTypes.func,
-        onRejectClick: React.PropTypes.func,
-        onForgetClick: React.PropTypes.func,
+        onJoinClick: PropTypes.func,
+        onRejectClick: PropTypes.func,
+        onForgetClick: PropTypes.func,
 
         // if inviterName is specified, the preview bar will shown an invite to the room.
         // You should also specify onRejectClick if specifiying inviterName
-        inviterName: React.PropTypes.string,
+        inviterName: PropTypes.string,
 
         // If invited by 3rd party invite, the email address the invite was sent to
-        invitedEmail: React.PropTypes.string,
+        invitedEmail: PropTypes.string,
 
         // A standard client/server API error object. If supplied, indicates that the
         // caller was unable to fetch details about the room for the given reason.
-        error: React.PropTypes.object,
+        error: PropTypes.object,
 
-        canPreview: React.PropTypes.bool,
-        spinner: React.PropTypes.bool,
-        room: React.PropTypes.object,
+        canPreview: PropTypes.bool,
+        spinner: PropTypes.bool,
+        room: PropTypes.object,
 
         // The alias that was used to access this room, if appropriate
         // If given, this will be how the room is referred to (eg.
         // in error messages).
-        roomAlias: React.PropTypes.string,
+        roomAlias: PropTypes.string,
     },
 
     getDefaultProps: function() {

src/components/views/rooms/RoomSettings.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 import Promise from 'bluebird';
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t, _td } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
@@ -60,10 +61,10 @@ const plEventsToShow = {
 
 const BannedUser = React.createClass({
     propTypes: {
-        canUnban: React.PropTypes.bool,
-        member: React.PropTypes.object.isRequired, // js-sdk RoomMember
-        by: React.PropTypes.string.isRequired,
-        reason: React.PropTypes.string,
+        canUnban: PropTypes.bool,
+        member: PropTypes.object.isRequired, // js-sdk RoomMember
+        by: PropTypes.string.isRequired,
+        reason: PropTypes.string,
     },
 
     _onUnbanClick: function() {
@@ -115,8 +116,8 @@ module.exports = React.createClass({
     displayName: 'RoomSettings',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
-        onSaveClick: React.PropTypes.func,
+        room: PropTypes.object.isRequired,
+        onSaveClick: PropTypes.func,
     },
 
     getInitialState: function() {
@@ -773,7 +774,8 @@ module.exports = React.createClass({
         const aliasEvents = this.props.room.currentState.getStateEvents('m.room.aliases') || [];
         let aliasCount = 0;
         aliasEvents.forEach((event) => {
-            aliasCount += event.getContent().aliases.length;
+            const aliases = event.getContent().aliases || [];
+            aliasCount += aliases.length;
         });
 
         if (this.state.join_rule === "public" && aliasCount == 0) {

src/components/views/rooms/RoomTile.js

@@ -19,6 +19,7 @@ limitations under the License.
 
 const React = require('react');
 const ReactDOM = require("react-dom");
+import PropTypes from 'prop-types';
 const classNames = require('classnames');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 import DMRoomMap from '../../../utils/DMRoomMap';
@@ -34,17 +35,14 @@ module.exports = React.createClass({
     displayName: 'RoomTile',
 
     propTypes: {
-        connectDragSource: React.PropTypes.func,
-        connectDropTarget: React.PropTypes.func,
-        onClick: React.PropTypes.func,
-        isDragging: React.PropTypes.bool,
+        onClick: PropTypes.func,
 
-        room: React.PropTypes.object.isRequired,
-        collapsed: React.PropTypes.bool.isRequired,
-        unread: React.PropTypes.bool.isRequired,
-        highlight: React.PropTypes.bool.isRequired,
-        isInvite: React.PropTypes.bool.isRequired,
-        incomingCall: React.PropTypes.object,
+        room: PropTypes.object.isRequired,
+        collapsed: PropTypes.bool.isRequired,
+        unread: PropTypes.bool.isRequired,
+        highlight: PropTypes.bool.isRequired,
+        isInvite: PropTypes.bool.isRequired,
+        incomingCall: PropTypes.object,
     },
 
     getDefaultProps: function() {
@@ -255,35 +253,19 @@ module.exports = React.createClass({
          directMessageIndicator = <img src="img/icon_person.svg" className="mx_RoomTile_dm" width="11" height="13" alt="dm" />;
         }
 
-        // These props are injected by React DnD,
-        // as defined by your `collect` function above:
-        const isDragging = this.props.isDragging;
-        const connectDragSource = this.props.connectDragSource;
-        const connectDropTarget = this.props.connectDropTarget;
-
-
-        let ret = (
-            <div> { /* Only native elements can be wrapped in a DnD object. */ }
-            <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-                <div className={avatarClasses}>
-                    <div className="mx_RoomTile_avatar_container">
-                        <RoomAvatar room={this.props.room} width={24} height={24} />
-                        { directMessageIndicator }
-                    </div>
+        return <AccessibleButton className={classes} tabIndex="0" onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+            <div className={avatarClasses}>
+                <div className="mx_RoomTile_avatar_container">
+                    <RoomAvatar room={this.props.room} width={24} height={24} />
+                    { directMessageIndicator }
                 </div>
-                <div className="mx_RoomTile_nameContainer">
-                    { label }
-                    { badge }
-                </div>
-                { /* { incomingCallBox } */ }
-                { tooltip }
-            </AccessibleButton>
             </div>
-        );
-
-        if (connectDropTarget) ret = connectDropTarget(ret);
-        if (connectDragSource) ret = connectDragSource(ret);
-
-        return ret;
+            <div className="mx_RoomTile_nameContainer">
+                { label }
+                { badge }
+            </div>
+            { /* { incomingCallBox } */ }
+            { tooltip }
+        </AccessibleButton>;
     },
 });

src/components/views/rooms/RoomTopicEditor.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const sdk = require('../../../index');
 import { _t } from "../../../languageHandler";
 
@@ -24,7 +25,7 @@ module.exports = React.createClass({
     displayName: 'RoomTopicEditor',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
     },
 
     componentWillMount: function() {

src/components/views/rooms/SearchResultTile.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -24,15 +25,15 @@ module.exports = React.createClass({
 
     propTypes: {
         // a matrix-js-sdk SearchResult containing the details of this result
-        searchResult: React.PropTypes.object.isRequired,
+        searchResult: PropTypes.object.isRequired,
 
         // a list of strings to be highlighted in the results
-        searchHighlights: React.PropTypes.array,
+        searchHighlights: PropTypes.array,
 
         // href for the highlights in this result
-        resultLink: React.PropTypes.string,
+        resultLink: PropTypes.string,
 
-        onWidgetLoad: React.PropTypes.func,
+        onWidgetLoad: PropTypes.func,
     },
 
     render: function() {

src/components/views/rooms/SearchableEntityList.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 const React = require('react');
+import PropTypes from 'prop-types';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const Modal = require("../../../Modal");
 const sdk = require("../../../index");
@@ -26,12 +27,12 @@ const SearchableEntityList = React.createClass({
     displayName: 'SearchableEntityList',
 
     propTypes: {
-        emptyQueryShowsAll: React.PropTypes.bool,
-        showInputBox: React.PropTypes.bool,
-        onQueryChanged: React.PropTypes.func, // fn(inputText)
-        onSubmit: React.PropTypes.func, // fn(inputText)
-        entities: React.PropTypes.array,
-        truncateAt: React.PropTypes.number,
+        emptyQueryShowsAll: PropTypes.bool,
+        showInputBox: PropTypes.bool,
+        onQueryChanged: PropTypes.func, // fn(inputText)
+        onSubmit: PropTypes.func, // fn(inputText)
+        entities: PropTypes.array,
+        truncateAt: PropTypes.number,
     },
 
     getDefaultProps: function() {

src/components/views/rooms/SimpleRoomHeader.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import AccessibleButton from '../elements/AccessibleButton';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -39,11 +40,11 @@ export default React.createClass({
     displayName: 'SimpleRoomHeader',
 
     propTypes: {
-        title: React.PropTypes.string,
-        onCancelClick: React.PropTypes.func,
+        title: PropTypes.string,
+        onCancelClick: PropTypes.func,
 
         // `src` to a TintableSvg. Optional.
-        icon: React.PropTypes.string,
+        icon: PropTypes.string,
     },
 
     render: function() {

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 const sdk = require('../../../index');
 
@@ -25,8 +26,8 @@ module.exports = React.createClass({
     displayName: 'TopUnreadMessagesBar',
 
     propTypes: {
-        onScrollUpClick: React.PropTypes.func,
-        onCloseClick: React.PropTypes.func,
+        onScrollUpClick: PropTypes.func,
+        onCloseClick: PropTypes.func,
     },
 
     render: function() {

src/components/views/rooms/UserTile.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import PropTypes from 'prop-types';
 
 const Avatar = require("../../../Avatar");
 const MatrixClientPeg = require('../../../MatrixClientPeg');
@@ -28,7 +29,7 @@ module.exports = React.createClass({
     displayName: 'UserTile',
 
     propTypes: {
-        user: React.PropTypes.any.isRequired, // User
+        user: PropTypes.any.isRequired, // User
     },
 
     render: function() {

src/components/views/settings/AddPhoneNumber.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 import sdk from '../../../index';
@@ -26,8 +27,8 @@ export default withMatrixClient(React.createClass({
     displayName: 'AddPhoneNumber',
 
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        onThreepidAdded: React.PropTypes.func,
+        matrixClient: PropTypes.object.isRequired,
+        onThreepidAdded: PropTypes.func,
     },
 
     getInitialState: function() {

src/components/views/settings/ChangeAvatar.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 const React = require('react');
+import PropTypes from 'prop-types';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const sdk = require('../../../index');
 import { _t } from '../../../languageHandler';
@@ -22,13 +23,13 @@ import { _t } from '../../../languageHandler';
 module.exports = React.createClass({
     displayName: 'ChangeAvatar',
     propTypes: {
-        initialAvatarUrl: React.PropTypes.string,
-        room: React.PropTypes.object,
+        initialAvatarUrl: PropTypes.string,
+        room: PropTypes.object,
         // if false, you need to call changeAvatar.onFileSelected yourself.
-        showUploadSection: React.PropTypes.bool,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        className: React.PropTypes.string,
+        showUploadSection: PropTypes.bool,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        className: PropTypes.string,
     },
 
     Phases: {