[No QA] [TS migration] Migrate 'useEnvironment.js' hook and 'withEnvironment.js' HOC

src/components/withEnvironment.js → src/components/withEnvironment.tsx

@@ -1,21 +1,26 @@
-import React, {createContext, useState, useEffect, forwardRef, useContext, useMemo} from 'react';
-import PropTypes from 'prop-types';
+import React, {ComponentType, RefAttributes, ReactNode, createContext, useState, useEffect, forwardRef, useContext, useMemo} from 'react';
+import {ValueOf} from 'type-fest';
 import * as Environment from '../libs/Environment/Environment';
 import CONST from '../CONST';
 import getComponentDisplayName from '../libs/getComponentDisplayName';
 
-const EnvironmentContext = createContext(null);
+type EnvironmentProviderProps = {
+    /** Actual content wrapped by this component */
+    children: ReactNode;
+};
 
-const environmentPropTypes = {
+type EnvironmentContextValue = {
     /** The string value representing the current environment */
-    environment: PropTypes.string.isRequired,
+    environment: ValueOf<typeof CONST.ENVIRONMENT>;
 
     /** The string value representing the URL of the current environment */
-    environmentURL: PropTypes.string.isRequired,
+    environmentURL: string;
 };
 
-function EnvironmentProvider({children}) {
-    const [environment, setEnvironment] = useState(CONST.ENVIRONMENT.PRODUCTION);
+const EnvironmentContext = createContext<EnvironmentContextValue | null>(null);
+
+function EnvironmentProvider({children}: EnvironmentProviderProps) {
+    const [environment, setEnvironment] = useState<ValueOf<typeof CONST.ENVIRONMENT>>(CONST.ENVIRONMENT.PRODUCTION);
     const [environmentURL, setEnvironmentURL] = useState(CONST.NEW_EXPENSIFY_URL);
 
     useEffect(() => {
@@ -24,7 +29,7 @@ function EnvironmentProvider({children}) {
     }, []);
 
     const contextValue = useMemo(
-        () => ({
+        (): EnvironmentContextValue => ({
             environment,
             environmentURL,
         }),
@@ -35,14 +40,11 @@ function EnvironmentProvider({children}) {
 }
 
 EnvironmentProvider.displayName = 'EnvironmentProvider';
-EnvironmentProvider.propTypes = {
-    /** Actual content wrapped by this component */
-    children: PropTypes.node.isRequired,
-};
 
-export default function withEnvironment(WrappedComponent) {
-    const WithEnvironment = forwardRef((props, ref) => {
-        const {environment, environmentURL} = useContext(EnvironmentContext);
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function withEnvironment<TComponentProps extends EnvironmentContextValue>(WrappedComponent: ComponentType<TComponentProps>) {
+    const WithEnvironment: ComponentType<TComponentProps & RefAttributes<ComponentType<TComponentProps>>> = forwardRef((props, ref) => {
+        const {environment, environmentURL} = useContext(EnvironmentContext) ?? {};
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
@@ -54,9 +56,10 @@ export default function withEnvironment(WrappedComponent) {
         );
     });
 
-    WithEnvironment.displayName = `withEnvironment(${getComponentDisplayName(WrappedComponent)})`;
+    WithEnvironment.displayName = `withEnvironment(${getComponentDisplayName(WrappedComponent as ComponentType)})`;
 
     return WithEnvironment;
 }
 
-export {EnvironmentContext, environmentPropTypes, EnvironmentProvider};
+export {EnvironmentContext, EnvironmentProvider};
+export type {EnvironmentContextValue};

src/hooks/useEnvironment.js → src/hooks/useEnvironment.ts

@@ -1,9 +1,15 @@
 import {useContext} from 'react';
 import CONST from '../CONST';
 import {EnvironmentContext} from '../components/withEnvironment';
+import type {EnvironmentContextValue} from '../components/withEnvironment';
 
-export default function useEnvironment() {
-    const {environment, environmentURL} = useContext(EnvironmentContext);
+type UseEnvironment = Partial<EnvironmentContextValue> & {
+    isProduction: boolean;
+    isDevelopment: boolean;
+};
+
+export default function useEnvironment(): UseEnvironment {
+    const {environment, environmentURL} = useContext(EnvironmentContext) ?? {};
     return {
         environment,
         environmentURL,

src/pages/ShareCodePage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, ScrollView} from 'react-native';
 import _ from 'underscore';
+import PropTypes from 'prop-types';
 import ScreenWrapper from '../components/ScreenWrapper';
 import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import Navigation from '../libs/Navigation/Navigation';
@@ -20,16 +21,18 @@ import CONST from '../CONST';
 import ContextMenuItem from '../components/ContextMenuItem';
 import * as UserUtils from '../libs/UserUtils';
 import ROUTES from '../ROUTES';
-import withEnvironment, {environmentPropTypes} from '../components/withEnvironment';
+import withEnvironment from '../components/withEnvironment';
 import * as Url from '../libs/Url';
 
 const propTypes = {
     /** The report currently being looked at */
     report: reportPropTypes,
 
+    /** The string value representing the URL of the current environment */
+    environmentURL: PropTypes.string.isRequired,
+
     ...withLocalizePropTypes,
     ...withCurrentUserPersonalDetailsPropTypes,
-    ...environmentPropTypes,
 };
 
 const defaultProps = {