#1940 topics

mediacloud · Aug 26, 2020 · 162a579 · 162a579
1 parent dd71cd0
commit 162a579
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 25 deletions.
diff --git a/src/components/topic/controlbar/FocusSelectorContainer.js b/src/components/topic/controlbar/FocusSelectorContainer.js
@@ -14,7 +14,7 @@ const localMessages = {
 };
 
 class FocusSelectorContainer extends React.Component {
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { setCustomContent, selectedFocus } = this.props;
     if (setCustomContent && selectedFocus) {
       setCustomContent(

diff --git a/src/components/topic/controlbar/QuerySelector.js b/src/components/topic/controlbar/QuerySelector.js
@@ -11,21 +11,24 @@ const localMessages = {
 };
 
 class QuerySelector extends React.Component {
-  state = {
-    focused: false,
-    value: '',
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      focused: false,
+      value: '',
+    };
+  }
 
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     this.setState({ value: this.props.query || '' });
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { query } = this.props;
-    if (nextProps.query !== query) {
+  static getDerivedStateFromProps(nextState, prevState) {
+    if (nextState.query !== prevState.query) {
       // if filters are open and user deletes chip, gotta remove the query here
-      this.setState({ value: nextProps.query });
+      this.setState({ value: nextState.query });
     }
+    return nextState;
   }
 
   valueHasChanged = () => {

diff --git a/src/components/topic/controlbar/TopicFilterBar.js b/src/components/topic/controlbar/TopicFilterBar.js
@@ -23,7 +23,7 @@ const localMessages = {
 };
 
 class TopicFilterBar extends React.Component {
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { setSideBarContent, handleFilterToggle, handleFocusSelected, handleQuerySelected } = this.props;
     const { formatMessage } = this.props.intl;
 

diff --git a/src/components/topic/snapshots/foci/builder/FocalSetForm.js b/src/components/topic/snapshots/foci/builder/FocalSetForm.js
@@ -26,7 +26,7 @@ const localMessages = {
 };
 
 class FocalSetForm extends React.Component {
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { change, focalTechnique } = this.props;
     const { formatMessage } = this.props.intl;
     // set smart-looking default set name/description based on the focal technique currently selected

diff --git a/src/components/topic/snapshots/foci/builder/FocusBuilderWizard.js b/src/components/topic/snapshots/foci/builder/FocusBuilderWizard.js
@@ -21,7 +21,7 @@ const localMessages = {
 };
 
 class FocusBuilderWizard extends React.Component {
-  UNSAFE_componentWillMount = () => {
+  componentDidMount = () => {
     const { startStep, goToStep } = this.props;
     goToStep(startStep || 0);
   }

diff --git a/src/components/topic/snapshots/foci/builder/FocusDescriptionForm.js b/src/components/topic/snapshots/foci/builder/FocusDescriptionForm.js
@@ -27,7 +27,7 @@ const localMessages = {
 };
 
 class FocusDescriptionForm extends React.Component {
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { change, focalTechnique, initialValues, keywords } = this.props;
     const { formatMessage } = this.props.intl;
     // set smart-looking default focus name/description based on the focal technique currently selected

diff --git a/src/components/topic/stories/StoryContainer.js b/src/components/topic/stories/StoryContainer.js
@@ -57,11 +57,13 @@ class StoryContainer extends React.Component {
     selectedTab: 0,
   };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextState) {
+    // select the media so we fill the reducer with the previously selected media
     const { refetchAsyncData } = this.props;
-    if (nextProps.storiesId !== this.props.storiesId) {
-      refetchAsyncData(nextProps);
+    if (nextState.storiesId !== this.props.storiesId) {
+      refetchAsyncData(nextState);
     }
+    return nextState;
   }
 
   render() {

diff --git a/src/components/topic/stories/StoryUpdateContainer.js b/src/components/topic/stories/StoryUpdateContainer.js
@@ -17,10 +17,10 @@ const localMessages = {
 };
 
 class StoryUpdateContainer extends React.Component {
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  static getDerivedStateFromProps(nextState) {
     const { refetchAsyncData } = this.props;
-    if (nextProps.storiesId !== this.props.storiesId) {
-      refetchAsyncData(nextProps);
+    if (nextState.storiesId !== this.props.storiesId) {
+      refetchAsyncData(nextState);
     }
   }
 

diff --git a/src/components/topic/words/WordContainer.js b/src/components/topic/words/WordContainer.js
@@ -19,16 +19,17 @@ const localMessages = {
 
 class WordContainer extends React.Component {
   /* not an async */
-  UNSAFE_componentWillMount() {
+  componentDidMount() {
     const { saveParamsToStore } = this.props;
     saveParamsToStore(this.props, this);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.params.word !== this.props.params.word) {
-      const { saveParamsToStore } = nextProps;
-      saveParamsToStore(nextProps, this);
+  static getDerivedStateFromProps(nextState) {
+    if (nextState.params.word !== this.props.params.word) {
+      const { saveParamsToStore } = nextState;
+      saveParamsToStore(nextState, this);
     }
+    return nextState;
   }
 
   render() {