From e0d2fba243724816502661b052e189c41573dbce Mon Sep 17 00:00:00 2001 From: Rahim Rahman Date: Mon, 15 Jun 2020 11:11:21 -0600 Subject: [PATCH] [MM-18766] remove deprecated lifecycle methods from post components (#4270) * [MM-18766] removed deprecated lifecycle methods from post components * [MM-18766] update snapshot, seems like there was a bug * [MM-18766] refactor getBestImageUrl -> getBestImageUrlAndDimensions - refactor getBestImageUrl to take a single argument: props - refactor getViewPostWidth to take a single argument: props * [MM-18766] getDerivedStateFromProps was previously returning only first prop change - fix issue if multiple props were modified at once. * [MM-18766] removed FastImage.preload that was supposed to be removed in the last merge. * [MM-18766] removed getDerivedStateFromProps * [MM-18766] fix tests based on actual component being completely re-rendered rather than prop change. * [MM-18766] cleaning up initial changes due to no longer using getDerivedStateFromProps method - move back getBestImageUrl and getViewPostWidth from outside of components - keep the renaming of getBestImageUrl - remove the use of spread operator as it is also no longer needed * [MM-18766] one of caller to getViewPostWidth is still passing this.props - this is no longer needed --- .../post_attachment_opengraph.test.js.snap | 14 ++++++++++++-- .../post_attachment_opengraph.js | 19 ++++++++----------- .../post_attachment_opengraph.test.js | 18 ++++++++++++++---- app/components/video_controls.js | 6 +++--- 4 files changed, 37 insertions(+), 20 deletions(-) diff --git a/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap b/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap index 4baf97d94..b95d86f56 100644 --- a/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap +++ b/app/components/post_attachment_opengraph/__snapshots__/post_attachment_opengraph.test.js.snap @@ -96,6 +96,11 @@ exports[`PostAttachmentOpenGraph should match snapshot, without image and descri > { - this.getImageSize(this.state.openGraphImageUrl); - }); + if (prevState.openGraphImageUrl !== this.state.openGraphImageUrl) { + this.getImageSize(this.state.openGraphImageUrl); } } @@ -66,7 +63,7 @@ export default class PostAttachmentOpenGraph extends PureComponent { setItemRef = (ref) => { this.itemRef = ref; - } + }; fetchData = (url, openGraphData) => { if (!openGraphData) { @@ -74,7 +71,7 @@ export default class PostAttachmentOpenGraph extends PureComponent { } }; - getBestImageUrl = (data) => { + getBestImageUrlAndDimensions = (data) => { if (!data || !data.images) { return { hasImage: false, diff --git a/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js b/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js index a75d185d1..0c2c86f1e 100644 --- a/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js +++ b/app/components/post_attachment_opengraph/post_attachment_opengraph.test.js @@ -37,14 +37,19 @@ describe('PostAttachmentOpenGraph', () => { }; test('should match snapshot, without image and description', () => { - const wrapper = shallow( + let wrapper = shallow( , ); // should return null expect(wrapper.getElement()).toMatchSnapshot(); - wrapper.setProps({openGraphData}); + wrapper = shallow( + , + ); expect(wrapper.getElement()).toMatchSnapshot(); expect(wrapper.find(TouchableWithFeedback).exists()).toEqual(true); }); @@ -74,7 +79,7 @@ describe('PostAttachmentOpenGraph', () => { }); test('should match state and snapshot, on renderImage', () => { - const wrapper = shallow( + let wrapper = shallow( , ); @@ -86,7 +91,12 @@ describe('PostAttachmentOpenGraph', () => { const images = [{height: 440, width: 1200, url: 'https://mattermost.com/logo.png'}]; const openGraphDataWithImage = {...openGraphData, images}; - wrapper.setProps({openGraphData: openGraphDataWithImage}); + wrapper = shallow( + , + ); expect(wrapper.instance().renderImage()).toMatchSnapshot(); expect(wrapper.state('hasImage')).toEqual(true); diff --git a/app/components/video_controls.js b/app/components/video_controls.js index 38e28407f..efe0e6faf 100644 --- a/app/components/video_controls.js +++ b/app/components/video_controls.js @@ -62,9 +62,9 @@ export default class VideoControls extends PureComponent { AppState.addEventListener('change', this.handleAppStateChange); } - componentWillReceiveProps(nextProps) { - if (nextProps.playerState === PLAYER_STATE.ENDED || nextProps.isLoading || - (nextProps.playerState === PLAYER_STATE.PAUSED && this.props.playerState === PLAYER_STATE.PLAYING)) { + componentDidUpdate(prevProps) { + if (this.props.playerState === PLAYER_STATE.ENDED || this.props.isLoading || + (this.props.playerState === PLAYER_STATE.PAUSED && prevProps.playerState === PLAYER_STATE.PLAYING)) { this.fadeInControls(false); } }