Merge pull request #43092 from software-mansion-labs/search-v1/polish…

…-report-list-item [Search v1] Improve performance of ReportListItem
Expensify · Jun 5, 2024 · fcfef92 · fcfef92
2 parents 7001fc0 + b014f3a
commit fcfef92
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 24 deletions.
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -139,7 +139,6 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
             sections={[{data: sortedData, isDisabled: false}]}
             onSelectRow={(item) => {
                 const reportID = isReportListItemType(item) ? item.reportID : item.transactionThreadReportID;
-
                 openReport(reportID);
             }}
             shouldDebounceRowSelect

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -18,6 +18,48 @@ import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
 import TransactionListItem from './TransactionListItem';
 import TransactionListItemRow from './TransactionListItemRow';
 
+type CellProps = {
+    // eslint-disable-next-line react/no-unused-prop-types
+    showTooltip: boolean;
+    // eslint-disable-next-line react/no-unused-prop-types
+    isLargeScreenWidth: boolean;
+};
+
+type ReportCellProps = {
+    reportItem: ReportListItemType;
+} & CellProps;
+
+type ActionCellProps = {
+    onButtonPress: () => void;
+} & CellProps;
+
+function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={showTooltip}
+            text={CurrencyUtils.convertToDisplayString((reportItem?.type === CONST.REPORT.TYPE.EXPENSE ? -1 : 1) * (reportItem?.total ?? 0), reportItem?.currency)}
+            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+        />
+    );
+}
+
+function ActionCell({onButtonPress}: ActionCellProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <Button
+            text={translate('common.view')}
+            onPress={onButtonPress}
+            small
+            pressOnEnter
+            style={[styles.p0]}
+        />
+    );
+}
+
 function ReportListItem<TItem extends ListItem>({
     item,
     isFocused,
@@ -45,28 +87,10 @@ function ReportListItem<TItem extends ListItem>({
 
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
         const searchParams = getSearchParams();
-        const currentQuery = searchParams && `query` in searchParams ? (searchParams?.query as string) : CONST.TAB_SEARCH.ALL;
+        const currentQuery = searchParams?.query ?? CONST.TAB_SEARCH.ALL;
         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(currentQuery, transactionItem.transactionThreadReportID));
     };
 
-    const totalCell = (
-        <TextWithTooltip
-            shouldShowTooltip={showTooltip}
-            text={CurrencyUtils.convertToDisplayString((reportItem?.type === CONST.REPORT.TYPE.EXPENSE ? -1 : 1) * (reportItem?.total ?? 0), reportItem?.currency)}
-            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
-        />
-    );
-
-    const actionCell = (
-        <Button
-            text={translate('common.view')}
-            onPress={handleOnButtonPress}
-            small
-            pressOnEnter
-            style={[styles.p0]}
-        />
-    );
-
     if (!reportItem?.reportName && reportItem.transactions.length > 1) {
         return null;
     }
@@ -138,13 +162,25 @@ function ReportListItem<TItem extends ListItem>({
                                     <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} ${translate('search.groupedExpenses')}`}</Text>
                                 </View>
                             </View>
-                            <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>{totalCell}</View>
+                            <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>
+                                <TotalCell
+                                    showTooltip={showTooltip}
+                                    isLargeScreenWidth={isLargeScreenWidth}
+                                    reportItem={reportItem}
+                                />
+                            </View>
                         </View>
                         {isLargeScreenWidth && (
                             <>
                                 {/** We add an empty view with type style to align the total with the table header */}
                                 <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
-                                <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>{actionCell}</View>
+                                <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
+                                    <ActionCell
+                                        showTooltip={showTooltip}
+                                        isLargeScreenWidth={isLargeScreenWidth}
+                                        onButtonPress={handleOnButtonPress}
+                                    />
+                                </View>
                             </>
                         )}
                     </View>

diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
@@ -8,7 +8,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import type {SearchAccountDetails, SearchDataTypes, SearchPersonalDetails, SearchTransaction, SearchTypeToItemMap, SectionsType} from '@src/types/onyx/SearchResults';
 import getTopmostCentralPaneRoute from './Navigation/getTopmostCentralPaneRoute';
 import navigationRef from './Navigation/navigationRef';
-import type {RootStackParamList, State} from './Navigation/types';
+import type {CentralPaneNavigatorParamList, RootStackParamList, State} from './Navigation/types';
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
 
@@ -237,7 +237,7 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
 
 function getSearchParams() {
     const topmostCentralPaneRoute = getTopmostCentralPaneRoute(navigationRef.getRootState() as State<RootStackParamList>);
-    return topmostCentralPaneRoute?.params;
+    return topmostCentralPaneRoute?.params as CentralPaneNavigatorParamList['Search_Central_Pane'];
 }
 
 export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowColumn, getShouldShowMerchant, getSearchType, getSearchParams};