#1940 topics and mediapicker

src/components/common/FaqItem.js

@@ -18,7 +18,6 @@ class FaqItem extends React.Component {
     return nextState;
   }
 
-
   toggleVisible = (evt) => {
     evt.preventDefault();
     this.setState(prevState => ({ showAnswer: !prevState.showAnswer }));

src/components/common/mediaPicker/MediaPickerDialog.js

@@ -47,17 +47,11 @@ class MediaPickerDialog extends React.Component {
     }
   }
 
-  handleModifyClick = (initMedia) => {
-    const { setQueryFormChildDialogOpen, handleInitialSelectionOfMedia } = this.props;
-    this.setState({ open: true });
-    handleInitialSelectionOfMedia(initMedia); // push into selectedMedia in store
+  componentWillUnmount() {
+    const { reset } = this.props;
+    reset();
+  }
 
-    // document.body.style.overflow = 'hidden';
-    if (setQueryFormChildDialogOpen) { // way to tell parent that a dialog is open - focus issue stuff
-      setQueryFormChildDialogOpen(true);
-    }
-    // need to set body to overflow: hidden somehow...
-  };
 
   handleRemoveDialogClose = (confirm) => {
     const { onConfirmSelection, selectedMedia, setQueryFormChildDialogOpen, reset } = this.props;
@@ -76,10 +70,17 @@ class MediaPickerDialog extends React.Component {
     }
   };
 
-  componentWillUnmount() {
-    const { reset } = this.props;
-    reset();
-  }
+  handleModifyClick = (initMedia) => {
+    const { setQueryFormChildDialogOpen, handleInitialSelectionOfMedia } = this.props;
+    this.setState({ open: true });
+    handleInitialSelectionOfMedia(initMedia); // push into selectedMedia in store
+
+    // document.body.style.overflow = 'hidden';
+    if (setQueryFormChildDialogOpen) { // way to tell parent that a dialog is open - focus issue stuff
+      setQueryFormChildDialogOpen(true);
+    }
+    // need to set body to overflow: hidden somehow...
+  };
 
   render() {
     const { initMedia } = this.props;

src/components/common/mediaPicker/MediaPickerSidebarContainer.js

@@ -7,21 +7,14 @@ import { initializePreviouslySelectedMedia, clearSelectedMedia, resetMetadataSho
 function composeMediaPickerSidebarContainer() {
   return (ChildComponent) => {
     class MediaPickerSidebarContainer extends React.Component {
-      constructor(props) {
-        super(props);
-        this.state = {
-          initMedia: {},
-        };
-      }
-      static getDerivedStateFromProps(nextState, prevState) {
-        // select the media so we fill the reducer with the previously selected media
-        const { initMedia } = prevState;
-        if (JSON.stringify(initMedia) !== JSON.stringify(nextState.initMedia)) {
-          if (nextState.initMedia) { // expects an array of media from caller
-            nextState.handleInitialSelectionOfMedia(nextState.initMedia);
+      componentDidUpdate(prevProps) {
+        // compare and select incoming media
+        const { initMedia } = this.props;
+        if (JSON.stringify(initMedia) !== JSON.stringify(prevProps.initMedia)) {
+          if (initMedia) { // expects an array of media from caller
+            this.props.handleInitialSelectionOfMedia(initMedia);
           }
         }
-        return nextState;
       }
 
       componentWillUnmount() {

src/components/topic/TopicStoryTable.js

@@ -61,7 +61,7 @@ class TopicStoryTable extends React.Component {
 
   render() {
     const { stories, showTweetCounts, onChangeFocusSelection, topicId, maxTitleLength, usingUrlSharingSubtopic, hasAUrlSharingFocalSet, intl } = this.props;
-    let urlSharingSubtopicNames = null;
+    let urlSharingSubtopicNames = [];
     if (hasAUrlSharingFocalSet && (stories.length > 0)) {
       // intuit a list of the subtopics from the url sharing counts on the first story
       // alternatively, we could pass in the subtopics and use those, but this information is already here
@@ -71,7 +71,7 @@ class TopicStoryTable extends React.Component {
       <div className="story-table">
         <table>
           <tbody>
-            <tr>
+            <tr key={0} >
               <th><FormattedMessage {...messages.storyTitle} /></th>
               <th><FormattedMessage {...messages.media} /></th>
               <th>

src/components/topic/controlbar/QuerySelector.js

@@ -19,16 +19,12 @@ class QuerySelector extends React.Component {
     };
   }
 
-  componentDidMount() {
-    this.setState({ value: this.props.query || '' });
-  }
-
   static getDerivedStateFromProps(nextState, prevState) {
-    if (nextState.query !== prevState.query) {
+    if (prevState.query && nextState.query !== prevState.query) {
       // if filters are open and user deletes chip, gotta remove the query here
-      this.setState({ value: nextState.query });
+      return { value: nextState.query };
     }
-    return nextState;
+    return null;
   }
 
   valueHasChanged = () => {

src/components/topic/stories/StoryContainer.js

@@ -57,13 +57,12 @@ class StoryContainer extends React.Component {
     selectedTab: 0,
   };
 
-  static getDerivedStateFromProps(nextState) {
+  componentWillUpdate(prevProps) {
     // select the media so we fill the reducer with the previously selected media
     const { refetchAsyncData } = this.props;
-    if (nextState.storiesId !== this.props.storiesId) {
-      refetchAsyncData(nextState);
+    if (prevProps.storiesId !== this.props.storiesId) {
+      refetchAsyncData(this.props.storiesId);
     }
-    return nextState;
   }
 
   render() {

src/components/topic/stories/StoryUpdateContainer.js

@@ -17,10 +17,11 @@ const localMessages = {
 };
 
 class StoryUpdateContainer extends React.Component {
-  static getDerivedStateFromProps(nextState) {
+  componentWillUpdate(prevProps) {
+    // select the media so we fill the reducer with the previously selected media
     const { refetchAsyncData } = this.props;
-    if (nextState.storiesId !== this.props.storiesId) {
-      refetchAsyncData(nextState);
+    if (prevProps.storiesId !== this.props.storiesId) {
+      refetchAsyncData(this.props.storiesId);
     }
   }
 

src/components/topic/words/WordContainer.js

@@ -24,12 +24,12 @@ class WordContainer extends React.Component {
     saveParamsToStore(this.props, this);
   }
 
-  static getDerivedStateFromProps(nextState) {
-    if (nextState.params.word !== this.props.params.word) {
-      const { saveParamsToStore } = nextState;
-      saveParamsToStore(nextState, this);
+  componentDidUpdate(prevProps) {
+    // select the media so we fill the reducer with the previously selected media
+    const { saveParamsToStore } = this.props;
+    if (prevProps.params.word !== this.props.params.word) {
+      saveParamsToStore(this.props.params.word, this);
     }
-    return nextState;
   }
 
   render() {