Refactor withLocalize + fix displayName

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,59 +29,123 @@ 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,
-                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)})`;
-    WithLocalize.propTypes = {
+export default (WrappedComponent) => {
+    const propTypes = {
+        /** The user's preferred locale e.g. 'en', 'es-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)}),
         ]),
     };
-    WithLocalize.defaultProps = {
+
+    const defaultProps = {
         preferredLocale: CONST.DEFAULT_LOCALE,
         forwardedRef: undefined,
     };
-    return React.forwardRef((props, ref) => (
+
+    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);
+        }
+
+        /**
+         * @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,
+                timestamp,
+                includeTimezone,
+            );
+        }
+
+        /**
+         * @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);
+        }
+
+        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 = propTypes;
+    WithLocalize.defaultProps = defaultProps;
+
+    const withForwardedRef = React.forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         <WithLocalize {...props} forwardedRef={ref} />
     ));
-}
-export default compose(
-    withOnyx({
+
+    withForwardedRef.displayName = `withLocalize(${getComponentDisplayName(WrappedComponent)})`;
+
+    return withOnyx({
         preferredLocale: {
             key: ONYXKEYS.PREFERRED_LOCALE,
         },
-    }),
-    withLocalizeHOC,
-);
+    })(withForwardedRef);
+};
 
 export {
     withLocalizePropTypes,

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

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';
@@ -197,6 +196,4 @@ class ReportActionContextMenu extends React.Component {
 ReportActionContextMenu.propTypes = propTypes;
 ReportActionContextMenu.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-)(ReportActionContextMenu);
+export default withLocalize(ReportActionContextMenu);

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({

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: {