From 8feb2e6dd81b31debcd2733dab52d8a0ad5673e4 Mon Sep 17 00:00:00 2001
From: alpeshl <49274347+alpeshl@users.noreply.github.com>
Date: Fri, 14 Jul 2023 13:05:23 +0530
Subject: [PATCH 1/3] refactor: migrate withEnvironment to function component

---
 src/components/EnvironmentBadge.js            | 19 ++++----
 src/components/ExpensifyCashLogo.js           |  9 ++--
 src/components/ExpensifyWordmark.js           | 13 +++--
 src/components/withEnvironment.js             | 47 ++++++-------------
 src/hooks/useEnvironment.js                   | 22 +++++++++
 .../settings/Preferences/PreferencesPage.js   |  7 ++-
 6 files changed, 59 insertions(+), 58 deletions(-)
 create mode 100644 src/hooks/useEnvironment.js

diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js
index 7602de8dbb87..af118a37f3b4 100644
--- a/src/components/EnvironmentBadge.js
+++ b/src/components/EnvironmentBadge.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import CONST from '../CONST';
-import withEnvironment, {environmentPropTypes} from './withEnvironment';
 import Badge from './Badge';
 import styles from '../styles/styles';
 import * as Environment from '../libs/Environment/Environment';
 import pkg from '../../package.json';
