treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Use new getDerivedStateFromProps instead of deprecated componentWillReceiveProps 

As we are already using the new getSnapshotBeforeUpdate lifecycle method,
we apparently cannot use the deprecated ones at all in this component.
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2018-04-26 20:23:25 +02:00
parent b39f3648a7
commit 1222e0a381
1 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/javascript/flavours/glitch/components/status.js
View File

@ -51,7 +51,6 @@ export default class Status extends ImmutablePureComponent {
}; };
state = { state = {
isExpanded: this.props.expanded,
isCollapsed: false, isCollapsed: false,
autoCollapsed: false, autoCollapsed: false,
} }
@ -80,23 +79,48 @@ export default class Status extends ImmutablePureComponent {
// If our settings have changed to disable collapsed statuses, then we // If our settings have changed to disable collapsed statuses, then we
// need to make sure that we uncollapse every one. We do that by watching // need to make sure that we uncollapse every one. We do that by watching
// for changes to `settings.collapsed.enabled` in // for changes to `settings.collapsed.enabled` in
// `componentWillReceiveProps()`. // `getderivedStateFromProps()`.
// We also need to watch for changes on the `collapse` prop---if this // We also need to watch for changes on the `collapse` prop---if this
// changes to anything other than `undefined`, then we need to collapse or // changes to anything other than `undefined`, then we need to collapse or
// uncollapse our status accordingly. // uncollapse our status accordingly.
componentWillReceiveProps (nextProps) { static getDerivedStateFromProps(nextProps, prevState) {
let update = {};
let updated = false;
// Make sure the state mirrors props we track…
if (nextProps.collapse !== prevState.collapseProp) {
update.collapseProp = nextProps.collapse;
updated = true;
}
if (nextProps.expanded !== prevState.expandedProp) {
update.expandedProp = nextProps.expanded;
updated = true;
}
// Update state based on new props
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) { if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
if (this.state.isCollapsed) { if (prevState.isCollapsed) {
this.setCollapsed(false); update.isCollapsed = false;
updated = true;
} }
} else if ( } else if (
nextProps.collapse !== this.props.collapse && nextProps.collapse !== prevState.collapseProp &&
nextProps.collapse !== undefined nextProps.collapse !== undefined
) this.setCollapsed(nextProps.collapse); ) {
if (nextProps.expanded !== this.props.expanded && update.isCollapsed = nextProps.collapse;
if (nextProps.collapse) update.isExpanded = false;
updated = true;
}
if (nextProps.expanded !== prevState.expandedProp &&
nextProps.expanded !== undefined nextProps.expanded !== undefined
) this.setExpansion(nextProps.expanded); ) {
update.isExpanded = nextProps.expanded;
if (nextProps.expanded) update.isCollapsed = false;
updated = true;
}
return updated ? update : null;
} }
// When mounting, we just check to see if our status should be collapsed, // When mounting, we just check to see if our status should be collapsed,