From 0609f47cc386ea9470900b0f6ef8f1a1d5b601d9 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Wed, 21 Feb 2024 18:59:05 +0000
Subject: [PATCH] AutoComplete clean-up (#2349)

* AutoComplete clean-up

* notes

* lint fix

* fix tests

* review fix

* type
---
 .../autocomplete/AccountAutocomplete.tsx      | 34 ++----------
 .../autocomplete/CategoryAutocomplete.tsx     | 40 ++------------
 .../autocomplete/FilterAutocomplete.tsx       | 34 ++++++++++++
 ...dFilterAutocomplete.tsx => FilterList.tsx} | 53 ++++---------------
 .../components/autocomplete/ItemHeader.tsx    | 26 +++++++++
 .../autocomplete/PayeeAutocomplete.tsx        | 34 ++----------
 .../src/components/modals/EditField.jsx       | 10 ++--
 .../src/components/util/GenericInput.jsx      |  4 +-
 upcoming-release-notes/2349.md                |  6 +++
 9 files changed, 95 insertions(+), 146 deletions(-)
 create mode 100644 packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx
 rename packages/desktop-client/src/components/autocomplete/{SavedFilterAutocomplete.tsx => FilterList.tsx} (53%)
 create mode 100644 packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
 create mode 100644 upcoming-release-notes/2349.md

diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
index 778480a7dff..4610f141eb4 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -11,6 +11,7 @@ import { type CSSProperties, theme } from '../../style';
 import { View } from '../common/View';
 
 import { Autocomplete } from './Autocomplete';
