me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve detailed status component lifecycle

Browse source 
- Move componentWillMount and componentWillReceiveProps logic to
  getDerivedStateFromProps.
- Compute CW auto-unfold status earlier
This commit is contained in:
Thibaut Girka 2018-11-28 20:20:03 +01:00 committed by ThibG
parent 7e63fb26e0
commit 6a264c9379
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,
isExpanded: undefined,
threadExpanded: undefined,
statusId: undefined,
};
componentWillMount () {
this.props.dispatch(fetchStatus(this.props.params.statusId));
}
componentDidMount () {
attachFullscreenListener(this.onFullScreenChange);
this.props.dispatch(fetchStatus(this.props.params.statusId));
}
componentWillReceiveProps (nextProps) {
if (this.state.isExpanded === undefined) {
const isExpanded = autoUnfoldCW(nextProps.settings, nextProps.status);
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 });
static getDerivedStateFromProps(props, state) {
if (state.statusId === props.params.statusId || !props.params.statusId) {
return null;
}
props.dispatch(fetchStatus(props.params.statusId));
return {
threadExpanded: undefined,
isExpanded: autoUnfoldCW(props.settings, props.status),
statusId: props.params.statusId,
};
}
handleExpandedToggle = () => {
@ -338,20 +338,17 @@ export default class Status extends ImmutablePureComponent {
this.node = c;
}
componentDidUpdate () {
if (this._scrolledIntoView) {
return;
}
componentDidUpdate (prevProps) {
if (this.props.params.statusId !== prevProps.params.statusId && this.props.params.statusId) {
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) {
const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
window.requestAnimationFrame(() => {
element.scrollIntoView(true);
});
this._scrolledIntoView = true;
window.requestAnimationFrame(() => {
element.scrollIntoView(true);
});
}
}
}