Label and use UNSAFE_componentWillMount to minimize warnings

These TODO comments are expected to be fixed ASAP, but until that happens let's minimize the errors in the console for development.

For https://github.com/vector-im/riot-web/issues/12877

These all aren't using componentDidMount because they do something which causes application instability if componentDidMount were used. Much of these calls are expected to move into constructors once they are converted to real classes.

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

@@ -42,7 +42,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         this._passphrase1 = createRef();

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

@@ -54,7 +54,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
 
         this._file = createRef();

src/components/structures/InteractiveAuth.js

@@ -87,7 +87,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._unmounted = false;
         this._authLogic = new InteractiveAuth({
             authData: this.props.authData,

src/components/structures/LoggedInView.js

@@ -94,7 +94,8 @@ const LoggedInView = createReactClass({
         this._loadResizerPreferences();
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
 

src/components/structures/RoomView.js

@@ -168,7 +168,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         this.context.on("Room", this.onRoom);
         this.context.on("Room.timeline", this.onRoomTimeline);

src/components/structures/ScrollPanel.js

@@ -156,9 +156,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-        this._fillRequestWhileRunning = false;
+    UNSAFE_componentWillMount: function() {
-        this._isFilling = false;
         this._pendingFillRequests = {b: null, f: null};
 
         if (this.props.resizeNotifier) {

src/components/structures/SearchBox.js

@@ -53,6 +53,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._search = createRef();
     },

src/components/structures/TimelinePanel.js

@@ -202,7 +202,8 @@ const TimelinePanel = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         debuglog("TimelinePanel: mounting");
 
         this.lastRRSentEventId = undefined;

src/components/views/auth/CaptchaForm.js

@@ -46,7 +46,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._captchaWidgetId = null;
 
         this._recaptchaContainer = createRef();

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -238,6 +238,7 @@ export const TermsAuthEntry = createReactClass({
         showContinue: PropTypes.bool,
     },
 
+    // TODO: [REACT-WARNING] Move this to constructor
     componentWillMount: function() {
         // example stageParams:
         //
@@ -575,7 +576,8 @@ export const FallbackAuthEntry = createReactClass({
         errorText: PropTypes.string,
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // we have to make the user click a button, as browsers will block
         // the popup if we open it immediately.
         this._popupWindow = null;

src/components/views/dialogs/AddressPickerDialog.js

@@ -107,6 +107,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._textinput = createRef();
     },

src/components/views/dialogs/BaseDialog.js

@@ -86,7 +86,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() {
         this._matrixClient = MatrixClientPeg.get();
     },
 

src/components/views/dialogs/SetMxIdDialog.js

@@ -62,6 +62,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._input_value = createRef();
         this._uiAuth = createRef();

src/components/views/dialogs/TextInputDialog.js

@@ -55,6 +55,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._field = createRef();
     },

src/components/views/elements/Dropdown.js

@@ -116,7 +116,8 @@ export default class Dropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount() {
         this._button = createRef();
         // Listen for all clicks on the document so we can close the
         // menu when the user clicks somewhere else

src/components/views/elements/EditableText.js

@@ -71,7 +71,8 @@ export default createReactClass({
         }
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // we track value as an JS object field rather than in React state
         // as React doesn't play nice with contentEditable.
         this.value = '';

src/components/views/elements/PowerSelector.js

@@ -63,6 +63,7 @@ export default createReactClass({
     },
 
     componentWillMount: function() {
+        // TODO: [REACT-WARNING] Move this to class constructor
         this._initStateFromProps(this.props);
     },
 

src/components/views/elements/UserSelector.js

@@ -35,6 +35,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._user_id_input = createRef();
     },

src/components/views/messages/MFileBody.js

@@ -170,6 +170,7 @@ export default createReactClass({
         return MatrixClientPeg.get().mxcUrlToHttp(content.url);
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._iframe = createRef();
         this._dummyLink = createRef();

src/components/views/messages/MessageEvent.js

@@ -47,6 +47,7 @@ export default createReactClass({
         maxImageHeight: PropTypes.number,
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._body = createRef();
     },

src/components/views/messages/TextualBody.js

@@ -86,6 +86,7 @@ export default createReactClass({
         return successful;
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._content = createRef();
     },

src/components/views/rooms/EventTile.js

@@ -233,7 +233,8 @@ export default createReactClass({
         contextType: MatrixClientContext,
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // don't do RR animations until we are mounted
         this._suppressReadReceiptAnimation = true;
         this._verifyEvent(this.props.mxEvent);

src/components/views/rooms/LinkPreviewWidget.js

@@ -43,7 +43,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this.unmounted = false;
         MatrixClientPeg.get().getUrlPreview(this.props.link, this.props.mxEvent.getTs()).then((res)=>{
             if (this.unmounted) {

src/components/views/rooms/ReadReceiptMarker.js

@@ -87,6 +87,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._avatar = createRef();
     },

src/components/views/rooms/RoomDetailRow.js

@@ -54,6 +54,7 @@ export default createReactClass({
         }
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._topic = createRef();
     },

src/components/views/rooms/RoomHeader.js

@@ -58,6 +58,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._topic = createRef();
     },

src/components/views/rooms/RoomList.js

@@ -118,7 +118,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, put this in the constructor.
+    UNSAFE_componentWillMount: function() {
         this.mounted = false;
 
         const cli = MatrixClientPeg.get();

src/components/views/rooms/RoomTile.js

@@ -224,6 +224,7 @@ export default createReactClass({
         });
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._roomTile = createRef();
     },

src/components/views/rooms/SearchBar.js

@@ -30,6 +30,7 @@ export default createReactClass({
         });
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._search_term = createRef();
     },

src/components/views/rooms/SendMessageComposer.js

@@ -331,7 +331,8 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef.getEditableRootNode().removeEventListener("paste", this._onPaste, true);
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() {
         const partCreator = new CommandPartCreator(this.props.room, this.context);
         const parts = this._restoreStoredEditorState(partCreator) || [];
         this.model = new EditorModel(parts, partCreator);

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js

@@ -38,7 +38,8 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() {
         // we handle lack of this object gracefully later, so don't worry about it failing here.
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         room.getRecommendedVersion().then((v) => {

src/components/views/settings/tabs/room/NotificationSettingsTab.js

@@ -37,7 +37,8 @@ export default class NotificationsSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount() {
         Notifier.getSoundForRoom(this.props.roomId).then((soundData) => {
             if (!soundData) {
                 return;

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js

@@ -41,7 +41,8 @@ export default class SecurityRoomSettingsTab extends React.Component {
         };
     }
 
-    async componentWillMount(): void {
+    // TODO: [REACT-WARNING] Move this to constructor
+    async UNSAFE_componentWillMount(): void {
         MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);

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

@@ -68,7 +68,8 @@ export default class GeneralUserSettingsTab extends React.Component {
         this.dispatcherRef = dis.register(this._onAction);
     }
 
-    async componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    async UNSAFE_componentWillMount() {
         const cli = MatrixClientPeg.get();
 
         const serverSupportsSeparateAddAndBind = await cli.doesServerSupportSeparateAddAndBind();

src/components/views/voip/CallView.js

@@ -57,6 +57,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._video = createRef();
     },

src/components/views/voip/VideoFeed.js

@@ -31,6 +31,7 @@ export default createReactClass({
         onResize: PropTypes.func,
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount() {
         this._vid = createRef();
     },

src/components/views/voip/VideoView.js

@@ -50,6 +50,7 @@ export default createReactClass({
         onResize: PropTypes.func,
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._local = createRef();
         this._remote = createRef();