+import { ItemHeader, type ItemHeaderProps } from './ItemHeader';
 
 function AccountList({
   items,
@@ -71,9 +72,7 @@ function AccountList({
 type AccountAutoCompleteProps = {
   embedded?: boolean;
   includeClosedAccounts: boolean;
-  renderAccountItemGroupHeader?: (
-    props: AccountItemGroupHeaderProps,
-  ) => ReactNode;
+  renderAccountItemGroupHeader?: (props: ItemHeaderProps) => ReactNode;
   renderAccountItem?: (props: AccountItemProps) => ReactNode;
   closeOnBlur?: boolean;
 } & ComponentProps<typeof Autocomplete>;
@@ -124,35 +123,10 @@ export function AccountAutocomplete({
   );
 }
 
-type AccountItemGroupHeaderProps = {
-  title: string;
-  style?: CSSProperties;
-};
-
-export function AccountItemGroupHeader({
-  title,
-  style,
-  ...props
-}: AccountItemGroupHeaderProps) {
-  return (
-    <div
-      style={{
-        color: theme.menuAutoCompleteTextHeader,
-        padding: '4px 9px',
-        ...style,
-      }}
-      data-testid={`${title}-account-item-group`}
-      {...props}
-    >
-      {title}
-    </div>
-  );
-}
-
 function defaultRenderAccountItemGroupHeader(
-  props: AccountItemGroupHeaderProps,
+  props: ItemHeaderProps,
 ): ReactNode {
-  return <AccountItemGroupHeader {...props} />;
+  return <ItemHeader {...props} type="account" />;
 }
 
 type AccountItemProps = {
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index bb34a8eeaa4..3716847b661 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -21,6 +21,7 @@ import { Text } from '../common/Text';
 import { View } from '../common/View';
 
 import { Autocomplete, defaultFilterSuggestion } from './Autocomplete';
+import { ItemHeader, type ItemHeaderProps } from './ItemHeader';
 
 export type CategoryListProps = {
   items: Array<CategoryEntity & { group?: CategoryGroupEntity }>;
@@ -33,9 +34,7 @@ export type CategoryListProps = {
   renderSplitTransactionButton?: (
     props: SplitTransactionButtonProps,
   ) => ReactNode;
-  renderCategoryItemGroupHeader?: (
-    props: CategoryItemGroupHeaderProps,
-  ) => ReactNode;
+  renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode;
   renderCategoryItem?: (props: CategoryItemProps) => ReactNode;
 };
 function CategoryList({
@@ -103,9 +102,7 @@ type CategoryAutocompleteProps = ComponentProps<typeof Autocomplete> & {
   renderSplitTransactionButton?: (
     props: SplitTransactionButtonProps,
   ) => ReactNode;
-  renderCategoryItemGroupHeader?: (
-    props: CategoryItemGroupHeaderProps,
-  ) => ReactNode;
+  renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode;
   renderCategoryItem?: (props: CategoryItemProps) => ReactNode;
 };
 
@@ -177,35 +174,8 @@ export function CategoryAutocomplete({
   );
 }
 
-type CategoryItemGroupHeaderProps = {
-  title: string;
-  style?: CSSProperties;
-};
-
-export function CategoryItemGroupHeader({
-  title,
-  style,
-  ...props
-}: CategoryItemGroupHeaderProps) {
-  return (
-    <div
-      style={{
-        color: theme.menuAutoCompleteTextHeader,
-        padding: '4px 9px',
-        ...style,
-      }}
-      data-testid={`${title}-category-item-group`}
-      {...props}
-    >
-      {title}
-    </div>
-  );
-}
-
-function defaultRenderCategoryItemGroupHeader(
-  props: CategoryItemGroupHeaderProps,
-) {
-  return <CategoryItemGroupHeader {...props} />;
+function defaultRenderCategoryItemGroupHeader(props: ItemHeaderProps) {
+  return <ItemHeader {...props} type="category" />;
 }
 
 type SplitTransactionButtonProps = {
diff --git a/packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx
new file mode 100644
index 00000000000..aa51cac180b
--- /dev/null
+++ b/packages/desktop-client/src/components/autocomplete/FilterAutocomplete.tsx
@@ -0,0 +1,34 @@
+import React, { type ComponentProps } from 'react';
+
+import { useFilters } from 'loot-core/src/client/data-hooks/filters';
+import { type TransactionFilterEntity } from 'loot-core/types/models/transaction-filter';
+
+import { Autocomplete } from './Autocomplete';
+import { FilterList } from './FilterList';
+
+export function FilterAutocomplete({
+  embedded,
+  ...props
+}: {
+  embedded?: boolean;
+} & ComponentProps<typeof Autocomplete<TransactionFilterEntity>>) {
+  const filters = useFilters() || [];
+
+  return (
+    <Autocomplete
+      strict={true}
+      highlightFirst={true}
+      embedded={embedded}
+      suggestions={filters}
+      renderItems={(items, getItemProps, highlightedIndex) => (
+        <FilterList
+          items={items}
+          getItemProps={getItemProps}
+          highlightedIndex={highlightedIndex}
+          embedded={embedded}
+        />
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/FilterList.tsx
similarity index 53%
rename from packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.tsx
rename to packages/desktop-client/src/components/autocomplete/FilterList.tsx
index a82ab2b2201..7a8350b27fa 100644
--- a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/FilterList.tsx
@@ -1,26 +1,21 @@
 import React, { type ComponentProps } from 'react';
 
-import { useFilters } from 'loot-core/src/client/data-hooks/filters';
-import { type TransactionFilterEntity } from 'loot-core/src/types/models';
-
-import { theme } from '../../style';
+import { theme } from '../../style/theme';
 import { View } from '../common/View';
 
-import { Autocomplete } from './Autocomplete';
+import { ItemHeader } from './ItemHeader';
 
-type FilterListProps<T> = {
-  items: T[];
-  getItemProps: (arg: { item: T }) => ComponentProps<typeof View>;
-  highlightedIndex: number;
-  embedded?: boolean;
-};
-
-function FilterList<T extends { id: string; name: string }>({
+export function FilterList<T extends { id: string; name: string }>({
   items,
   getItemProps,
   highlightedIndex,
   embedded,
-}: FilterListProps<T>) {
+}: {
+  items: T[];
+  getItemProps: (arg: { item: T }) => ComponentProps<typeof View>;
+  highlightedIndex: number;
+  embedded?: boolean;
+}) {
   return (
     <View>
       <View
@@ -30,6 +25,7 @@ function FilterList<T extends { id: string; name: string }>({
           ...(!embedded && { maxHeight: 175 }),
         }}
       >
+        <ItemHeader title="Saved Filters" type="filter" />
         {items.map((item, idx) => {
           return [
             <div
@@ -55,32 +51,3 @@ function FilterList<T extends { id: string; name: string }>({
     </View>
   );
 }
-
-type SavedFilterAutocompleteProps = {
-  embedded?: boolean;
-} & ComponentProps<typeof Autocomplete<TransactionFilterEntity>>;
-
-export function SavedFilterAutocomplete({
-  embedded,
-  ...props
-}: SavedFilterAutocompleteProps) {
-  const filters = useFilters() || [];
-
-  return (
-    <Autocomplete
-      strict={true}
-      highlightFirst={true}
-      embedded={embedded}
-      suggestions={filters}
-      renderItems={(items, getItemProps, highlightedIndex) => (
-        <FilterList
-          items={items}
-          getItemProps={getItemProps}
-          highlightedIndex={highlightedIndex}
-          embedded={embedded}
-        />
-      )}
-      {...props}
-    />
-  );
-}
diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
new file mode 100644
index 00000000000..981c05bec26
--- /dev/null
+++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { theme } from '../../style/theme';
+import { type CSSProperties } from '../../style/types';
+
+export type ItemHeaderProps = {
+  title: string;
+  style?: CSSProperties;
+  type?: string;
+};
+
+export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) {
+  return (
+    <div
+      style={{
+        color: theme.menuAutoCompleteTextHeader,
+        padding: '4px 9px',
+        ...style,
+      }}
+      data-testid={`${title}-${type}-item-group`}
+      {...props}
+    >
+      {title}
+    </div>
+  );
+}
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
index 84ee34bfd79..5ab2b41ef05 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -32,6 +32,7 @@ import {
   defaultFilterSuggestion,
   AutocompleteFooter,
 } from './Autocomplete';
+import { ItemHeader, type ItemHeaderProps } from './ItemHeader';
 
 function getPayeeSuggestions(payees, focusTransferPayees, accounts) {
   let activePayees = accounts ? getActivePayees(payees, accounts) : payees;
@@ -163,7 +164,7 @@ type PayeeAutocompleteProps = {
   onSelect?: (value: string) => void;
   onManagePayees: () => void;
   renderCreatePayeeButton?: (props: CreatePayeeButtonProps) => ReactNode;
-  renderPayeeItemGroupHeader?: (props: PayeeItemGroupHeaderProps) => ReactNode;
+  renderPayeeItemGroupHeader?: (props: ItemHeaderProps) => ReactNode;
   renderPayeeItem?: (props: PayeeItemProps) => ReactNode;
   accounts?: AccountEntity[];
   payees?: PayeeEntity[];
@@ -422,35 +423,8 @@ function defaultRenderCreatePayeeButton(
   return <CreatePayeeButton {...props} />;
 }
 
-type PayeeItemGroupHeaderProps = {
-  title: string;
-  style?: CSSProperties;
-};
-
-export function PayeeItemGroupHeader({
-  title,
-  style,
-  ...props
-}: PayeeItemGroupHeaderProps) {
-  return (
-    <div
-      style={{
-        color: theme.menuAutoCompleteTextHeader,
-        padding: '4px 9px',
-        ...style,
-      }}
-      data-testid={`${title}-payee-item-group`}
-      {...props}
-    >
-      {title}
-    </div>
-  );
-}
-
-function defaultRenderPayeeItemGroupHeader(
-  props: PayeeItemGroupHeaderProps,
-): ReactNode {
-  return <PayeeItemGroupHeader {...props} />;
+function defaultRenderPayeeItemGroupHeader(props: ItemHeaderProps): ReactNode {
+  return <ItemHeader {...props} type="payee" />;
 }
 
 type PayeeItemProps = {
diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx
index 0e2d3f1ff33..5b2b4d70b5a 100644
--- a/packages/desktop-client/src/components/modals/EditField.jsx
+++ b/packages/desktop-client/src/components/modals/EditField.jsx
@@ -15,18 +15,16 @@ import { useResponsive } from '../../ResponsiveProvider';
 import { styles, theme } from '../../style';
 import {
   AccountAutocomplete,
-  AccountItemGroupHeader,
   AccountItem,
 } from '../autocomplete/AccountAutocomplete';
 import {
   CategoryAutocomplete,
-  CategoryItemGroupHeader,
   CategoryItem,
 } from '../autocomplete/CategoryAutocomplete';
+import { ItemHeader } from '../autocomplete/ItemHeader';
 import {
   PayeeAutocomplete,
   CreatePayeeButton,
-  PayeeItemGroupHeader,
   PayeeItem,
 } from '../autocomplete/PayeeAutocomplete';
 import { Input } from '../common/Input';
@@ -118,7 +116,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
           }}
           {...(isNarrowWidth && {
             renderAccountItemGroupHeader: props => (
-              <AccountItemGroupHeader
+              <ItemHeader
                 {...props}
                 style={{
                   ...styles.largeText,
@@ -174,7 +172,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
               />
             ),
             renderPayeeItemGroupHeader: props => (
-              <PayeeItemGroupHeader
+              <ItemHeader
                 {...props}
                 style={{
                   ...styles.largeText,
@@ -228,7 +226,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) {
           }}
           {...(isNarrowWidth && {
             renderCategoryItemGroupHeader: props => (
-              <CategoryItemGroupHeader
+              <ItemHeader
                 {...props}
                 style={{
                   ...styles.largeText,
diff --git a/packages/desktop-client/src/components/util/GenericInput.jsx b/packages/desktop-client/src/components/util/GenericInput.jsx
index bf2e3c53d30..c2e1ec23a39 100644
--- a/packages/desktop-client/src/components/util/GenericInput.jsx
+++ b/packages/desktop-client/src/components/util/GenericInput.jsx
@@ -8,8 +8,8 @@ import { useDateFormat } from '../../hooks/useDateFormat';
 import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { Autocomplete } from '../autocomplete/Autocomplete';
 import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
+import { FilterAutocomplete } from '../autocomplete/FilterAutocomplete';
 import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete';
-import { SavedFilterAutocomplete } from '../autocomplete/SavedFilterAutocomplete';
 import { Input } from '../common/Input';
 import { View } from '../common/View';
 import { Checkbox } from '../forms';
@@ -98,7 +98,7 @@ export function GenericInput({
       switch (field) {
         case 'saved':
           content = (
-            <SavedFilterAutocomplete
+            <FilterAutocomplete
               saved={saved}
               value={value}
               multi={multi}
diff --git a/upcoming-release-notes/2349.md b/upcoming-release-notes/2349.md
new file mode 100644
index 00000000000..14be36df501
--- /dev/null
+++ b/upcoming-release-notes/2349.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [carkom]
+---
+
+Organizing and splitting filters Autocomplete. Splitting out headers function that was duplicated in all autocomplete elements.