♻️ (typescript) convert Balance.jsx to .tsx

packages/desktop-client/src/components/accounts/Balance.jsx → packages/desktop-client/src/components/accounts/Balance.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useHover } from 'usehooks-ts';
@@ -7,6 +7,7 @@ import { isPreviewId } from 'loot-core/shared/transactions';
 import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
 import { q } from 'loot-core/src/shared/query';
 import { getScheduledAmount } from 'loot-core/src/shared/schedules';
+import { type AccountEntity } from 'loot-core/types/models';
 
 import { useSelectedItems } from '../../hooks/useSelected';
 import { SvgArrowButtonRight1 } from '../../icons/v2';
@@ -16,10 +17,23 @@ import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { PrivacyFilter } from '../PrivacyFilter';
 import { CellValue, CellValueText } from '../spreadsheet/CellValue';
+import { type SheetFields, type SheetNames } from '../spreadsheet/index';
 import { useFormat } from '../spreadsheet/useFormat';
 import { useSheetValue } from '../spreadsheet/useSheetValue';
 
-function DetailedBalance({ name, balance, isExactBalance = true }) {
+import { type ReconcilingMessage } from './Reconcile';
+
+type DetailedBalanceProps = {
+  name: string;
+  balance: number | null;
+  isExactBalance: boolean;
+};
+
+function DetailedBalance({
+  name,
+  balance,
+  isExactBalance = true,
+}: DetailedBalanceProps) {
   const format = useFormat();
   return (
     <Text
@@ -42,32 +56,40 @@ function DetailedBalance({ name, balance, isExactBalance = true }) {
   );
 }
 
-function SelectedBalance({ selectedItems, account }) {
+function SelectedBalance({
+  selectedItems,
+  account,
+}: {
+  selectedItems: Set<string>;
+  account: AccountEntity;
+}) {
   const { t } = useTranslation();
 
+  type SelectedBalanceName = `selected-balance-${string}`;
   const name = `selected-balance-${[...selectedItems].join('-')}`;
 
-  const rows = useSheetValue({
-    name,
+  const rows = useSheetValue<'balance', SelectedBalanceName>({
+    name: name as SelectedBalanceName,
     query: q('transactions')
       .filter({
         id: { $oneof: [...selectedItems] },
         parent_id: { $oneof: [...selectedItems] },
       })
       .select('id'),
   });
-  const ids = new Set((rows || []).map(r => r.id));
+  const ids = new Set(Array.isArray(rows) ? rows.map(r => r.id) : []);
 
   const finalIds = [...selectedItems].filter(id => !ids.has(id));
-  let balance = useSheetValue({
-    name: name + '-sum',
+  type SelectedBalanceSumName = `selected-balance-${string}-sum`;
+  let balance = useSheetValue<'balance', SelectedBalanceName>({
+    name: (name + '-sum') as SelectedBalanceSumName,
     query: q('transactions')
       .filter({ id: { $oneof: finalIds } })
       .options({ splits: 'all' })
       .calculate({ $sum: '$amount' }),
   });
 
-  let scheduleBalance = null;
+  let scheduleBalance = 0;
 
   const { isLoading, schedules = [] } = useCachedSchedules();
 
@@ -114,7 +136,7 @@ function SelectedBalance({ selectedItems, account }) {
   );
 }
 
-function FilteredBalance({ filteredAmount }) {
+function FilteredBalance({ filteredAmount }: { filteredAmount: number }) {
   const { t } = useTranslation();
 
   return (
@@ -126,34 +148,58 @@ function FilteredBalance({ filteredAmount }) {
   );
 }
 
-function MoreBalances({ balanceQuery }) {
+function MoreBalances({
+  balanceQuery,
+}: {
+  balanceQuery: ComponentProps<typeof ReconcilingMessage>['balanceQuery'];
+}) {
   const { t } = useTranslation();
 
-  const cleared = useSheetValue({
-    name: balanceQuery.name + '-cleared',
+  type SelectedBalanceClearedName = `balance-query-${string}-cleared`;
+  const cleared = useSheetValue<'balance', SelectedBalanceClearedName>({
+    name: (balanceQuery.name + '-cleared') as SelectedBalanceClearedName,
     query: balanceQuery.query.filter({ cleared: true }),
   });
-  const uncleared = useSheetValue({
-    name: balanceQuery.name + '-uncleared',
+
+  type SelectedBalanceUnclearedName = `balance-query-${string}-uncleared`;
+  const uncleared = useSheetValue<'balance', SelectedBalanceUnclearedName>({
+    name: (balanceQuery.name + '-uncleared') as SelectedBalanceUnclearedName,
     query: balanceQuery.query.filter({ cleared: false }),
   });
 
   return (
     <View style={{ flexDirection: 'row' }}>
-      <DetailedBalance name={t('Cleared total:')} balance={cleared} />
-      <DetailedBalance name={t('Uncleared total:')} balance={uncleared} />
+      <DetailedBalance
+        name={t('Cleared total:')}
+        balance={cleared}
+        isExactBalance
+      />
+      <DetailedBalance
+        name={t('Uncleared total:')}
+        balance={uncleared}
+        isExactBalance
+      />
     </View>
   );
 }
 
+type BalancesProps = {
+  balanceQuery: ComponentProps<typeof ReconcilingMessage>['balanceQuery'];
+  showExtraBalances: boolean;
+  onToggleExtraBalances: () => void;
+  account: AccountEntity;
+  isFiltered: boolean;
+  filteredAmount: number;
+};
+
 export function Balances({
   balanceQuery,
   showExtraBalances,
   onToggleExtraBalances,
   account,
   isFiltered,
   filteredAmount,
-}) {
+}: BalancesProps) {
   const selectedItems = useSelectedItems();
   const buttonRef = useRef(null);
   const isButtonHovered = useHover(buttonRef);
@@ -177,7 +223,14 @@ export function Balances({
           paddingBottom: 1,
         }}
       >
-        <CellValue binding={{ ...balanceQuery, value: 0 }} type="financial">
+        <CellValue
+          binding={{
+            name: balanceQuery.name as SheetFields<SheetNames>,
+            query: balanceQuery.query,
+            value: 0,
+          }}
+          type="financial"
+        >
           {props => (
             <CellValueText
               {...props}

packages/desktop-client/src/components/spreadsheet/index.ts

@@ -69,7 +69,11 @@ export type Spreadsheets = {
     'uncategorized-balance': number;
 
     // Balance fields
+    [key: `balance-query-${string}`]: number;
     [key: `balance-query-${string}-cleared`]: number;
+    [key: `balance-query-${string}-uncleared`]: number;
+    [key: `selected-balance-${string}`]: number;
+    [key: `selected-balance-${string}-sum`]: number;
   };
 };
 

upcoming-release-notes/3874.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [cindywu]
+---
+
+Convert Balance.jsx to tsx