From bb077b6853ac71cb443529a0f5423477c91dcc99 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 25 Oct 2023 16:44:49 +0200 Subject: [PATCH 1/6] Rename files --- src/components/{TestToolMenu.js => TestToolMenu.tsx} | 0 src/components/{TestToolsModal.js => TestToolsModal.tsx} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{TestToolMenu.js => TestToolMenu.tsx} (100%) rename src/components/{TestToolsModal.js => TestToolsModal.tsx} (100%) diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.tsx similarity index 100% rename from src/components/TestToolMenu.js rename to src/components/TestToolMenu.tsx diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.tsx similarity index 100% rename from src/components/TestToolsModal.js rename to src/components/TestToolsModal.tsx From 8bff041e052fa5fd5e449a3857b8c963b16d03e6 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Wed, 25 Oct 2023 17:11:12 +0200 Subject: [PATCH 2/6] Migrate TestToolMenu and TestToolsModal --- src/components/TestToolMenu.tsx | 55 ++++++++++++------------------- src/components/TestToolsModal.tsx | 29 ++++------------ 2 files changed, 28 insertions(+), 56 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 474e4c9bb10c..496c90fe9341 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import styles from '../styles/styles'; import Switch from './Switch'; import Text from './Text'; @@ -11,40 +9,31 @@ import * as Session from '../libs/actions/Session'; import ONYXKEYS from '../ONYXKEYS'; import Button from './Button'; import TestToolRow from './TestToolRow'; -import networkPropTypes from './networkPropTypes'; import compose from '../libs/compose'; import {withNetwork} from './OnyxProvider'; import * as ApiUtils from '../libs/ApiUtils'; import CONFIG from '../CONFIG'; +import NetworkOnyx from '../types/onyx/Network'; +import UserOnyx from '../types/onyx/User'; -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; +}; +type TestToolMenuProps = TestToolMenuOnyxProps & { /** Network object in Onyx */ - network: networkPropTypes.isRequired, + network: OnyxEntry; }; -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 = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}; + +function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { + const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); -function TestToolMenu(props) { return ( <> - - Test Preferences - + Test Preferences {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. @@ -53,8 +42,8 @@ function TestToolMenu(props) { User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))} + isOn={shouldUseStagingServer} + onToggle={() => User.setShouldUseStagingServer(!shouldUseStagingServer)} /> )} @@ -63,8 +52,8 @@ function TestToolMenu(props) { Network.setShouldForceOffline(!props.network.shouldForceOffline)} + isOn={Boolean(network?.shouldForceOffline)} + onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)} /> @@ -72,8 +61,8 @@ function TestToolMenu(props) { Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)} + isOn={Boolean(network?.shouldFailAllRequests)} + onToggle={() => Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)} /> @@ -98,15 +87,13 @@ function TestToolMenu(props) { ); } -TestToolMenu.propTypes = propTypes; -TestToolMenu.defaultProps = defaultProps; TestToolMenu.displayName = 'TestToolMenu'; export default compose( - withNetwork(), - withOnyx({ + withOnyx({ user: { key: ONYXKEYS.USER, }, }), + withNetwork(), )(TestToolMenu); diff --git a/src/components/TestToolsModal.tsx b/src/components/TestToolsModal.tsx index 43a74e48df5d..238db2379f01 100644 --- a/src/components/TestToolsModal.tsx +++ b/src/components/TestToolsModal.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; import ONYXKEYS from '../ONYXKEYS'; import Modal from './Modal'; @@ -9,26 +8,17 @@ import toggleTestToolsModal from '../libs/actions/TestTool'; import TestToolMenu from './TestToolMenu'; import styles from '../styles/styles'; -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; }; -const defaultProps = { - modal: {}, - isTestToolsModalOpen: false, -}; +type TestToolsModalProps = TestToolsModalOnyxProps; -function TestToolsModal(props) { +function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) { return ( @@ -39,14 +29,9 @@ function TestToolsModal(props) { ); } -TestToolsModal.propTypes = propTypes; -TestToolsModal.defaultProps = defaultProps; TestToolsModal.displayName = 'TestToolsModal'; -export default withOnyx({ - modal: { - key: ONYXKEYS.MODAL, - }, +export default withOnyx({ isTestToolsModalOpen: { key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN, }, From 586c1d17d0496a0d0a3a34c6fc695b0f09ca0046 Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Fri, 27 Oct 2023 12:31:18 +0200 Subject: [PATCH 3/6] Type Text more accurate --- src/components/TestToolMenu.tsx | 7 ++++++- src/components/Text.tsx | 19 +++---------------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 496c90fe9341..369ba5bb65b9 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -33,7 +33,12 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { return ( <> - Test Preferences + + Test Preferences + {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 60a59aae1520..598a01c6a46b 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -1,12 +1,12 @@ import React, {ForwardedRef} from 'react'; // eslint-disable-next-line no-restricted-imports -import {Text as RNText} from 'react-native'; +import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native'; import type {TextStyle} from 'react-native'; import fontFamily from '../styles/fontFamily'; import themeColors from '../styles/themes/default'; import variables from '../styles/variables'; -type TextProps = { +type TextProps = RNTextProps & { /** The color of the text */ color?: string; @@ -21,31 +21,18 @@ type TextProps = { /** The family of the font to use */ family?: keyof typeof fontFamily; - - /** Any additional styles to apply */ - style?: TextStyle | TextStyle[]; }; function Text( {color = themeColors.text, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef, ) { - // If the style prop is an array of styles, we need to mix them all together - const mergedStyles = !Array.isArray(style) - ? style - : style.reduce( - (finalStyles, s) => ({ - ...finalStyles, - ...s, - }), - {}, - ); const componentStyle: TextStyle = { color, fontSize, textAlign, fontFamily: fontFamily[family], - ...mergedStyles, + ...StyleSheet.flatten(style), }; if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) { From a75178aa3746f04e9b71d6e6e44574f7def6337e Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Sun, 26 Nov 2023 18:21:59 +0100 Subject: [PATCH 4/6] Change Boolean to '!!' --- src/components/TestToolMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 2dfc060171f1..6a3efb0c26ce 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -57,7 +57,7 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { Network.setShouldForceOffline(!network?.shouldForceOffline)} /> @@ -66,7 +66,7 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)} /> From 6ec7fbc71fa4e4e9aa00089b5baab2a071a9c8ba Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Sun, 26 Nov 2023 18:33:42 +0100 Subject: [PATCH 5/6] Import react in testmenu --- src/components/TestToolMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 6a3efb0c26ce..e40d8f473cdf 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import {OnyxEntry, withOnyx} from 'react-native-onyx'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; From 5283111f989062e22e450cf0a92b7766938a058a Mon Sep 17 00:00:00 2001 From: Blazej Kustra Date: Mon, 27 Nov 2023 17:20:51 +0100 Subject: [PATCH 6/6] Define a type for default value --- src/components/TestToolMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index e40d8f473cdf..53953b861d7d 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -26,7 +26,7 @@ type TestToolMenuProps = TestToolMenuOnyxProps & { network: OnyxEntry; }; -const USER_DEFAULT = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}; +const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}; function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();