Migrate ThumbnailImage.js to function component

src/components/ThumbnailImage.js

@@ -1,5 +1,5 @@
 import lodashClamp from 'lodash/clamp';
-import React, {PureComponent} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
@@ -33,73 +33,67 @@ const defaultProps = {
     imageHeight: 200,
 };
 
-class ThumbnailImage extends PureComponent {
-    constructor(props) {
-        super(props);
+/**
+ * Compute the thumbnails width and height given original image dimensions.
+ *
+ * @param {Number} width - Width of the original image.
+ * @param {Number} height - Height of the original image.
+ * @returns {Object} - Object containing thumbnails width and height.
+ */
 
-        this.updateImageSize = this.updateImageSize.bind(this);
-        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(props.imageWidth, props.imageHeight);
-        this.state = {
-            thumbnailWidth,
-            thumbnailHeight,
-        };
+function calculateThumbnailImageSize(width, height, windowHeight) {
+    if (!width || !height) {
+        return {};
     }
 
-    /**
-     * Compute the thumbnails width and height given original image dimensions.
-     *
-     * @param {Number} width - Width of the original image.
-     * @param {Number} height - Height of the original image.
-     * @returns {Object} - Object containing thumbnails width and height.
-     */
-    calculateThumbnailImageSize(width, height) {
-        if (!width || !height) {
-            return {};
-        }
+    // Width of the thumbnail works better as a constant than it does
+    // a percentage of the screen width since it is relative to each screen
+    // Note: Clamp minimum width 40px to support touch device
+    let thumbnailScreenWidth = lodashClamp(width, 40, 250);
+    const imageHeight = height / (width / thumbnailScreenWidth);
+    let thumbnailScreenHeight = lodashClamp(imageHeight, 40, windowHeight * 0.4);
+    const aspectRatio = height / width;
 
-        // Width of the thumbnail works better as a constant than it does
-        // a percentage of the screen width since it is relative to each screen
-        // Note: Clamp minimum width 40px to support touch device
-        let thumbnailScreenWidth = lodashClamp(width, 40, 250);
-        const imageHeight = height / (width / thumbnailScreenWidth);
-        let thumbnailScreenHeight = lodashClamp(imageHeight, 40, this.props.windowHeight * 0.4);
-        const aspectRatio = height / width;
-
-        // If thumbnail height is greater than its width, then the image is portrait otherwise landscape.
-        // For portrait images, we need to adjust the width of the image to keep the aspect ratio and vice-versa.
-        if (thumbnailScreenHeight > thumbnailScreenWidth) {
-            thumbnailScreenWidth = Math.round(thumbnailScreenHeight * (1 / aspectRatio));
-        } else {
-            thumbnailScreenHeight = Math.round(thumbnailScreenWidth * aspectRatio);
-        }
-        return {thumbnailWidth: Math.max(40, thumbnailScreenWidth), thumbnailHeight: Math.max(40, thumbnailScreenHeight)};
+    // If thumbnail height is greater than its width, then the image is portrait otherwise landscape.
+    // For portrait images, we need to adjust the width of the image to keep the aspect ratio and vice-versa.
+    if (thumbnailScreenHeight > thumbnailScreenWidth) {
+        thumbnailScreenWidth = Math.round(thumbnailScreenHeight * (1 / aspectRatio));
+    } else {
+        thumbnailScreenHeight = Math.round(thumbnailScreenWidth * aspectRatio);
     }
+    return {thumbnailWidth: Math.max(40, thumbnailScreenWidth), thumbnailHeight: Math.max(40, thumbnailScreenHeight)};
+}
+
+function ThumbnailImage(props) {
+    const {initialWidth, initialHeight} = calculateThumbnailImageSize(props.imageWidth, props.imageHeight, props.windowHeight);
+    const [imageWidth, setImageWidth] = useState(initialWidth);
+    const [imageHeight, setImageHeight] = useState(initialHeight);
 
     /**
      * Update the state with the computed thumbnail sizes.
      *
      * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
-    updateImageSize({width, height}) {
-        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(width, height);
-        this.setState({thumbnailWidth, thumbnailHeight});
-    }
 
-    render() {
-        return (
-            <View style={[this.props.style, styles.overflowHidden]}>
-                <View style={[StyleUtils.getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
-                    <ImageWithSizeCalculation
-                        url={this.props.previewSourceURL}
-                        onMeasure={this.updateImageSize}
-                        isAuthTokenRequired={this.props.isAuthTokenRequired}
-                    />
-                </View>
-            </View>
-        );
+    function updateImageSize({width, height}) {
+        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
+        setImageWidth(thumbnailWidth);
+        setImageHeight(thumbnailHeight);
     }
+    return (
+        <View style={[props.style, styles.overflowHidden]}>
+            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
+                <ImageWithSizeCalculation
+                    url={props.previewSourceURL}
+                    onMeasure={(measurements) => updateImageSize(measurements)}
+                    isAuthTokenRequired={props.isAuthTokenRequired}
+                />
+            </View>
+        </View>
+    );
 }
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
+ThumbnailImage.displayName = 'ThumbnailImage';
 export default withWindowDimensions(ThumbnailImage);