Improve detailed status component lifecycle

- Move componentWillMount and componentWillReceiveProps logic to
  getDerivedStateFromProps.
- Compute CW auto-unfold status earlier
master
Thibaut Girka 6 years ago committed by ThibG
parent 7e63fb26e0
commit 6a264c9379
  1. 35
      app/javascript/flavours/glitch/features/status/index.js

@ -91,26 +91,26 @@ export default class Status extends ImmutablePureComponent {
fullscreen: false, fullscreen: false,
isExpanded: undefined, isExpanded: undefined,
threadExpanded: undefined, threadExpanded: undefined,
statusId: undefined,
}; };
componentWillMount () {
this.props.dispatch(fetchStatus(this.props.params.statusId));
}
componentDidMount () { componentDidMount () {
attachFullscreenListener(this.onFullScreenChange); attachFullscreenListener(this.onFullScreenChange);
this.props.dispatch(fetchStatus(this.props.params.statusId));
} }
componentWillReceiveProps (nextProps) { static getDerivedStateFromProps(props, state) {
if (this.state.isExpanded === undefined) { if (state.statusId === props.params.statusId || !props.params.statusId) {
const isExpanded = autoUnfoldCW(nextProps.settings, nextProps.status); return null;
if (isExpanded !== undefined) this.setState({ isExpanded: isExpanded });
}
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
this._scrolledIntoView = false;
this.props.dispatch(fetchStatus(nextProps.params.statusId));
this.setState({ isExpanded: autoUnfoldCW(nextProps.settings, nextProps.status), threadExpanded: undefined });
} }
props.dispatch(fetchStatus(props.params.statusId));
return {
threadExpanded: undefined,
isExpanded: autoUnfoldCW(props.settings, props.status),
statusId: props.params.statusId,
};
} }
handleExpandedToggle = () => { handleExpandedToggle = () => {
@ -338,11 +338,8 @@ export default class Status extends ImmutablePureComponent {
this.node = c; this.node = c;
} }
componentDidUpdate () { componentDidUpdate (prevProps) {
if (this._scrolledIntoView) { if (this.props.params.statusId !== prevProps.params.statusId && this.props.params.statusId) {
return;
}
const { status, ancestorsIds } = this.props; const { status, ancestorsIds } = this.props;
if (status && ancestorsIds && ancestorsIds.size > 0) { if (status && ancestorsIds && ancestorsIds.size > 0) {
@ -351,7 +348,7 @@ export default class Status extends ImmutablePureComponent {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
element.scrollIntoView(true); element.scrollIntoView(true);
}); });
this._scrolledIntoView = true; }
} }
} }

Loading…
Cancel
Save