componentWillReceiveProps fixes, fixes #184, #231, !80

app/soapbox/components/autosuggest_input.js

@@ -153,13 +153,11 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   }
 
-  static getDerivedStateFromProps(nextProps, state) {
-    if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) {
-      return {
-        suggestionsHidden: false,
-      };
+  componentDidUpdate(prevProps, prevState) {
+    const { suggestions } = this.props;
+    if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {
+      this.setState({ suggestionsHidden: false });
     }
-    return null;
   }
 
   setInput = (c) => {

app/soapbox/components/autosuggest_textarea.js

@@ -159,13 +159,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.textarea.focus();
   }
 
-  static getDerivedStateFromProps(nextProps, state) {
-    if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) {
-      return {
-        suggestionsHidden: false,
-      };
+  componentDidUpdate(prevProps, prevState) {
+    const { suggestions } = this.props;
+    if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {
+      this.setState({ suggestionsHidden: false });
     }
-    return null;
   }
 
   setTextarea = (c) => {

app/soapbox/components/media_gallery.js

@@ -253,21 +253,15 @@ class MediaGallery extends React.PureComponent {
   state = {
     visible: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
     width: this.props.defaultWidth,
-    media: this.props.media,
-    displayMedia: this.props.displayMedia,
   };
 
-  static getDerivedStateFromProps(nextProps, state) {
-    if (!is(nextProps.media, state.media) && nextProps.visible === undefined) {
-      return {
-        visible: state.displayMedia !== 'hide_all' && !nextProps.sensitive || state.displayMedia === 'show_all',
-      };
-    } else if (!is(nextProps.visible, state.visible) && nextProps.visible !== undefined) {
-      return {
-        visible: nextProps.visible,
-      };
+  componentDidUpdate(prevProps) {
+    const { media, visible, sensitive } = this.props;
+    if (!is(media, prevProps.media) && visible === undefined) {
+      this.setState({ visible: prevProps.displayMedia !== 'hide_all' && !sensitive || prevProps.displayMedia === 'show_all' });
+    } else if (!is(visible, prevProps.visible) && visible !== undefined) {
+      this.setState({ visible });
     }
-    return null;
   }
 
   handleOpen = () => {

app/soapbox/components/modal_root.js

@@ -78,21 +78,20 @@ class ModalRoot extends React.PureComponent {
     window.addEventListener('keyup', this.handleKeyUp, false);
   }
 
-  componentDidUpdate(nextProps, prevProps) {
-    if (!!nextProps.children && !this.props.children) {
+  componentDidUpdate(prevProps) {
+    if (!!this.props.children && !prevProps.children) {
       this.activeElement = document.activeElement;
       this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
-    } else if (!nextProps.children) {
+    } else if (!prevProps.children) {
       this.setState({ revealed: false });
     }
-    if (!nextProps.children && !!this.props.children) {
-      this.activeElement = document.activeElement;
+
+    if (!this.props.children && !!prevProps.children) {
       this.activeElement.focus();
       this.activeElement = null;
-    }
-    if (!this.props.children && !!prevProps.children) {
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
     }
+
     if (this.props.children) {
       requestAnimationFrame(() => {
         this.setState({ revealed: true });

app/soapbox/components/relative_timestamp.js

@@ -137,8 +137,8 @@ class RelativeTimestamp extends React.Component {
       this.state.now !== nextState.now;
   }
 
-  componentDidUpdate(nextProps) {
-    if (this.props.timestamp !== nextProps.timestamp) {
+  componentDidUpdate(prevProps) {
+    if (this.props.timestamp !== prevProps.timestamp) {
       this.setState({ now: Date.now() });
     }
   }
@@ -147,19 +147,19 @@ class RelativeTimestamp extends React.Component {
     this._scheduleNextUpdate(this.props, this.state);
   }
 
-  componentDidUpdate(nextProps, nextState) {
-    this._scheduleNextUpdate(nextProps, nextState);
+  componentDidUpdate() {
+    this._scheduleNextUpdate();
   }
 
   componentWillUnmount() {
     clearTimeout(this._timer);
   }
 
-  _scheduleNextUpdate(props, state) {
+  _scheduleNextUpdate() {
     clearTimeout(this._timer);
 
-    const { timestamp }  = props;
-    const delta          = (new Date(timestamp)).getTime() - state.now;
+    const { timestamp }  = this.props;
+    const delta          = (new Date(timestamp)).getTime() - this.state.now;
     const unitDelay      = getUnitDelay(selectUnits(delta));
     const unitRemainder  = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;

app/soapbox/features/account_gallery/index.js

@@ -97,10 +97,11 @@ class AccountGallery extends ImmutablePureComponent {
     }
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
-      this.props.dispatch(fetchAccount(nextProps.params.accountId));
-      this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId));
+  componentDidUpdate(prevProps) {
+    const { accountId, params } = this.props;
+    if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) {
+      this.props.dispatch(fetchAccount(params.accountId));
+      this.props.dispatch(expandAccountMediaTimeline(accountId));
     }
   }
 

app/soapbox/features/account_timeline/index.js

@@ -81,17 +81,17 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  componentDidUpdate(nextProps) {
-    const { me } = nextProps;
-    if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId) || nextProps.withReplies !== this.props.withReplies) {
-      this.props.dispatch(fetchAccount(nextProps.accountId));
-      if (me) this.props.dispatch(fetchAccountIdentityProofs(nextProps.accountId));
+  componentDidUpdate(prevProps) {
+    const { me, accountId, withReplies } = this.props;
+    if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId) || withReplies !== prevProps.withReplies) {
+      this.props.dispatch(fetchAccount(accountId));
+      if (me) this.props.dispatch(fetchAccountIdentityProofs(accountId));
 
-      if (!nextProps.withReplies) {
-        this.props.dispatch(expandAccountFeaturedTimeline(nextProps.accountId));
+      if (!withReplies) {
+        this.props.dispatch(expandAccountFeaturedTimeline(accountId));
       }
 
-      this.props.dispatch(expandAccountTimeline(nextProps.accountId, { withReplies: nextProps.withReplies }));
+      this.props.dispatch(expandAccountTimeline(accountId, { withReplies }));
     }
   }
 

app/soapbox/features/compose/components/emoji_picker_dropdown.js

@@ -56,8 +56,8 @@ class ModifierPickerMenu extends React.PureComponent {
     this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.active) {
+  componentDidUpdate(prevProps) {
+    if (this.props.active) {
       this.attachListeners();
     } else {
       this.removeListeners();

app/soapbox/features/favourites/index.js

@@ -27,9 +27,12 @@ class Favourites extends ImmutablePureComponent {
     this.props.dispatch(fetchFavourites(this.props.params.statusId));
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
-      this.props.dispatch(fetchFavourites(nextProps.params.statusId));
+  componentDidUpdate(prevProps) {
+    const { statusId } = this.props.params;
+    const { prevStatusId } = prevProps.params;
+
+    if (statusId !== prevStatusId && statusId) {
+      this.props.dispatch(fetchFavourites(statusId));
     }
   }
 

app/soapbox/features/followers/index.js

@@ -69,10 +69,11 @@ class Followers extends ImmutablePureComponent {
     }
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
-      this.props.dispatch(fetchAccount(nextProps.accountId));
-      this.props.dispatch(fetchFollowers(nextProps.accountId));
+  componentDidUpdate(prevProps) {
+    const { accountId, dispatch } = this.props;
+    if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) {
+      dispatch(fetchAccount(accountId));
+      dispatch(fetchFollowers(accountId));
     }
   }
 

app/soapbox/features/following/index.js

@@ -69,10 +69,11 @@ class Following extends ImmutablePureComponent {
     }
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
-      this.props.dispatch(fetchAccount(nextProps.accountId));
-      this.props.dispatch(fetchFollowing(nextProps.accountId));
+  componentDidUpdate(prevProps) {
+    const { accountId, dispatch } = this.props;
+    if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) {
+      dispatch(fetchAccount(accountId));
+      dispatch(fetchFollowing(accountId));
     }
   }
 

app/soapbox/features/groups/edit/index.js

@@ -55,16 +55,14 @@ class Edit extends React.PureComponent {
     setUp: PropTypes.func.isRequired,
   };
 
-  constructor(nextProps) {
-    super(nextProps);
-    if (this.props.group) {
-      this.props.setUp(this.props.group);
-    }
+  constructor(props) {
+    super(props);
+    if (props.group) props.setUp(props.group);
   }
 
-  componentDidUpdate(nextProps) {
-    if (!this.props.group && nextProps.group) {
-      this.props.setUp(nextProps.group);
+  componentDidUpdate(prevProps) {
+    if (!prevProps.group && this.props.group) {
+      this.props.setUp(this.props.group);
     }
   }
 

app/soapbox/features/groups/members/index.js

@@ -36,9 +36,9 @@ class GroupMembers extends ImmutablePureComponent {
     this.props.dispatch(fetchMembers(id));
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.params.id !== this.props.params.id) {
-      this.props.dispatch(fetchMembers(nextProps.params.id));
+  componentDidUpdate(prevProps) {
+    if (this.props.params.id !== prevProps.params.id) {
+      this.props.dispatch(fetchMembers(this.props.params.id));
     }
   }
 

app/soapbox/features/groups/removed_accounts/index.js

@@ -43,9 +43,9 @@ class GroupRemovedAccounts extends ImmutablePureComponent {
     this.props.dispatch(fetchRemovedAccounts(id));
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.params.id !== this.props.params.id) {
-      this.props.dispatch(fetchRemovedAccounts(nextProps.params.id));
+  componentDidUpdate(prevProps) {
+    if (this.props.params.id !== prevProps.params.id) {
+      this.props.dispatch(fetchRemovedAccounts(this.props.params.id));
     }
   }
 

app/soapbox/features/hashtag_timeline/index.js

@@ -81,15 +81,16 @@ class HashtagTimeline extends React.PureComponent {
     dispatch(expandHashtagTimeline(id, { tags }));
   }
 
-  componentDidUpdate(nextProps) {
-    const { dispatch, params } = this.props;
-    const { id, tags } = nextProps.params;
+  componentDidUpdate(prevProps) {
+    const { dispatch } = this.props;
+    const { id, tags } = this.props.params;
+    const { id: prevId, tags: prevTags } = prevProps.params;
 
-    if (id !== params.id || !isEqual(tags, params.tags)) {
+    if (id !== prevId || !isEqual(tags, prevTags)) {
       this._unsubscribe();
       this._subscribe(dispatch, id, tags);
-      this.props.dispatch(clearTimeline(`hashtag:${id}`));
-      this.props.dispatch(expandHashtagTimeline(id, { tags }));
+      dispatch(clearTimeline(`hashtag:${id}`));
+      dispatch(expandHashtagTimeline(id, { tags }));
     }
   }
 

app/soapbox/features/list_timeline/index.js

@@ -50,10 +50,10 @@ class ListTimeline extends React.PureComponent {
     this.handleDisconnect();
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.params.id !== this.props.params.id) {
+  componentDidUpdate(prevProps) {
+    if (this.props.params.id !== prevProps.params.id) {
       this.handleDisconnect();
-      this.handleConnect(nextProps.params.id);
+      this.handleConnect(this.props.params.id);
     }
   }
 

app/soapbox/features/reblogs/index.js

@@ -41,10 +41,11 @@ class Reblogs extends ImmutablePureComponent {
     this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
-      this.props.dispatch(fetchReblogs(nextProps.params.statusId));
-      this.props.dispatch(fetchStatus(nextProps.params.statusId));
+  componentDidUpdate(prevProps) {
+    const { params } = this.props;
+    if (params.statusId !== prevProps.params.statusId && params.statusId) {
+      prevProps.dispatch(fetchReblogs(params.statusId));
+      prevProps.dispatch(fetchStatus(params.statusId));
     }
   }
 

app/soapbox/features/search/components/header.js

@@ -21,9 +21,9 @@ class Header extends ImmutablePureComponent {
     submittedValue: '',
   };
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.submitted) {
-      const submittedValue = nextProps.value;
+  componentDidUpdate(prevProps) {
+    if (this.props.submitted) {
+      const submittedValue = this.props.value;
       this.setState({ submittedValue });
     }
   }

app/soapbox/features/status/components/card.js

@@ -75,8 +75,8 @@ export default class Card extends React.PureComponent {
     embedded: false,
   };
 
-  componentDidUpdate(nextProps) {
-    if (!Immutable.is(this.props.card, nextProps.card)) {
+  componentDidUpdate(prevProps) {
+    if (!Immutable.is(prevProps.card, this.props.card)) {
       this.setState({ embedded: false });
     }
   }

app/soapbox/features/status/index.js

@@ -390,23 +390,24 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
-  componentDidUpdate(nextProps) {
-    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
+  componentDidUpdate(prevProps, prevState) {
+    const { params, status } = this.props;
+    const { ancestorsIds } = prevProps;
+
+    if (params.statusId !== prevProps.params.statusId && params.statusId) {
       this._scrolledIntoView = false;
-      this.props.dispatch(fetchStatus(nextProps.params.statusId));
+      this.props.dispatch(fetchStatus(params.statusId));
     }
 
-    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
+    if (status && status.get('id') !== prevState.loadedStatusId) {
+      this.setState({ showMedia: defaultMediaVisibility(status), loadedStatusId: status.get('id') });
     }
 
     if (this._scrolledIntoView) {
       return;
     }
 
-    const { status, ancestorsIds } = this.props;
-
-    if (status && ancestorsIds && ancestorsIds.size > 0) {
+    if (prevProps.status && ancestorsIds && ancestorsIds.size > 0) {
       const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1];
 
       window.requestAnimationFrame(() => {

app/soapbox/features/ui/components/bundle.js

@@ -37,7 +37,7 @@ class Bundle extends React.PureComponent {
     this.load(this.props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.fetchComponent !== this.props.fetchComponent) {
       this.load(nextProps);
     }

app/soapbox/features/ui/components/focal_point_modal.js

@@ -38,9 +38,10 @@ class FocalPointModal extends ImmutablePureComponent {
     this.updatePositionFromMedia(this.props.media);
   }
 
-  componentDidUpdate(nextProps) {
-    if (this.props.media.get('id') !== nextProps.media.get('id')) {
-      this.updatePositionFromMedia(nextProps.media);
+  componentDidUpdate(prevProps) {
+    const { media } = this.props;
+    if (prevProps.media.get('id') !== media.get('id')) {
+      this.updatePositionFromMedia(media);
     }
   }
 

app/soapbox/features/ui/components/image_loader.js

@@ -42,9 +42,9 @@ export default class ImageLoader extends React.PureComponent {
     this.loadImage(this.props);
   }
 
-  componentDidUpdate(nextProps) {
-    if (this.props.src !== nextProps.src) {
-      this.loadImage(nextProps);
+  componentDidUpdate(prevProps) {
+    if (prevProps.src !== this.props.src) {
+      this.loadImage(this.props);
     }
   }
 

app/soapbox/features/ui/components/report_modal.js

@@ -83,9 +83,10 @@ class ReportModal extends ImmutablePureComponent {
     this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true }));
   }
 
-  componentDidUpdate(nextProps) {
-    if (this.props.account !== nextProps.account && nextProps.account) {
-      this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true }));
+  componentDidUpdate(prevProps) {
+    const { account } = this.props;
+    if (prevProps.account !== account && account) {
+      this.props.dispatch(expandAccountTimeline(account.get('id'), { withReplies: true }));
     }
   }
 

app/soapbox/features/video/index.js

@@ -291,17 +291,18 @@ class Video extends React.PureComponent {
     document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
-      this.setState({ revealed: nextProps.visible });
-    }
-  }
-
   componentDidUpdate(prevProps, prevState) {
+    const { visible, blurhash } = this.props;
+
+    if (!is(visible, prevProps.visible) && visible !== undefined) {
+      this.setState({ revealed: visible });
+    }
+
     if (prevState.revealed && !this.state.revealed && this.video) {
       this.video.pause();
     }
-    if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
+
+    if (prevProps.blurhash !== blurhash && blurhash) {
       this._decode();
     }
   }