Merge branch 'develop' into travis/react-warnings/3-componentCannotDidMount

src/components/views/rooms/AppsDrawer.js

@@ -55,13 +55,10 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         ScalarMessaging.startListening();
         MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
         WidgetEchoStore.on('update', this._updateApps);
-    },
-
-    componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
 
@@ -71,7 +68,7 @@ export default createReactClass({
             MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
         }
         WidgetEchoStore.removeListener('update', this._updateApps);
-        dis.unregister(this.dispatcherRef);
+        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
     },
 
     componentWillReceiveProps(newProps) {
@@ -160,11 +157,7 @@ export default createReactClass({
 
             return (<AppTile
                 key={app.id}
-                id={app.id}
-                eventId={app.eventId}
-                url={app.url}
-                name={app.name}
-                type={app.type}
+                app={app}
                 fullWidth={arr.length<2 ? true : false}
                 room={this.props.room}
                 userId={this.props.userId}

src/components/views/rooms/EditMessageComposer.js

@@ -223,7 +223,7 @@ export default class EditMessageComposer extends React.Component {
         this.props.editState.setEditorState(caret, parts);
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._createEditorModel();
     }
 

src/components/views/rooms/ForwardMessage.js

@@ -30,14 +30,12 @@ export default createReactClass({
         onCancelClick: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         dis.dispatch({
             action: 'panel_disable',
             middleDisabled: true,
         });
-    },
 
-    componentDidMount: function() {
         document.addEventListener('keydown', this._onKeyDown);
     },
 

src/components/views/rooms/MemberInfo.js

@@ -79,7 +79,8 @@ export default createReactClass({
         contextType: MatrixClientContext,
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._cancelDeviceList = null;
         const cli = this.context;
 
@@ -98,9 +99,7 @@ export default createReactClass({
         cli.on("accountData", this.onAccountData);
 
         this._checkIgnoreState();
-    },
 
-    componentDidMount: function() {
         this._updateStateForNewMember(this.props.member);
     },
 

src/components/views/rooms/MemberList.js

@@ -49,7 +49,8 @@ export default createReactClass({
         }
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._mounted = true;
         const cli = MatrixClientPeg.get();
         if (cli.hasLazyLoadMembersEnabled()) {

src/components/views/rooms/RoomBreadcrumbs.js

@@ -49,7 +49,7 @@ export default class RoomBreadcrumbs extends React.Component {
         this._scroller = createRef();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._dispatcherRef = dis.register(this.onAction);
 
         const storedRooms = SettingsStore.getValue("breadcrumb_rooms");

src/components/views/rooms/RoomList.js

@@ -290,6 +290,7 @@ export default createReactClass({
                     dis.dispatch({
                         action: 'view_room',
                         room_id: room.roomId,
+                        show_room_tile: true, // to make sure the room gets scrolled into view
                     });
                 }
                 break;

src/components/views/rooms/RoomNameEditor.js

@@ -34,7 +34,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         const room = this.props.room;
         const name = room.currentState.getStateEvents('m.room.name', '');
         const myId = MatrixClientPeg.get().credentials.userId;

src/components/views/rooms/RoomPreviewBar.js

@@ -97,7 +97,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._checkInvitedEmail();
     },
 

src/components/views/rooms/RoomRecoveryReminder.js

@@ -44,7 +44,7 @@ export default class RoomRecoveryReminder extends React.PureComponent {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._loadBackupStatus();
     }
 
@@ -61,7 +61,6 @@ export default class RoomRecoveryReminder extends React.PureComponent {
                 loading: false,
                 error: e,
             });
-            return;
         }
     }
 

src/components/views/rooms/RoomTile.js

@@ -203,7 +203,7 @@ export default createReactClass({
 
             case 'view_room':
                 // when the room is selected make sure its tile is visible, for breadcrumbs/keyboard shortcut access
-                if (payload.room_id === this.props.room.roomId) {
+                if (payload.room_id === this.props.room.roomId && payload.show_room_tile) {
                     this._scrollIntoView();
                 }
                 break;

src/components/views/rooms/RoomTopicEditor.js

@@ -33,7 +33,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const room = this.props.room;
         const topic = room.currentState.getStateEvents('m.room.topic', '');
         this.setState({

src/components/views/rooms/RoomUpgradeWarningBar.js

@@ -31,7 +31,7 @@ export default createReactClass({
         recommendation: PropTypes.object.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
         this.setState({upgraded: tombstone && tombstone.getContent().replacement_room});
 

src/components/views/rooms/Stickerpicker.js

@@ -240,6 +240,14 @@ export default class Stickerpicker extends React.Component {
             // Set default name
             stickerpickerWidget.content.name = stickerpickerWidget.name || _t("Stickerpack");
 
+            // FIXME: could this use the same code as other apps?
+            const stickerApp = {
+                id: stickerpickerWidget.id,
+                url: stickerpickerWidget.content.url,
+                name: stickerpickerWidget.content.name,
+                type: stickerpickerWidget.content.type,
+            };
+
             stickersContent = (
                 <div className='mx_Stickers_content_container'>
                     <div
@@ -253,11 +261,8 @@ export default class Stickerpicker extends React.Component {
                     >
                     <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} style={{zIndex: STICKERPICKER_Z_INDEX}}>
                         <AppTile
-                            id={stickerpickerWidget.id}
-                            url={stickerpickerWidget.content.url}
-                            name={stickerpickerWidget.content.name}
+                            app={stickerApp}
                             room={this.props.room}
-                            type={stickerpickerWidget.content.type}
                             fullWidth={true}
                             userId={MatrixClientPeg.get().credentials.userId}
                             creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}

src/components/views/rooms/ThirdPartyMemberInfo.js

@@ -51,7 +51,7 @@ export default class ThirdPartyMemberInfo extends React.Component {
         };
     }
 
-    componentWillMount(): void {
+    componentDidMount(): void {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
     }
 

src/components/views/rooms/WhoIsTypingTile.js

@@ -54,7 +54,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
     },