Merge pull request #4313 from matrix-org/travis/react-warnings/1-componentDidMount

Use componentDidMount in place of componentWillMount where possible

src/AsyncWrapper.js

@@ -38,7 +38,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         // XXX: temporary logging to try to diagnose
         // https://github.com/vector-im/riot-web/issues/3148

src/async-components/views/dialogs/EncryptedEventDialog.js

@@ -37,7 +37,7 @@ export default createReactClass({
         return { device: null };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         const client = MatrixClientPeg.get();
 

src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.js

@@ -82,7 +82,7 @@ export default class ManageEventIndexDialog extends React.Component {
         }
     }
 
-    async componentWillMount(): void {
+    async componentDidMount(): void {
         let eventIndexSize = 0;
         let crawlingRoomsCount = 0;
         let roomCount = 0;

src/components/structures/CustomRoomTagPanel.js

@@ -30,7 +30,7 @@ class CustomRoomTagPanel extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._tagStoreToken = CustomRoomTagStore.addListener(() => {
             this.setState({tags: CustomRoomTagStore.getSortedTags()});
         });

src/components/structures/EmbeddedPage.js

@@ -58,7 +58,7 @@ export default class EmbeddedPage extends React.PureComponent {
         return sanitizeHtml(_t(s));
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._unmounted = false;
 
         if (!this.props.url) {

src/components/structures/GroupView.js

@@ -428,7 +428,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._matrixClient = MatrixClientPeg.get();
         this._matrixClient.on("Group.myMembership", this._onGroupMyMembership);

src/components/structures/LeftPanel.js

@@ -44,7 +44,7 @@ const LeftPanel = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this.focusedElement = null;
 
         this._breadcrumbsWatcherRef = SettingsStore.watchSetting(

src/components/structures/MatrixChat.js

@@ -221,7 +221,8 @@ export default createReactClass({
         return {serverConfig: props};
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         SdkConfig.put(this.props.config);
 
         // Used by _viewRoom before getting state from sync
@@ -261,9 +262,7 @@ export default createReactClass({
 
         this._accountPassword = null;
         this._accountPasswordTimer = null;
-    },
 
-    componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         this._themeWatcher = new ThemeWatcher();
         this._themeWatcher.start();

src/components/structures/MyGroups.js

@@ -38,7 +38,7 @@ export default createReactClass({
         contextType: MatrixClientContext,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._fetch();
     },
 

src/components/structures/RightPanel.js

@@ -108,7 +108,7 @@ export default class RightPanel extends React.Component {
         }
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context;
         cli.on("RoomState.members", this.onRoomStateMember);

src/components/structures/RoomDirectory.js

@@ -56,7 +56,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
         this.nextBatch = null;
         this.filterTimeout = null;
@@ -89,9 +90,7 @@ export default createReactClass({
                 ),
             });
         });
-    },
 
-    componentDidMount: function() {
         this.refreshRoomList();
     },
 

src/components/structures/RoomStatusBar.js

@@ -96,7 +96,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
 

src/components/structures/TagPanel.js

@@ -44,7 +44,7 @@ const TagPanel = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this.unmounted = false;
         this.context.on("Group.myMembership", this._onGroupMyMembership);
         this.context.on("sync", this._onClientSync);

src/components/structures/UserView.js

@@ -35,7 +35,7 @@ export default class UserView extends React.Component {
         this.state = {};
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.userId) {
             this._loadProfileInfo();
         }

src/components/structures/auth/ForgotPassword.js

@@ -69,7 +69,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this.reset = null;
         this._checkServerLiveliness(this.props.serverConfig);
     },

src/components/structures/auth/Login.js

@@ -113,7 +113,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         // map from login step type to a function which will render a control

src/components/structures/auth/PostRegistration.js

@@ -37,7 +37,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         // There is some assymetry between ChangeDisplayName and ChangeAvatar,
         // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
         // the URL to be passed to you (because it's also used for room avatars).

src/components/structures/auth/Registration.js

@@ -120,7 +120,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._replaceClient();
     },

src/components/views/auth/CountryDropdown.js

@@ -60,7 +60,7 @@ export default class CountryDropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!this.props.value) {
             // If no value is given, we start with the default
             // country selected, but our parent component

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -465,7 +465,7 @@ export const MsisdnAuthEntry = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._submitUrl = null;
         this._sid = null;
         this._msisdn = null;

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -49,7 +49,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
         this._button = createRef();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }

src/components/views/context_menus/MessageContextMenu.js

@@ -61,7 +61,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
         this._checkPermissions();
     },

src/components/views/context_menus/RoomTileContextMenu.js

@@ -82,7 +82,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
     },
 

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -35,7 +35,7 @@ export default class StatusMessageContextMenu extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         const { user } = this.props;
         if (!user) {
             return;

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -55,7 +55,8 @@ export default createReactClass({
         askReason: false,
     }),
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._reasonField = null;
     },
 

src/components/views/dialogs/RoomSettingsDialog.js

@@ -36,7 +36,7 @@ export default class RoomSettingsDialog extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
-    componentWillMount() {
+    componentDidMount() {
         this._dispatcherRef = dis.register(this._onAction);
     }
 

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -30,7 +30,7 @@ export default createReactClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: async function() {
+    componentDidMount: async function() {
         const recommended = await this.props.room.getRecommendedVersion();
         this._targetVersion = recommended.version;
         this.setState({busy: false});

src/components/views/dialogs/SetPasswordDialog.js

@@ -75,8 +75,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
-        console.info('SetPasswordDialog component will mount');
+        console.info('SetPasswordDialog component did mount');
     },
 
     _onPasswordChanged: function(res) {

src/components/views/dialogs/ShareDialog.js

@@ -121,7 +121,7 @@ export default class ShareDialog extends React.Component {
         });
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.target instanceof Room) {
             const permalinkCreator = new RoomPermalinkCreator(this.props.target);
             permalinkCreator.load();

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -87,7 +87,7 @@ export default createReactClass({
         onSend: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
     },
 

src/components/views/elements/AppTile.js

@@ -166,14 +166,12 @@ export default class AppTile extends React.Component {
         return false;
     }
 
-    componentWillMount() {
+    componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
         if (this.props.show && this.state.hasPermissionToLoad) {
             this.setScalarToken();
         }
-    }
 
-    componentDidMount() {
         // Widget action listeners
         this.dispatcherRef = dis.register(this._onAction);
     }

src/components/views/elements/DeviceVerifyButtons.js

@@ -38,7 +38,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const cli = MatrixClientPeg.get();
         cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
     },

src/components/views/elements/EditableTextContainer.js

@@ -42,7 +42,7 @@ export default class EditableTextContainer extends React.Component {
         this._onValueChanged = this._onValueChanged.bind(this);
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.getInitialValue === undefined) {
             // use whatever was given in the initialValue property.
             return;

src/components/views/elements/LanguageDropdown.js

@@ -40,7 +40,7 @@ export default class LanguageDropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         languageHandler.getAllLanguagesFromJson().then((langs) => {
             langs.sort(function(a, b) {
                 if (a.label < b.label) return -1;

src/components/views/elements/PersistentApp.js

@@ -33,7 +33,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
     },

src/components/views/elements/Pill.js

@@ -155,7 +155,7 @@ const Pill = createReactClass({
         this.setState({resourceId, pillType, member, group, room});
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this._unmounted = false;
         this._matrixClient = MatrixClientPeg.get();
         this.componentWillReceiveProps(this.props);

src/components/views/elements/PowerSelector.js

@@ -62,7 +62,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._initStateFromProps(this.props);
     },
 

src/components/views/elements/ReplyThread.js

@@ -184,7 +184,7 @@ export default class ReplyThread extends React.Component {
             ref={ref} permalinkCreator={permalinkCreator} />;
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this.unmounted = false;
         this.room = this.context.getRoom(this.props.parentEv.getRoomId());
         this.room.on("Room.redaction", this.onRoomRedaction);

src/components/views/elements/TintableSvg.js

@@ -36,11 +36,9 @@ const TintableSvg = createReactClass({
         idSequence: 0,
     },
 
-    componentWillMount: function() {
-        this.fixups = [];
-    },
-
     componentDidMount: function() {
+        this.fixups = [];
+
         this.id = TintableSvg.idSequence++;
         TintableSvg.mounts[this.id] = this;
     },

src/components/views/groups/GroupMemberInfo.js

@@ -49,7 +49,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
     },

src/components/views/groups/GroupMemberList.js

@@ -47,7 +47,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
     },

src/components/views/groups/GroupPublicityToggle.js

@@ -36,7 +36,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._initGroupStore(this.props.groupId);
     },
 

src/components/views/groups/GroupRoomInfo.js

@@ -47,7 +47,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._initGroupStore(this.props.groupId);
     },
 

src/components/views/groups/GroupRoomList.js

@@ -39,7 +39,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
     },

src/components/views/groups/GroupTile.js

@@ -55,7 +55,7 @@ const GroupTile = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         FlairStore.getGroupProfileCached(this.context, this.props.groupId).then((profile) => {
             this.setState({profile});
         }).catch((err) => {

src/components/views/groups/GroupUserSettings.js

@@ -34,7 +34,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this.context.getJoinedGroups().then((result) => {
             this.setState({groups: result.groups || [], error: null});
         }, (err) => {

src/components/views/messages/MImageBody.js

@@ -67,11 +67,6 @@ export default class MImageBody extends React.Component {
         this._image = createRef();
     }
 
-    componentWillMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-    }
-
     // FIXME: factor this out and aplpy it to MVideoBody and MAudioBody too!
     onClientSync(syncState, prevState) {
         if (this.unmounted) return;
@@ -258,6 +253,9 @@ export default class MImageBody extends React.Component {
     }
 
     componentDidMount() {
+        this.unmounted = false;
+        this.context.on('sync', this.onClientSync);
+
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);

src/components/views/messages/SenderProfile.js

@@ -42,7 +42,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this.unmounted = false;
         this._updateRelatedGroups();
 

src/components/views/right_panel/HeaderButtons.js

@@ -40,7 +40,7 @@ export default class HeaderButtons extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this));
         this._dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses
     }

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);
     },
 

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/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();
     }
 

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/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);
     },

src/components/views/settings/ChangeAvatar.js

@@ -55,7 +55,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
     },
 

