bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'componentWillReceiveProps_to_DidUpdate_refactor' into 'develop'

Browse source 
Component will receive props to did update refactor Fixes #184

Closes #184

See merge request soapbox-pub/soapbox-fe!80
This commit is contained in:
Alex Gleason 2020-06-27 00:23:44 +00:00
commit ecf26de289
25 changed files with 56 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/soapbox/components/autosuggest_input.js
View file

@ -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) => {

9
app/soapbox/components/autosuggest_textarea.js
View file

@ -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) => {

18
app/soapbox/components/media_gallery.js
View file

@ -234,15 +234,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 = () => {

7
app/soapbox/components/modal_root.js
View file

@ -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'));
}

2
app/soapbox/components/relative_timestamp.js
View file

@ -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() });
}

2
app/soapbox/features/account_gallery/index.js
View file

@ -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));

2
app/soapbox/features/account_timeline/index.js
View file

@ -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));

2
app/soapbox/features/compose/components/emoji_picker_dropdown.js
View file

@ -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 {

2
app/soapbox/features/favourites/index.js
View file

@ -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));
}

2
app/soapbox/features/followers/index.js
View file

@ -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));

2
app/soapbox/features/following/index.js
View file

@ -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));

2
app/soapbox/features/groups/edit/index.js
View file

@ -62,7 +62,7 @@ class Edit extends React.PureComponent {
}
}
componentWillReceiveProps(nextProps) {
componentDidUpdate(nextProps) {
if (!this.props.group && nextProps.group) {
this.props.setUp(nextProps.group);
}

2
app/soapbox/features/groups/members/index.js
View file

@ -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));
}

2
app/soapbox/features/groups/removed_accounts/index.js
View file

@ -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));
}

2
app/soapbox/features/hashtag_timeline/index.js
View file

@ -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;

2
app/soapbox/features/list_timeline/index.js
View file

@ -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);

2
app/soapbox/features/reblogs/index.js
View file

@ -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));

2
app/soapbox/features/search/components/header.js
View file

@ -21,7 +21,7 @@ class Header extends ImmutablePureComponent {
submittedValue: '',
};
componentWillReceiveProps(nextProps) {
componentDidUpdate(nextProps) {
if (nextProps.submitted) {
const submittedValue = nextProps.value;
this.setState({ submittedValue });

2
app/soapbox/features/status/components/card.js
View file

@ -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 });
}

22
app/soapbox/features/status/index.js
View file

@ -144,17 +144,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 });
}
@ -401,7 +390,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;
}

2
app/soapbox/features/ui/components/bundle.js
View file

@ -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);
}

2
app/soapbox/features/ui/components/focal_point_modal.js
View file

@ -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);
}

2
app/soapbox/features/ui/components/image_loader.js
View file

@ -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);
}

2
app/soapbox/features/ui/components/report_modal.js
View file

@ -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 }));
}

2
app/soapbox/features/video/index.js
View file

@ -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 });
}