readability refactor

Author: jmusial

src/libs/SearchQueryUtils.ts

@@ -1603,6 +1603,21 @@ function formatDefaultRawFilterSegment(rawFilter: RawQueryFilter, policies: Onyx
  * We try to replace every numeric id value with a display version of this value,
  * So: user IDs get turned into emails, report ids into report names etc.
  */
+type BuildUserReadableQueryStringParams = {
+    queryJSON: SearchQueryJSON;
+    PersonalDetails: OnyxTypes.PersonalDetailsList | undefined;
+    reports: OnyxCollection<OnyxTypes.Report>;
+    taxRates: Record<string, string[]>;
+    cardList: OnyxTypes.CardList | undefined;
+    cardFeeds: OnyxCollection<OnyxTypes.CardFeeds>;
+    policies: OnyxCollection<OnyxTypes.Policy>;
+    currentUserAccountID: number;
+    autoCompleteWithSpace: boolean;
+    translate: LocalizedTranslate;
+    feedKeysWithCards?: FeedKeysWithAssignedCards;
+    reportAttributes: OnyxTypes.ReportAttributesDerivedValue['reports'] | undefined;
+};
+
 function buildUserReadableQueryString({
     queryJSON,
     PersonalDetails,
@@ -1616,20 +1631,7 @@ function buildUserReadableQueryString({
     translate,
     feedKeysWithCards,
     reportAttributes,
-}: {
-    queryJSON: SearchQueryJSON;
-    PersonalDetails: OnyxTypes.PersonalDetailsList | undefined;
-    reports: OnyxCollection<OnyxTypes.Report>;
-    taxRates: Record<string, string[]>;
-    cardList: OnyxTypes.CardList | undefined;
-    cardFeeds: OnyxCollection<OnyxTypes.CardFeeds>;
-    policies: OnyxCollection<OnyxTypes.Policy>;
-    currentUserAccountID: number;
-    autoCompleteWithSpace: boolean;
-    translate: LocalizedTranslate;
-    feedKeysWithCards?: FeedKeysWithAssignedCards;
-    reportAttributes: OnyxTypes.ReportAttributesDerivedValue['reports'] | undefined;
-}) {
+}: BuildUserReadableQueryStringParams) {
     const {type, status, groupBy, view, columns, policyID, rawFilterList, flatFilters: filters = [], limit} = queryJSON;
 
     if (rawFilterList && rawFilterList.length > 0) {
@@ -2145,4 +2147,6 @@ export {
     isAmountFilterKey,
 };
 
+export type {BuildUserReadableQueryStringParams};
+
 export type {SearchDateValues};

src/pages/Search/SavedSearchList.tsx

@@ -120,12 +120,12 @@ function SavedSearchList({hash}: SavedSearchListProps) {
 
     const savedSearchTitles = useSavedSearchTitles({
         savedSearches,
-        personalDetails,
+        PersonalDetails: personalDetails,
         reports,
         taxRates,
-        cardsForSavedSearchDisplay,
-        allFeeds,
-        allPolicies,
+        cardList: cardsForSavedSearchDisplay,
+        cardFeeds: allFeeds,
+        policies: allPolicies,
         currentUserAccountID,
         translate,
         feedKeysWithCards,

src/pages/Search/SearchTypeMenuNarrow.tsx

@@ -93,12 +93,12 @@ function SearchTypeMenuNarrow({queryJSON, onTabPress}: SearchTypeMenuNarrowProps
     const cardsForSavedSearchDisplay = mergeCardListWithWorkspaceFeeds(workspaceCardList ?? CONST.EMPTY_OBJECT, cardList);
     const savedSearchTitles = useSavedSearchTitles({
         savedSearches,
-        personalDetails,
+        PersonalDetails: personalDetails,
         reports,
         taxRates,
-        cardsForSavedSearchDisplay,
-        allFeeds,
-        allPolicies,
+        cardList: cardsForSavedSearchDisplay,
+        cardFeeds: allFeeds,
+        policies: allPolicies,
         currentUserAccountID,
         translate,
         feedKeysWithCards,

src/pages/Search/hooks/useSavedSearchTitles.ts

@@ -1,47 +1,21 @@
 import {useDeferredValue} from 'react';
 import {buildSearchQueryJSON, buildUserReadableQueryString} from '@libs/SearchQueryUtils';
+import type {BuildUserReadableQueryStringParams} from '@libs/SearchQueryUtils';
 import type {SaveSearchItem} from '@src/types/onyx/SaveSearch';
 
 type SavedSearchCollection = Record<string, SaveSearchItem>;
-type UserReadableQueryParams = Parameters<typeof buildUserReadableQueryString>[0];
 
-type SavedSearchTitlesHookParams = {
+type SavedSearchTitlesHookParams = Omit<BuildUserReadableQueryStringParams, 'queryJSON' | 'autoCompleteWithSpace'> & {
     savedSearches: SavedSearchCollection | undefined;
-    personalDetails: UserReadableQueryParams['PersonalDetails'];
-    reports: UserReadableQueryParams['reports'];
-    taxRates: UserReadableQueryParams['taxRates'];
-    cardsForSavedSearchDisplay: UserReadableQueryParams['cardList'];
-    allFeeds: UserReadableQueryParams['cardFeeds'];
-    allPolicies: UserReadableQueryParams['policies'];
-    currentUserAccountID: number;
-    translate: UserReadableQueryParams['translate'];
-    feedKeysWithCards: UserReadableQueryParams['feedKeysWithCards'];
-    reportAttributes: UserReadableQueryParams['reportAttributes'];
     enabled?: boolean;
 };
 
-function useSavedSearchTitles({
-    savedSearches,
-    personalDetails,
-    reports,
-    taxRates,
-    cardsForSavedSearchDisplay,
-    allFeeds,
-    allPolicies,
-    currentUserAccountID,
-    translate,
-    feedKeysWithCards,
-    reportAttributes,
-    enabled = true,
-}: SavedSearchTitlesHookParams): Map<string, string> {
-    const deferredReports = useDeferredValue(reports);
-    const deferredPolicies = useDeferredValue(allPolicies);
-    const deferredPersonalDetails = useDeferredValue(personalDetails);
-    const deferredReportAttributes = useDeferredValue(reportAttributes);
-    const deferredTaxRates = useDeferredValue(taxRates);
-    const deferredCardsForSavedSearchDisplay = useDeferredValue(cardsForSavedSearchDisplay);
-    const deferredAllFeeds = useDeferredValue(allFeeds);
-    const deferredFeedKeysWithCards = useDeferredValue(feedKeysWithCards);
+function useSavedSearchTitles({savedSearches, translate, enabled = true, ...rest}: SavedSearchTitlesHookParams): Map<string, string> {
+    // `savedSearches` and `translate` are intentionally excluded from the deferred object.
+    // `savedSearches` drives which items appear in the list — deferring it would cause a flash
+    // `translate` is a stable function reference that never triggers heavy re-computation on its own.
+    const deferredRest = useDeferredValue(rest);
+    const {PersonalDetails, reports, taxRates, cardList, cardFeeds, policies, currentUserAccountID, feedKeysWithCards, reportAttributes} = deferredRest;
 
     const titles = new Map<string, string>();
 
@@ -61,17 +35,17 @@ function useSavedSearchTitles({
 
         const title = buildUserReadableQueryString({
             queryJSON: itemJsonQuery,
-            PersonalDetails: deferredPersonalDetails,
-            reports: deferredReports,
-            taxRates: deferredTaxRates,
-            cardList: deferredCardsForSavedSearchDisplay,
-            cardFeeds: deferredAllFeeds,
-            policies: deferredPolicies,
+            PersonalDetails,
+            reports,
+            taxRates,
+            cardList,
+            cardFeeds,
+            policies,
             currentUserAccountID,
             autoCompleteWithSpace: false,
             translate,
-            feedKeysWithCards: deferredFeedKeysWithCards,
-            reportAttributes: deferredReportAttributes,
+            feedKeysWithCards,
+            reportAttributes,
         });
         titles.set(item.query, title);
     }