[Maintenance] Update CloseAccount, AccountAutocomplete, SavedFilterAu…

…tocomplete, PayeeAutocomplete components to Typescript. (actualbudget#1923)
FlorianLang06 · Nov 18, 2023 · ea74785 · ea74785
1 parent 2057ac8
commit ea74785
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 23 deletions.
diff --git a/...nents/autocomplete/AccountAutocomplete.js → ...ents/autocomplete/AccountAutocomplete.tsx b/...nents/autocomplete/AccountAutocomplete.js → ...ents/autocomplete/AccountAutocomplete.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { css } from 'glamor';
 
@@ -108,13 +108,20 @@ function AccountList({
   );
 }
 
+type AutoCompleteProps = {
+  embedded?: boolean;
+  includeClosedAccounts: boolean;
+  groupHeaderStyle?: boolean;
+  closeOnBlur?: boolean;
+} & ComponentProps<typeof Autocomplete>;
+
 export default function AccountAutocomplete({
   embedded,
   includeClosedAccounts = true,
   groupHeaderStyle,
   closeOnBlur,
   ...props
-}) {
+}: AutoCompleteProps) {
   let accounts = useCachedAccounts() || [];
 
   //remove closed accounts if needed

diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -147,7 +147,9 @@ type SingleAutocompleteProps = {
   embedded?: boolean;
   containerProps?: HTMLProps<HTMLDivElement>;
   labelProps?: { id?: string };
-  inputProps?: ComponentProps<typeof Input>;
+  inputProps?: Omit<ComponentProps<typeof Input>, 'onChange'> & {
+    onChange?: (value: string) => void;
+  };
   suggestions?: unknown[];
   tooltipStyle?: CSSProperties;
   tooltipProps?: ComponentProps<typeof Tooltip>;
@@ -158,7 +160,7 @@ type SingleAutocompleteProps = {
     idx: number,
     value?: unknown,
   ) => ReactNode;
-  itemToString?: (item: unknown) => string;
+  itemToString?: (item) => string;
   shouldSaveFromKey?: (e: KeyboardEvent) => boolean;
   filterSuggestions?: (suggestions, value: string) => unknown[];
   openOnFocus?: boolean;
@@ -169,7 +171,7 @@ type SingleAutocompleteProps = {
   onSelect: (id: unknown, value: string) => void;
   tableBehavior?: boolean;
   closeOnBlur?: boolean;
-  value: unknown[];
+  value: unknown[] | string;
   isMulti?: boolean;
 };
 function SingleAutocomplete({
@@ -482,7 +484,6 @@ function SingleAutocomplete({
               },
               onChange: (e: ChangeEvent<HTMLInputElement>) => {
                 const { onChange } = inputProps || {};
-                // @ts-expect-error unsure if onChange needs an event or a string
                 onChange?.(e.target.value);
               },
             }),
@@ -679,13 +680,31 @@ export function AutocompleteFooter({
   );
 }
 
-type AutocompleteProps = ComponentProps<typeof SingleAutocomplete> & {
-  multi?: boolean;
-};
-export default function Autocomplete({ multi, ...props }: AutocompleteProps) {
-  if (multi) {
+type AutocompleteProps =
+  | ComponentProps<typeof SingleAutocomplete>
+  | ComponentProps<typeof MultiAutocomplete>;
+
+function isMultiAutocomplete(
+  props: AutocompleteProps,
+  multi?: boolean,
+): props is ComponentProps<typeof MultiAutocomplete> {
+  return multi;
+}
+
+function isSingleAutocomplete(
+  props: AutocompleteProps,
+  multi?: boolean,
+): props is ComponentProps<typeof SingleAutocomplete> {
+  return !multi;
+}
+
+export default function Autocomplete({
+  multi,
+  ...props
+}: AutocompleteProps & { multi?: boolean }) {
+  if (isMultiAutocomplete(props, multi)) {
     return <MultiAutocomplete {...props} />;
-  } else {
+  } else if (isSingleAutocomplete(props, multi)) {
     return <SingleAutocomplete {...props} />;
   }
 }
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -3,6 +3,7 @@ import React, {
   Fragment,
   useMemo,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
 import { css } from 'glamor';
@@ -151,8 +152,9 @@ function CategoryList({
 type CategoryAutocompleteProps = ComponentProps<typeof Autocomplete> & {
   categoryGroups: Array<CategoryGroupEntity>;
   showSplitOption?: boolean;
-  groupHeaderStyle?: object;
+  groupHeaderStyle?: CSSProperties;
 };
+
 export default function CategoryAutocomplete({
   categoryGroups,
   showSplitOption,

diff --git a/...ponents/autocomplete/PayeeAutocomplete.js → ...onents/autocomplete/PayeeAutocomplete.tsx b/...ponents/autocomplete/PayeeAutocomplete.js → ...onents/autocomplete/PayeeAutocomplete.tsx
@@ -1,4 +1,10 @@
-import React, { Fragment, useState, useMemo } from 'react';
+import React, {
+  Fragment,
+  useState,
+  useMemo,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 import { useDispatch } from 'react-redux';
 
 import { css } from 'glamor';
@@ -7,6 +13,10 @@ import { createPayee } from 'loot-core/src/client/actions/queries';
 import { useCachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
 import { useCachedPayees } from 'loot-core/src/client/data-hooks/payees';
 import { getActivePayees } from 'loot-core/src/client/reducers/queries';
+import {
+  type AccountEntity,
+  type PayeeEntity,
+} from 'loot-core/src/types/models';
 
 import Add from '../../icons/v1/Add';
 import { useResponsive } from '../../ResponsiveProvider';
@@ -202,6 +212,22 @@ function PayeeList({
   );
 }
 
+type PayeeAutocompleteProps = {
+  value: ComponentProps<typeof Autocomplete>['value'];
+  inputProps: ComponentProps<typeof Autocomplete>['inputProps'];
+  showMakeTransfer?: boolean;
+  showManagePayees?: boolean;
+  tableBehavior: ComponentProps<typeof Autocomplete>['tableBehavior'];
+  embedded?: boolean;
+  closeOnBlur: ComponentProps<typeof Autocomplete>['closeOnBlur'];
+  onUpdate?: (value: string) => void;
+  onSelect?: (value: string) => void;
+  onManagePayees: () => void;
+  groupHeaderStyle: CSSProperties;
+  accounts?: AccountEntity[];
+  payees?: PayeeEntity[];
+};
+
 export default function PayeeAutocomplete({
   value,
   inputProps,
@@ -217,7 +243,7 @@ export default function PayeeAutocomplete({
   accounts,
   payees,
   ...props
-}) {
+}: PayeeAutocompleteProps) {
   let cachedPayees = useCachedPayees();
   if (!payees) {
     payees = cachedPayees;

diff --git a/...s/autocomplete/SavedFilterAutocomplete.js → .../autocomplete/SavedFilterAutocomplete.tsx b/...s/autocomplete/SavedFilterAutocomplete.js → .../autocomplete/SavedFilterAutocomplete.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { useFilters } from 'loot-core/src/client/data-hooks/filters';
 
@@ -7,7 +7,19 @@ import View from '../common/View';
 
 import Autocomplete from './Autocomplete';
 
-function FilterList({ items, getItemProps, highlightedIndex, embedded }) {
+type FilterListProps = {
+  items: { id: string; name: string }[];
+  getItemProps: (arg: { item: unknown }) => ComponentProps<typeof View>;
+  highlightedIndex: number;
+  embedded?: boolean;
+};
+
+function FilterList({
+  items,
+  getItemProps,
+  highlightedIndex,
+  embedded,
+}: FilterListProps) {
   return (
     <View>
       <View
@@ -44,7 +56,14 @@ function FilterList({ items, getItemProps, highlightedIndex, embedded }) {
   );
 }
 
-export default function SavedFilterAutocomplete({ embedded, ...props }) {
+type SavedFilterAutocompleteProps = {
+  embedded?: boolean;
+} & ComponentProps<typeof Autocomplete>;
+
+export default function SavedFilterAutocomplete({
+  embedded,
+  ...props
+}: SavedFilterAutocompleteProps) {
   let filters = useFilters() || [];
 
   return (

diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
@@ -22,7 +22,13 @@ type ButtonProps = HTMLProps<HTMLButtonElement> & {
   as?: ElementType;
 };
 
-type ButtonType = 'normal' | 'primary' | 'bare' | 'link';
+type ButtonType =
+  | 'normal'
+  | 'primary'
+  | 'bare'
+  | 'link'
+  | 'menu'
+  | 'menuSelected';
 
 const backgroundColor = {
   normal: theme.buttonNormalBackground,

diff --git a/...ent/src/components/modals/CloseAccount.js → ...nt/src/components/modals/CloseAccount.tsx b/...ent/src/components/modals/CloseAccount.js → ...nt/src/components/modals/CloseAccount.tsx
@@ -1,8 +1,14 @@
 import React, { useState } from 'react';
 
 import { integerToCurrency } from 'loot-core/src/shared/util';
+import {
+  type AccountEntity,
+  type CategoryGroupEntity,
+} from 'loot-core/src/types/models';
 
+import { type BoundActions } from '../../hooks/useActions';
 import { theme } from '../../style';
+import { type CommonModalProps } from '../../types/modals';
 import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
 import CategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
 import Button from '../common/Button';
@@ -13,7 +19,11 @@ import Paragraph from '../common/Paragraph';
 import Text from '../common/Text';
 import View from '../common/View';
 
-function needsCategory(account, currentTransfer, accounts) {
+function needsCategory(
+  account: AccountEntity,
+  currentTransfer: string,
+  accounts: AccountEntity[],
+) {
   const acct = accounts.find(a => a.id === currentTransfer);
   const isOffBudget = acct && acct.offbudget === 1;
 
@@ -22,6 +32,16 @@ function needsCategory(account, currentTransfer, accounts) {
   return account.offbudget === 0 && isOffBudget;
 }
 
+type CloseAccountProps = {
+  account: AccountEntity;
+  accounts: AccountEntity[];
+  categoryGroups: CategoryGroupEntity[];
+  balance: number;
+  canDelete: boolean;
+  actions: BoundActions;
+  modalProps: CommonModalProps;
+};
+
 function CloseAccount({
   account,
   accounts,
@@ -30,7 +50,7 @@ function CloseAccount({
   canDelete,
   actions,
   modalProps,
-}) {
+}: CloseAccountProps) {
   let [loading, setLoading] = useState(false);
   let [transfer, setTransfer] = useState('');
   let [category, setCategory] = useState('');
@@ -95,7 +115,6 @@ function CloseAccount({
                   <AccountAutocomplete
                     includeClosedAccounts={false}
                     value={transfer}
-                    accounts={accounts}
                     inputProps={{
                       placeholder: 'Select account...',
                     }}

diff --git a/packages/loot-core/src/client/actions/queries.ts b/packages/loot-core/src/client/actions/queries.ts
@@ -293,7 +293,12 @@ export function openAccountCloseModal(accountId) {
   };
 }
 
-export function closeAccount(accountId, transferAccountId, categoryId, forced) {
+export function closeAccount(
+  accountId: string,
+  transferAccountId: string,
+  categoryId: string,
+  forced?: boolean,
+) {
   return async (dispatch: Dispatch) => {
     await send('account-close', {
       id: accountId,

diff --git a/upcoming-release-notes/1923.md b/upcoming-release-notes/1923.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MikesGlitch]
+---
+
+Convert CloseAccount, AccountAutocomplete, SavedFilterAutocomplete, PayeeAutocomplete components to Typescript.