[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

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
     >
       <FastImage
         resizeMode="contain"
+        source={
+          Object {
+            "uri": "https://www.mattermost.org/wp-content/uploads/2016/03/logoHorizontal_WS.png",
+          }
+        }
         style={
           Array [
             Object {
@@ -259,7 +264,7 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
         "marginTop": 5,
       },
       Object {
-        "height": 69.83261802575107,
+        "height": 112.56666666666666,
         "width": 307,
       },
     ]
@@ -271,13 +276,18 @@ exports[`PostAttachmentOpenGraph should match state and snapshot, on renderImage
   >
     <FastImage
       resizeMode="contain"
+      source={
+        Object {
+          "uri": "https://mattermost.com/logo.png",
+        }
+      }
       style={
         Array [
           Object {
             "borderRadius": 3,
           },
           Object {
-            "height": 69.83261802575107,
+            "height": 112.56666666666666,
             "width": 307,
           },
         ]

app/components/post_attachment_opengraph/post_attachment_opengraph.js

@@ -34,7 +34,7 @@ export default class PostAttachmentOpenGraph extends PureComponent {
     constructor(props) {
         super(props);
 
-        this.state = this.getBestImageUrl(props.openGraphData);
+        this.state = this.getBestImageUrlAndDimensions(props.openGraphData);
     }
 
     componentDidMount() {
@@ -47,16 +47,13 @@ export default class PostAttachmentOpenGraph extends PureComponent {
         }
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.link !== this.props.link) {
-            this.setState({hasImage: false});
-            this.fetchData(nextProps.link, nextProps.openGraphData);
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.link !== this.props.link) {
+            this.fetchData(this.props.link, this.props.openGraphData);
         }
 
-        if (this.props.openGraphData !== nextProps.openGraphData) {
-            this.setState(this.getBestImageUrl(nextProps.openGraphData), () => {
-                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,

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(
             <PostAttachmentOpenGraph {...baseProps}/>,
         );
 
         // should return null
         expect(wrapper.getElement()).toMatchSnapshot();
 
-        wrapper.setProps({openGraphData});
+        wrapper = shallow(
+            <PostAttachmentOpenGraph
+                {...baseProps}
+                openGraphData={openGraphData}
+            />,
+        );
         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(
             <PostAttachmentOpenGraph {...baseProps}/>,
         );
 
@@ -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(
+            <PostAttachmentOpenGraph
+                {...baseProps}
+                openGraphData={openGraphDataWithImage}
+            />,
+        );
 
         expect(wrapper.instance().renderImage()).toMatchSnapshot();
         expect(wrapper.state('hasImage')).toEqual(true);

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);
         }
     }