diff --git a/src/components/structures/EmbeddedPage.js b/src/components/structures/EmbeddedPage.js index 49ba3d1227..cbfeff7582 100644 --- a/src/components/structures/EmbeddedPage.js +++ b/src/components/structures/EmbeddedPage.js @@ -43,8 +43,8 @@ export default class EmbeddedPage extends React.PureComponent { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); this._dispatcherRef = null; diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index a4e3254e4c..24fee80c2a 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -42,8 +42,8 @@ export default class RightPanel extends React.Component { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); this.state = { phase: this._getPhaseFromProps(), isUserPrivilegedInGroup: null, diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 157f7266fa..e1a075f770 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -99,8 +99,8 @@ export default class RoomView extends React.Component { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + 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), diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index d9cec2e054..d1c977f2ca 100644 --- a/src/components/structures/TimelinePanel.js +++ b/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) { - return this.props.timelineSet.getRelationsForEvent(...args); - } + getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args); render() { const MessagePanel = sdk.getComponent("structures.MessagePanel"); diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js index 409bf9e01f..b52c42a894 100644 --- a/src/components/views/elements/ReplyThread.js +++ b/src/components/views/elements/ReplyThread.js @@ -45,8 +45,8 @@ export default class ReplyThread extends React.Component { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); this.state = { // The loaded events to be rendered as linear-replies diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js index 7efb8cf427..0c09b6ed05 100644 --- a/src/components/views/groups/GroupInviteTile.js +++ b/src/components/views/groups/GroupInviteTile.js @@ -35,8 +35,8 @@ export default class GroupInviteTile extends React.Component { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); this.state = { hover: false, diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index d1738301d9..608505adb5 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -215,8 +215,8 @@ export default class EventTile extends React.Component { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + 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; diff --git a/src/components/views/rooms/MemberList.js b/src/components/views/rooms/MemberList.js index 920e3cf691..33b98f977d 100644 --- a/src/components/views/rooms/MemberList.js +++ b/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) { - return this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end)); - } + _getChildrenJoined = (start, end) => this._makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end)); - _getChildCountJoined() { - return this.state.filteredJoinedMembers.length; - } + _getChildCountJoined = () => 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; } diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js index 6a7b2fc753..25dcf8ccd5 100644 --- a/src/components/views/rooms/SendMessageComposer.js +++ b/src/components/views/rooms/SendMessageComposer.js @@ -99,8 +99,8 @@ export default class SendMessageComposer extends React.Component { static contextType = MatrixClientContext; - constructor(props) { - super(props); + constructor(props, context) { + super(props, context); this.model = null; this._editorRef = null; this.currentlyComposedEditorState = null;