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

Improve detailed status component lifecycle 

- Move componentWillMount and componentWillReceiveProps logic to
  getDerivedStateFromProps.
- Compute CW auto-unfold status earlier
lolsob-rspec
Thibaut Girka 2018-11-28 20:20:03 +01:00 committed by ThibG
parent c37a81a5d7
commit fc707adcde
1 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/flavours/glitch/features/status/index.js
View File

@ -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,20 +338,17 @@ 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) {
const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
if (status && ancestorsIds && ancestorsIds.size > 0) { window.requestAnimationFrame(() => {
const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1]; element.scrollIntoView(true);
});
window.requestAnimationFrame(() => { }
element.scrollIntoView(true);
});
this._scrolledIntoView = true;
} }
} }