From ba8ff837a7c43a54807d6ea209d1a841daa13763 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 16 Oct 2024 19:34:38 +0100 Subject: [PATCH 1/6] Bump eslint-config-expensify version --- package-lock.json | 42 ++++++++---------------------------------- package.json | 2 +- 2 files changed, 9 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3393757d0f3..87fe8e35b173 100644 --- a/package-lock.json +++ b/package-lock.json @@ -217,7 +217,7 @@ "electron-builder": "25.0.0", "eslint": "^8.57.0", "eslint-config-airbnb-typescript": "^18.0.0", - "eslint-config-expensify": "^2.0.60", + "eslint-config-expensify": "^2.0.66", "eslint-config-prettier": "^9.1.0", "eslint-plugin-deprecation": "^3.0.0", "eslint-plugin-jest": "^28.6.0", @@ -613,9 +613,10 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.24.7", + "version": "7.25.8", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.8.tgz", + "integrity": "sha512-Po3VLMN7fJtv0nsOjBDSbO1J71UhzShE9MuOSkWEV9IZQXzhZklYtzKZ8ZD/Ij3a0JBv1AG3Ny2L3jvAHQVOGg==", "dev": true, - "license": "MIT", "dependencies": { "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1", "eslint-visitor-keys": "^2.1.0", @@ -17975,33 +17976,6 @@ "@babel/core": "^7.0.0-0" } }, - "node_modules/babel-eslint": { - "version": "10.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.0.0", - "@babel/parser": "^7.7.0", - "@babel/traverse": "^7.7.0", - "@babel/types": "^7.7.0", - "eslint-visitor-keys": "^1.0.0", - "resolve": "^1.12.0" - }, - "engines": { - "node": ">=6" - }, - "peerDependencies": { - "eslint": ">= 4.12.1" - } - }, - "node_modules/babel-eslint/node_modules/eslint-visitor-keys": { - "version": "1.3.0", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=4" - } - }, "node_modules/babel-jest": { "version": "29.4.1", "dev": true, @@ -22824,16 +22798,16 @@ } }, "node_modules/eslint-config-expensify": { - "version": "2.0.60", - "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.60.tgz", - "integrity": "sha512-VlulvhEasWeX2g+AXC4P91KA9czzX+aI3VSdJlZwm99GLOdfv7mM0JyO8vbqomjWNUxvLyJeJjmI02t2+fL/5Q==", + "version": "2.0.66", + "resolved": "https://registry.npmjs.org/eslint-config-expensify/-/eslint-config-expensify-2.0.66.tgz", + "integrity": "sha512-6L9EIAiOxZnqOcFEsIwEUmX0fvglvboyqQh7LTqy+1O2h2W3mmrMSx87ymXeyFMg1nJQtqkFnrLv5ENGS0QC3Q==", "dev": true, "dependencies": { + "@babel/eslint-parser": "^7.25.7", "@lwc/eslint-plugin-lwc": "^1.7.2", "@typescript-eslint/parser": "^7.12.0", "@typescript-eslint/rule-tester": "^7.16.1", "@typescript-eslint/utils": "^7.12.0", - "babel-eslint": "^10.1.0", "eslint": "^8.56.0", "eslint-config-airbnb": "19.0.4", "eslint-config-airbnb-base": "15.0.0", diff --git a/package.json b/package.json index 59b8268574c0..6bc6d2e538b9 100644 --- a/package.json +++ b/package.json @@ -272,7 +272,7 @@ "electron-builder": "25.0.0", "eslint": "^8.57.0", "eslint-config-airbnb-typescript": "^18.0.0", - "eslint-config-expensify": "^2.0.60", + "eslint-config-expensify": "^2.0.66", "eslint-config-prettier": "^9.1.0", "eslint-plugin-deprecation": "^3.0.0", "eslint-plugin-jest": "^28.6.0", From ddcc893af50bc0da141a526c34d062e1fe4964c7 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:20:24 +0100 Subject: [PATCH 2/6] Fix lint errors --- src/components/ConfirmModal.tsx | 1 + .../ConnectToQuickbooksDesktopFlow/index.tsx | 1 + .../ImportOnyxState/BaseImportOnyxState.tsx | 3 +++ src/components/ImportSpreadsheet.tsx | 2 ++ src/components/Modal/BaseModal.tsx | 1 + src/components/MoneyReportHeader.tsx | 2 ++ src/components/MoneyRequestHeader.tsx | 2 ++ src/components/Popover/index.tsx | 1 + src/components/PopoverMenu.tsx | 1 + src/components/ProcessMoneyReportHoldMenu.tsx | 3 ++- src/components/ScreenWrapper.tsx | 3 +++ src/components/Search/SearchPageHeader.tsx | 2 ++ .../Search/SearchRouter/SearchRouter.tsx | 14 ++++++++------ .../Search/SearchRouter/SearchRouterList.tsx | 6 +++--- .../Search/SearchRouter/SearchRouterModal.tsx | 4 ++-- src/components/Search/index.tsx | 2 ++ src/components/SelectionList/SearchTableHeader.tsx | 1 + src/components/SelectionListWithModal/index.tsx | 1 + src/libs/Navigation/AppNavigator/AuthScreens.tsx | 2 ++ src/pages/ErrorPage/NotFoundPage.tsx | 2 ++ src/pages/NewChatPage.tsx | 1 + .../BaseOnboardingAccounting.tsx | 3 +++ .../BaseOnboardingPersonalDetails.tsx | 3 +++ .../OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 ++ src/pages/ReportParticipantsPage.tsx | 3 +++ src/pages/RoomMembersPage.tsx | 2 ++ .../ReportActionCompose/ReportActionCompose.tsx | 1 + .../home/report/ReportActionCompose/SendButton.tsx | 1 + .../home/sidebar/AvatarWithDelegateAvatar.tsx | 3 +++ .../iou/request/step/IOURequestStepScan/index.tsx | 1 + .../Security/TwoFactorAuth/Steps/CodesStep.tsx | 2 ++ src/pages/workspace/WorkspaceMembersPage.tsx | 3 +++ src/pages/workspace/WorkspaceNewRoomPage.tsx | 1 + .../categories/WorkspaceCategoriesPage.tsx | 2 ++ .../expensifyCard/WorkspaceCardListHeader.tsx | 1 + .../WorkspaceExpensifyCardDetailsPage.tsx | 3 ++- .../reportFields/ReportFieldsListValuesPage.tsx | 1 + .../reportFields/WorkspaceReportFieldsPage.tsx | 2 ++ src/pages/workspace/tags/WorkspaceTagsPage.tsx | 2 ++ src/pages/workspace/tags/WorkspaceViewTagsPage.tsx | 2 ++ src/pages/workspace/upgrade/UpgradeIntro.tsx | 4 ++-- .../workspace/workflows/WorkspaceWorkflowsPage.tsx | 3 +++ 42 files changed, 85 insertions(+), 15 deletions(-) diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index e63b8bb91874..fd2013c6bde7 100755 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -137,6 +137,7 @@ function ConfirmModal({ restoreFocusType, }: ConfirmModalProps) { // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); diff --git a/src/components/ConnectToQuickbooksDesktopFlow/index.tsx b/src/components/ConnectToQuickbooksDesktopFlow/index.tsx index bf1315b452c6..1aa438a59588 100644 --- a/src/components/ConnectToQuickbooksDesktopFlow/index.tsx +++ b/src/components/ConnectToQuickbooksDesktopFlow/index.tsx @@ -6,6 +6,7 @@ import ROUTES from '@src/ROUTES'; import type {ConnectToQuickbooksDesktopFlowProps} from './types'; function ConnectToQuickbooksDesktopFlow({policyID}: ConnectToQuickbooksDesktopFlowProps) { + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); useEffect(() => { diff --git a/src/components/ImportOnyxState/BaseImportOnyxState.tsx b/src/components/ImportOnyxState/BaseImportOnyxState.tsx index 216a6ddf76e4..c6c80d03b58f 100644 --- a/src/components/ImportOnyxState/BaseImportOnyxState.tsx +++ b/src/components/ImportOnyxState/BaseImportOnyxState.tsx @@ -19,6 +19,9 @@ function BaseImportOnyxState({ }) { const {translate} = useLocalize(); const styles = useThemeStyles(); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); return ( diff --git a/src/components/ImportSpreadsheet.tsx b/src/components/ImportSpreadsheet.tsx index b68c773bc12d..64f9a4445a0c 100644 --- a/src/components/ImportSpreadsheet.tsx +++ b/src/components/ImportSpreadsheet.tsx @@ -42,6 +42,8 @@ function ImportSpreedsheet({backTo, goTo}: ImportSpreedsheetProps) { const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(); const [attachmentInvalidReason, setAttachmentValidReason] = useState(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use different copies depending on the screen size + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const [isDraggingOver, setIsDraggingOver] = useState(false); diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index f51fe7e37acd..85a2298f63d6 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -61,6 +61,7 @@ function BaseModal( const StyleUtils = useStyleUtils(); const {windowWidth, windowHeight} = useWindowDimensions(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const keyboardStateContextValue = useKeyboardState(); diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index fdf6f8edd825..1a172c9bc7ae 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -59,6 +59,8 @@ type MoneyReportHeaderProps = { }; function MoneyReportHeader({policy, report: moneyRequestReport, transactionThreadReportID, reportActions, onBackButtonPress}: MoneyReportHeaderProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026 + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID ?? '-1'}`); const [nextStep] = useOnyx(`${ONYXKEYS.COLLECTION.NEXT_STEP}${moneyRequestReport?.reportID ?? '-1'}`); diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index d2db257dc776..12e4ec7230a6 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -41,6 +41,8 @@ type MoneyRequestHeaderProps = { }; function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPress}: MoneyRequestHeaderProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use a correct layout for the hold expense modal https://github.com/Expensify/App/pull/47990#issuecomment-2362382026 + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID ?? '-1'}`); const [transaction] = useOnyx( diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx index 332b42e06119..67ecac27afbd 100644 --- a/src/components/Popover/index.tsx +++ b/src/components/Popover/index.tsx @@ -31,6 +31,7 @@ function Popover(props: PopoverProps) { } = props; // We need to use isSmallScreenWidth to apply the correct modal type and popoverAnchorPosition + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const withoutOverlayRef = useRef(null); const {close, popover} = React.useContext(PopoverContext); diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index b1aa2fc28338..7c8c99d6305d 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -161,6 +161,7 @@ function PopoverMenu({ const styles = useThemeStyles(); const theme = useTheme(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct popover styles + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const [currentMenuItems, setCurrentMenuItems] = useState(menuItems); const currentMenuItemsFocusedIndex = currentMenuItems?.findIndex((option) => option.isSelected); diff --git a/src/components/ProcessMoneyReportHoldMenu.tsx b/src/components/ProcessMoneyReportHoldMenu.tsx index d140e71bceae..3d6ad9006dc5 100644 --- a/src/components/ProcessMoneyReportHoldMenu.tsx +++ b/src/components/ProcessMoneyReportHoldMenu.tsx @@ -60,7 +60,8 @@ function ProcessMoneyReportHoldMenu({ }: ProcessMoneyReportHoldMenuProps) { const {translate} = useLocalize(); const isApprove = requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE; - // We need to use shouldUseNarrowLayout instead of shouldUseNarrowLayout to apply the correct modal type + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const onSubmit = (full: boolean) => { diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index 9a85e1d3af24..152a14fc3eb7 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -146,6 +146,9 @@ function ScreenWrapper( const navigation = navigationProp ?? navigationFallback; const isFocused = useIsFocused(); const {windowHeight} = useWindowDimensions(shouldUseCachedViewportHeight); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout for a case where we want to show the offline indicator only on small screens + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {initialHeight} = useInitialDimensions(); const styles = useThemeStyles(); diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 4c383021645f..daac43f27c20 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -121,6 +121,8 @@ function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) { const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {activeWorkspaceID} = useActiveWorkspace(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext(); const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index a957806ee4f7..eec4d1c7a029 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -40,7 +40,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); - const {isSmallScreenWidth} = useResponsiveLayout(); + // We need to use shouldUseNarrowLayout instead of shouldUseNarrowLayout to apply the correct styles for the search router + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-shouldUseNarrowLayout + const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(null); const taxRates = getAllTaxRates(); @@ -158,14 +160,14 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { closeAndClearRouter(); }); - const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.searchRouterPopoverWidth}; + const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth}; return ( - {isSmallScreenWidth && ( + {shouldUseNarrowLayout && ( onRouterClose()} @@ -174,7 +176,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { { onSearchSubmit(SearchUtils.buildSearchQueryJSON(textInputValue)); @@ -182,7 +184,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { routerListRef={listRef} shouldShowOfflineMessage wrapperStyle={[styles.border, styles.alignItemsCenter]} - outerWrapperStyle={[isSmallScreenWidth ? styles.mv3 : styles.mv2, isSmallScreenWidth ? styles.mh5 : styles.mh2]} + outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]} wrapperFocusedStyle={[styles.borderColorFocus]} isSearchingForReports={isSearchingForReports} /> diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx index 9830ea4e9506..448e527d2462 100644 --- a/src/components/Search/SearchRouter/SearchRouterList.tsx +++ b/src/components/Search/SearchRouter/SearchRouterList.tsx @@ -92,7 +92,7 @@ function SearchRouterList( ) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useResponsiveLayout(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const personalDetails = usePersonalDetails(); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); @@ -179,11 +179,11 @@ function SearchRouterList( onSelectRow={onSelectRow} ListItem={SearchRouterItem} containerStyle={[styles.mh100]} - sectionListStyle={[isSmallScreenWidth ? styles.ph5 : styles.ph2, styles.pb2]} + sectionListStyle={[shouldUseNarrowLayout ? styles.ph5 : styles.ph2, styles.pb2]} listItemWrapperStyle={[styles.pr3, styles.pl3]} onLayout={setPerformanceTimersEnd} ref={ref} - showScrollIndicator={!isSmallScreenWidth} + showScrollIndicator={!shouldUseNarrowLayout} sectionTitleStyles={styles.mhn2} shouldSingleExecuteRowSelect /> diff --git a/src/components/Search/SearchRouter/SearchRouterModal.tsx b/src/components/Search/SearchRouter/SearchRouterModal.tsx index 7e403461dd34..4043711ad16a 100644 --- a/src/components/Search/SearchRouter/SearchRouterModal.tsx +++ b/src/components/Search/SearchRouter/SearchRouterModal.tsx @@ -7,10 +7,10 @@ import SearchRouter from './SearchRouter'; import {useSearchRouterContext} from './SearchRouterContext'; function SearchRouterModal() { - const {isSmallScreenWidth} = useResponsiveLayout(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext(); - const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER; + const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER; return ( >(); const lastSearchResultsRef = useRef>(); diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx index f54532a7f318..1e2beba61c11 100644 --- a/src/components/SelectionList/SearchTableHeader.tsx +++ b/src/components/SelectionList/SearchTableHeader.tsx @@ -105,6 +105,7 @@ type SearchTableHeaderProps = { function SearchTableHeader({data, metadata, sortBy, sortOrder, onSortPress, shouldShowYear, shouldShowSorting}: SearchTableHeaderProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const displayNarrowVersion = isMediumScreenWidth || isSmallScreenWidth; diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx index 46d6494d1d21..25123d5454d4 100644 --- a/src/components/SelectionListWithModal/index.tsx +++ b/src/components/SelectionListWithModal/index.tsx @@ -28,6 +28,7 @@ function SelectionListWithModal( const {translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here because there is a race condition that causes shouldUseNarrowLayout to change indefinitely in this component // See https://github.com/Expensify/App/issues/48675 for more details + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const isFocused = useIsFocused(); diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 7b8589c81e7f..626c5470e297 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -225,6 +225,8 @@ const modalScreenListenersWithCancelSearch = { function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + // We need to use isSmallScreenWidth for the root stack navigator + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils); const {canUseDefaultRooms} = usePermissions(); diff --git a/src/pages/ErrorPage/NotFoundPage.tsx b/src/pages/ErrorPage/NotFoundPage.tsx index 6a63a7204215..e118057b143e 100644 --- a/src/pages/ErrorPage/NotFoundPage.tsx +++ b/src/pages/ErrorPage/NotFoundPage.tsx @@ -13,6 +13,8 @@ type NotFoundPageProps = { // eslint-disable-next-line rulesdir/no-negated-variables function NotFoundPage({onBackButtonPress = () => Navigation.goBack(), isReportRelatedPage, ...fullPageNotFoundViewProps}: NotFoundPageProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to go back to the not found page on large screens and to the home page on small screen + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); return ( diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index c406f7f3058c..24d0dde788fe 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -146,6 +146,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const personalData = useCurrentUserPersonalDetails(); diff --git a/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx b/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx index ad7e5d38698f..3ec616f12526 100644 --- a/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx +++ b/src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx @@ -37,6 +37,9 @@ function BaseOnboardingAccounting({shouldUseNativeStyles, route}: BaseOnboarding const theme = useTheme(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); + + // We need to use isSmallScreenWidth, see navigateAfterOnboarding function comment + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED); const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID); diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index f1c79d7aa76b..18c78eca6e97 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -35,6 +35,9 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat const [onboardingPurposeSelected] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED); const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID); const [onboardingAdminsChatReportID] = useOnyx(ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID); + + // We need to use isSmallScreenWidth, see navigateAfterOnboarding function comment + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {inputCallbackRef} = useAutoFocusInput(); const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false); diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index a59042c572a1..3b05c6bb40a8 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -51,7 +51,9 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const {translate} = useLocalize(); const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout(); const {windowHeight} = useWindowDimensions(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const theme = useTheme(); diff --git a/src/pages/ReportParticipantsPage.tsx b/src/pages/ReportParticipantsPage.tsx index b4eebb9b76f7..8029067f5026 100755 --- a/src/pages/ReportParticipantsPage.tsx +++ b/src/pages/ReportParticipantsPage.tsx @@ -50,6 +50,9 @@ function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) { const {translate, formatPhoneNumber} = useLocalize(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the selection mode only on small screens + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const selectionListRef = useRef(null); const textInputRef = useRef(null); diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index b5d424b7fc57..5068d84967b7 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -65,6 +65,8 @@ function RoomMembersPage({report, policies}: RoomMembersPageProps) { const isFocusedScreen = useIsFocused(); const {isOffline} = useNetwork(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the selection mode only on small screens + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); const canSelectMultiple = isSmallScreenWidth ? selectionMode?.isEnabled : true; diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 762021163833..2fa0b8c771dd 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -116,6 +116,7 @@ function ReportActionCompose({ const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth, isMediumScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout(); const {isOffline} = useNetwork(); const actionButtonRef = useRef(null); diff --git a/src/pages/home/report/ReportActionCompose/SendButton.tsx b/src/pages/home/report/ReportActionCompose/SendButton.tsx index b08670c78171..0056a024f549 100644 --- a/src/pages/home/report/ReportActionCompose/SendButton.tsx +++ b/src/pages/home/report/ReportActionCompose/SendButton.tsx @@ -24,6 +24,7 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP const styles = useThemeStyles(); const {translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to manage GestureDetector correctly + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const Tap = Gesture.Tap().onEnd(() => { handleSendMessage(); diff --git a/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx b/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx index 204b2255b8eb..9b9cc31df8e8 100644 --- a/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx +++ b/src/pages/home/sidebar/AvatarWithDelegateAvatar.tsx @@ -24,6 +24,9 @@ type AvatarWithDelegateAvatarProps = { function AvatarWithDelegateAvatar({delegateEmail, isSelected = false, containerStyle}: AvatarWithDelegateAvatarProps) { const styles = useThemeStyles(); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use correct avatar size + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const personalDetails = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const delegatePersonalDetail = Object.values(personalDetails[0] ?? {}).find((personalDetail) => personalDetail?.login?.toLowerCase() === delegateEmail); diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 0b90598e9c7f..7a8d0cf3f91b 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -66,6 +66,7 @@ function IOURequestStepScan({ const [pdfFile, setPdfFile] = useState(null); const [receiptImageTopPosition, setReceiptImageTopPosition] = useState(0); // we need to use isSmallScreenWidth instead of shouldUseNarrowLayout because drag and drop is not supported on mobile + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const {isDraggingOver} = useContext(DragAndDropContext); diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx index dd3d3b87a12f..911dbef0e030 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx @@ -36,6 +36,8 @@ function CodesStep({account, user, backTo}: CodesStepProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use correct style + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const [error, setError] = useState(''); const isUserValidated = user?.validated; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 027a7509ec0d..77f3b7a1a4b0 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -83,6 +83,9 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson const isOfflineAndNoMemberDataAvailable = isEmptyObject(policy?.employeeList) && isOffline; const prevPersonalDetails = usePrevious(personalDetails); const {translate, formatPhoneNumber, preferredLocale} = useLocalize(); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const isPolicyAdmin = PolicyUtils.isPolicyAdmin(policy); const isLoading = useMemo( diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx index 481fc6c41402..fdf6eed51503 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.tsx +++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx @@ -49,6 +49,7 @@ function WorkspaceNewRoomPage() { const [session] = useOnyx(ONYXKEYS.SESSION); const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const [visibility, setVisibility] = useState>(CONST.REPORT.VISIBILITY.RESTRICTED); const [writeCapability, setWriteCapability] = useState>(CONST.REPORT.WRITE_CAPABILITIES.ALL); diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 1286d504d3ec..ad097c516209 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -57,6 +57,8 @@ type PolicyOption = ListItem & { type WorkspaceCategoriesPageProps = StackScreenProps; function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const {windowWidth} = useWindowDimensions(); const styles = useThemeStyles(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx index 6dcc775bcb70..fb818b5fb383 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListHeader.tsx @@ -16,6 +16,7 @@ type WorkspaceCardListHeaderProps = { }; function WorkspaceCardListHeader({policyID}: WorkspaceCardListHeaderProps) { + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isMediumScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const {translate} = useLocalize(); diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index 03b489d93402..0189f4a7e3c0 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -42,7 +42,8 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const [isDeactivateModalVisible, setIsDeactivateModalVisible] = useState(false); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); const {translate} = useLocalize(); - // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index 3cc647b4d681..49c8f391c700 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -61,6 +61,7 @@ function ReportFieldsListValuesPage({ const {translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout here to use the mobile selection mode on small screens only // See https://github.com/Expensify/App/issues/48724 for more details + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT); const {selectionMode} = useMobileSelectionMode(); diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx index 603e610b6f5d..9ca5f57a806f 100644 --- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx @@ -58,6 +58,8 @@ function WorkspaceReportFieldsPage({ params: {policyID}, }, }: WorkspaceReportFieldsPageProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout for the small screen selection mode + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const theme = useTheme(); diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index a30b56d6dda4..1d24a054606c 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -51,6 +51,8 @@ import type {PolicyTag, PolicyTagList, TagListItem} from './types'; type WorkspaceTagsPageProps = StackScreenProps; function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const theme = useTheme(); diff --git a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx index a01707a04740..fc50a6ceaf82 100644 --- a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx @@ -43,6 +43,8 @@ import type {TagListItem} from './types'; type WorkspaceViewTagsProps = StackScreenProps; function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout for the small screen selection mode + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); diff --git a/src/pages/workspace/upgrade/UpgradeIntro.tsx b/src/pages/workspace/upgrade/UpgradeIntro.tsx index 5fe04fb7a0ce..f8bdbe5440e3 100644 --- a/src/pages/workspace/upgrade/UpgradeIntro.tsx +++ b/src/pages/workspace/upgrade/UpgradeIntro.tsx @@ -25,7 +25,7 @@ type Props = { function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { const styles = useThemeStyles(); - const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); + const {isExtraSmallScreenWidth} = useResponsiveLayout(); const {translate} = useLocalize(); const isIllustration = feature.icon in Illustrations; const iconSrc = isIllustration ? Illustrations[feature.icon as keyof typeof Illustrations] : Expensicon[feature.icon as keyof typeof Expensicon]; @@ -33,7 +33,7 @@ function UpgradeIntro({feature, onUpgrade, buttonDisabled, loading}: Props) { return ( - + {!isIllustration ? ( Date: Wed, 16 Oct 2024 21:29:38 +0100 Subject: [PATCH 3/6] Fix lint errors --- src/components/Search/SearchRouter/SearchRouter.tsx | 2 +- src/styles/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index eec4d1c7a029..bd4e4e5061af 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -41,7 +41,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); // We need to use shouldUseNarrowLayout instead of shouldUseNarrowLayout to apply the correct styles for the search router - // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-shouldUseNarrowLayout + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(null); diff --git a/src/styles/index.ts b/src/styles/index.ts index 015dea9b7ecc..c4aeff78fc33 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -67,7 +67,7 @@ type CustomPickerStyle = PickerStyle & {icon?: ViewStyle}; type OverlayStylesParams = {progress: Animated.AnimatedInterpolation}; type TwoFactorAuthCodesBoxParams = {isExtraSmallScreenWidth: boolean; isSmallScreenWidth: boolean}; -type WorkspaceUpgradeIntroBoxParams = {isExtraSmallScreenWidth: boolean; isSmallScreenWidth: boolean}; +type WorkspaceUpgradeIntroBoxParams = {isExtraSmallScreenWidth: boolean}; type Translation = 'perspective' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | 'translateX' | 'translateY' | 'skewX' | 'skewY' | 'matrix'; From 4c977bc2b482bc43fa5601f9853405e5c5e7690d Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Wed, 16 Oct 2024 21:30:26 +0100 Subject: [PATCH 4/6] Fix Changed files ESLint check errors (withOnyx deprecation) --- .../Security/TwoFactorAuth/Steps/CodesStep.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx index 911dbef0e030..52b000e08699 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx @@ -2,7 +2,7 @@ import type {RouteProp} from '@react-navigation/native'; import {useRoute} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import FixedFooter from '@components/FixedFooter'; import FormHelpMessage from '@components/FormHelpMessage'; @@ -22,7 +22,6 @@ import localFileDownload from '@libs/localFileDownload'; import type {BackToParams, SettingsNavigatorParamList} from '@libs/Navigation/types'; import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper'; import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth'; -import type {BaseTwoFactorAuthFormOnyxProps} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types'; import * as Session from '@userActions/Session'; import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions'; import CONST from '@src/CONST'; @@ -30,9 +29,9 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -type CodesStepProps = BaseTwoFactorAuthFormOnyxProps & BackToParams; +type CodesStepProps = BackToParams; -function CodesStep({account, user, backTo}: CodesStepProps) { +function CodesStep({backTo}: CodesStepProps) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -40,6 +39,10 @@ function CodesStep({account, user, backTo}: CodesStepProps) { // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isExtraSmallScreenWidth, isSmallScreenWidth} = useResponsiveLayout(); const [error, setError] = useState(''); + + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + const [user] = useOnyx(ONYXKEYS.USER); + const isUserValidated = user?.validated; const route = useRoute>(); @@ -162,9 +165,4 @@ function CodesStep({account, user, backTo}: CodesStepProps) { CodesStep.displayName = 'CodesStep'; -export default withOnyx({ - account: {key: ONYXKEYS.ACCOUNT}, - user: { - key: ONYXKEYS.USER, - }, -})(CodesStep); +export default CodesStep; From 3727ad9f6abc0bf9b1ae5f32783e37b53dab218e Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 21 Oct 2024 10:27:13 +0100 Subject: [PATCH 5/6] Fix lint warnings --- src/pages/ReportDetailsPage.tsx | 3 +++ src/pages/workspace/accounting/AccountingContext.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 18304878447d..7de12eeda892 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -94,6 +94,9 @@ function ReportDetailsPage({policies, report, route}: ReportDetailsPageProps) { const {reportActions} = usePaginatedReportActions(report.reportID || '-1'); /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */ const {currentSearchHash} = useSearchContext(); + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const transactionThreadReportID = useMemo( diff --git a/src/pages/workspace/accounting/AccountingContext.tsx b/src/pages/workspace/accounting/AccountingContext.tsx index 98a804d0ba66..dedec0a0aafe 100644 --- a/src/pages/workspace/accounting/AccountingContext.tsx +++ b/src/pages/workspace/accounting/AccountingContext.tsx @@ -57,6 +57,9 @@ function AccountingContextProvider({children, policy}: AccountingContextProvider const [activeIntegration, setActiveIntegration] = useState(); const {translate} = useLocalize(); const policyID = policy?.id ?? '-1'; + + // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to allow QuickBooks Desktop setup to be shown only on large screens + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); const startIntegrationFlow = React.useCallback( From a860619b6f741b6dd5fcc967515babdef419b92d Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Mon, 21 Oct 2024 16:07:43 +0100 Subject: [PATCH 6/6] remove unnecessary comment --- src/components/Search/SearchRouter/SearchRouter.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index f19beba52c1e..fb7aac45043e 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -41,8 +41,6 @@ function SearchRouter({onRouterClose}: SearchRouterProps) { const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); - // We need to use shouldUseNarrowLayout instead of shouldUseNarrowLayout to apply the correct styles for the search router - // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(null);