Fix React warning about legacy lifecycle calls and sensitive status r…

…esetting (#10872)
mastodon · May 29, 2019 · 3333250 · 3333250
1 parent 32fc077
commit 3333250
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
@@ -18,7 +18,6 @@ import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
 import PollContainer from 'mastodon/containers/poll_container';
 import { displayMedia } from '../initial_state';
-import { is } from 'immutable';
 
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
@@ -101,6 +100,7 @@ class Status extends ImmutablePureComponent {
 
   state = {
     showMedia: defaultMediaVisibility(this.props.status),
+    statusId: undefined,
   };
 
   // Track height changes we know about to compensate scrolling
@@ -116,9 +116,14 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (!is(nextProps.status, this.props.status) && nextProps.status) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status) });
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
+      return {
+        showMedia: defaultMediaVisibility(nextProps.status),
+        statusId: nextProps.status.get('id'),
+      };
+    } else {
+      return null;
     }
   }
 

diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
@@ -132,6 +132,7 @@ class Status extends ImmutablePureComponent {
   state = {
     fullscreen: false,
     showMedia: defaultMediaVisibility(this.props.status),
+    loadedStatusId: undefined,
   };
 
   componentWillMount () {
@@ -148,8 +149,8 @@ class Status extends ImmutablePureComponent {
       this.props.dispatch(fetchStatus(nextProps.params.statusId));
     }
 
-    if (!Immutable.is(nextProps.status, this.props.status) && nextProps.status) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status) });
+    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
+      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
     }
   }