From 996c24576ab62d299f0e096a637d30f7ef180938 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Fri, 16 Jun 2023 20:55:07 +1200
Subject: [PATCH 01/19] pushing a draft PR to change component to function for
 thumbnail images

---
 src/components/ThumbnailImage.js | 94 +++++++++++++++-----------------
 1 file changed, 44 insertions(+), 50 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 5ac519c3bfbc..fda728351592 100644
--- a/src/components/ThumbnailImage.js
+++ b/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,18 +33,6 @@ const defaultProps = {
     imageHeight: 200,
 };
 
-class ThumbnailImage extends PureComponent {
-    constructor(props) {
-        super(props);
-
-        this.updateImageSize = this.updateImageSize.bind(this);
-        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(props.imageWidth, props.imageHeight);
-        this.state = {
-            thumbnailWidth,
-            thumbnailHeight,
-        };
-    }
-
     /**
      * Compute the thumbnails width and height given original image dimensions.
      *
@@ -52,54 +40,60 @@ class ThumbnailImage extends PureComponent {
      * @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, 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)};
+
+
+function 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, 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)};
+}
+
+
+function ThumbnailImage() {
+const [imageWidth, setImageWidth] = useState(200);
+const [imageHeight, setImageHeight] = useState(200);
+
+     /**
      * Update the state with the computed thumbnail sizes.
      *
      * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
-    updateImageSize({width, height}) {
+    
+     function updateImageSize({width, height}) {
         const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(width, height);
-        this.setState({thumbnailWidth, thumbnailHeight});
+        this.setState({thumbnailWidth, thumbnailHeight}); --// use callback function
     }
 
-    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>
+    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>
+    );
 }
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
-export default withWindowDimensions(ThumbnailImage);
+export default withWindowDimensions(ThumbnailImage);
\ No newline at end of file

From 5523aa29a174b075516d7a0755bd47179195e034 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 27 Jun 2023 09:19:10 +1200
Subject: [PATCH 02/19] syntax changes and debugging completed with puneet

---
 src/components/ThumbnailImage.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index fda728351592..16b3b1c9965a 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -42,7 +42,7 @@ const defaultProps = {
      */
 
 
-function calculateThumbnailImageSize(width, height) {
+function calculateThumbnailImageSize(width, height, windowHeight) {
     if (!width || !height) {
         return {};
     }
@@ -52,7 +52,7 @@ function calculateThumbnailImageSize(width, height) {
     // 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);
+    let thumbnailScreenHeight = lodashClamp(imageHeight, 40, windowHeight * 0.4);
     const aspectRatio = height / width;
 
     // If thumbnail height is greater than its width, then the image is portrait otherwise landscape.
@@ -65,8 +65,7 @@ function calculateThumbnailImageSize(width, height) {
     return {thumbnailWidth: Math.max(40, thumbnailScreenWidth), thumbnailHeight: Math.max(40, thumbnailScreenHeight)};
 }
 
-
-function ThumbnailImage() {
+function ThumbnailImage(props) {
 const [imageWidth, setImageWidth] = useState(200);
 const [imageHeight, setImageHeight] = useState(200);
 
@@ -77,17 +76,17 @@ const [imageHeight, setImageHeight] = useState(200);
      */
     
      function updateImageSize({width, height}) {
-        const {thumbnailWidth, thumbnailHeight} = this.calculateThumbnailImageSize(width, height);
-        this.setState({thumbnailWidth, thumbnailHeight}); --// use callback function
+        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
+        setImageWidth(thumbnailWidth);
+        setImageHeight(thumbnailHeight);
     }
-
     return (
-        <View style={[this.props.style, styles.overflowHidden]}>
-            <View style={[StyleUtils.getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
+        <View style={[props.style, styles.overflowHidden]}>
+            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
-                    url={this.props.previewSourceURL}
-                    onMeasure={this.updateImageSize}
-                    isAuthTokenRequired={this.props.isAuthTokenRequired}
+                    url={props.previewSourceURL}
+                    onMeasure={updateImageSize}
+                    isAuthTokenRequired={props.isAuthTokenRequired}
                 />
             </View>
         </View>

From a942097b42a442e732a9135b4926eb753916e284 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 27 Jun 2023 09:23:26 +1200
Subject: [PATCH 03/19] cleaned up code with prettier

---
 src/components/ThumbnailImage.js | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 16b3b1c9965a..402a9d69672a 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,5 +1,5 @@
 import lodashClamp from 'lodash/clamp';
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
@@ -33,14 +33,13 @@ const defaultProps = {
     imageHeight: 200,
 };
 
-    /**
-     * 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.
-     */
-
+/**
+ * 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.
+ */
 
 function calculateThumbnailImageSize(width, height, windowHeight) {
     if (!width || !height) {
@@ -66,16 +65,16 @@ function calculateThumbnailImageSize(width, height, windowHeight) {
 }
 
 function ThumbnailImage(props) {
-const [imageWidth, setImageWidth] = useState(200);
-const [imageHeight, setImageHeight] = useState(200);
+    const [imageWidth, setImageWidth] = useState(200);
+    const [imageHeight, setImageHeight] = useState(200);
 
-     /**
+    /**
      * Update the state with the computed thumbnail sizes.
      *
      * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
-    
-     function updateImageSize({width, height}) {
+
+    function updateImageSize({width, height}) {
         const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
         setImageWidth(thumbnailWidth);
         setImageHeight(thumbnailHeight);
@@ -95,4 +94,4 @@ const [imageHeight, setImageHeight] = useState(200);
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
-export default withWindowDimensions(ThumbnailImage);
\ No newline at end of file
+export default withWindowDimensions(ThumbnailImage);

From f220bd5a356545af7ba31770c5457172d63d1f79 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 27 Jun 2023 09:26:07 +1200
Subject: [PATCH 04/19] added display name

---
 src/components/ThumbnailImage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 402a9d69672a..111fa2deff67 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -94,4 +94,5 @@ function ThumbnailImage(props) {
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
+ThumbnailImage.displayName = 'ThumbnailImage';
 export default withWindowDimensions(ThumbnailImage);

From 07a46eecc2222adb8fe30f367a8e45e0ecabec9c Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 27 Jun 2023 13:58:34 +1200
Subject: [PATCH 05/19] changes to clean up the lint failures

---
 src/components/ThumbnailImage.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 111fa2deff67..1c9850137c22 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -65,8 +65,10 @@ function calculateThumbnailImageSize(width, height, windowHeight) {
 }
 
 function ThumbnailImage(props) {
-    const [imageWidth, setImageWidth] = useState(200);
-    const [imageHeight, setImageHeight] = useState(200);
+
+    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.
@@ -84,7 +86,7 @@ function ThumbnailImage(props) {
             <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
-                    onMeasure={updateImageSize}
+                    onMeasure={() => updateImageSize()}
                     isAuthTokenRequired={props.isAuthTokenRequired}
                 />
             </View>

From 2e1f803946ea2c50e7c0770a6d7945933689446d Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Wed, 5 Jul 2023 15:52:36 +1200
Subject: [PATCH 06/19] ran prettier to tidy code changes

---
 src/components/ThumbnailImage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 1c9850137c22..3c7ae45593b1 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -65,7 +65,6 @@ function calculateThumbnailImageSize(width, height, windowHeight) {
 }
 
 function ThumbnailImage(props) {
-
     const {initialWidth, initialHeight} = calculateThumbnailImageSize(props.imageWidth, props.imageHeight, props.windowHeight);
     const [imageWidth, setImageWidth] = useState(initialWidth);
     const [imageHeight, setImageHeight] = useState(initialHeight);

From 220fc1eca1716422fc509787a2a00417c51e57fa Mon Sep 17 00:00:00 2001
From: kadiealexander <59587260+kadiealexander@users.noreply.github.com>
Date: Wed, 5 Jul 2023 15:53:37 +1200
Subject: [PATCH 07/19] Update src/components/ThumbnailImage.js

Co-authored-by: Puneet Lath <puneet@expensify.com>
---
 src/components/ThumbnailImage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 3c7ae45593b1..57a73afb47cf 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -85,7 +85,7 @@ function ThumbnailImage(props) {
             <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
-                    onMeasure={() => updateImageSize()}
+                    onMeasure={(width, height) => updateImageSize(width, height)}
                     isAuthTokenRequired={props.isAuthTokenRequired}
                 />
             </View>

From 6d28dcfad1bf0dad6d8d5d7350f0fc5a5111d47a Mon Sep 17 00:00:00 2001
From: kadiealexander <59587260+kadiealexander@users.noreply.github.com>
Date: Fri, 7 Jul 2023 17:15:24 +1200
Subject: [PATCH 08/19] Updating the arguments for the onMeasure function

Updating the arguments for the onMeasure function

Co-authored-by: Puneet Lath <puneet@expensify.com>
---
 src/components/ThumbnailImage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 57a73afb47cf..6f68858fe9e3 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -85,7 +85,7 @@ function ThumbnailImage(props) {
             <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
-                    onMeasure={(width, height) => updateImageSize(width, height)}
+                    onMeasure={(measurements) => updateImageSize(measurements)}
                     isAuthTokenRequired={props.isAuthTokenRequired}
                 />
             </View>

From fd8f613771a1a3e1cc30fa5a3093388262fdd28c Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 11 Jul 2023 09:04:54 +1200
Subject: [PATCH 09/19] update updateImageSize to use callback function

---
 src/components/ThumbnailImage.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 6f68858fe9e3..70047d1136ed 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,5 +1,9 @@
 import lodashClamp from 'lodash/clamp';
+<<<<<<< Updated upstream
 import React, {useState} from 'react';
+=======
+import React, {useCallback,useState} from 'react';
+>>>>>>> Stashed changes
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
@@ -75,17 +79,33 @@ function ThumbnailImage(props) {
      * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
 
+<<<<<<< Updated upstream
     function updateImageSize({width, height}) {
         const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
         setImageWidth(thumbnailWidth);
         setImageHeight(thumbnailHeight);
     }
+=======
+    const updateImageSize = useCallback(({width, height}) => {
+        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
+        setImageWidth(thumbnailWidth);
+        setImageHeight(thumbnailHeight);
+    }, [props.windowHeight])
+>>>>>>> Stashed changes
     return (
         <View style={[props.style, styles.overflowHidden]}>
             <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
+<<<<<<< Updated upstream
                     onMeasure={(measurements) => updateImageSize(measurements)}
+=======
+<<<<<<< Updated upstream
+                    onMeasure={() => updateImageSize()}
+=======
+                    onMeasure={(measurements) => updateImageSize(measurements)}
+>>>>>>> Stashed changes
+>>>>>>> Stashed changes
                     isAuthTokenRequired={props.isAuthTokenRequired}
                 />
             </View>
@@ -96,4 +116,8 @@ function ThumbnailImage(props) {
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
 ThumbnailImage.displayName = 'ThumbnailImage';
+<<<<<<< Updated upstream
+export default withWindowDimensions(ThumbnailImage);
+=======
 export default withWindowDimensions(ThumbnailImage);
+>>>>>>> Stashed changes

From 241714ebc281dd18f2ec4111a35ed90bfcbcc118 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 11 Jul 2023 09:11:32 +1200
Subject: [PATCH 10/19] update onMeasure to pass updateImageSize function
 directly

---
 src/components/ThumbnailImage.js | 28 ++--------------------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 70047d1136ed..50098dede230 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,9 +1,5 @@
 import lodashClamp from 'lodash/clamp';
-<<<<<<< Updated upstream
 import React, {useState} from 'react';
-=======
-import React, {useCallback,useState} from 'react';
->>>>>>> Stashed changes
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
@@ -79,33 +75,17 @@ function ThumbnailImage(props) {
      * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
 
-<<<<<<< Updated upstream
-    function updateImageSize({width, height}) {
-        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
-        setImageWidth(thumbnailWidth);
-        setImageHeight(thumbnailHeight);
-    }
-=======
     const updateImageSize = useCallback(({width, height}) => {
         const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
         setImageWidth(thumbnailWidth);
         setImageHeight(thumbnailHeight);
     }, [props.windowHeight])
->>>>>>> Stashed changes
     return (
         <View style={[props.style, styles.overflowHidden]}>
             <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
-<<<<<<< Updated upstream
-                    onMeasure={(measurements) => updateImageSize(measurements)}
-=======
-<<<<<<< Updated upstream
-                    onMeasure={() => updateImageSize()}
-=======
-                    onMeasure={(measurements) => updateImageSize(measurements)}
->>>>>>> Stashed changes
->>>>>>> Stashed changes
+                    onMeasure={updateImageSize}
                     isAuthTokenRequired={props.isAuthTokenRequired}
                 />
             </View>
@@ -116,8 +96,4 @@ function ThumbnailImage(props) {
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
 ThumbnailImage.displayName = 'ThumbnailImage';
-<<<<<<< Updated upstream
-export default withWindowDimensions(ThumbnailImage);
-=======
-export default withWindowDimensions(ThumbnailImage);
->>>>>>> Stashed changes
+export default withWindowDimensions(ThumbnailImage);
\ No newline at end of file

From 967d52197834caa6e4221a73f9e1b33dbbded099 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 11 Jul 2023 09:20:06 +1200
Subject: [PATCH 11/19] use useWindowDimensions hook instead of HOC prop

---
 src/components/ThumbnailImage.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 50098dede230..13893e3bcb7c 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 
 const propTypes = {
     /** Source URL for the preview image */
@@ -23,8 +23,6 @@ const propTypes = {
 
     /** Height of the thumbnail image */
     imageHeight: PropTypes.number,
-
-    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -65,10 +63,12 @@ function calculateThumbnailImageSize(width, height, windowHeight) {
 }
 
 function ThumbnailImage(props) {
-    const {initialWidth, initialHeight} = calculateThumbnailImageSize(props.imageWidth, props.imageHeight, props.windowHeight);
+    const {windowHeight} = useWindowDimensions();
+    const {initialWidth, initialHeight} = calculateThumbnailImageSize(props.imageWidth, props.imageHeight, windowHeight);
     const [imageWidth, setImageWidth] = useState(initialWidth);
     const [imageHeight, setImageHeight] = useState(initialHeight);
 
+
     /**
      * Update the state with the computed thumbnail sizes.
      *
@@ -76,10 +76,10 @@ function ThumbnailImage(props) {
      */
 
     const updateImageSize = useCallback(({width, height}) => {
-        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, props.windowHeight);
+        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height,windowHeight);
         setImageWidth(thumbnailWidth);
         setImageHeight(thumbnailHeight);
-    }, [props.windowHeight])
+    }, [windowHeight])
     return (
         <View style={[props.style, styles.overflowHidden]}>
             <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
@@ -95,5 +95,4 @@ function ThumbnailImage(props) {
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
-ThumbnailImage.displayName = 'ThumbnailImage';
-export default withWindowDimensions(ThumbnailImage);
\ No newline at end of file
+ThumbnailImage.displayName = 'ThumbnailImage';
\ No newline at end of file

From b5b09a8ab255ab7f8f55096ee5becc5dfb421fd0 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 11 Jul 2023 09:34:32 +1200
Subject: [PATCH 12/19] update variables to factor in undefined states

---
 src/components/ThumbnailImage.js | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 13893e3bcb7c..0bfb7f9f4e2b 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,5 +1,5 @@
 import lodashClamp from 'lodash/clamp';
-import React, {useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
@@ -64,10 +64,9 @@ function calculateThumbnailImageSize(width, height, windowHeight) {
 
 function ThumbnailImage(props) {
     const {windowHeight} = useWindowDimensions();
-    const {initialWidth, initialHeight} = calculateThumbnailImageSize(props.imageWidth, props.imageHeight, windowHeight);
-    const [imageWidth, setImageWidth] = useState(initialWidth);
-    const [imageHeight, setImageHeight] = useState(initialHeight);
-
+    const initialDimensions = calculateThumbnailImageSize(props.imageWidth, props.imageHeight, windowHeight);
+    const [imageWidth, setImageWidth] = useState(initialDimensions.thumbnailWidth);
+    const [imageHeight, setImageHeight] = useState(initialDimensions.thumbnailHeight);
 
     /**
      * Update the state with the computed thumbnail sizes.
@@ -75,14 +74,17 @@ function ThumbnailImage(props) {
      * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
 
-    const updateImageSize = useCallback(({width, height}) => {
-        const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height,windowHeight);
-        setImageWidth(thumbnailWidth);
-        setImageHeight(thumbnailHeight);
-    }, [windowHeight])
+    const updateImageSize = useCallback(
+        ({width, height}) => {
+            const {thumbnailWidth, thumbnailHeight} = calculateThumbnailImageSize(width, height, windowHeight);
+            setImageWidth(thumbnailWidth);
+            setImageHeight(thumbnailHeight);
+        },
+        [windowHeight],
+    );
     return (
         <View style={[props.style, styles.overflowHidden]}>
-            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth ?? 200, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
                     onMeasure={updateImageSize}
@@ -95,4 +97,5 @@ function ThumbnailImage(props) {
 
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
-ThumbnailImage.displayName = 'ThumbnailImage';
\ No newline at end of file
+ThumbnailImage.displayName = 'ThumbnailImage';
+export default React.memo(ThumbnailImage);

From 926ab9f718dd38b0cea26080a8178d47c9c3c962 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Thu, 13 Jul 2023 17:34:50 +1200
Subject: [PATCH 13/19] fix lint

---
 src/components/ThumbnailImage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 0bfb7f9f4e2b..089d97524c10 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -84,7 +84,7 @@ function ThumbnailImage(props) {
     );
     return (
         <View style={[props.style, styles.overflowHidden]}>
-            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth ?? 200, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth || 200, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
                     onMeasure={updateImageSize}
@@ -98,4 +98,4 @@ function ThumbnailImage(props) {
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
 ThumbnailImage.displayName = 'ThumbnailImage';
-export default React.memo(ThumbnailImage);
+export default React.memo(ThumbnailImage);
\ No newline at end of file

From 72385653eafde1a24519d289debcdd1759094501 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Thu, 13 Jul 2023 17:40:28 +1200
Subject: [PATCH 14/19] fix prettier

---
 src/components/ThumbnailImage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 089d97524c10..2556fe9ae29c 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -98,4 +98,4 @@ function ThumbnailImage(props) {
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
 ThumbnailImage.displayName = 'ThumbnailImage';
-export default React.memo(ThumbnailImage);
\ No newline at end of file
+export default React.memo(ThumbnailImage);

From 51c08ad3c2697bec5526b61a3cc5437116207f21 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 25 Jul 2023 09:22:39 +1200
Subject: [PATCH 15/19] fix potential undefined value error

---
 src/components/ThumbnailImage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 2556fe9ae29c..99eb9da8f1da 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -41,7 +41,7 @@ const defaultProps = {
 
 function calculateThumbnailImageSize(width, height, windowHeight) {
     if (!width || !height) {
-        return {};
+        return {thumbnailWidth: 200, thumbnailHeight: 200};
     }
 
     // Width of the thumbnail works better as a constant than it does
@@ -84,7 +84,7 @@ function ThumbnailImage(props) {
     );
     return (
         <View style={[props.style, styles.overflowHidden]}>
-            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth || 200, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={[StyleUtils.getWidthAndHeightStyle(imageWidth, imageHeight), styles.alignItemsCenter, styles.justifyContentCenter]}>
                 <ImageWithSizeCalculation
                     url={props.previewSourceURL}
                     onMeasure={updateImageSize}
@@ -98,4 +98,4 @@ function ThumbnailImage(props) {
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
 ThumbnailImage.displayName = 'ThumbnailImage';
-export default React.memo(ThumbnailImage);
+export default React.memo(ThumbnailImage);
\ No newline at end of file

From 75e884bf4beb612ff322f4a613e00e624d9a8a5d Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Tue, 25 Jul 2023 09:54:28 +1200
Subject: [PATCH 16/19] make it prettier

---
 src/components/ThumbnailImage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 99eb9da8f1da..895e8baefb7f 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -98,4 +98,4 @@ function ThumbnailImage(props) {
 ThumbnailImage.propTypes = propTypes;
 ThumbnailImage.defaultProps = defaultProps;
 ThumbnailImage.displayName = 'ThumbnailImage';
-export default React.memo(ThumbnailImage);
\ No newline at end of file
+export default React.memo(ThumbnailImage);

From 65b14c426c0aa1577d654ca7f74c759969f7e669 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Mon, 31 Jul 2023 18:04:06 +1200
Subject: [PATCH 17/19] adding new function argument to JSDocs description

---
 src/components/ThumbnailImage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index a67c86dbabe6..bd48cae5ffa1 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -37,6 +37,7 @@ const defaultProps = {
  *
  * @param {Number} width - Width of the original image.
  * @param {Number} height - Height of the original image.
+ * @param {Number} windowHeight - Height of the browser/device window.
  * @returns {Object} - Object containing thumbnails width and height.
  */
 

From 09872e578b314db6959aa3cda0f0863c83812756 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Mon, 31 Jul 2023 18:14:03 +1200
Subject: [PATCH 18/19] adding new JSDocs parameter for new function argument

---
 src/components/ThumbnailImage.js | 41 ++++++++++----------------------
 1 file changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index bd48cae5ffa1..348a575d9e30 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,12 +1,11 @@
 import lodashClamp from 'lodash/clamp';
-import React, {PureComponent} from 'react';
-import {View, Dimensions} from 'react-native';
+import React, {useCallback, useState} from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import * as DeviceCapabilities from '../libs/DeviceCapabilities';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 
 const propTypes = {
     /** Source URL for the preview image */
@@ -37,7 +36,7 @@ const defaultProps = {
  *
  * @param {Number} width - Width of the original image.
  * @param {Number} height - Height of the original image.
- * @param {Number} windowHeight - Height of the browser/device window.
+ * @param {Number} windowHeight - Height of the device/browser window.
  * @returns {Object} - Object containing thumbnails width and height.
  */
 
@@ -46,27 +45,13 @@ function calculateThumbnailImageSize(width, height, windowHeight) {
         return {thumbnailWidth: 200, thumbnailHeight: 200};
     }
 
-    /**
-     * 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);
-        // On mWeb, when soft keyboard opens, window height changes, making thumbnail height inconsistent. We use screen height instead.
-        const screenHeight = DeviceCapabilities.canUseTouchScreen() ? Dimensions.get('screen').height : this.props.windowHeight;
-        let thumbnailScreenHeight = lodashClamp(imageHeight, 40, screenHeight * 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, 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.
@@ -87,9 +72,7 @@ function ThumbnailImage(props) {
     /**
      * Update the state with the computed thumbnail sizes.
      *
-     * @param {Object} Params - width and height of the original image.
-     * @param {Number} Params.width
-     * @param {Number} Params.height
+     * @param {{ width: number, height: number }} Params - width and height of the original image.
      */
 
     const updateImageSize = useCallback(

From 2ea290c98bfa25ea006baa9378980330858786f6 Mon Sep 17 00:00:00 2001
From: Kadie Alexander <k.alexander@expensify.com>
Date: Mon, 31 Jul 2023 18:20:48 +1200
Subject: [PATCH 19/19] remove check for invalid image height/width since we'll
 always pass an image

---
 src/components/ThumbnailImage.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 348a575d9e30..47516164864f 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -41,10 +41,6 @@ const defaultProps = {
  */
 
 function calculateThumbnailImageSize(width, height, windowHeight) {
-    if (!width || !height) {
-        return {thumbnailWidth: 200, thumbnailHeight: 200};
-    }
-
     // 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