Replace most unsafe React lifecycle methods (#36970)

app/javascript/mastodon/components/autosuggest_input.jsx

@@ -159,8 +159,8 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     this.input.focus();
   };
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
+  componentDidUpdate (prevProps) {
-    if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
+    if (prevProps.suggestions !== this.props.suggestions && this.props.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
       this.setState({ suggestionsHidden: false });
     }
   }

app/javascript/mastodon/components/media_gallery.jsx

@@ -242,11 +242,11 @@ class MediaGallery extends PureComponent {
     window.removeEventListener('resize', this.handleResize);
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
+  componentDidUpdate (prevProps) {
-    if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
+    if (!is(prevProps.media, this.props.media) && this.props.visible === undefined) {
-      this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
+      this.setState({ visible: displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all' });
-    } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+    } else if (!is(prevProps.visible, this.props.visible) && this.props.visible !== undefined) {
-      this.setState({ visible: nextProps.visible });
+      this.setState({ visible: this.props.visible });
     }
   }
 

app/javascript/mastodon/components/modal_root.jsx

@@ -61,14 +61,6 @@ class ModalRoot extends PureComponent {
     this.history = this.props.history || createBrowserHistory();
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
-    if (!!nextProps.children && !this.props.children) {
-      this.activeElement = document.activeElement;
-
-      this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
-    }
-  }
-
   componentDidUpdate (prevProps) {
     if (!this.props.children && !!prevProps.children) {
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
@@ -85,9 +77,15 @@ class ModalRoot extends PureComponent {
 
       this._handleModalClose();
     }
+
     if (this.props.children && !prevProps.children) {
+      this.activeElement = document.activeElement;
+
+      this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
+
       this._handleModalOpen();
     }
+
     if (this.props.children) {
       this._ensureHistoryBuffer();
     }

app/javascript/mastodon/features/blocks/index.jsx

@@ -38,7 +38,7 @@ class Blocks extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     this.props.dispatch(fetchBlocks());
   }
 

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx

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

app/javascript/mastodon/features/favourites/index.jsx

@@ -41,7 +41,7 @@ class Favourites extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     if (!this.props.accountIds) {
       this.props.dispatch(fetchFavourites(this.props.params.statusId));
     }

app/javascript/mastodon/features/follow_requests/index.jsx

@@ -45,7 +45,7 @@ class FollowRequests extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     this.props.dispatch(fetchFollowRequests());
   }
 

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -73,11 +73,10 @@ class ListTimeline extends PureComponent {
     this.disconnect = dispatch(connectListStream(id));
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps) {
+  componentDidUpdate (prevProps) {
-    const { dispatch } = this.props;
+    const { dispatch, params: {id} } = this.props;
-    const { id } = nextProps.params;
 
-    if (id !== this.props.params.id) {
+    if (id !== prevProps.params.id) {
       if (this.disconnect) {
         this.disconnect();
         this.disconnect = null;

app/javascript/mastodon/features/mutes/index.jsx

@@ -40,7 +40,7 @@ class Mutes extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     this.props.dispatch(fetchMutes());
   }
 

app/javascript/mastodon/features/pinned_statuses/index.jsx

@@ -34,7 +34,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     multiColumn: PropTypes.bool,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     this.props.dispatch(fetchPinnedStatuses());
   }
 

app/javascript/mastodon/features/reblogs/index.jsx

@@ -42,7 +42,7 @@ class Reblogs extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     if (!this.props.accountIds) {
       this.props.dispatch(fetchReblogs(this.props.params.statusId));
     }

app/javascript/mastodon/features/ui/components/bundle.jsx

@@ -33,13 +33,13 @@ class Bundle extends PureComponent {
     forceRender: false,
   };
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this.load(this.props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
-    if (nextProps.fetchComponent !== this.props.fetchComponent) {
+    if (prevProps.fetchComponent !== this.props.fetchComponent) {
-      this.load(nextProps);
+      this.load(this.props);
     }
   }
 

app/javascript/mastodon/features/ui/index.jsx

@@ -108,7 +108,7 @@ class SwitchingColumnsArea extends PureComponent {
     forceOnboarding: PropTypes.bool,
   };
 
-  UNSAFE_componentWillMount () {
+  componentDidMount () {
     document.body.classList.toggle('layout-single-column', this.props.singleColumn);
     document.body.classList.toggle('layout-multiple-columns', !this.props.singleColumn);
   }