From fce7b22ccc4af341243cd68e2ee811b62c50b748 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 07:36:23 -1000
Subject: [PATCH 1/7] Fix localize displayname

---
 .../InvertedFlatList/BaseInvertedFlatList.js  |   5 +-
 src/components/withLocalize.js                | 103 +++++++++++-------
 .../home/report/ReportActionContextMenu.js    |   4 +-
 .../home/report/ReportActionItemSingle.js     |   2 +
 src/pages/home/report/ReportView.js           |   1 +
 5 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index 4e3c91ee0704..36bcd6c2e88f 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -150,10 +150,7 @@ class BaseInvertedFlatList extends Component {
                 // Web requires that items be measured or else crazy things happen when scrolling.
                 getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}
                 bounces={false}
-
-                // We keep this property very low so that chat switching remains fast
-                maxToRenderPerBatch={1}
-                windowSize={15}
+                windowSize={5}
                 removeClippedSubviews={this.props.shouldRemoveClippedSubviews}
             />
         );
diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 28b9409796d3..69bc1667da35 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
-import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
 import {translate} from '../libs/translate';
 import DateUtils from '../libs/DateUtils';
@@ -30,35 +29,65 @@ const withLocalizePropTypes = {
     fromLocalPhone: PropTypes.func.isRequired,
 };
 
