From 81f0653d24b05545160b63353b365321e6a4c45f Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 18 Jun 2024 22:22:25 +0100 Subject: [PATCH 01/13] Replace usages of useWindowDimensions with useResponsiveLayout hook --- src/components/FeatureTrainingModal.tsx | 22 +++++++-------- src/hooks/useIsReportOpenInRHP.ts | 9 ------ src/hooks/useOnboardingLayout.ts | 4 +-- .../Navigation/AppNavigator/AuthScreens.tsx | 8 +++--- .../Navigators/OnboardingModalNavigator.tsx | 4 +-- src/pages/ErrorPage/UpdateRequiredView.tsx | 10 +++---- src/pages/GetAssistancePage.tsx | 4 +-- src/pages/NewChatPage.tsx | 6 ++-- .../BaseOnboardingPersonalDetails.tsx | 6 ++-- .../BaseOnboardingPurpose.tsx | 15 ++++++---- .../OnboardingWork/BaseOnboardingWork.tsx | 12 ++++---- src/pages/ReportParticipantsPage.tsx | 12 ++++---- src/pages/Search/SearchFilters.tsx | 6 ++-- src/pages/Search/SearchPage.tsx | 6 ++-- src/pages/Search/SearchPageBottomTab.tsx | 6 ++-- src/pages/TeachersUnite/SaveTheWorldPage.tsx | 8 +++--- src/pages/Travel/ManageTrips.tsx | 6 ++-- src/pages/home/ReportScreen.tsx | 15 ++++------ .../report/AnimatedEmptyStateBackground.tsx | 10 ++++--- .../BaseReportActionContextMenu.tsx | 6 ++-- .../report/ReactionList/BaseReactionList.tsx | 6 ++-- .../ReactionList/HeaderReactionList.tsx | 6 ++-- .../AttachmentPickerWithMenuItems.tsx | 6 ++-- .../ComposerWithSuggestions.tsx | 12 ++++---- .../ReportActionCompose.tsx | 10 +++---- src/pages/home/report/ReportActionItem.tsx | 6 ++-- .../home/report/ReportActionItemCreated.tsx | 8 +++--- .../report/ReportActionItemMessageEdit.tsx | 10 +++---- src/pages/home/report/ReportActionsList.tsx | 7 +++-- src/pages/home/report/ReportActionsView.tsx | 14 ++++++---- src/pages/home/report/ReportFooter.tsx | 12 ++++---- .../report/comment/TextCommentFragment.tsx | 6 ++-- .../withReportAndReportActionOrNotFound.tsx | 4 +-- src/pages/home/sidebar/AllSettingsScreen.tsx | 8 +++--- src/pages/home/sidebar/SidebarLinks.tsx | 10 +++---- .../FloatingActionButtonAndPopover.tsx | 16 ++++++----- src/pages/iou/MoneyRequestAmountForm.tsx | 4 +-- .../request/step/IOURequestStepScan/index.tsx | 10 +++---- src/pages/settings/AboutPage/AboutPage.tsx | 8 +++--- .../settings/Preferences/PreferencesPage.tsx | 8 +++--- src/pages/settings/Profile/ProfilePage.tsx | 8 +++--- .../Security/SecuritySettingsPage.tsx | 8 +++--- .../TwoFactorAuth/Steps/CodesStep.tsx | 4 +-- .../CardSection/CardSectionActions/index.tsx | 8 +++--- .../Subscription/SubscriptionSettingsPage.tsx | 4 +-- .../Troubleshoot/TroubleshootPage.tsx | 8 +++--- .../settings/Wallet/WalletEmptyState.tsx | 8 +++--- .../settings/Wallet/WalletPage/WalletPage.tsx | 28 ++++++++++--------- src/pages/signin/ChooseSSOOrMagicCode.tsx | 8 +++--- src/pages/signin/SignInPageLayout/Footer.tsx | 4 +-- .../SignInPageLayout/SignInHeroCopy.tsx | 4 +-- .../SignInPageLayout/SignInHeroImage.tsx | 4 +-- src/pages/signin/SignInPageLayout/index.tsx | 4 +-- src/pages/workspace/WorkspaceMembersPage.tsx | 20 ++++++------- .../workspace/WorkspaceMoreFeaturesPage.tsx | 12 ++++---- src/pages/workspace/WorkspaceNewRoomPage.tsx | 8 +++--- .../workspace/WorkspacePageWithSections.tsx | 6 ++-- src/pages/workspace/WorkspaceProfilePage.tsx | 14 +++++----- .../workspace/WorkspaceProfileSharePage.tsx | 6 ++-- src/pages/workspace/WorkspacesListPage.tsx | 11 ++++---- src/pages/workspace/WorkspacesListRow.tsx | 12 ++++---- .../accounting/PolicyAccountingPage.tsx | 9 ++++-- .../workspace/bills/WorkspaceBillsPage.tsx | 6 ++-- .../workspace/card/WorkspaceCardPage.tsx | 6 ++-- .../distanceRates/PolicyDistanceRatesPage.tsx | 22 +++++++-------- .../invoices/WorkspaceInvoicesPage.tsx | 6 ++-- .../reimburse/WorkspaceReimburseView.tsx | 6 ++-- .../workspace/tags/WorkspaceTagsPage.tsx | 22 +++++++-------- .../workspace/tags/WorkspaceViewTagsPage.tsx | 10 +++---- .../workspace/taxes/WorkspaceTaxesPage.tsx | 22 +++++++-------- .../workspace/travel/WorkspaceTravelPage.tsx | 6 ++-- .../workflows/WorkspaceWorkflowsPage.tsx | 8 +++--- 72 files changed, 329 insertions(+), 329 deletions(-) delete mode 100644 src/hooks/useIsReportOpenInRHP.ts diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index 88099b6d078b..35d11d05a6b4 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/src/components/FeatureTrainingModal.tsx @@ -5,8 +5,8 @@ import {GestureHandlerRootView} from 'react-native-gesture-handler'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; import * as User from '@userActions/User'; @@ -81,13 +81,13 @@ function FeatureTrainingModal({ }: FeatureTrainingModalProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {shouldUseNarrowLayout} = useOnboardingLayout(); + const {isMediumScreenWidth} = useOnboardingLayout(); const [isModalVisible, setIsModalVisible] = useState(true); const [willShowAgain, setWillShowAgain] = useState(true); const [videoStatus, setVideoStatus] = useState('video'); const [isVideoStatusLocked, setIsVideoStatusLocked] = useState(false); const [videoAspectRatio, setVideoAspectRatio] = useState(videoAspectRatioProp ?? VIDEO_ASPECT_RATIO); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isOffline} = useNetwork(); useEffect(() => { @@ -144,7 +144,7 @@ function FeatureTrainingModal({ @@ -152,7 +152,7 @@ function FeatureTrainingModal({ )} ); - }, [animation, videoURL, videoAspectRatio, videoStatus, isSmallScreenWidth, styles]); + }, [animation, videoURL, videoAspectRatio, videoStatus, shouldUseNarrowLayout, styles]); const toggleWillShowAgain = useCallback(() => setWillShowAgain((prevWillShowAgain) => !prevWillShowAgain), []); @@ -174,14 +174,14 @@ function FeatureTrainingModal({ {({safeAreaPaddingBottomStyle}) => ( - - {renderIllustration()} + + {renderIllustration()} {title && description && ( - + {title} {description} diff --git a/src/hooks/useIsReportOpenInRHP.ts b/src/hooks/useIsReportOpenInRHP.ts deleted file mode 100644 index d452a82615c4..000000000000 --- a/src/hooks/useIsReportOpenInRHP.ts +++ /dev/null @@ -1,9 +0,0 @@ -import {useNavigationState} from '@react-navigation/native'; -import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName'; -import SCREENS from '@src/SCREENS'; - -// This hook checks if the currently open route is ReportScreen in RHP. -export default function useIsReportOpenInRHP() { - const activeRoute = useNavigationState(getTopmostRouteName); - return activeRoute === SCREENS.SEARCH.REPORT_RHP; -} diff --git a/src/hooks/useOnboardingLayout.ts b/src/hooks/useOnboardingLayout.ts index 512482340bb2..0f82619dd0b8 100644 --- a/src/hooks/useOnboardingLayout.ts +++ b/src/hooks/useOnboardingLayout.ts @@ -3,7 +3,7 @@ import {useWindowDimensions} from 'react-native'; import variables from '@styles/variables'; type OnboardingLayout = { - shouldUseNarrowLayout: boolean; + isMediumScreenWidth: boolean; }; /** @@ -15,5 +15,5 @@ type OnboardingLayout = { export default function useOnboardingLayout(): OnboardingLayout { const {width: windowWidth} = useWindowDimensions(); - return {shouldUseNarrowLayout: windowWidth > variables.mobileResponsiveWidthBreakpoint}; + return {isMediumScreenWidth: windowWidth > variables.mobileResponsiveWidthBreakpoint}; } diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 2c8e2c6bfa80..156d35433817 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -173,12 +173,12 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {isSmallScreenWidth} = useWindowDimensions(); - const {shouldUseNarrowLayout} = useOnboardingLayout(); + const {isMediumScreenWidth} = useOnboardingLayout(); const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils); - const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(shouldUseNarrowLayout), [screenOptions, shouldUseNarrowLayout]); + const onboardingModalScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(isMediumScreenWidth), [screenOptions, isMediumScreenWidth]); const onboardingScreenOptions = useMemo( - () => getOnboardingModalScreenOptions(isSmallScreenWidth, styles, StyleUtils, shouldUseNarrowLayout), - [StyleUtils, isSmallScreenWidth, shouldUseNarrowLayout, styles], + () => getOnboardingModalScreenOptions(isSmallScreenWidth, styles, StyleUtils, isMediumScreenWidth), + [StyleUtils, isSmallScreenWidth, isMediumScreenWidth, styles], ); const isInitialRender = useRef(true); diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx index 29a2205b2e37..2efe1cef6ce3 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx @@ -24,7 +24,7 @@ const Stack = createStackNavigator(); function OnboardingModalNavigator() { const styles = useThemeStyles(); - const {shouldUseNarrowLayout} = useOnboardingLayout(); + const {isMediumScreenWidth} = useOnboardingLayout(); const [hasCompletedGuidedSetupFlow] = useOnyx(ONYXKEYS.NVP_ONBOARDING, { selector: (onboarding) => { // onboarding is an array for old accounts and accounts created from olddot @@ -69,7 +69,7 @@ function OnboardingModalNavigator() { e.stopPropagation()} - style={styles.OnboardingNavigatorInnerView(shouldUseNarrowLayout)} + style={styles.OnboardingNavigatorInnerView(isMediumScreenWidth)} >
- + diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index ac623bcc0115..90b7ccbb28d8 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -12,8 +12,8 @@ import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as Link from '@userActions/Link'; @@ -35,7 +35,7 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const navigateBackTo = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS.getRoute(); - const {isLargeScreenWidth} = useWindowDimensions(); + const {isLargeScreenWidth} = useResponsiveLayout(); const menuItems: MenuItemWithLink[] = [ { title: translate('getAssistancePage.chatWithConcierge'), diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index e424f7f618ec..813f3ac0c1b1 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -18,10 +18,10 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; @@ -125,7 +125,7 @@ function useOptions({isGroupChat}: NewChatPageProps) { function NewChatPage({isGroupChat}: NewChatPageProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const styles = useThemeStyles(); const personalData = useCurrentUserPersonalDetails(); const {insets} = useStyledSafeAreaInsets(); @@ -325,7 +325,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { initiallyFocusedOptionKey={firstKeyForList} shouldTextInputInterceptSwipe /> - {isSmallScreenWidth && } + {shouldUseNarrowLayout && } ); diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index d6449bc2cf44..013bde0fac99 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -35,7 +35,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); - const {shouldUseNarrowLayout} = useOnboardingLayout(); + const {isMediumScreenWidth} = useOnboardingLayout(); const {inputCallbackRef} = useAutoFocusInput(); const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false); const {accountID} = useSession(); @@ -134,7 +134,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat behavior="padding" > - + {translate('onboarding.whatsYourName')} diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 244b997f6ec6..7d3fc471928e 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -16,6 +16,7 @@ import Text from '@components/Text'; import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -41,9 +42,11 @@ const menuIcons = { function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, onboardingPurposeSelected}: BaseOnboardingPurposeProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {shouldUseNarrowLayout} = useOnboardingLayout(); + const {isMediumScreenWidth} = useOnboardingLayout(); const [selectedPurpose, setSelectedPurpose] = useState(undefined); - const {isSmallScreenWidth, windowHeight} = useWindowDimensions(); + const {windowHeight} = useWindowDimensions(); + const {isSmallScreenWidth} = useResponsiveLayout(); + const theme = useTheme(); useDisableModalDismissOnEscape(); @@ -56,7 +59,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined; - const paddingHorizontal = shouldUseNarrowLayout ? styles.ph8 : styles.ph5; + const paddingHorizontal = isMediumScreenWidth ? styles.ph8 : styles.ph5; const selectedCheckboxIcon = useMemo( () => ( @@ -123,16 +126,16 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on {({safeAreaPaddingBottomStyle}) => ( - + - + - + {translate('onboarding.purpose.title')} - + {translate('onboarding.whereYouWork')} diff --git a/src/pages/ReportParticipantsPage.tsx b/src/pages/ReportParticipantsPage.tsx index 8ae960e34892..8834ff825668 100755 --- a/src/pages/ReportParticipantsPage.tsx +++ b/src/pages/ReportParticipantsPage.tsx @@ -19,9 +19,9 @@ import TableListItem from '@components/SelectionList/TableListItem'; import type {ListItem, SelectionListHandle} from '@components/SelectionList/types'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Report from '@libs/actions/Report'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; @@ -52,7 +52,7 @@ function ReportParticipantsPage({report, personalDetails, session}: ReportPartic const {translate, formatPhoneNumber} = useLocalize(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const selectionListRef = useRef(null); const textInputRef = useRef(null); const currentUserAccountID = Number(session?.accountID); @@ -269,7 +269,7 @@ function ReportParticipantsPage({report, personalDetails, session}: ReportPartic buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM} onPress={() => null} options={bulkActionsButtonOptions} - style={[isSmallScreenWidth && styles.flexGrow1]} + style={[shouldUseNarrowLayout && styles.flexGrow1]} /> ) : (