Merge branch 'master' into redux-toolkit-modals-slice

eslint.config.mjs

@@ -789,7 +789,6 @@ export default [
       'packages/desktop-client/src/components/select/DateSelect.tsx',
       'packages/desktop-client/src/components/sidebar/Tools.tsx',
       'packages/desktop-client/src/components/sort.tsx',
-      'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
     ],
 
     rules: {

packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx

@@ -244,7 +244,7 @@ function TransactionListWithPreviews({
   const { t } = useTranslation();
   const baseTransactionsQuery = useCallback(
     () =>
-      queries.transactions(accountId).options({ splits: 'none' }).select('*'),
+      queries.transactions(accountId).options({ splits: 'all' }).select('*'),
     [accountId],
   );
 
@@ -357,7 +357,8 @@ function TransactionListWithPreviews({
   );
 
   const transactionsToDisplay = !isSearching
-    ? previewTransactions.concat(transactions)
+    ? // Do not render child transactions in the list, unless searching
+      previewTransactions.concat(transactions.filter(t => !t.is_child))
     : transactions;
 
   return (

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

@@ -89,15 +89,24 @@ export type SheetNames = keyof Spreadsheets & string;
 export type SheetFields<SheetName extends SheetNames> =
   keyof Spreadsheets[SheetName] & string;
 
+export type BindingObject<
+  SheetName extends SheetNames,
+  SheetFieldName extends SheetFields<SheetName>,
+> = {
+  name: SheetFieldName;
+  value?: Spreadsheets[SheetName][SheetFieldName] | undefined;
+  query?: Query | undefined;
+};
+
 export type Binding<
   SheetName extends SheetNames,
   SheetFieldName extends SheetFields<SheetName>,
 > =
   | SheetFieldName
   | {
       name: SheetFieldName;
-      value?: Spreadsheets[SheetName][SheetFieldName];
-      query?: Query;
+      value?: Spreadsheets[SheetName][SheetFieldName] | undefined;
+      query?: Query | undefined;
     };
 export const parametrizedField =
   <SheetName extends SheetNames>() =>

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

@@ -1,4 +1,4 @@
-import { useState, useRef, useLayoutEffect, useMemo } from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
 
 import { useSpreadsheet } from 'loot-core/client/SpreadsheetProvider';
 
@@ -9,6 +9,7 @@ import {
   type SheetFields,
   type SheetNames,
   type Binding,
+  type BindingObject,
 } from '.';
 
 type SheetValueResult<
@@ -28,18 +29,18 @@ export function useSheetValue<
 ): SheetValueResult<SheetName, FieldName>['value'] {
   const { sheetName, fullSheetName } = useSheetName(binding);
 
-  const bindingObj = useMemo(
+  const memoizedBinding = useMemoizedBinding(
     () =>
       typeof binding === 'string'
-        ? { name: binding, value: null, query: undefined }
+        ? { name: binding, value: undefined, query: undefined }
         : binding,
-    [binding],
+    binding,
   );
 
   const spreadsheet = useSpreadsheet();
   const [result, setResult] = useState<SheetValueResult<SheetName, FieldName>>({
     name: fullSheetName,
-    value: bindingObj.value ? bindingObj.value : null,
+    value: memoizedBinding.value ? memoizedBinding.value : null,
   });
   const latestOnChange = useRef(onChange);
   latestOnChange.current = onChange;
@@ -50,7 +51,7 @@ export function useSheetValue<
   useLayoutEffect(() => {
     let isMounted = true;
 
-    const unbind = spreadsheet.bind(sheetName, bindingObj, newResult => {
+    const unbind = spreadsheet.bind(sheetName, memoizedBinding, newResult => {
       if (!isMounted) {
         return;
       }
@@ -74,12 +75,56 @@ export function useSheetValue<
       isMounted = false;
       unbind();
     };
-  }, [
-    spreadsheet,
-    sheetName,
-    bindingObj.name,
-    bindingObj.query?.serializeAsString(),
-  ]);
+  }, [spreadsheet, sheetName, memoizedBinding]);
 
   return result.value;
 }
+
+type MemoKey<
+  SheetName extends SheetNames,
+  FieldName extends SheetFields<SheetName>,
+> = {
+  name: string;
+  value?: Spreadsheets[SheetName][FieldName] | undefined;
+  // We check the serialized query to see if it has changed
+  serializedQuery?: string;
+};
+
+function useMemoizedBinding<
+  SheetName extends SheetNames,
+  FieldName extends SheetFields<SheetName>,
+>(
+  memoBinding: () => BindingObject<SheetName, FieldName>,
+  key: Binding<SheetName, FieldName>,
+): BindingObject<SheetName, FieldName> {
+  const ref = useRef<{
+    key: MemoKey<SheetName, FieldName>;
+    value: BindingObject<SheetName, FieldName>;
+  } | null>(null);
+
+  const bindingName = typeof key === 'string' ? key : key.name;
+  const bindingValue = typeof key === 'string' ? undefined : key.value;
+  const serializedBindingQuery =
+    typeof key === 'string' ? undefined : key.query?.serializeAsString();
+
+  if (
+    !ref.current ||
+    bindingName !== ref.current.key.name ||
+    bindingValue !== ref.current.key.value ||
+    serializedBindingQuery !== ref.current.key.serializedQuery
+  ) {
+    // This should not update the binding reference if the binding name, value, and query values are the same.
+    // Since query objects are immutable, we compare the serialized query string to make sure that we don't cause
+    // a re-render whenever a new query object with the same parameter values (QueryState) is passed in.
+    ref.current = {
+      key: {
+        name: bindingName,
+        value: bindingValue,
+        serializedQuery: serializedBindingQuery,
+      },
+      value: memoBinding(),
+    };
+  }
+
+  return ref.current.value;
+}

packages/loot-core/src/client/SpreadsheetProvider.tsx

@@ -26,9 +26,7 @@ export function useSpreadsheet() {
 }
 
 // TODO: Make this generic and replace the Binding type in the desktop-client package.
-type Binding =
-  | string
-  | { name: string; value?: unknown | null; query?: Query | undefined };
+type Binding = string | { name: string; query?: Query | undefined };
 
 type CellCacheValue = { name: string; value: Node['value'] | null };
 type CellCache = { [name: string]: Promise<CellCacheValue> | null };
@@ -92,8 +90,7 @@ function makeSpreadsheet() {
       binding: Binding,
       callback: CellObserverCallback,
     ): () => void {
-      binding =
-        typeof binding === 'string' ? { name: binding, value: null } : binding;
+      binding = typeof binding === 'string' ? { name: binding } : binding;
 
       if (binding.query) {
         this.createQuery(sheetName, binding.name, binding.query);

packages/loot-core/src/mocks/budget.ts

@@ -461,14 +461,14 @@ async function fillOther(handlers, account, payees, groups) {
 async function createBudget(accounts, payees, groups) {
   const primaryAccount = accounts.find(a => (a.name = 'Bank of America'));
   const earliestDate = (
-    await db.first(
-      `SELECT * FROM v_transactions t LEFT JOIN accounts a ON t.account = a.id
+    await db.first<Pick<db.DbViewTransaction, 'date'>>(
+      `SELECT t.date FROM v_transactions t LEFT JOIN accounts a ON t.account = a.id
        WHERE a.offbudget = 0 AND t.is_child = 0 ORDER BY date ASC LIMIT 1`,
     )
   ).date;
   const earliestPrimaryDate = (
-    await db.first(
-      `SELECT * FROM v_transactions t LEFT JOIN accounts a ON t.account = a.id
+    await db.first<Pick<db.DbViewTransaction, 'date'>>(
+      `SELECT t.date FROM v_transactions t LEFT JOIN accounts a ON t.account = a.id
        WHERE a.id = ? AND a.offbudget = 0 AND t.is_child = 0 ORDER BY date ASC LIMIT 1`,
       [primaryAccount.id],
     )