From 8a43cb3709104c9cab67b16eb2d48fb3e3dec346 Mon Sep 17 00:00:00 2001 From: crockwave Date: Thu, 18 Jun 2020 20:30:46 -0500 Subject: [PATCH 1/3] partial completion of replacing componentWillReceiveProps --- app/soapbox/components/autosuggest_input.js | 9 ++++++--- app/soapbox/components/autosuggest_textarea.js | 9 ++++++--- app/soapbox/components/media_gallery.js | 18 ++++++++++++------ app/soapbox/components/modal_root.js | 7 ++----- 4 files changed, 26 insertions(+), 17 deletions(-) diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js index 3136325a0..8b4180b5b 100644 --- a/app/soapbox/components/autosuggest_input.js +++ b/app/soapbox/components/autosuggest_input.js @@ -153,10 +153,13 @@ export default class AutosuggestInput extends ImmutablePureComponent { this.input.focus(); } - componentWillReceiveProps(nextProps) { - if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) { - this.setState({ suggestionsHidden: false }); + static getDerivedStateFromProps(nextProps, state) { + if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) { + return { + suggestionsHidden: false, + }; } + return null; } setInput = (c) => { diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index cae6116d4..4f686ac37 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -159,10 +159,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.textarea.focus(); } - componentWillReceiveProps(nextProps) { - if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) { - this.setState({ suggestionsHidden: false }); + static getDerivedStateFromProps(nextProps, state) { + if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) { + return { + suggestionsHidden: false, + }; } + return null; } setTextarea = (c) => { diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 4ab6e53e0..66719d2b9 100644 --- a/app/soapbox/components/media_gallery.js +++ b/app/soapbox/components/media_gallery.js @@ -267,15 +267,21 @@ class MediaGallery extends React.PureComponent { state = { visible: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'), width: this.props.defaultWidth, + media: this.props.media, + displayMedia: this.props.displayMedia, }; - componentWillReceiveProps(nextProps) { - const { displayMedia } = this.props; - if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) { - this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' }); - } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { - this.setState({ visible: nextProps.visible }); + static getDerivedStateFromProps(nextProps, state) { + if (!is(nextProps.media, state.media) && nextProps.visible === undefined) { + return { + visible: state.displayMedia !== 'hide_all' && !nextProps.sensitive || state.displayMedia === 'show_all', + }; + } else if (!is(nextProps.visible, state.visible) && nextProps.visible !== undefined) { + return { + visible: nextProps.visible, + }; } + return null; } handleOpen = () => { diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js index 17cdaa64a..9857ad616 100644 --- a/app/soapbox/components/modal_root.js +++ b/app/soapbox/components/modal_root.js @@ -78,21 +78,18 @@ class ModalRoot extends React.PureComponent { window.addEventListener('keyup', this.handleKeyUp, false); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps, prevProps) { if (!!nextProps.children && !this.props.children) { this.activeElement = document.activeElement; - this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); } else if (!nextProps.children) { this.setState({ revealed: false }); } if (!nextProps.children && !!this.props.children) { + this.activeElement = document.activeElement; this.activeElement.focus(); this.activeElement = null; } - } - - componentDidUpdate(prevProps) { if (!this.props.children && !!prevProps.children) { this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); } From 3d29f7b6e2d559126017bdeb97bbf43bc0aab9fd Mon Sep 17 00:00:00 2001 From: crockwave Date: Mon, 22 Jun 2020 20:26:20 -0500 Subject: [PATCH 2/3] partial mods to replace deprecated componentWillReceiveProps --- app/soapbox/components/relative_timestamp.js | 2 +- app/soapbox/features/account_gallery/index.js | 2 +- app/soapbox/features/account_timeline/index.js | 2 +- .../features/compose/components/emoji_picker_dropdown.js | 2 +- app/soapbox/features/favourites/index.js | 2 +- app/soapbox/features/followers/index.js | 2 +- app/soapbox/features/following/index.js | 2 +- app/soapbox/features/groups/edit/index.js | 2 +- app/soapbox/features/groups/members/index.js | 2 +- app/soapbox/features/groups/removed_accounts/index.js | 2 +- app/soapbox/features/hashtag_timeline/index.js | 2 +- app/soapbox/features/list_timeline/index.js | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/soapbox/components/relative_timestamp.js b/app/soapbox/components/relative_timestamp.js index e66c031c1..b089c6dfc 100644 --- a/app/soapbox/components/relative_timestamp.js +++ b/app/soapbox/components/relative_timestamp.js @@ -137,7 +137,7 @@ class RelativeTimestamp extends React.Component { this.state.now !== nextState.now; } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (this.props.timestamp !== nextProps.timestamp) { this.setState({ now: Date.now() }); } diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js index de2213b07..0b55a0cb0 100644 --- a/app/soapbox/features/account_gallery/index.js +++ b/app/soapbox/features/account_gallery/index.js @@ -97,7 +97,7 @@ class AccountGallery extends ImmutablePureComponent { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) { this.props.dispatch(fetchAccount(nextProps.params.accountId)); this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId)); diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js index 4bd7090c0..131da0579 100644 --- a/app/soapbox/features/account_timeline/index.js +++ b/app/soapbox/features/account_timeline/index.js @@ -81,7 +81,7 @@ class AccountTimeline extends ImmutablePureComponent { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { const { me } = nextProps; if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId) || nextProps.withReplies !== this.props.withReplies) { this.props.dispatch(fetchAccount(nextProps.accountId)); diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js index f88df3a49..dc3ec4c7f 100644 --- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js +++ b/app/soapbox/features/compose/components/emoji_picker_dropdown.js @@ -56,7 +56,7 @@ class ModifierPickerMenu extends React.PureComponent { this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.active) { this.attachListeners(); } else { diff --git a/app/soapbox/features/favourites/index.js b/app/soapbox/features/favourites/index.js index 84cb94c1a..0097315bb 100644 --- a/app/soapbox/features/favourites/index.js +++ b/app/soapbox/features/favourites/index.js @@ -27,7 +27,7 @@ class Favourites extends ImmutablePureComponent { this.props.dispatch(fetchFavourites(this.props.params.statusId)); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { this.props.dispatch(fetchFavourites(nextProps.params.statusId)); } diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js index 86709545e..48eeabb0b 100644 --- a/app/soapbox/features/followers/index.js +++ b/app/soapbox/features/followers/index.js @@ -69,7 +69,7 @@ class Followers extends ImmutablePureComponent { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) { this.props.dispatch(fetchAccount(nextProps.accountId)); this.props.dispatch(fetchFollowers(nextProps.accountId)); diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js index db42b53b3..8cfdbecf6 100644 --- a/app/soapbox/features/following/index.js +++ b/app/soapbox/features/following/index.js @@ -69,7 +69,7 @@ class Following extends ImmutablePureComponent { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) { this.props.dispatch(fetchAccount(nextProps.accountId)); this.props.dispatch(fetchFollowing(nextProps.accountId)); diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js index f63447b2f..e431faa42 100644 --- a/app/soapbox/features/groups/edit/index.js +++ b/app/soapbox/features/groups/edit/index.js @@ -61,7 +61,7 @@ class Edit extends React.PureComponent { } } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (!this.props.group && nextProps.group) { this.props.setUp(nextProps.group); } diff --git a/app/soapbox/features/groups/members/index.js b/app/soapbox/features/groups/members/index.js index adf1984ca..3e7f6128d 100644 --- a/app/soapbox/features/groups/members/index.js +++ b/app/soapbox/features/groups/members/index.js @@ -36,7 +36,7 @@ class GroupMembers extends ImmutablePureComponent { this.props.dispatch(fetchMembers(id)); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.params.id !== this.props.params.id) { this.props.dispatch(fetchMembers(nextProps.params.id)); } diff --git a/app/soapbox/features/groups/removed_accounts/index.js b/app/soapbox/features/groups/removed_accounts/index.js index c3431fe2f..a375ca90c 100644 --- a/app/soapbox/features/groups/removed_accounts/index.js +++ b/app/soapbox/features/groups/removed_accounts/index.js @@ -43,7 +43,7 @@ class GroupRemovedAccounts extends ImmutablePureComponent { this.props.dispatch(fetchRemovedAccounts(id)); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.params.id !== this.props.params.id) { this.props.dispatch(fetchRemovedAccounts(nextProps.params.id)); } diff --git a/app/soapbox/features/hashtag_timeline/index.js b/app/soapbox/features/hashtag_timeline/index.js index c73c7ce35..c841aeea4 100644 --- a/app/soapbox/features/hashtag_timeline/index.js +++ b/app/soapbox/features/hashtag_timeline/index.js @@ -81,7 +81,7 @@ class HashtagTimeline extends React.PureComponent { dispatch(expandHashtagTimeline(id, { tags })); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { const { dispatch, params } = this.props; const { id, tags } = nextProps.params; diff --git a/app/soapbox/features/list_timeline/index.js b/app/soapbox/features/list_timeline/index.js index 349052ab3..a606d90dc 100644 --- a/app/soapbox/features/list_timeline/index.js +++ b/app/soapbox/features/list_timeline/index.js @@ -50,7 +50,7 @@ class ListTimeline extends React.PureComponent { this.handleDisconnect(); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.params.id !== this.props.params.id) { this.handleDisconnect(); this.handleConnect(nextProps.params.id); From 81f9a1da3a4fcc77136dad20215a9a5471f391f7 Mon Sep 17 00:00:00 2001 From: crockwave Date: Wed, 24 Jun 2020 16:02:14 -0500 Subject: [PATCH 3/3] Final commit on replacing componentWillReceiveProps deprecated method --- app/soapbox/features/reblogs/index.js | 2 +- .../features/search/components/header.js | 2 +- .../features/status/components/card.js | 2 +- app/soapbox/features/status/index.js | 22 +++++++++---------- app/soapbox/features/ui/components/bundle.js | 2 +- .../ui/components/focal_point_modal.js | 2 +- .../features/ui/components/image_loader.js | 2 +- .../features/ui/components/report_modal.js | 2 +- app/soapbox/features/video/index.js | 2 +- 9 files changed, 18 insertions(+), 20 deletions(-) diff --git a/app/soapbox/features/reblogs/index.js b/app/soapbox/features/reblogs/index.js index d71c4330b..0c7c667aa 100644 --- a/app/soapbox/features/reblogs/index.js +++ b/app/soapbox/features/reblogs/index.js @@ -41,7 +41,7 @@ class Reblogs extends ImmutablePureComponent { this.props.dispatch(fetchStatus(this.props.params.statusId)); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { this.props.dispatch(fetchReblogs(nextProps.params.statusId)); this.props.dispatch(fetchStatus(nextProps.params.statusId)); diff --git a/app/soapbox/features/search/components/header.js b/app/soapbox/features/search/components/header.js index 02f7cd36e..82ccb46c6 100644 --- a/app/soapbox/features/search/components/header.js +++ b/app/soapbox/features/search/components/header.js @@ -21,7 +21,7 @@ class Header extends ImmutablePureComponent { submittedValue: '', }; - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (nextProps.submitted) { const submittedValue = nextProps.value; this.setState({ submittedValue }); diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js index af2308461..bbca9db93 100644 --- a/app/soapbox/features/status/components/card.js +++ b/app/soapbox/features/status/components/card.js @@ -75,7 +75,7 @@ export default class Card extends React.PureComponent { embedded: false, }; - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (!Immutable.is(this.props.card, nextProps.card)) { this.setState({ embedded: false }); } diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index be2227311..b68c6f6af 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -147,17 +147,6 @@ class Status extends ImmutablePureComponent { attachFullscreenListener(this.onFullScreenChange); } - componentWillReceiveProps(nextProps) { - if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { - this._scrolledIntoView = false; - this.props.dispatch(fetchStatus(nextProps.params.statusId)); - } - - if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) { - this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') }); - } - } - handleToggleMediaVisibility = () => { this.setState({ showMedia: !this.state.showMedia }); } @@ -404,7 +393,16 @@ class Status extends ImmutablePureComponent { this.node = c; } - componentDidUpdate() { + componentDidUpdate(nextProps) { + if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { + this._scrolledIntoView = false; + this.props.dispatch(fetchStatus(nextProps.params.statusId)); + } + + if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) { + this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') }); + } + if (this._scrolledIntoView) { return; } diff --git a/app/soapbox/features/ui/components/bundle.js b/app/soapbox/features/ui/components/bundle.js index a3c7ab77e..532bff159 100644 --- a/app/soapbox/features/ui/components/bundle.js +++ b/app/soapbox/features/ui/components/bundle.js @@ -37,7 +37,7 @@ class Bundle extends React.PureComponent { this.load(this.props); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.fetchComponent !== this.props.fetchComponent) { this.load(nextProps); } diff --git a/app/soapbox/features/ui/components/focal_point_modal.js b/app/soapbox/features/ui/components/focal_point_modal.js index 9ec15768a..9119a192e 100644 --- a/app/soapbox/features/ui/components/focal_point_modal.js +++ b/app/soapbox/features/ui/components/focal_point_modal.js @@ -38,7 +38,7 @@ class FocalPointModal extends ImmutablePureComponent { this.updatePositionFromMedia(this.props.media); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (this.props.media.get('id') !== nextProps.media.get('id')) { this.updatePositionFromMedia(nextProps.media); } diff --git a/app/soapbox/features/ui/components/image_loader.js b/app/soapbox/features/ui/components/image_loader.js index 02a0441fa..939886f17 100644 --- a/app/soapbox/features/ui/components/image_loader.js +++ b/app/soapbox/features/ui/components/image_loader.js @@ -42,7 +42,7 @@ export default class ImageLoader extends React.PureComponent { this.loadImage(this.props); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (this.props.src !== nextProps.src) { this.loadImage(nextProps); } diff --git a/app/soapbox/features/ui/components/report_modal.js b/app/soapbox/features/ui/components/report_modal.js index fcd31afb1..dbe48f27f 100644 --- a/app/soapbox/features/ui/components/report_modal.js +++ b/app/soapbox/features/ui/components/report_modal.js @@ -83,7 +83,7 @@ class ReportModal extends ImmutablePureComponent { this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true })); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (this.props.account !== nextProps.account && nextProps.account) { this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true })); } diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js index d49e08e65..490748274 100644 --- a/app/soapbox/features/video/index.js +++ b/app/soapbox/features/video/index.js @@ -291,7 +291,7 @@ class Video extends React.PureComponent { document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { this.setState({ revealed: nextProps.visible }); }