-function withLocalizeHOC(WrappedComponent) {
-    const WithLocalize = (props) => {
-        const translations = {
-            translate: (phrase, variables) => translate(props.preferredLocale, phrase, variables),
-            numberFormat: (number, options) => numberFormat(props.preferredLocale, number, options),
-            timestampToRelative: timestamp => DateUtils.timestampToRelative(props.preferredLocale, timestamp),
-            timestampToDateTime: (timestamp, includeTimezone) => DateUtils.timestampToDateTime(
-                props.preferredLocale,
+const withLocalizeHOC = (WrappedComponent) => {
+    class WithLocalize extends React.Component {
+        constructor(props) {
+            super(props);
+
+            this.translate = this.translate.bind(this);
+            this.numberFormat = this.numberFormat.bind(this);
+            this.timestampToRelative = this.timestampToRelative.bind(this);
+            this.timestampToDateTime = this.timestampToDateTime.bind(this);
+            this.fromLocalPhone = this.fromLocalPhone.bind(this);
+            this.toLocalPhone = this.toLocalPhone.bind(this);
+            this.preferredLocale = 'en';
+        }
+
+        translate(phrase, variables) {
+            return translate(this.preferredLocale, phrase, variables);
+        }
+
+        numberFormat(number, options) {
+            return numberFormat(this.preferredLocale, number, options);
+        }
+
+        timestampToRelative(timestamp) {
+            return DateUtils.timestampToRelative(this.preferredLocale, timestamp);
+        }
+
+        timestampToDateTime(timestamp, includeTimezone) {
+            return DateUtils.timestampToDateTime(
+                this.preferredLocale,
                 timestamp,
                 includeTimezone,
-            ),
-            toLocalPhone: number => toLocalPhone(props.preferredLocale, number),
-            fromLocalPhone: number => fromLocalPhone(props.preferredLocale, number),
-        };
-        return (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={props.forwardedRef}
-                translate={translations.translate}
-                numberFormat={translations.numberFormat}
-                timestampToRelative={translations.timestampToRelative}
-                timestampToDateTime={translations.timestampToDateTime}
-                toLocalPhone={translations.toLocalPhone}
-                fromLocalPhone={translations.fromLocalPhone}
-            />
-        );
-    };
-    WithLocalize.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`;
+            );
+        }
+
+        toLocalPhone(number) {
+            return toLocalPhone(this.preferredLocale, number);
+        }
+
+        fromLocalPhone(number) {
+            return fromLocalPhone(this.preferredLocale, number);
+        }
+
+        render() {
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...this.props}
+                    ref={this.props.forwardedRef}
+                    translate={this.translate}
+                    numberFormat={this.numberFormat}
+                    timestampToRelative={this.timestampToRelative}
+                    timestampToDateTime={this.timestampToDateTime}
+                    toLocalPhone={this.toLocalPhone}
+                    fromLocalPhone={this.fromLocalPhone}
+                />
+            );
+        }
+    }
+
     WithLocalize.propTypes = {
         preferredLocale: PropTypes.string,
         forwardedRef: PropTypes.oneOfType([
@@ -70,19 +99,17 @@ function withLocalizeHOC(WrappedComponent) {
         preferredLocale: CONST.DEFAULT_LOCALE,
         forwardedRef: undefined,
     };
-    return React.forwardRef((props, ref) => (
+
+    const withForwardedRef = React.forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         <WithLocalize {...props} forwardedRef={ref} />
     ));
-}
-export default compose(
-    withOnyx({
-        preferredLocale: {
-            key: ONYXKEYS.PREFERRED_LOCALE,
-        },
-    }),
-    withLocalizeHOC,
-);
+
+    withForwardedRef.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`;
+    return withForwardedRef;
+};
+
+export default withLocalizeHOC;
 
 export {
     withLocalizePropTypes,
diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js
index ca8fcc35b04f..7386c9cd9f62 100755
--- a/src/pages/home/report/ReportActionContextMenu.js
+++ b/src/pages/home/report/ReportActionContextMenu.js
@@ -197,6 +197,4 @@ class ReportActionContextMenu extends React.Component {
 ReportActionContextMenu.propTypes = propTypes;
 ReportActionContextMenu.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-)(ReportActionContextMenu);
+export default withLocalize(ReportActionContextMenu);
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 1cf5bf99fce8..84befd28f4c8 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -95,6 +95,8 @@ const ReportActionItemSingle = ({
 
 ReportActionItemSingle.propTypes = propTypes;
 ReportActionItemSingle.defaultProps = defaultProps;
+ReportActionItemSingle.displayName = 'ReportActionItemSingle';
+
 export default compose(
     withLocalize,
     withOnyx({
diff --git a/src/pages/home/report/ReportView.js b/src/pages/home/report/ReportView.js
index 8481be201ed8..1eb4ea57589a 100644
--- a/src/pages/home/report/ReportView.js
+++ b/src/pages/home/report/ReportView.js
@@ -47,6 +47,7 @@ const ReportView = ({reportID, session}) => (
 
 ReportView.propTypes = propTypes;
 ReportView.defaultProps = defaultProps;
+ReportView.displayName = 'ReportView';
 
 export default withOnyx({
     session: {

From b00c34b91a1f36077a6104ee56fcf7119cc8561d Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 07:40:30 -1000
Subject: [PATCH 2/7] add Onyx back in

---
 src/components/withLocalize.js | 53 +++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 69bc1667da35..b0abd481162f 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -29,7 +29,20 @@ const withLocalizePropTypes = {
     fromLocalPhone: PropTypes.func.isRequired,
 };
 
-const withLocalizeHOC = (WrappedComponent) => {
+export default (WrappedComponent) => {
+    const propTypes = {
+        preferredLocale: PropTypes.string,
+        forwardedRef: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+        ]),
+    };
+
+    const defaultProps = {
+        preferredLocale: CONST.DEFAULT_LOCALE,
+        forwardedRef: undefined,
+    };
+
     class WithLocalize extends React.Component {
         constructor(props) {
             super(props);
@@ -40,35 +53,34 @@ const withLocalizeHOC = (WrappedComponent) => {
             this.timestampToDateTime = this.timestampToDateTime.bind(this);
             this.fromLocalPhone = this.fromLocalPhone.bind(this);
             this.toLocalPhone = this.toLocalPhone.bind(this);
-            this.preferredLocale = 'en';
         }
 
         translate(phrase, variables) {
-            return translate(this.preferredLocale, phrase, variables);
+            return translate(this.props.preferredLocale, phrase, variables);
         }
 
         numberFormat(number, options) {
-            return numberFormat(this.preferredLocale, number, options);
+            return numberFormat(this.props.preferredLocale, number, options);
         }
 
         timestampToRelative(timestamp) {
-            return DateUtils.timestampToRelative(this.preferredLocale, timestamp);
+            return DateUtils.timestampToRelative(this.props.preferredLocale, timestamp);
         }
 
         timestampToDateTime(timestamp, includeTimezone) {
             return DateUtils.timestampToDateTime(
-                this.preferredLocale,
+                this.props.preferredLocale,
                 timestamp,
                 includeTimezone,
             );
         }
 
         toLocalPhone(number) {
-            return toLocalPhone(this.preferredLocale, number);
+            return toLocalPhone(this.props.preferredLocale, number);
         }
 
         fromLocalPhone(number) {
-            return fromLocalPhone(this.preferredLocale, number);
+            return fromLocalPhone(this.props.preferredLocale, number);
         }
 
         render() {
@@ -88,28 +100,23 @@ const withLocalizeHOC = (WrappedComponent) => {
         }
     }
 
-    WithLocalize.propTypes = {
-        preferredLocale: PropTypes.string,
-        forwardedRef: PropTypes.oneOfType([
-            PropTypes.func,
-            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
-        ]),
-    };
-    WithLocalize.defaultProps = {
-        preferredLocale: CONST.DEFAULT_LOCALE,
-        forwardedRef: undefined,
-    };
+    WithLocalize.propTypes = propTypes;
+
+    WithLocalize.defaultProps = defaultProps;
 
     const withForwardedRef = React.forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         <WithLocalize {...props} forwardedRef={ref} />
     ));
 
-    withForwardedRef.displayName = `WithLocalize(${getComponentDisplayName(WrappedComponent)})`;
-    return withForwardedRef;
-};
+    withForwardedRef.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`;
 
-export default withLocalizeHOC;
+    return withOnyx({
+        preferredLocale: {
+            key: ONYXKEYS.PREFERRED_LOCALE,
+        },
+    })(withForwardedRef);
+};
 
 export {
     withLocalizePropTypes,

From 82bb5dd55e30e8132d089fb21abb0d30c5df0e3f Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 07:47:40 -1000
Subject: [PATCH 3/7] remove bad change

---
 src/components/InvertedFlatList/BaseInvertedFlatList.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
index 36bcd6c2e88f..4e3c91ee0704 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.js
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -150,7 +150,10 @@ class BaseInvertedFlatList extends Component {
                 // Web requires that items be measured or else crazy things happen when scrolling.
                 getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}
                 bounces={false}
-                windowSize={5}
+
+                // We keep this property very low so that chat switching remains fast
+                maxToRenderPerBatch={1}
+                windowSize={15}
                 removeClippedSubviews={this.props.shouldRemoveClippedSubviews}
             />
         );

From b15b302b41927fd2b1e7bfc8e0c7af14e27e048e Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 08:00:37 -1000
Subject: [PATCH 4/7] add docs

---
 src/components/withLocalize.js | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index b0abd481162f..5b2714be8c6c 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -55,18 +55,37 @@ export default (WrappedComponent) => {
             this.toLocalPhone = this.toLocalPhone.bind(this);
         }
 
+        /**
+         * @param {String} phrase
+         * @param {Object} [variables]
+         * @returns {String}
+         */
         translate(phrase, variables) {
             return translate(this.props.preferredLocale, phrase, variables);
         }
 
+        /**
+         * @param {Number} number
+         * @param {Intl.NumberFormatOptions} options
+         * @returns {String}
+         */
         numberFormat(number, options) {
             return numberFormat(this.props.preferredLocale, number, options);
         }
 
+        /**
+         * @param {Number} timestamp
+         * @returns {String}
+         */
         timestampToRelative(timestamp) {
             return DateUtils.timestampToRelative(this.props.preferredLocale, timestamp);
         }
 
+        /**
+         * @param {Number} timestamp
+         * @param {Boolean} [includeTimezone]
+         * @returns {String}
+         */
         timestampToDateTime(timestamp, includeTimezone) {
             return DateUtils.timestampToDateTime(
                 this.props.preferredLocale,
@@ -75,10 +94,18 @@ export default (WrappedComponent) => {
             );
         }
 
+        /**
+         * @param {Number} number
+         * @returns {String}
+         */
         toLocalPhone(number) {
             return toLocalPhone(this.props.preferredLocale, number);
         }
 
+        /**
+         * @param {Number} number
+         * @returns {String}
+         */
         fromLocalPhone(number) {
             return fromLocalPhone(this.props.preferredLocale, number);
         }
@@ -101,7 +128,6 @@ export default (WrappedComponent) => {
     }
 
     WithLocalize.propTypes = propTypes;
-
     WithLocalize.defaultProps = defaultProps;
 
     const withForwardedRef = React.forwardRef((props, ref) => (

From 4fc6270e2095f05fa703909ffa6ad2aaa8d4c493 Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 08:03:59 -1000
Subject: [PATCH 5/7] fix style

---
 src/pages/home/report/ReportActionContextMenu.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionContextMenu.js b/src/pages/home/report/ReportActionContextMenu.js
index 7386c9cd9f62..f7e0b7f63d71 100755
--- a/src/pages/home/report/ReportActionContextMenu.js
+++ b/src/pages/home/report/ReportActionContextMenu.js
@@ -14,7 +14,6 @@ import {
 import ContextMenuItem from '../../../components/ContextMenuItem';
 import ReportActionPropTypes from './ReportActionPropTypes';
 import Clipboard from '../../../libs/Clipboard';
-import compose from '../../../libs/compose';
 import {isReportMessageAttachment, canEditReportAction, canDeleteReportAction} from '../../../libs/reportUtils';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';

From 79931f7ea412c44d02bafd66dc9a9b827a0dbb6f Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 08:12:26 -1000
Subject: [PATCH 6/7] add missing docs to propTypes

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

diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 5b2714be8c6c..1bf30d50e5db 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -31,7 +31,10 @@ const withLocalizePropTypes = {
 
 export default (WrappedComponent) => {
     const propTypes = {
+        /** The user's preferred locale e.g. en or es */
         preferredLocale: PropTypes.string,
+
+        /** Passed ref from whatever component is wrapped in the HOC */
         forwardedRef: PropTypes.oneOfType([
             PropTypes.func,
             PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),

From 67e0a87183f96c005ed7af7f05bcd0d13f549ddb Mon Sep 17 00:00:00 2001
From: Marc Glasser <marc.aaron.glasser@gmail.com>
Date: Tue, 20 Jul 2021 08:13:15 -1000
Subject: [PATCH 7/7] fix docs

---
 src/components/withLocalize.js | 2 +-
 src/libs/LocalePhoneNumber.js  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/withLocalize.js b/src/components/withLocalize.js
index 1bf30d50e5db..daa35a12c41d 100755
--- a/src/components/withLocalize.js
+++ b/src/components/withLocalize.js
@@ -31,7 +31,7 @@ const withLocalizePropTypes = {
 
 export default (WrappedComponent) => {
     const propTypes = {
-        /** The user's preferred locale e.g. en or es */
+        /** The user's preferred locale e.g. 'en', 'es-ES' */
         preferredLocale: PropTypes.string,
 
         /** Passed ref from whatever component is wrapped in the HOC */
diff --git a/src/libs/LocalePhoneNumber.js b/src/libs/LocalePhoneNumber.js
index 4d51e711d705..3d47e7c6a5a9 100644
--- a/src/libs/LocalePhoneNumber.js
+++ b/src/libs/LocalePhoneNumber.js
@@ -10,7 +10,7 @@ import translations from '../languages/translations';
  *
  * @param {String} locale eg 'en', 'es-ES'
  * @param {String} number
- * @returns {string}
+ * @returns {String}
  */
 function toLocalPhone(locale, number) {
     const numString = lodashTrim(number);
@@ -31,7 +31,7 @@ function toLocalPhone(locale, number) {
  *
  * @param {String} locale eg 'en', 'es-ES'
  * @param {String} number
- * @returns {string}
+ * @returns {String}
  */
 function fromLocalPhone(locale, number) {
     const numString = lodashTrim(number);
