treehouse
/
mastodon
21
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.
lolsob-rspec
Thibaut Girka 2018-04-26 20:23:25 +02:00
parent 8be1573a6e
commit 2ed804d4ca
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,