Fix some stuff

src/components/structures/EmbeddedPage.js

@@ -43,8 +43,8 @@ export default class EmbeddedPage extends React.PureComponent {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         this._dispatcherRef = null;
 

src/components/structures/RightPanel.js

@@ -42,8 +42,8 @@ export default class RightPanel extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
         this.state = {
             phase: this._getPhaseFromProps(),
             isUserPrivilegedInGroup: null,

src/components/structures/RoomView.js

@@ -99,8 +99,8 @@ export default class RoomView extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         const llMembers = this.context.hasLazyLoadMembersEnabled();
         this.state = {
@@ -186,7 +186,6 @@ export default class RoomView extends React.Component {
         // Start listening for RoomViewStore updates
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
-        this._onRoomViewStoreUpdate(true);
 
         WidgetEchoStore.on('update', this._onWidgetEchoStoreUpdate);
         this._showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
@@ -198,6 +197,11 @@ export default class RoomView extends React.Component {
         this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
     }
 
+    // TODO: [REACT-WARNING] Move into constructor
+    UNSAFE_componentWillMount() {
+        this._onRoomViewStoreUpdate(true);
+    }
+
     _onReadReceiptsChange = () => {
         this.setState({
             showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),

src/components/structures/TimelinePanel.js

@@ -134,13 +134,6 @@ class TimelinePanel extends React.Component {
 
         this._messagePanel = createRef();
 
-        if (this.props.manageReadReceipts) {
-            this.updateReadReceiptOnUserActivity();
-        }
-        if (this.props.manageReadMarkers) {
-            this.updateReadMarkerOnUserActivity();
-        }
-
         // XXX: we could track RM per TimelineSet rather than per Room.
         // but for now we just do it per room for simplicity.
         let initialReadMarker = null;
@@ -225,6 +218,16 @@ class TimelinePanel extends React.Component {
         MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted);
         MatrixClientPeg.get().on("Event.replaced", this.onEventReplaced);
         MatrixClientPeg.get().on("sync", this.onSync);
+    }
+
+    // TODO: [REACT-WARNING] Move into constructor
+    UNSAFE_componentWillMount() {
+        if (this.props.manageReadReceipts) {
+            this.updateReadReceiptOnUserActivity();
+        }
+        if (this.props.manageReadMarkers) {
+            this.updateReadMarkerOnUserActivity();
+        }
 
         this._initTimeline(this.props);
     }
@@ -1360,9 +1363,7 @@ class TimelinePanel extends React.Component {
         });
     }
 
-    getRelationsForEvent(...args) {
+    getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args);
-        return this.props.timelineSet.getRelationsForEvent(...args);
-    }
 
     render() {
         const MessagePanel = sdk.getComponent("structures.MessagePanel");

src/components/views/elements/ReplyThread.js

@@ -45,8 +45,8 @@ export default class ReplyThread extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         this.state = {
             // The loaded events to be rendered as linear-replies

src/components/views/groups/GroupInviteTile.js

@@ -35,8 +35,8 @@ export default class GroupInviteTile extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         this.state = {
             hover: false,

src/components/views/rooms/EventTile.js

@@ -215,8 +215,8 @@ export default class EventTile extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
 
         this.state = {
             // Whether the action bar is focused.
@@ -234,12 +234,16 @@ export default class EventTile extends React.Component {
 
         // don't do RR animations until we are mounted
         this._suppressReadReceiptAnimation = true;
-        this._verifyEvent(this.props.mxEvent);
 
         this._tile = createRef();
         this._replyThread = createRef();
     }
 
+    // TODO: [REACT-WARNING] Move into constructor
+    UNSAFE_componentWillMount() {
+        this._verifyEvent(this.props.mxEvent);
+    }
+
     componentDidMount() {
         this._suppressReadReceiptAnimation = false;
         const client = this.context;

src/components/views/rooms/MemberList.js

@@ -47,13 +47,6 @@ export default class MemberList extends React.Component {
             this.state = this._getMembersState(this.roomMembers());
         }
 
-        this._mounted = true;
-        if (cli.hasLazyLoadMembersEnabled()) {
-            this._showMembersAccordingToMembershipWithLL();
-            cli.on("Room.myMembership", this.onMyMembership);
-        } else {
-            this._listenForMembersChanges();
-        }
         cli.on("Room", this.onRoom); // invites & joining after peek
         const enablePresenceByHsUrl = SdkConfig.get()["enable_presence_by_hs_url"];
         const hsUrl = MatrixClientPeg.get().baseUrl;
@@ -63,6 +56,17 @@ export default class MemberList extends React.Component {
         }
     }
 
+    componentDidMount() {
+        const cli = MatrixClientPeg.get();
+        this._mounted = true;
+        if (cli.hasLazyLoadMembersEnabled()) {
+            this._showMembersAccordingToMembershipWithLL();
+            cli.on("Room.myMembership", this.onMyMembership);
+        } else {
+            this._listenForMembersChanges();
+        }
+    }
+
     _listenForMembersChanges() {
         const cli = MatrixClientPeg.get();
         cli.on("RoomState.members", this.onRoomStateMember);
@@ -412,24 +416,20 @@ export default class MemberList extends React.Component {
         });
     }
 
-    _getChildrenJoined(start, end) {
+    _getChildrenJoined = (start, end) => this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
-        return this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
-    }
 
-    _getChildCountJoined() {
+    _getChildCountJoined = () => this.state.filteredJoinedMembers.length;
-        return this.state.filteredJoinedMembers.length;
-    }
 
-    _getChildrenInvited(start, end) {
+    _getChildrenInvited = (start, end) => {
         let targets = this.state.filteredInvitedMembers;
         if (end > this.state.filteredInvitedMembers.length) {
             targets = targets.concat(this._getPending3PidInvites());
         }
 
         return this._makeMemberTiles(targets.slice(start, end));
-    }
+    };
 
-    _getChildCountInvited() {
+    _getChildCountInvited = () => {
         return this.state.filteredInvitedMembers.length + (this._getPending3PidInvites() || []).length;
     }
 

src/components/views/rooms/SendMessageComposer.js

@@ -99,8 +99,8 @@ export default class SendMessageComposer extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
+    constructor(props, context) {
-        super(props);
+        super(props, context);
         this.model = null;
         this._editorRef = null;
         this.currentlyComposedEditorState = null;