+import useEnvironment from '../hooks/useEnvironment';
 
 const ENVIRONMENT_SHORT_FORM = {
     [CONST.ENVIRONMENT.DEV]: 'DEV',
@@ -13,26 +13,27 @@ const ENVIRONMENT_SHORT_FORM = {
     [CONST.ENVIRONMENT.ADHOC]: 'ADHOC',
 };
 
-function EnvironmentBadge(props) {
+function EnvironmentBadge() {
+    const {environment} = useEnvironment();
+
     // If we are on production, don't show any badge
-    if (props.environment === CONST.ENVIRONMENT.PRODUCTION) {
+    if (environment === CONST.ENVIRONMENT.PRODUCTION) {
         return null;
     }
 
-    const text = Environment.isInternalTestBuild() ? `v${pkg.version} PR:${CONST.PULL_REQUEST_NUMBER}` : ENVIRONMENT_SHORT_FORM[props.environment];
+    const text = Environment.isInternalTestBuild() ? `v${pkg.version} PR:${CONST.PULL_REQUEST_NUMBER}` : ENVIRONMENT_SHORT_FORM[environment];
 
     return (
         <Badge
-            success={props.environment === CONST.ENVIRONMENT.STAGING || props.environment === CONST.ENVIRONMENT.ADHOC}
-            error={props.environment !== CONST.ENVIRONMENT.STAGING && props.environment !== CONST.ENVIRONMENT.ADHOC}
+            success={environment === CONST.ENVIRONMENT.STAGING || environment === CONST.ENVIRONMENT.ADHOC}
+            error={environment !== CONST.ENVIRONMENT.STAGING && environment !== CONST.ENVIRONMENT.ADHOC}
             text={text}
             badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge]}
             textStyles={[styles.headerEnvBadgeText]}
-            environment={props.environment}
+            environment={environment}
         />
     );
 }
 
 EnvironmentBadge.displayName = 'EnvironmentBadge';
-EnvironmentBadge.propTypes = environmentPropTypes;
-export default withEnvironment(EnvironmentBadge);
+export default EnvironmentBadge;
diff --git a/src/components/ExpensifyCashLogo.js b/src/components/ExpensifyCashLogo.js
index 8e6648407751..9b3de50dbf46 100644
--- a/src/components/ExpensifyCashLogo.js
+++ b/src/components/ExpensifyCashLogo.js
@@ -5,7 +5,7 @@ import DevLogo from '../../assets/images/new-expensify-dev.svg';
 import StagingLogo from '../../assets/images/new-expensify-stg.svg';
 import AdhocLogo from '../../assets/images/new-expensify-adhoc.svg';
 import CONST from '../CONST';
-import withEnvironment, {environmentPropTypes} from './withEnvironment';
+import useEnvironment from '../hooks/useEnvironment';
 
 const propTypes = {
     /** Width of logo */
@@ -13,8 +13,6 @@ const propTypes = {
 
     /** Height of logo */
     height: PropTypes.number.isRequired,
-
-    ...environmentPropTypes,
 };
 
 const logoComponents = {
@@ -25,8 +23,9 @@ const logoComponents = {
 };
 
 function ExpensifyCashLogo(props) {
+    const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
-    const LogoComponent = logoComponents[props.environment];
+    const LogoComponent = logoComponents[environment];
     return (
         <LogoComponent
             width={props.width}
@@ -37,4 +36,4 @@ function ExpensifyCashLogo(props) {
 
 ExpensifyCashLogo.displayName = 'ExpensifyCashLogo';
 ExpensifyCashLogo.propTypes = propTypes;
-export default withEnvironment(ExpensifyCashLogo);
+export default ExpensifyCashLogo;
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
index adff27376207..b29a5b7688e6 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.js
@@ -7,19 +7,17 @@ import DevLogo from '../../assets/images/expensify-logo--dev.svg';
 import StagingLogo from '../../assets/images/expensify-logo--staging.svg';
 import AdHocLogo from '../../assets/images/expensify-logo--adhoc.svg';
 import CONST from '../CONST';
-import withEnvironment, {environmentPropTypes} from './withEnvironment';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
-import compose from '../libs/compose';
 import themeColors from '../styles/themes/default';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
 import variables from '../styles/variables';
+import useEnvironment from '../hooks/useEnvironment';
 
 const propTypes = {
     /** Additional styles to add to the component */
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
-    ...environmentPropTypes,
     ...windowDimensionsPropTypes,
 };
 
@@ -34,15 +32,16 @@ const logoComponents = {
 };
 
 function ExpensifyWordmark(props) {
+    const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
-    const LogoComponent = logoComponents[props.environment] || AdHocLogo;
+    const LogoComponent = logoComponents[environment] || AdHocLogo;
     return (
         <>
             <View
                 style={[
-                    StyleUtils.getSignInWordmarkWidthStyle(props.environment, props.isSmallScreenWidth),
+                    StyleUtils.getSignInWordmarkWidthStyle(environment, props.isSmallScreenWidth),
                     StyleUtils.getHeight(props.isSmallScreenWidth ? variables.signInLogoHeightSmallScreen : variables.signInLogoHeight),
-                    props.isSmallScreenWidth && (props.environment === CONST.ENVIRONMENT.DEV || props.environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
+                    props.isSmallScreenWidth && (environment === CONST.ENVIRONMENT.DEV || environment === CONST.ENVIRONMENT.STAGING) ? styles.ml3 : {},
                     ...(_.isArray(props.style) ? props.style : [props.style]),
                 ]}
             >
@@ -55,4 +54,4 @@ function ExpensifyWordmark(props) {
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
 ExpensifyWordmark.defaultProps = defaultProps;
 ExpensifyWordmark.propTypes = propTypes;
-export default compose(withEnvironment, withWindowDimensions)(ExpensifyWordmark);
+export default withWindowDimensions(ExpensifyWordmark);
diff --git a/src/components/withEnvironment.js b/src/components/withEnvironment.js
index f9a0cf1fa964..10aacc826d12 100644
--- a/src/components/withEnvironment.js
+++ b/src/components/withEnvironment.js
@@ -1,8 +1,7 @@
-import React, {Component} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import * as Environment from '../libs/Environment/Environment';
-import CONST from '../CONST';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
+import useEnvironemnt from '../hooks/useEnvironment';
 
 const environmentPropTypes = {
     /** The string value representing the current environment */
@@ -13,36 +12,18 @@ const environmentPropTypes = {
 };
 
 export default function (WrappedComponent) {
-    class WithEnvironment extends Component {
-        constructor(props) {
-            super(props);
-
-            this.state = {
-                environment: CONST.ENVIRONMENT.PRODUCTION,
-                environmentURL: CONST.NEW_EXPENSIFY_URL,
-            };
-        }
-
-        componentDidMount() {
-            Environment.getEnvironment().then((environment) => {
-                this.setState({environment});
-            });
-            Environment.getEnvironmentURL().then((environmentURL) => {
-                this.setState({environmentURL});
-            });
-        }
-
-        render() {
-            return (
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...this.props}
-                    ref={this.props.forwardedRef}
-                    environment={this.state.environment}
-                    environmentURL={this.state.environmentURL}
-                />
-            );
-        }
+    function WithEnvironment(props) {
+        const {environment, environmentURL} = useEnvironemnt();
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                environment={environment}
+                environmentURL={environmentURL}
+            />
+        );
     }
 
     WithEnvironment.displayName = `withEnvironment(${getComponentDisplayName(WrappedComponent)})`;
diff --git a/src/hooks/useEnvironment.js b/src/hooks/useEnvironment.js
new file mode 100644
index 000000000000..548a908a0aac
--- /dev/null
+++ b/src/hooks/useEnvironment.js
@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react';
+import * as Environment from '../libs/Environment/Environment';
+import CONST from '../CONST';
+
+export default function useEnvironment() {
+    const [environment, setEnvironment] = useState(CONST.ENVIRONMENT.PRODUCTION);
+    const [environmentURL, setEnvironmentURL] = useState(CONST.NEW_EXPENSIFY_URL);
+
+    useEffect(() => {
+        Environment.getEnvironment().then((env) => {
+            setEnvironment(env);
+        });
+        Environment.getEnvironmentURL().then((envUrl) => {
+            setEnvironmentURL(envUrl);
+        });
+    }, []);
+
+    return {
+        environment,
+        environmentURL,
+    };
+}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 81b129439e96..c4459dabe8f7 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -16,9 +16,9 @@ import ScreenWrapper from '../../../components/ScreenWrapper';
 import Switch from '../../../components/Switch';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
-import withEnvironment, {environmentPropTypes} from '../../../components/withEnvironment';
 import TestToolMenu from '../../../components/TestToolMenu';
 import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
+import useEnvironment from '../../../hooks/useEnvironment';
 
 const propTypes = {
     /** The chat priority mode */
@@ -34,7 +34,6 @@ const propTypes = {
     preferredLocale: PropTypes.string.isRequired,
 
     ...withLocalizePropTypes,
-    ...environmentPropTypes,
 };
 
 const defaultProps = {
@@ -43,11 +42,12 @@ const defaultProps = {
 };
 
 function PreferencesPage(props) {
+    const {environment} = useEnvironment();
     const priorityModes = props.translate('priorityModePage.priorityModes');
     const languages = props.translate('languagePage.languages');
 
     // Enable additional test features in the staging or dev environments
-    const shouldShowTestToolMenu = _.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.ADHOC, CONST.ENVIRONMENT.DEV], props.environment);
+    const shouldShowTestToolMenu = _.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.ADHOC, CONST.ENVIRONMENT.DEV], environment);
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
@@ -103,7 +103,6 @@ PreferencesPage.defaultProps = defaultProps;
 PreferencesPage.displayName = 'PreferencesPage';
 
 export default compose(
-    withEnvironment,
     withLocalize,
     withOnyx({
         priorityMode: {

From c8eeb0764d63b1a10ad4348cd74759134bd8f308 Mon Sep 17 00:00:00 2001
From: alpeshl <49274347+alpeshl@users.noreply.github.com>
Date: Fri, 14 Jul 2023 21:08:51 +0530
Subject: [PATCH 2/3] fix code formatting and typo

---
 src/components/ExpensifyCashLogo.js | 1 +
 src/components/ExpensifyWordmark.js | 1 +
 src/components/withEnvironment.js   | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpensifyCashLogo.js b/src/components/ExpensifyCashLogo.js
index 9b3de50dbf46..338a0080854a 100644
--- a/src/components/ExpensifyCashLogo.js
+++ b/src/components/ExpensifyCashLogo.js
@@ -24,6 +24,7 @@ const logoComponents = {
 
 function ExpensifyCashLogo(props) {
     const {environment} = useEnvironment();
+    
     // PascalCase is required for React components, so capitalize the const here
     const LogoComponent = logoComponents[environment];
     return (
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
index b29a5b7688e6..ebe9d036e884 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.js
@@ -34,6 +34,7 @@ const logoComponents = {
 function ExpensifyWordmark(props) {
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
+    
     const LogoComponent = logoComponents[environment] || AdHocLogo;
     return (
         <>
diff --git a/src/components/withEnvironment.js b/src/components/withEnvironment.js
index 10aacc826d12..824d0912a5c1 100644
--- a/src/components/withEnvironment.js
+++ b/src/components/withEnvironment.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
-import useEnvironemnt from '../hooks/useEnvironment';
+import useEnvironment from '../hooks/useEnvironment';
 
 const environmentPropTypes = {
     /** The string value representing the current environment */
@@ -13,7 +13,7 @@ const environmentPropTypes = {
 
 export default function (WrappedComponent) {
     function WithEnvironment(props) {
-        const {environment, environmentURL} = useEnvironemnt();
+        const {environment, environmentURL} = useEnvironment();
 
         return (
             <WrappedComponent

From 7180731f0f25d8872ad3188fe9e4426bdb9dfbad Mon Sep 17 00:00:00 2001
From: alpeshl <49274347+alpeshl@users.noreply.github.com>
Date: Sat, 15 Jul 2023 00:01:20 +0530
Subject: [PATCH 3/3] fix prettier issue

---
 src/components/ExpensifyCashLogo.js | 2 +-
 src/components/ExpensifyWordmark.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpensifyCashLogo.js b/src/components/ExpensifyCashLogo.js
index 338a0080854a..e9f2fe244eca 100644
--- a/src/components/ExpensifyCashLogo.js
+++ b/src/components/ExpensifyCashLogo.js
@@ -24,7 +24,7 @@ const logoComponents = {
 
 function ExpensifyCashLogo(props) {
     const {environment} = useEnvironment();
-    
+
     // PascalCase is required for React components, so capitalize the const here
     const LogoComponent = logoComponents[environment];
     return (
diff --git a/src/components/ExpensifyWordmark.js b/src/components/ExpensifyWordmark.js
index ebe9d036e884..dde792e87e22 100644
--- a/src/components/ExpensifyWordmark.js
+++ b/src/components/ExpensifyWordmark.js
@@ -34,7 +34,7 @@ const logoComponents = {
 function ExpensifyWordmark(props) {
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
-    
+
     const LogoComponent = logoComponents[environment] || AdHocLogo;
     return (
         <>