From 8a43cb3709104c9cab67b16eb2d48fb3e3dec346 Mon Sep 17 00:00:00 2001
From: crockwave <curtis.rock@wirelessmessaging.com>
Date: Thu, 18 Jun 2020 20:30:46 -0500
Subject: [PATCH] partial completion of replacing componentWillReceiveProps

---
 app/soapbox/components/autosuggest_input.js    |  9 ++++++---
 app/soapbox/components/autosuggest_textarea.js |  9 ++++++---
 app/soapbox/components/media_gallery.js        | 18 ++++++++++++------
 app/soapbox/components/modal_root.js           |  7 ++-----
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index 3136325a0..8b4180b5b 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/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) => {
diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index cae6116d4..4f686ac37 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/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) => {
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 4ab6e53e0..66719d2b9 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -267,15 +267,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 = () => {
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 17cdaa64a..9857ad616 100644
--- a/app/soapbox/components/modal_root.js
+++ b/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'));
     }