refactor: migrate withEnvironment to function component

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;

src/components/ExpensifyCashLogo.js

@@ -5,16 +5,14 @@ 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 */
     width: PropTypes.number.isRequired,
 
     /** Height of logo */
     height: PropTypes.number.isRequired,
-
-    ...environmentPropTypes,
 };
 
 const logoComponents = {
@@ -25,8 +23,10 @@ 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 +37,4 @@ function ExpensifyCashLogo(props) {
 
 ExpensifyCashLogo.displayName = 'ExpensifyCashLogo';
 ExpensifyCashLogo.propTypes = propTypes;
-export default withEnvironment(ExpensifyCashLogo);
+export default ExpensifyCashLogo;

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,17 @@ 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 +55,4 @@ function ExpensifyWordmark(props) {
 ExpensifyWordmark.displayName = 'ExpensifyWordmark';
 ExpensifyWordmark.defaultProps = defaultProps;
 ExpensifyWordmark.propTypes = propTypes;
-export default compose(withEnvironment, withWindowDimensions)(ExpensifyWordmark);
+export default withWindowDimensions(ExpensifyWordmark);

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 useEnvironment 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} = useEnvironment();
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                environment={environment}
+                environmentURL={environmentURL}
+            />
+        );
     }
 
     WithEnvironment.displayName = `withEnvironment(${getComponentDisplayName(WrappedComponent)})`;

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,
+    };
+}

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