Use strict typing in useSheetValue and fix bug where query is not being updated when changed

packages/desktop-client/src/components/accounts/Reconcile.tsx

@@ -29,11 +29,13 @@ export function ReconcilingMessage({
   onDone,
   onCreateTransaction,
 }: ReconcilingMessageProps) {
-  const cleared = useSheetValue<'balance', `balance-query-${string}-cleared`>({
-    name: (balanceQuery.name + '-cleared') as `balance-query-${string}-cleared`,
-    value: 0,
-    query: balanceQuery.query.filter({ cleared: true }),
-  });
+  const cleared =
+    useSheetValue<'balance', `balance-query-${string}-cleared`>({
+      name: (balanceQuery.name +
+        '-cleared') as `balance-query-${string}-cleared`,
+      value: 0,
+      query: balanceQuery.query.filter({ cleared: true }),
+    }) ?? 0;
   const format = useFormat();
   const targetDiff = targetBalance - cleared;
 

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -393,7 +393,7 @@ function CategoryItem({
   >(balanceBinding);
 
   const isToBeBudgetedItem = item.id === 'to-be-budgeted';
-  const toBudget = useEnvelopeSheetValue(envelopeBudget.toBudget) ?? 0;
+  const toBudget = useEnvelopeSheetValue(envelopeBudget.toBudget);
 
   return (
     <div
@@ -429,10 +429,13 @@ function CategoryItem({
             display: !showBalances ? 'none' : undefined,
             marginLeft: 5,
             flexShrink: 0,
-            ...makeAmountFullStyle(isToBeBudgetedItem ? toBudget : balance, {
-              positiveColor: theme.noticeTextMenu,
-              negativeColor: theme.errorTextMenu,
-            }),
+            ...makeAmountFullStyle(
+              (isToBeBudgetedItem ? toBudget : balance) || 0,
+              {
+                positiveColor: theme.noticeTextMenu,
+                negativeColor: theme.errorTextMenu,
+              },
+            ),
           }}
         >
           {isToBeBudgetedItem

packages/desktop-client/src/components/budget/envelope/BalanceMenu.tsx

@@ -29,7 +29,8 @@ export function BalanceMenu({
   const carryover = useEnvelopeSheetValue(
     envelopeBudget.catCarryover(categoryId),
   );
-  const balance = useEnvelopeSheetValue(envelopeBudget.catBalance(categoryId));
+  const balance =
+    useEnvelopeSheetValue(envelopeBudget.catBalance(categoryId)) ?? 0;
 
   return (
     <Menu

packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx

@@ -20,9 +20,9 @@ export function BalanceMovementMenu({
   onBudgetAction,
   onClose = () => {},
 }: BalanceMovementMenuProps) {
-  const catBalance = useEnvelopeSheetValue(
-    envelopeBudget.catBalance(categoryId),
-  );
+  const catBalance =
+    useEnvelopeSheetValue(envelopeBudget.catBalance(categoryId)) ?? 0;
+
   const [menu, _setMenu] = useState('menu');
 
   const ref = useRef<HTMLSpanElement>(null);

packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetMenu.tsx

@@ -25,7 +25,7 @@ export function ToBudgetMenu({
   const { t } = useTranslation();
 
   const toBudget = useEnvelopeSheetValue(envelopeBudget.toBudget) ?? 0;
-  const forNextMonth = useEnvelopeSheetValue(envelopeBudget.forNextMonth);
+  const forNextMonth = useEnvelopeSheetValue(envelopeBudget.forNextMonth) ?? 0;
   const items = [
     ...(toBudget > 0
       ? [

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

@@ -1,6 +1,6 @@
-// @ts-strict-ignore
 import { useState, useRef, useLayoutEffect } from 'react';
 
+import { type Query } from 'loot-core/shared/query';
 import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
 
 import { useSheetName } from './useSheetName';
@@ -12,13 +12,22 @@ import {
   type Binding,
 } from '.';
 
+type SheetValueResult<
+  SheetName extends SheetNames,
+  FieldName extends SheetFields<SheetName>,
+> = {
+  name: string;
+  value: Spreadsheets[SheetName][FieldName] | null;
+  query?: Query;
+};
+
 export function useSheetValue<
   SheetName extends SheetNames,
   FieldName extends SheetFields<SheetName>,
 >(
   binding: Binding<SheetName, FieldName>,
-  onChange?: (result) => void,
-): Spreadsheets[SheetName][FieldName] {
+  onChange?: (result: SheetValueResult<SheetName, FieldName>) => void,
+): SheetValueResult<SheetName, FieldName>['value'] {
   const { sheetName, fullSheetName } = useSheetName(binding);
 
   const bindingObj =
@@ -27,34 +36,37 @@ export function useSheetValue<
       : binding;
 
   const spreadsheet = useSpreadsheet();
-  const [result, setResult] = useState({
+  const [result, setResult] = useState<SheetValueResult<SheetName, FieldName>>({
     name: fullSheetName,
     value: bindingObj.value === undefined ? null : bindingObj.value,
     query: bindingObj.query,
   });
   const latestOnChange = useRef(onChange);
-  const latestValue = useRef(result.value);
+  latestOnChange.current = onChange;
 
-  useLayoutEffect(() => {
-    latestOnChange.current = onChange;
-    latestValue.current = result.value;
-  });
+  const latestValue = useRef(result.value);
+  latestValue.current = result.value;
 
   useLayoutEffect(() => {
     if (bindingObj.query) {
       spreadsheet.createQuery(sheetName, bindingObj.name, bindingObj.query);
     }
 
-    return spreadsheet.bind(sheetName, binding, null, newResult => {
-      if (latestOnChange.current) {
-        latestOnChange.current(newResult);
-      }
+    return spreadsheet.bind(
+      sheetName,
+      binding,
+      null,
+      (newResult: SheetValueResult<SheetName, FieldName>) => {
+        if (latestOnChange.current) {
+          latestOnChange.current(newResult);
+        }
 
-      if (newResult.value !== latestValue.current) {
-        setResult(newResult);
-      }
-    });
-  }, [sheetName, bindingObj.name]);
+        if (newResult.value !== latestValue.current) {
+          setResult(newResult);
+        }
+      },
+    );
+  }, [sheetName, bindingObj.name, bindingObj.query]);
 
   return result.value;
 }

upcoming-release-notes/3864.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Use strict typing in useSheetValue and fix bug where query is not being updated when the query object changed