From 0bb8973ee6245cb9d5c8c0129c2e6ddfb00c9a7c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 14:30:57 -0600 Subject: [PATCH 1/8] Move rendering of PersistedElements into other lifecycle stages For https://github.com/vector-im/riot-web/issues/12877 Original error: ``` Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of PersistedElement. in PersistedElement (created by AppTile) in div (created by AppTile) in div (created by AppTile) in AppTile (created by AppsDrawer) in div (created by AppsDrawer) in div (created by AppsDrawer) in AppsDrawer (created by AuxPanel) in div (created by AutoHideScrollbar) in AutoHideScrollbar (created by AuxPanel) in AuxPanel (created by RoomView) in div (created by RoomView) in div (created by MainSplit) in MainSplit (created by RoomView) in ErrorBoundary (created by RoomView) in main (created by RoomView) in RoomView (created by LoggedInView) in div (created by LoggedInView) in DragDropContext (created by LoggedInView) in div (created by LoggedInView) in LoggedInView (created by MatrixChat) in ErrorBoundary (created by MatrixChat) in MatrixChat ``` --- .../views/elements/PersistedElement.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js index d23d6488b6..53f2501f19 100644 --- a/src/components/views/elements/PersistedElement.js +++ b/src/components/views/elements/PersistedElement.js @@ -113,10 +113,12 @@ export default class PersistedElement extends React.Component { componentDidMount() { this.updateChild(); + this.renderApp(); } componentDidUpdate() { this.updateChild(); + this.renderApp(); } componentWillUnmount() { @@ -141,6 +143,14 @@ export default class PersistedElement extends React.Component { this.updateChildVisibility(this.child, true); } + renderApp() { + const content =
+ {this.props.children} +
; + + ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey)); + } + updateChildVisibility(child, visible) { if (!child) return; child.style.display = visible ? 'block' : 'none'; @@ -160,12 +170,6 @@ export default class PersistedElement extends React.Component { } render() { - const content =
- {this.props.children} -
; - - ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey)); - return
; } } From ab6bd4104f42e7bacbab1a206cc224dd8a40193b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 14:32:35 -0600 Subject: [PATCH 2/8] Flag componentWillUpdate as UNSAFE in MatrixChat For https://github.com/vector-im/riot-web/issues/12877 --- src/components/structures/MatrixChat.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 4ef0f60e4b..09d4740c73 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -360,7 +360,8 @@ export default createReactClass({ if (this._accountPasswordTimer !== null) clearTimeout(this._accountPasswordTimer); }, - componentWillUpdate: function(props, state) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle stage + UNSAFE_componentWillUpdate: function(props, state) { if (this.shouldTrackPageChange(this.state, state)) { this.startPageChangeTimer(); } @@ -381,7 +382,7 @@ export default createReactClass({ // Tor doesn't support performance if (!performance || !performance.mark) return null; - // This shouldn't happen because componentWillUpdate and componentDidUpdate + // This shouldn't happen because UNSAFE_componentWillUpdate and componentDidUpdate // are used. if (this._pageChanging) { console.warn('MatrixChat.startPageChangeTimer: timer already started'); From 47e5cfecf211e56046be53a24837e266b87e7730 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 14:35:39 -0600 Subject: [PATCH 3/8] Silence usages of componentWillReceiveProps For https://github.com/vector-im/riot-web/issues/12877 --- src/components/structures/GroupView.js | 5 +++-- src/components/structures/RightPanel.js | 3 ++- src/components/structures/TimelinePanel.js | 3 ++- src/components/structures/auth/ForgotPassword.js | 3 ++- src/components/structures/auth/Login.js | 3 ++- src/components/structures/auth/Registration.js | 3 ++- src/components/views/auth/ServerConfig.js | 3 ++- src/components/views/avatars/BaseAvatar.js | 3 ++- src/components/views/avatars/MemberAvatar.js | 3 ++- src/components/views/avatars/RoomAvatar.js | 3 ++- src/components/views/dialogs/DevtoolsDialog.js | 3 ++- src/components/views/elements/AddressSelector.js | 3 ++- src/components/views/elements/AppTile.js | 3 ++- src/components/views/elements/Dropdown.js | 3 ++- src/components/views/elements/EditableText.js | 3 ++- src/components/views/elements/Flair.js | 3 ++- src/components/views/elements/Pill.js | 5 +++-- src/components/views/elements/PowerSelector.js | 3 ++- src/components/views/elements/SyntaxHighlight.js | 1 - src/components/views/groups/GroupMemberInfo.js | 3 ++- src/components/views/groups/GroupRoomInfo.js | 3 ++- src/components/views/rooms/AppsDrawer.js | 3 ++- src/components/views/rooms/EventTile.js | 3 ++- src/components/views/rooms/MemberInfo.js | 3 ++- src/components/views/rooms/RoomTile.js | 3 ++- src/components/views/settings/ChangeAvatar.js | 3 ++- src/components/views/settings/discovery/EmailAddresses.js | 3 ++- src/components/views/settings/discovery/PhoneNumbers.js | 3 ++- 28 files changed, 56 insertions(+), 30 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 73a8879f6d..3b32e5c907 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -450,8 +450,9 @@ export default createReactClass({ } }, - componentWillReceiveProps: function(newProps) { - if (this.props.groupId != newProps.groupId) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { + if (this.props.groupId !== newProps.groupId) { this.setState({ summary: null, error: null, diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 5e556419cc..856a3764a1 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -123,7 +123,8 @@ export default class RightPanel extends React.Component { this._unregisterGroupStore(this.props.groupId); } - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.groupId !== this.props.groupId) { this._unregisterGroupStore(this.props.groupId); this._initGroupStore(newProps.groupId); diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 1bea707fd3..6a08cd78eb 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -235,7 +235,8 @@ const TimelinePanel = createReactClass({ this._initTimeline(this.props); }, - componentWillReceiveProps: function(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { if (newProps.timelineSet !== this.props.timelineSet) { // throw new Error("changing timelineSet on a TimelinePanel is not supported"); diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js index dc3f4a0a2b..9877c53106 100644 --- a/src/components/structures/auth/ForgotPassword.js +++ b/src/components/structures/auth/ForgotPassword.js @@ -74,7 +74,8 @@ export default createReactClass({ this._checkServerLiveliness(this.props.serverConfig); }, - componentWillReceiveProps: function(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl && newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return; diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index ef9d4c59c0..836e5bd93d 100644 --- a/src/components/structures/auth/Login.js +++ b/src/components/structures/auth/Login.js @@ -134,7 +134,8 @@ export default createReactClass({ this._unmounted = true; }, - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl && newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return; diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js index 45d775059c..08c2a11641 100644 --- a/src/components/structures/auth/Registration.js +++ b/src/components/structures/auth/Registration.js @@ -125,7 +125,8 @@ export default createReactClass({ this._replaceClient(); }, - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl && newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return; diff --git a/src/components/views/auth/ServerConfig.js b/src/components/views/auth/ServerConfig.js index 37517c7484..7ec4311d2f 100644 --- a/src/components/views/auth/ServerConfig.js +++ b/src/components/views/auth/ServerConfig.js @@ -72,7 +72,8 @@ export default class ServerConfig extends React.PureComponent { }; } - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.serverConfig.hsUrl === this.state.hsUrl && newProps.serverConfig.isUrl === this.state.isUrl) return; diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index 4c34cee853..3e3a2e6bd9 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -74,7 +74,8 @@ export default createReactClass({ this.context.removeListener('sync', this.onClientSync); }, - componentWillReceiveProps: function(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(nextProps) { // work out if we need to call setState (if the image URLs array has changed) const newState = this._getState(nextProps); const newImageUrls = newState.imageUrls; diff --git a/src/components/views/avatars/MemberAvatar.js b/src/components/views/avatars/MemberAvatar.js index a07a184aa1..826aa5fddf 100644 --- a/src/components/views/avatars/MemberAvatar.js +++ b/src/components/views/avatars/MemberAvatar.js @@ -51,7 +51,8 @@ export default createReactClass({ return this._getState(this.props); }, - componentWillReceiveProps: function(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(nextProps) { this.setState(this._getState(nextProps)); }, diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js index c79e1827da..a72d318b8d 100644 --- a/src/components/views/avatars/RoomAvatar.js +++ b/src/components/views/avatars/RoomAvatar.js @@ -63,7 +63,8 @@ export default createReactClass({ } }, - componentWillReceiveProps: function(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { this.setState({ urls: this.getImageUrls(newProps), }); diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js index 0f3fa8f5b5..a07750a768 100644 --- a/src/components/views/dialogs/DevtoolsDialog.js +++ b/src/components/views/dialogs/DevtoolsDialog.js @@ -267,7 +267,8 @@ class FilteredList extends React.PureComponent { }; } - componentWillReceiveProps(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(nextProps) { if (this.props.children === nextProps.children && this.props.query === nextProps.query) return; this.setState({ filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query), diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js index febe0ff480..ab29723a45 100644 --- a/src/components/views/elements/AddressSelector.js +++ b/src/components/views/elements/AddressSelector.js @@ -46,7 +46,8 @@ export default createReactClass({ }; }, - componentWillReceiveProps: function(props) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(props) { // Make sure the selected item isn't outside the list bounds const selected = this.state.selected; const maxSelected = this._maxSelected(props.addressList); diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 8940a175e9..7696db9cf6 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -262,7 +262,8 @@ export default class AppTile extends React.Component { }); } - componentWillReceiveProps(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.app.url !== this.props.app.url) { this._getNewState(nextProps); // Fetch IM token for new URL if we're showing and have permission to load diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js index ed5928eb08..2651f8e039 100644 --- a/src/components/views/elements/Dropdown.js +++ b/src/components/views/elements/Dropdown.js @@ -128,7 +128,8 @@ export default class Dropdown extends React.Component { document.removeEventListener('click', this._onDocumentClick, false); } - componentWillReceiveProps(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(nextProps) { if (!nextProps.children || nextProps.children.length === 0) { return; } diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js index af05600e3c..82f5eef125 100644 --- a/src/components/views/elements/EditableText.js +++ b/src/components/views/elements/EditableText.js @@ -62,7 +62,8 @@ export default createReactClass({ }; }, - componentWillReceiveProps: function(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(nextProps) { if (nextProps.initialValue !== this.props.initialValue) { this.value = nextProps.initialValue; if (this._editable_div.current) { diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js index 0af772466b..a8c804c534 100644 --- a/src/components/views/elements/Flair.js +++ b/src/components/views/elements/Flair.js @@ -81,7 +81,8 @@ export default class Flair extends React.Component { this._unmounted = true; } - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { this._generateAvatars(newProps.groups); } diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index 28a26be06c..1e31c634f7 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.js @@ -82,7 +82,8 @@ const Pill = createReactClass({ }; }, - async componentWillReceiveProps(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + async UNSAFE_componentWillReceiveProps(nextProps) { let resourceId; let prefix; @@ -158,7 +159,7 @@ const Pill = createReactClass({ componentDidMount() { this._unmounted = false; this._matrixClient = MatrixClientPeg.get(); - this.componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves. + this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves. }, componentWillUnmount() { diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js index 43fd3c2f84..948b4835d5 100644 --- a/src/components/views/elements/PowerSelector.js +++ b/src/components/views/elements/PowerSelector.js @@ -67,7 +67,8 @@ export default createReactClass({ this._initStateFromProps(this.props); }, - componentWillReceiveProps: function(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { this._initStateFromProps(newProps); }, diff --git a/src/components/views/elements/SyntaxHighlight.js b/src/components/views/elements/SyntaxHighlight.js index bce65cf1a9..a4dc97d46e 100644 --- a/src/components/views/elements/SyntaxHighlight.js +++ b/src/components/views/elements/SyntaxHighlight.js @@ -31,7 +31,6 @@ export default class SyntaxHighlight extends React.Component { } // componentDidUpdate used here for reusability - // componentWillReceiveProps fires too early to call highlightBlock on. componentDidUpdate() { if (this._el) highlightBlock(this._el); } diff --git a/src/components/views/groups/GroupMemberInfo.js b/src/components/views/groups/GroupMemberInfo.js index 95517ef548..9f5660386b 100644 --- a/src/components/views/groups/GroupMemberInfo.js +++ b/src/components/views/groups/GroupMemberInfo.js @@ -54,7 +54,8 @@ export default createReactClass({ this._initGroupStore(this.props.groupId); }, - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.groupId !== this.props.groupId) { this._unregisterGroupStore(this.props.groupId); this._initGroupStore(newProps.groupId); diff --git a/src/components/views/groups/GroupRoomInfo.js b/src/components/views/groups/GroupRoomInfo.js index 789396e719..3a20de7eca 100644 --- a/src/components/views/groups/GroupRoomInfo.js +++ b/src/components/views/groups/GroupRoomInfo.js @@ -51,7 +51,8 @@ export default createReactClass({ this._initGroupStore(this.props.groupId); }, - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.groupId !== this.props.groupId) { this._unregisterGroupStore(this.props.groupId); this._initGroupStore(newProps.groupId); diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index 785d7ecccb..f7c5e8122f 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -71,7 +71,8 @@ export default createReactClass({ if (this.dispatcherRef) dis.unregister(this.dispatcherRef); }, - componentWillReceiveProps(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(newProps) { // Room has changed probably, update apps this._updateApps(); }, diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index a381a02d80..aed2d4b25b 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -254,7 +254,8 @@ export default createReactClass({ } }, - componentWillReceiveProps: function(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(nextProps) { // re-check the sender verification as outgoing events progress through // the send process. if (nextProps.eventSendStatus !== this.props.eventSendStatus) { diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index b387cefe91..9fdd2abedf 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -103,7 +103,8 @@ export default createReactClass({ this._updateStateForNewMember(this.props.member); }, - componentWillReceiveProps: function(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { if (this.props.member.userId !== newProps.member.userId) { this._updateStateForNewMember(newProps.member); } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index 2c7ef8b6c0..0b06be48af 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -283,7 +283,8 @@ export default createReactClass({ } }, - componentWillReceiveProps: function(props) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(props) { // XXX: This could be a lot better - this makes the assumption that // the notification count may have changed when the properties of // the room tile change. diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js index 76644d38bc..d8baafd1bb 100644 --- a/src/components/views/settings/ChangeAvatar.js +++ b/src/components/views/settings/ChangeAvatar.js @@ -59,7 +59,8 @@ export default createReactClass({ MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents); }, - componentWillReceiveProps: function(newProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps: function(newProps) { if (this.avatarSet) { // don't clobber what the user has just set return; diff --git a/src/components/views/settings/discovery/EmailAddresses.js b/src/components/views/settings/discovery/EmailAddresses.js index afc538bd33..3a5a28fc43 100644 --- a/src/components/views/settings/discovery/EmailAddresses.js +++ b/src/components/views/settings/discovery/EmailAddresses.js @@ -58,7 +58,8 @@ export class EmailAddress extends React.Component { }; } - componentWillReceiveProps(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(nextProps) { const { bound } = nextProps.email; this.setState({ bound }); } diff --git a/src/components/views/settings/discovery/PhoneNumbers.js b/src/components/views/settings/discovery/PhoneNumbers.js index 9addcda093..813623b7b9 100644 --- a/src/components/views/settings/discovery/PhoneNumbers.js +++ b/src/components/views/settings/discovery/PhoneNumbers.js @@ -50,7 +50,8 @@ export class PhoneNumber extends React.Component { }; } - componentWillReceiveProps(nextProps) { + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event + UNSAFE_componentWillReceiveProps(nextProps) { const { bound } = nextProps.msisdn; this.setState({ bound }); } From f2c41a5da76a2088515be02a7b23b282d503fed4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 14:40:51 -0600 Subject: [PATCH 4/8] Silence another console.warn that should have been a log --- src/FromWidgetPostMessageApi.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/FromWidgetPostMessageApi.js b/src/FromWidgetPostMessageApi.js index c7d1714b69..c9793d40f7 100644 --- a/src/FromWidgetPostMessageApi.js +++ b/src/FromWidgetPostMessageApi.js @@ -100,7 +100,7 @@ export default class FromWidgetPostMessageApi { console.warn('Add FromWidgetPostMessageApi - Endpoint already registered'); return; } else { - console.warn(`Adding fromWidget messaging endpoint for ${widgetId}`, endpoint); + console.log(`Adding fromWidget messaging endpoint for ${widgetId}`, endpoint); this.widgetMessagingEndpoints.push(endpoint); } } From 5c2841323e58d5b22f488a3fc47607b9387a8463 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 14:45:54 -0600 Subject: [PATCH 5/8] Appease the linter by turning it off --- src/components/structures/RightPanel.js | 2 +- src/components/views/auth/ServerConfig.js | 2 +- src/components/views/dialogs/DevtoolsDialog.js | 2 +- src/components/views/elements/AppTile.js | 2 +- src/components/views/elements/Dropdown.js | 2 +- src/components/views/elements/Flair.js | 2 +- src/components/views/elements/Pill.js | 2 +- src/components/views/settings/discovery/EmailAddresses.js | 2 +- src/components/views/settings/discovery/PhoneNumbers.js | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index 856a3764a1..3c97d2f4ae 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -124,7 +124,7 @@ export default class RightPanel extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(newProps) { + UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase if (newProps.groupId !== this.props.groupId) { this._unregisterGroupStore(this.props.groupId); this._initGroupStore(newProps.groupId); diff --git a/src/components/views/auth/ServerConfig.js b/src/components/views/auth/ServerConfig.js index 7ec4311d2f..ee6f57a521 100644 --- a/src/components/views/auth/ServerConfig.js +++ b/src/components/views/auth/ServerConfig.js @@ -73,7 +73,7 @@ export default class ServerConfig extends React.PureComponent { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(newProps) { + UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase if (newProps.serverConfig.hsUrl === this.state.hsUrl && newProps.serverConfig.isUrl === this.state.isUrl) return; diff --git a/src/components/views/dialogs/DevtoolsDialog.js b/src/components/views/dialogs/DevtoolsDialog.js index a07750a768..de0923306f 100644 --- a/src/components/views/dialogs/DevtoolsDialog.js +++ b/src/components/views/dialogs/DevtoolsDialog.js @@ -268,7 +268,7 @@ class FilteredList extends React.PureComponent { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase if (this.props.children === nextProps.children && this.props.query === nextProps.query) return; this.setState({ filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query), diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js index 7696db9cf6..c49510b8b6 100644 --- a/src/components/views/elements/AppTile.js +++ b/src/components/views/elements/AppTile.js @@ -263,7 +263,7 @@ export default class AppTile extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase if (nextProps.app.url !== this.props.app.url) { this._getNewState(nextProps); // Fetch IM token for new URL if we're showing and have permission to load diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js index 2651f8e039..6b3efb5ee1 100644 --- a/src/components/views/elements/Dropdown.js +++ b/src/components/views/elements/Dropdown.js @@ -129,7 +129,7 @@ export default class Dropdown extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase if (!nextProps.children || nextProps.children.length === 0) { return; } diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js index a8c804c534..bc657e9e91 100644 --- a/src/components/views/elements/Flair.js +++ b/src/components/views/elements/Flair.js @@ -82,7 +82,7 @@ export default class Flair extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(newProps) { + UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase this._generateAvatars(newProps.groups); } diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index 1e31c634f7..0b60d7093b 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.js @@ -83,7 +83,7 @@ const Pill = createReactClass({ }, // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - async UNSAFE_componentWillReceiveProps(nextProps) { + async UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line new-cap let resourceId; let prefix; diff --git a/src/components/views/settings/discovery/EmailAddresses.js b/src/components/views/settings/discovery/EmailAddresses.js index 3a5a28fc43..f9a1ba1818 100644 --- a/src/components/views/settings/discovery/EmailAddresses.js +++ b/src/components/views/settings/discovery/EmailAddresses.js @@ -59,7 +59,7 @@ export class EmailAddress extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase const { bound } = nextProps.email; this.setState({ bound }); } diff --git a/src/components/views/settings/discovery/PhoneNumbers.js b/src/components/views/settings/discovery/PhoneNumbers.js index 813623b7b9..03f459ee15 100644 --- a/src/components/views/settings/discovery/PhoneNumbers.js +++ b/src/components/views/settings/discovery/PhoneNumbers.js @@ -51,7 +51,7 @@ export class PhoneNumber extends React.Component { } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase const { bound } = nextProps.msisdn; this.setState({ bound }); } From 31ec984c861e37173a1b89f669cebe9b6b60ec82 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 14:49:39 -0600 Subject: [PATCH 6/8] Actually appease the linter --- src/components/views/elements/Pill.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js index 0b60d7093b..1df12738c5 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.js @@ -83,7 +83,7 @@ const Pill = createReactClass({ }, // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - async UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line new-cap + async UNSAFE_componentWillReceiveProps(nextProps) { let resourceId; let prefix; @@ -159,6 +159,8 @@ const Pill = createReactClass({ componentDidMount() { this._unmounted = false; this._matrixClient = MatrixClientPeg.get(); + + // eslint-disable-next-line new-cap this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves. }, From 8e405dda2e5ec77f9063ced1abd0154eab96bad4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 16:22:42 -0600 Subject: [PATCH 7/8] Fix soft crash when editing message Fixes https://github.com/matrix-org/riot-web-rageshakes/issues/2504 --- src/components/views/rooms/BasicMessageComposer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index df62823360..a967488ad3 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -94,7 +94,8 @@ export default class BasicMessageEditor extends React.Component { this._emoticonSettingHandle = null; } - componentDidUpdate(prevProps) { + // TODO: [REACT-WARNING] Move into better lifecycle position + UNSAFE_componentWillUpdate(prevProps) { if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) { const {isEmpty} = this.props.model; if (isEmpty) { From c5cf04f6d2566e4ab46e951290aa0cc2c8a6d73a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 1 Apr 2020 16:25:59 -0600 Subject: [PATCH 8/8] More appeasing of the linter --- src/components/views/rooms/BasicMessageComposer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js index a967488ad3..7042cdc00d 100644 --- a/src/components/views/rooms/BasicMessageComposer.js +++ b/src/components/views/rooms/BasicMessageComposer.js @@ -95,7 +95,7 @@ export default class BasicMessageEditor extends React.Component { } // TODO: [REACT-WARNING] Move into better lifecycle position - UNSAFE_componentWillUpdate(prevProps) { + UNSAFE_componentWillUpdate(prevProps) { // eslint-disable-line camelcase if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) { const {isEmpty} = this.props.model; if (isEmpty) {