Merge branch 'componentWillReceiveProps_to_DidUpdate_refactor' into 'develop'

Component will receive props to did update refactor Fixes #184

Closes #184

See merge request soapbox-pub/soapbox-fe!80

app/soapbox/components/autosuggest_input.js

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

app/soapbox/components/autosuggest_textarea.js

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

app/soapbox/components/media_gallery.js

@@ -234,15 +234,21 @@ 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,
   };
 
-  componentWillReceiveProps(nextProps) {
-    const { displayMedia } = this.props;
-    if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
-      this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
-    } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
-      this.setState({ visible: nextProps.visible });
+  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,
+      };
     }
+    return null;
   }
 
   handleOpen = () => {

app/soapbox/components/modal_root.js

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

app/soapbox/components/relative_timestamp.js

@@ -137,7 +137,7 @@ class RelativeTimestamp extends React.Component {
       this.state.now !== nextState.now;
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (this.props.timestamp !== nextProps.timestamp) {
       this.setState({ now: Date.now() });
     }

app/soapbox/features/account_gallery/index.js

@@ -97,7 +97,7 @@ class AccountGallery extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  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));

app/soapbox/features/account_timeline/index.js

@@ -81,7 +81,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  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));

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

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

app/soapbox/features/favourites/index.js

@@ -27,7 +27,7 @@ class Favourites extends ImmutablePureComponent {
     this.props.dispatch(fetchFavourites(this.props.params.statusId));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this.props.dispatch(fetchFavourites(nextProps.params.statusId));
     }

app/soapbox/features/followers/index.js

@@ -69,7 +69,7 @@ class Followers extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  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));

app/soapbox/features/following/index.js

@@ -69,7 +69,7 @@ class Following extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  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));

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

@@ -62,7 +62,7 @@ class Edit extends React.PureComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     if (!this.props.group && nextProps.group) {
       this.props.setUp(nextProps.group);
     }

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

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

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

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

app/soapbox/features/hashtag_timeline/index.js

@@ -81,7 +81,7 @@ class HashtagTimeline extends React.PureComponent {
     dispatch(expandHashtagTimeline(id, { tags }));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(nextProps) {
     const { dispatch, params } = this.props;
     const { id, tags } = nextProps.params;
 

app/soapbox/features/list_timeline/index.js

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

app/soapbox/features/reblogs/index.js

@@ -41,7 +41,7 @@ class Reblogs extends ImmutablePureComponent {
     this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
-  componentWillReceiveProps(nextProps) {
+  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));

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

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

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

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

app/soapbox/features/status/index.js

@@ -144,17 +144,6 @@ class Status extends ImmutablePureComponent {
     attachFullscreenListener(this.onFullScreenChange);
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
-      this._scrolledIntoView = false;
-      this.props.dispatch(fetchStatus(nextProps.params.statusId));
-    }
-
-    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
-    }
-  }
-
   handleToggleMediaVisibility = () => {
     this.setState({ showMedia: !this.state.showMedia });
   }
@@ -401,7 +390,16 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(nextProps) {
+    if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
+      this._scrolledIntoView = false;
+      this.props.dispatch(fetchStatus(nextProps.params.statusId));
+    }
+
+    if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
+      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
+    }
+
     if (this._scrolledIntoView) {
       return;
     }

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

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

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

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

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

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

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

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

app/soapbox/features/video/index.js

@@ -291,7 +291,7 @@ class Video extends React.PureComponent {
     document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
       this.setState({ revealed: nextProps.visible });
     }