From fd219bd7372692f273bc09a45292017fe320f14c Mon Sep 17 00:00:00 2001 From: cindyb Date: Wed, 26 Aug 2020 16:42:29 -0400 Subject: [PATCH] #1940 topics and mediapicker --- src/components/common/FaqItem.js | 1 - .../common/mediaPicker/MediaPickerDialog.js | 29 ++++++++++--------- .../MediaPickerSidebarContainer.js | 19 ++++-------- src/components/topic/TopicStoryTable.js | 4 +-- .../topic/controlbar/QuerySelector.js | 10 ++----- .../topic/stories/StoryContainer.js | 7 ++--- .../topic/stories/StoryUpdateContainer.js | 7 +++-- src/components/topic/words/WordContainer.js | 10 +++---- 8 files changed, 38 insertions(+), 49 deletions(-) diff --git a/src/components/common/FaqItem.js b/src/components/common/FaqItem.js index c05e72141..6a279b8f9 100644 --- a/src/components/common/FaqItem.js +++ b/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 })); diff --git a/src/components/common/mediaPicker/MediaPickerDialog.js b/src/components/common/mediaPicker/MediaPickerDialog.js index 804551d37..8e8e4c0f7 100644 --- a/src/components/common/mediaPicker/MediaPickerDialog.js +++ b/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; diff --git a/src/components/common/mediaPicker/MediaPickerSidebarContainer.js b/src/components/common/mediaPicker/MediaPickerSidebarContainer.js index 6622b263a..b24cefc9b 100644 --- a/src/components/common/mediaPicker/MediaPickerSidebarContainer.js +++ b/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() { diff --git a/src/components/topic/TopicStoryTable.js b/src/components/topic/TopicStoryTable.js index 0ebaebdd0..9ade697b4 100644 --- a/src/components/topic/TopicStoryTable.js +++ b/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 {
- +
diff --git a/src/components/topic/controlbar/QuerySelector.js b/src/components/topic/controlbar/QuerySelector.js index 2090994a1..d14d81f40 100644 --- a/src/components/topic/controlbar/QuerySelector.js +++ b/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 = () => { diff --git a/src/components/topic/stories/StoryContainer.js b/src/components/topic/stories/StoryContainer.js index 058421699..17f4eb3ef 100644 --- a/src/components/topic/stories/StoryContainer.js +++ b/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() { diff --git a/src/components/topic/stories/StoryUpdateContainer.js b/src/components/topic/stories/StoryUpdateContainer.js index c193af6e2..1ae43d90c 100644 --- a/src/components/topic/stories/StoryUpdateContainer.js +++ b/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); } } diff --git a/src/components/topic/words/WordContainer.js b/src/components/topic/words/WordContainer.js index 431dae911..5bf9ba9a3 100644 --- a/src/components/topic/words/WordContainer.js +++ b/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() {