Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Chore] Fix components where react rules aren't followed #52040

Merged
merged 22 commits into from
Nov 14, 2024
Merged
Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
ddd5672
Fix AuthScreens component
blazejkustra Nov 4, 2024
692c16a
Remove redundant useEffect
blazejkustra Nov 4, 2024
d156733
Pass transactions to getAllReportTransactions
blazejkustra Nov 4, 2024
77655bc
Fix reassigning a variable in component
blazejkustra Nov 4, 2024
5f5773c
Fix two bugs related to useEffect cleanup func
blazejkustra Nov 5, 2024
a3c9fae
Fix Unexpected terminal kind for ternary test block
blazejkustra Nov 5, 2024
49f0f59
Fix Unexpected terminal kind for logical test block
blazejkustra Nov 5, 2024
bbc3945
Clean in useEffectOnce function
blazejkustra Nov 5, 2024
6f85fe3
Add explanation to useEffectOnce
blazejkustra Nov 5, 2024
b840df5
Revert one comment
blazejkustra Nov 5, 2024
a19b6fe
Merge branch 'main' into fix/rules-of-react
blazejkustra Nov 5, 2024
530434c
Merge branch 'main' into fix/rules-of-react
blazejkustra Nov 5, 2024
224dac2
Revert "Fix patches"
blazejkustra Nov 5, 2024
6b57db3
Remove useEffectOnce as it doesn't work as expected
blazejkustra Nov 5, 2024
018dfc9
Remove useEffectOnce import
blazejkustra Nov 5, 2024
d95f9ea
Ignore react-compiler the correct way
blazejkustra Nov 5, 2024
0656a48
Don't use ref anymore to track previous result on search page
blazejkustra Nov 5, 2024
a7023e7
Merge branch 'main' into fix/rules-of-react
blazejkustra Nov 12, 2024
95d7f5c
Merge branch 'main' into fix/rules-of-react
blazejkustra Nov 13, 2024
2514778
Fix how totalReactionCount is calculated
blazejkustra Nov 13, 2024
6ef1197
Bring back old code
blazejkustra Nov 13, 2024
4583987
Merge branch 'main' into fix/rules-of-react
blazejkustra Nov 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/ConnectToNetSuiteFlow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
3 changes: 1 addition & 2 deletions src/components/ConnectToQuickbooksOnlineFlow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions src/components/ConnectToSageIntacctFlow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
3 changes: 1 addition & 2 deletions src/components/ConnectToXeroFlow/index.native.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
3 changes: 1 addition & 2 deletions src/components/ConnectToXeroFlow/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
3 changes: 1 addition & 2 deletions src/components/MoneyReportHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
6 changes: 2 additions & 4 deletions src/components/Reactions/ReportActionItemEmojiReactions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
Expand All @@ -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]}>
Expand Down
19 changes: 7 additions & 12 deletions src/components/Search/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
16 changes: 9 additions & 7 deletions src/hooks/useWindowDimensions/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand All @@ -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]);

Expand All @@ -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(() => {
Expand Down
24 changes: 7 additions & 17 deletions src/libs/Navigation/AppNavigator/AuthScreens.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -241,28 +241,18 @@ 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 ?? '';
});

const isOnboardingCompletedRef = useRef(isOnboardingCompleted);

useEffect(() => {
isOnboardingCompletedRef.current = isOnboardingCompleted;
}, [isOnboardingCompleted]);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
}

Expand Down
5 changes: 2 additions & 3 deletions src/pages/TransactionReceiptPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};

Expand Down
5 changes: 3 additions & 2 deletions src/pages/iou/SplitBillDetailsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
6 changes: 2 additions & 4 deletions src/pages/settings/Security/SecuritySettingsPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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],
);

Expand All @@ -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],
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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))}
Expand Down
5 changes: 0 additions & 5 deletions src/pages/workspace/members/WorkspaceOwnerChangeCheck.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
Loading