src/components/views/settings/ChangePassword.js

@@ -78,7 +78,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._sessionStore = sessionStore;
         this._sessionStoreToken = this._sessionStore.addListener(
             this._setStateFromSessionStore,

src/components/views/settings/EventIndexPanel.js

@@ -63,7 +63,7 @@ export default class EventIndexPanel extends React.Component {
         }
     }
 
-    async componentWillMount(): void {
+    async componentDidMount(): void {
         this.updateState();
     }
 

src/components/views/settings/KeyBackupPanel.js

@@ -38,7 +38,7 @@ export default class KeyBackupPanel extends React.PureComponent {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._checkKeyBackupStatus();
 
         MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatus);

src/components/views/settings/Notifications.js

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

src/components/views/settings/tabs/user/HelpUserSettingsTab.js

@@ -40,7 +40,7 @@ export default class HelpUserSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount(): void {
+    componentDidMount(): void {
         PlatformPeg.get().getAppVersion().then((ver) => this.setState({vectorVersion: ver})).catch((e) => {
             console.error("Error getting vector version: ", e);
         });

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -81,7 +81,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         };
     }
 
-    async componentWillMount(): void {
+    async componentDidMount(): void {
         const platform = PlatformPeg.get();
 
         const autoLaunchSupported = await platform.supportsAutoLaunch();

src/components/views/voip/CallPreview.js

@@ -40,7 +40,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this.dispatcherRef = dis.register(this._onAction);
     },