Merge pull request Expensify#30347 from software-mansion-labs/ts/Test…

…ToolsModal [TS migration] Migrate 'TestToolsModal.js' and 'TestToolMenu.js' components to TypeScript
paultsimura · Dec 1, 2023 · c7eb0e9 · c7eb0e9
2 parents 27fd4e2 + aba5148
commit c7eb0e9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 51 deletions.
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
@@ -12,7 +12,7 @@ type PopoverAnchorPosition = {
 };
 
 type BaseModalProps = WindowDimensionsProps &
-    ModalProps & {
+    Partial<ModalProps> & {
         /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
         fullscreen?: boolean;
 

diff --git a/src/components/TestToolMenu.js → src/components/TestToolMenu.tsx b/src/components/TestToolMenu.js → src/components/TestToolMenu.tsx
@@ -1,7 +1,5 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -10,34 +8,30 @@ import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
+import NetworkOnyx from '@src/types/onyx/Network';
+import UserOnyx from '@src/types/onyx/User';
 import Button from './Button';
-import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
 import Text from './Text';
 
-const propTypes = {
+type TestToolMenuOnyxProps = {
     /** User object in Onyx */
-    user: PropTypes.shape({
-        /** Whether we should use the staging version of the secure API server */
-        shouldUseStagingServer: PropTypes.bool,
-    }),
+    user: OnyxEntry<UserOnyx>;
+};
 
+type TestToolMenuProps = TestToolMenuOnyxProps & {
     /** Network object in Onyx */
-    network: networkPropTypes.isRequired,
+    network: OnyxEntry<NetworkOnyx>;
 };
 
-const defaultProps = {
-    user: {
-        // The default value is environment specific and can't be set with `defaultProps` (ENV is not resolved yet)
-        // When undefined (during render) STAGING defaults to `true`, other envs default to `false`
-        shouldUseStagingServer: undefined,
-    },
-};
+const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false};
 
-function TestToolMenu(props) {
+function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
+    const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
     const styles = useThemeStyles();
+
     return (
         <>
             <Text
@@ -54,8 +48,8 @@ function TestToolMenu(props) {
                 <TestToolRow title="Use Staging Server">
                     <Switch
                         accessibilityLabel="Use Staging Server"
-                        isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
-                        onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+                        isOn={shouldUseStagingServer}
+                        onToggle={() => User.setShouldUseStagingServer(!shouldUseStagingServer)}
                     />
                 </TestToolRow>
             )}
@@ -64,17 +58,17 @@ function TestToolMenu(props) {
             <TestToolRow title="Force offline">
                 <Switch
                     accessibilityLabel="Force offline"
-                    isOn={Boolean(props.network.shouldForceOffline)}
-                    onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
+                    isOn={!!network?.shouldForceOffline}
+                    onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
                 />
             </TestToolRow>
 
             {/* When toggled all network requests will fail. */}
             <TestToolRow title="Simulate failing network requests">
                 <Switch
                     accessibilityLabel="Simulate failing network requests"
-                    isOn={Boolean(props.network.shouldFailAllRequests)}
-                    onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
+                    isOn={!!network?.shouldFailAllRequests}
+                    onToggle={() => Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)}
                 />
             </TestToolRow>
 
@@ -99,15 +93,13 @@ function TestToolMenu(props) {
     );
 }
 
-TestToolMenu.propTypes = propTypes;
-TestToolMenu.defaultProps = defaultProps;
 TestToolMenu.displayName = 'TestToolMenu';
 
 export default compose(
-    withNetwork(),
-    withOnyx({
+    withOnyx<TestToolMenuProps, TestToolMenuOnyxProps>({
         user: {
             key: ONYXKEYS.USER,
         },
     }),
+    withNetwork(),
 )(TestToolMenu);
diff --git a/src/components/TestToolsModal.js → src/components/TestToolsModal.tsx b/src/components/TestToolsModal.js → src/components/TestToolsModal.tsx
@@ -1,35 +1,26 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import Modal from './Modal';
 import TestToolMenu from './TestToolMenu';
 
-const propTypes = {
-    /** Details about modal */
-    modal: PropTypes.shape({
-        /** Indicates when an Alert modal is about to be visible */
-        willAlertModalBecomeVisible: PropTypes.bool,
-    }),
-
+type TestToolsModalOnyxProps = {
     /** Whether the test tools modal is open */
-    isTestToolsModalOpen: PropTypes.bool,
+    isTestToolsModalOpen: OnyxEntry<boolean>;
 };
 
-const defaultProps = {
-    modal: {},
-    isTestToolsModalOpen: false,
-};
+type TestToolsModalProps = TestToolsModalOnyxProps;
 
-function TestToolsModal(props) {
+function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) {
     const styles = useThemeStyles();
+
     return (
         <Modal
-            isVisible={props.isTestToolsModalOpen}
+            isVisible={!!isTestToolsModalOpen}
             type={CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
             onClose={toggleTestToolsModal}
         >
@@ -40,14 +31,9 @@ function TestToolsModal(props) {
     );
 }
 
-TestToolsModal.propTypes = propTypes;
-TestToolsModal.defaultProps = defaultProps;
 TestToolsModal.displayName = 'TestToolsModal';
 
-export default withOnyx({
-    modal: {
-        key: ONYXKEYS.MODAL,
-    },
+export default withOnyx<TestToolsModalProps, TestToolsModalOnyxProps>({
     isTestToolsModalOpen: {
         key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
     },