Use the useLiveQuery hook in a couple more places (#1061)

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

@@ -82,7 +82,7 @@ export default function NotesButton({
 }: NotesButtonProps) {
   let [hover, setHover] = useState(false);
   let tooltip = useTooltip();
-  let { data } = useLiveQuery(
+  let data = useLiveQuery(
     useMemo(() => q('notes').filter({ id }).select('*'), [id]),
   );
   let note = data && data.length > 0 ? data[0].note : null;

packages/loot-core/src/client/data-hooks/accounts.tsx

-import React, { createContext, useEffect, useState, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 
-import q, { liveQuery } from 'loot-core/src/client/query-helpers';
+import q from 'loot-core/src/client/query-helpers';
+import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { getAccountsById } from 'loot-core/src/client/reducers/queries';
 
 export function useAccounts() {
-  let [data, setData] = useState(null);
-
-  useEffect(() => {
-    let query = liveQuery(q('accounts').select('*'), async accounts => {
-      if (query) {
-        setData(accounts);
-      }
-    });
-
-    return () => {
-      query.unsubscribe();
-      query = null;
-    };
-  }, []);
-
-  return data;
+  return useLiveQuery(q('accounts').select('*'));
 }
 
 let AccountsContext = createContext(null);

packages/loot-core/src/client/data-hooks/payees.tsx

-import React, { createContext, useEffect, useState, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 
-import q, { liveQuery } from 'loot-core/src/client/query-helpers';
+import q from 'loot-core/src/client/query-helpers';
+import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { getPayeesById } from 'loot-core/src/client/reducers/queries';
 
 export function usePayees() {
-  let [data, setData] = useState([]);
-
-  useEffect(() => {
-    let query = liveQuery(q('payees').select('*'), async payees => {
-      if (query) {
-        setData(payees);
-      }
-    });
-
-    return () => {
-      query.unsubscribe();
-      query = null;
-    };
-  }, []);
-
-  return data;
+  return useLiveQuery(q('payees').select('*'));
 }
 
 let PayeesContext = createContext(null);

packages/loot-core/src/client/query-hooks.tsx

@@ -90,5 +90,5 @@ export function useLiveQuery(query, opts?) {
     };
   }, [query]);
 
-  return { data };
+  return data;
 }

upcoming-release-notes/1061.md

+---
+category: Maintenance
+authors: [j-f1]
+---
+
+Use the `useLiveQuery` hook in a couple more places