Merge pull request #52040 from software-mansion-labs/fix/rules-of-react

[Chore] Fix components where react rules aren't followed
Expensify · Nov 14, 2024 · 11a8f67 · 11a8f67
2 parents 2f084c3 + 4583987
commit 11a8f67
Show file tree

Hide file tree

Showing 19 changed files with 43 additions and 74 deletions.
diff --git a/src/components/ConnectToNetSuiteFlow/index.tsx b/src/components/ConnectToNetSuiteFlow/index.tsx
@@ -53,8 +53,7 @@ function ConnectToNetSuiteFlow({policyID}: ConnectToNetSuiteFlowProps) {
             return;
         }
         setIsReuseConnectionsPopoverOpen(true);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     if (threeDotsMenuContainerRef) {

diff --git a/src/components/ConnectToQuickbooksDesktopFlow/index.native.tsx b/src/components/ConnectToQuickbooksDesktopFlow/index.native.tsx
@@ -6,8 +6,7 @@ import type {ConnectToQuickbooksDesktopFlowProps} from './types';
 function ConnectToQuickbooksDesktopFlow({policyID}: ConnectToQuickbooksDesktopFlowProps) {
     useEffect(() => {
         Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_SETUP_REQUIRED_DEVICE_MODAL.getRoute(policyID));
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     return null;

diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.native.tsx
@@ -32,8 +32,7 @@ function ConnectToQuickbooksOnlineFlow({policyID, session}: ConnectToQuickbooksO
         // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
         PolicyAction.enablePolicyTaxes(policyID, false);
         setWebViewOpen(true);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     if (isWebViewOpen) {

diff --git a/src/components/ConnectToQuickbooksOnlineFlow/index.tsx b/src/components/ConnectToQuickbooksOnlineFlow/index.tsx
@@ -12,8 +12,7 @@ function ConnectToQuickbooksOnlineFlow({policyID}: ConnectToQuickbooksOnlineFlow
         // Since QBO doesn't support Taxes, we should disable them from the LHN when connecting to QBO
         PolicyAction.enablePolicyTaxes(policyID, false);
         Link.openLink(getQuickbooksOnlineSetupLink(policyID), environmentURL);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     return null;

diff --git a/src/components/ConnectToSageIntacctFlow/index.tsx b/src/components/ConnectToSageIntacctFlow/index.tsx
@@ -58,8 +58,7 @@ function ConnectToSageIntacctFlow({policyID}: ConnectToSageIntacctFlowProps) {
             return;
         }
         setIsReuseConnectionsPopoverOpen(true);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     if (threeDotsMenuContainerRef) {

diff --git a/src/components/ConnectToXeroFlow/index.native.tsx b/src/components/ConnectToXeroFlow/index.native.tsx
@@ -34,8 +34,7 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) {
             return;
         }
         setWebViewOpen(true);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     return (

diff --git a/src/components/ConnectToXeroFlow/index.tsx b/src/components/ConnectToXeroFlow/index.tsx
@@ -25,8 +25,7 @@ function ConnectToXeroFlow({policyID}: ConnectToXeroFlowProps) {
             return;
         }
         Link.openLink(getXeroSetupLink(policyID), environmentURL);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     if (!is2FAEnabled) {

diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
@@ -103,8 +103,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
     const [paymentType, setPaymentType] = useState<PaymentMethodType>();
     const [requestType, setRequestType] = useState<ActionHandledType>();
-    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    const allTransactions = useMemo(() => TransactionUtils.getAllReportTransactions(moneyRequestReport?.reportID), [moneyRequestReport?.reportID, transactions]);
+    const allTransactions = useMemo(() => TransactionUtils.getAllReportTransactions(moneyRequestReport?.reportID, transactions), [moneyRequestReport?.reportID, transactions]);
     const canAllowSettlement = ReportUtils.hasUpdatedTotal(moneyRequestReport, policy);
     const policyType = policy?.type;
     const isDraft = ReportUtils.isOpenExpenseReport(moneyRequestReport);

diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.tsx b/src/components/Reactions/ReportActionItemEmojiReactions.tsx
@@ -88,8 +88,6 @@ function ReportActionItemEmojiReactions({
     const reactionListRef = useContext(ReactionListContext);
     const popoverReactionListAnchors = useRef<PopoverReactionListAnchors>({});
 
-    let totalReactionCount = 0;
-
     const reportActionID = reportAction.reportActionID;
 
     // Each emoji is sorted by the oldest timestamp of user reactions so that they will always appear in the same order for everyone
@@ -104,8 +102,6 @@ function ReportActionItemEmojiReactions({
             if (reactionCount === 0) {
                 return null;
             }
-            // eslint-disable-next-line react-compiler/react-compiler
-            totalReactionCount += reactionCount;
 
             const onPress = () => {
                 toggleReaction(emoji, true);
@@ -130,6 +126,8 @@ function ReportActionItemEmojiReactions({
         ['oldestTimestamp'],
     );
 
+    const totalReactionCount = formattedReactions.reduce((prev, curr) => (curr === null ? prev : prev + curr.reactionCount), 0);
+
     return (
         totalReactionCount > 0 && (
             <View style={[styles.flexRow, styles.flexWrap, styles.gap1, styles.mt2]}>

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -1,9 +1,8 @@
 import {useIsFocused, useNavigation} from '@react-navigation/native';
 import type {StackNavigationProp} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
@@ -96,7 +95,7 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
     const {isSmallScreenWidth, isLargeScreenWidth} = useResponsiveLayout();
     const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const isFocused = useIsFocused();
-    const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
+    const [lastNonEmptySearchResults, setLastNonEmptySearchResults] = useState<SearchResults | undefined>(undefined);
     const {setCurrentSearchHash, setSelectedTransactions, selectedTransactions, clearSelectedTransactions, setShouldShowStatusBarLoading, lastSearchType, setLastSearchType} =
         useSearchContext();
     const {selectionMode} = useMobileSelectionMode(false);
@@ -112,7 +111,11 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
         if (!currentSearchResults?.search?.type) {
             return;
         }
+
         setLastSearchType(currentSearchResults.search.type);
+        if (currentSearchResults.data) {
+            setLastNonEmptySearchResults(currentSearchResults);
+        }
     }, [lastSearchType, queryJSON, setLastSearchType, currentSearchResults]);
 
     const canSelectMultiple = isSmallScreenWidth ? !!selectionMode?.isEnabled : true;
@@ -172,15 +175,7 @@ function Search({queryJSON, onSearchListScroll, isSearchScreenFocused, contentCo
         },
     });
 
-    // save last non-empty search results to avoid ugly flash of loading screen when hash changes and onyx returns empty data
-    // eslint-disable-next-line react-compiler/react-compiler
-    if (currentSearchResults?.data && currentSearchResults !== lastSearchResultsRef.current) {
-        // eslint-disable-next-line react-compiler/react-compiler
-        lastSearchResultsRef.current = currentSearchResults;
-    }
-
-    // eslint-disable-next-line react-compiler/react-compiler
-    const searchResults = currentSearchResults?.data ? currentSearchResults : lastSearchResultsRef.current;
+    const searchResults = currentSearchResults?.data ? currentSearchResults : lastNonEmptySearchResults;
 
     const {newSearchResultKey, handleSelectionListScroll} = useSearchHighlightAndScroll({
         searchResults,

diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts
@@ -61,10 +61,11 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
         if (!isCachedViewportHeight) {
             return;
         }
-        window.addEventListener('focusin', handleFocusIn.current);
+
+        const handleFocusInValue = handleFocusIn.current;
+        window.addEventListener('focusin', handleFocusInValue);
         return () => {
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            window.removeEventListener('focusin', handleFocusIn.current);
+            window.removeEventListener('focusin', handleFocusInValue);
         };
     }, [isCachedViewportHeight]);
 
@@ -79,10 +80,11 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
         if (!isCachedViewportHeight) {
             return;
         }
-        window.addEventListener('focusout', handleFocusOut.current);
+
+        const handleFocusOutValue = handleFocusOut.current;
+        window.addEventListener('focusout', handleFocusOutValue);
         return () => {
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-            window.removeEventListener('focusout', handleFocusOut.current);
+            window.removeEventListener('focusout', handleFocusOutValue);
         };
     }, [isCachedViewportHeight]);
 
@@ -91,7 +93,7 @@ export default function (useCachedViewportHeight = false): WindowDimensions {
             return;
         }
         setCachedViewportHeight(windowHeight);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [windowHeight, isCachedViewportHeight]);
 
     useEffect(() => {

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -241,25 +241,16 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const modal = useRef<OnyxTypes.Modal>({});
     const [didPusherInit, setDidPusherInit] = useState(false);
     const {isOnboardingCompleted} = useOnboardingFlowRouter();
-
-    let initialReportID: string | undefined;
-    const isInitialRender = useRef(true);
-
-    // eslint-disable-next-line react-compiler/react-compiler
-    if (isInitialRender.current) {
+    const [initialReportID] = useState(() => {
         const currentURL = getCurrentUrl();
-        if (currentURL) {
-            initialReportID = new URL(currentURL).pathname.match(CONST.REGEX.REPORT_ID_FROM_PATH)?.at(1);
-        }
-
-        if (!initialReportID) {
-            const initialReport = ReportUtils.findLastAccessedReport(!canUseDefaultRooms, shouldOpenOnAdminRoom(), activeWorkspaceID);
-            initialReportID = initialReport?.reportID ?? '';
+        const reportIdFromPath = currentURL && new URL(currentURL).pathname.match(CONST.REGEX.REPORT_ID_FROM_PATH)?.at(1);
+        if (reportIdFromPath) {
+            return reportIdFromPath;
         }
 
-        // eslint-disable-next-line react-compiler/react-compiler
-        isInitialRender.current = false;
-    }
+        const initialReport = ReportUtils.findLastAccessedReport(!canUseDefaultRooms, shouldOpenOnAdminRoom(), activeWorkspaceID);
+        return initialReport?.reportID ?? '';
+    });
 
     useEffect(() => {
         const shortcutsOverviewShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SHORTCUTS;

diff --git a/src/libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange.ts b/src/libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange.ts
@@ -12,8 +12,7 @@ function useNavigationResetOnLayoutChange({navigation}: CustomEffectsHookProps)
         }
         // We need to separately reset state of this navigator to trigger getRehydratedState.
         navigation.reset(navigation.getState());
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [shouldUseNarrowLayout]);
 }
 

diff --git a/src/pages/TransactionReceiptPage.tsx b/src/pages/TransactionReceiptPage.tsx
@@ -52,9 +52,8 @@ function TransactionReceipt({route}: TransactionReceiptProps) {
         if (secondToLastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
             Navigation.dismissModal();
         } else {
-            Navigation.dismissModal(
-                ReportUtils.isOneTransactionThread(report?.reportID ?? '-1', report?.parentReportID ?? '-1', parentReportAction) ? report?.parentReportID : report?.reportID,
-            );
+            const isOneTransactionThread = ReportUtils.isOneTransactionThread(report?.reportID ?? '-1', report?.parentReportID ?? '-1', parentReportAction);
+            Navigation.dismissModal(isOneTransactionThread ? report?.parentReportID : report?.reportID);
         }
     };
 

diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx
@@ -56,12 +56,13 @@ function SplitBillDetailsPage({route, report, reportAction}: SplitBillDetailsPag
     } else {
         participants = participantAccountIDs.map((accountID) => OptionsListUtils.getParticipantsOption({accountID, selected: true, reportID: ''}, personalDetails));
     }
-    const payeePersonalDetails = personalDetails?.[reportAction?.actorAccountID ?? -1];
+    const actorAccountID = reportAction?.actorAccountID ?? -1;
+    const payeePersonalDetails = personalDetails?.[actorAccountID];
     const participantsExcludingPayee = participants.filter((participant) => participant.accountID !== reportAction?.actorAccountID);
 
     const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction);
     const hasSmartScanFailed = TransactionUtils.hasReceipt(transaction) && transaction?.receipt?.state === CONST.IOU.RECEIPT_STATE.SCANFAILED;
-    const isEditingSplitBill = session?.accountID === reportAction?.actorAccountID && TransactionUtils.areRequiredFieldsEmpty(transaction);
+    const isEditingSplitBill = session?.accountID === actorAccountID && TransactionUtils.areRequiredFieldsEmpty(transaction);
     const [isConfirmed, setIsConfirmed] = useState(false);
 
     const {

diff --git a/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx b/src/pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage.tsx
@@ -35,8 +35,7 @@ function UpdateDelegateRolePage({route}: UpdateDelegateRolePageProps) {
     useEffect(() => {
         updateDelegateRoleOptimistically(login ?? '', currentRole as DelegateRole);
         return () => clearDelegateRolePendingAction(login);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [login]);
 
     return (

diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -176,8 +176,7 @@ function SecuritySettingsPage() {
                         onPress,
                     };
                 }),
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [delegates, translate, styles, personalDetails, errorFields],
     );
 
@@ -199,8 +198,7 @@ function SecuritySettingsPage() {
                     interactive: false,
                 };
             }),
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         [delegators, styles, translate, personalDetails],
     );
 

diff --git a/src/pages/workspace/accounting/intacct/advanced/SageIntacctAdvancedPage.tsx b/src/pages/workspace/accounting/intacct/advanced/SageIntacctAdvancedPage.tsx
@@ -119,7 +119,7 @@ function SageIntacctAdvancedPage({policy}: WithPolicyProps) {
                     pendingAction={settingsPendingAction([CONST.SAGE_INTACCT_CONFIG.REIMBURSEMENT_ACCOUNT_ID], pendingFields)}
                 >
                     <MenuItemWithTopDescription
-                        title={getReimbursedAccountName(data?.bankAccounts ?? [], sync?.reimbursementAccountID) ?? translate('workspace.sageIntacct.notConfigured')}
+                        title={getReimbursedAccountName(data?.bankAccounts ?? [], sync.reimbursementAccountID) ?? translate('workspace.sageIntacct.notConfigured')}
                         description={translate('workspace.sageIntacct.paymentAccount')}
                         shouldShowRightIcon
                         onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PAYMENT_ACCOUNT.getRoute(policyID))}

diff --git a/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx b/src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx
@@ -52,11 +52,6 @@ function WorkspaceOwnerChangeCheck({personalDetails, policy, accountID, error}:
         setDisplayTexts(texts);
     }, [accountID, error, personalDetails, policy, translate]);
 
-    useEffect(() => {
-        updateDisplayTexts();
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, []);
-
     useEffect(() => {
         updateDisplayTexts();
     }, [updateDisplayTexts]);