Update remaining accounts hooks to return react query states (#7071)

* Update remaining accounts hooks to return react query states

* Add release notes for PR #7071

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/desktop-client/src/components/FinancesApp.tsx

@@ -32,6 +32,7 @@ import { accountQueries } from '@desktop-client/accounts';
 import { getLatestAppVersion, sync } from '@desktop-client/app/appSlice';
 import { ProtectedRoute } from '@desktop-client/auth/ProtectedRoute';
 import { Permissions } from '@desktop-client/auth/types';
+import { useAccounts } from '@desktop-client/hooks/useAccounts';
 import { useGlobalPref } from '@desktop-client/hooks/useGlobalPref';
 import { useLocalPref } from '@desktop-client/hooks/useLocalPref';
 import { useMetaThemeColor } from '@desktop-client/hooks/useMetaThemeColor';
@@ -91,10 +92,7 @@ export function FinancesApp() {
   const dispatch = useDispatch();
   const { t } = useTranslation();
 
-  // TODO: Replace with `useAccounts` hook once it's updated to return the useQuery results.
+  const { data: accounts, isFetching: isAccountsFetching } = useAccounts();
-  const { data: accounts, isFetching: isAccountsFetching } = useQuery(
-    accountQueries.list(),
-  );
 
   const versionInfo = useSelector(state => state.app.versionInfo);
   const [notifyWhenUpdateIsAvailable] = useGlobalPref(

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

@@ -49,7 +49,7 @@ function TransactionListWithPreviews() {
   } = useTransactions({
     query: transactionsQuery,
   });
-  const offBudgetAccounts = useOffBudgetAccounts();
+  const { data: offBudgetAccounts = [] } = useOffBudgetAccounts();
   const offBudgetAccountsFilter = useCallback(
     (schedule: ScheduleEntity) =>
       offBudgetAccounts.some(a => a.id === schedule._account),

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

@@ -49,7 +49,7 @@ function TransactionListWithPreviews() {
   } = useTransactions({
     query: transactionsQuery,
   });
-  const onBudgetAccounts = useOnBudgetAccounts();
+  const { data: onBudgetAccounts = [] } = useOnBudgetAccounts();
   const onBudgetAccountsFilter = useCallback(
     (schedule: ScheduleEntity) =>
       onBudgetAccounts.some(a => a.id === schedule._account),

packages/desktop-client/src/components/sidebar/Accounts.tsx

@@ -28,9 +28,9 @@ export function Accounts() {
   const { data: accounts = [] } = useAccounts();
   const failedAccounts = useFailedAccounts();
   const updatedAccounts = useUpdatedAccounts();
-  const offbudgetAccounts = useOffBudgetAccounts();
+  const { data: offbudgetAccounts = [] } = useOffBudgetAccounts();
-  const onBudgetAccounts = useOnBudgetAccounts();
+  const { data: onBudgetAccounts = [] } = useOnBudgetAccounts();
-  const closedAccounts = useClosedAccounts();
+  const { data: closedAccounts = [] } = useClosedAccounts();
   const syncingAccountIds = useSelector(state => state.account.accountsSyncing);
 
   const getAccountPath = (account: AccountEntity) => `/accounts/${account.id}`;

packages/desktop-client/src/hooks/useClosedAccounts.ts

@@ -3,8 +3,5 @@ import { useQuery } from '@tanstack/react-query';
 import { accountQueries } from '@desktop-client/accounts';
 
 export function useClosedAccounts() {
-  const query = useQuery(accountQueries.listClosed());
+  return useQuery(accountQueries.listClosed());
-  // TODO: Update to return query states (e.g. isFetching, isError, etc)
-  // so clients can handle loading and error states appropriately.
-  return query.data ?? [];
 }

packages/desktop-client/src/hooks/useOffBudgetAccounts.ts

@@ -3,6 +3,5 @@ import { useQuery } from '@tanstack/react-query';
 import { accountQueries } from '@desktop-client/accounts';
 
 export function useOffBudgetAccounts() {
-  const query = useQuery(accountQueries.listOffBudget());
+  return useQuery(accountQueries.listOffBudget());
-  return query.data ?? [];
 }

packages/desktop-client/src/hooks/useOnBudgetAccounts.ts

@@ -3,6 +3,5 @@ import { useQuery } from '@tanstack/react-query';
 import { accountQueries } from '@desktop-client/accounts';
 
 export function useOnBudgetAccounts() {
-  const query = useQuery(accountQueries.listOnBudget());
+  return useQuery(accountQueries.listOnBudget());
-  return query.data ?? [];
 }

upcoming-release-notes/7071.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Refactor account hooks to return full React Query states, enhancing data handling and component integration.