Use new useCategories hook in more places

Signed-off-by: Johannes Löthberg <[email protected]>
actualbudget · Aug 5, 2023 · dfb148a · dfb148a
1 parent 970c554
commit dfb148a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 24 deletions.
diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -21,6 +21,7 @@ import {
 } from 'loot-core/src/shared/transactions';
 
 import { useActions } from '../../hooks/useActions';
+import useCategories from '../../hooks/useCategories';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { colors } from '../../style';
 import SyncRefresh from '../SyncRefresh';
@@ -81,7 +82,6 @@ export default function Account(props) {
   let state = useSelector(state => ({
     payees: state.queries.payees,
     newTransactions: state.queries.newTransactions,
-    categories: state.queries.categories.list,
     prefs: state.prefs.local,
     dateFormat: state.prefs.local.dateFormat || 'MM/dd/yyyy',
   }));
@@ -134,9 +134,6 @@ export default function Account(props) {
         }
       });
 
-      if (state.categories.length === 0) {
-        await actionCreators.getCategories();
-      }
       if (accounts.length === 0) {
         await actionCreators.getAccounts();
       }
@@ -152,6 +149,9 @@ export default function Account(props) {
     return () => unlisten();
   }, []);
 
+  // Load categories if necessary.
+  useCategories();
+
   const updateSearchQuery = debounce(() => {
     if (searchText === '' && currentQuery) {
       updateQuery(currentQuery);

diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -5,6 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import * as queries from 'loot-core/src/client/queries';
 
 import { useActions } from '../../hooks/useActions';
+import useCategories from '../../hooks/useCategories';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { colors, styles } from '../../style';
 import Button from '../common/Button';
@@ -233,27 +234,21 @@ export default function Accounts() {
   let accounts = useSelector(state => state.queries.accounts);
   let newTransactions = useSelector(state => state.queries.newTransactions);
   let updatedAccounts = useSelector(state => state.queries.updatedAccounts);
-  let categories = useSelector(state => state.queries.categories.list);
   let numberFormat = useSelector(
     state => state.prefs.local.numberFormat || 'comma-dot',
   );
   let hideFraction = useSelector(
     state => state.prefs.local.hideFraction || false,
   );
 
-  let { getCategories, getAccounts } = useActions();
+  const { list: categories } = useCategories();
+  let { getAccounts } = useActions();
 
   const transactions = useState({});
   const navigate = useNavigate();
 
   useEffect(() => {
-    (async () => {
-      if (categories.length === 0) {
-        await getCategories();
-      }
-
-      getAccounts();
-    })();
+    (async () => getAccounts())();
   }, []);
 
   // const sync = async () => {

diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
@@ -1,12 +1,12 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import { VictoryBar, VictoryGroup, VictoryVoronoiContainer } from 'victory';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
-import { useActions } from '../../hooks/useActions';
+import useCategories from '../../hooks/useCategories';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
 import { colors, styles } from '../../style';
 import AnchorLink from '../common/AnchorLink';
@@ -256,9 +256,7 @@ function CashFlowCard() {
 }
 
 function CategorySpendingCard() {
-  const { getCategories } = useActions();
-
-  const [categories, setCategories] = useState({});
+  const categories = useCategories();
 
   const end = monthUtils.currentDay();
   const start = monthUtils.subMonths(end, 3);
@@ -276,12 +274,6 @@ function CategorySpendingCard() {
 
   const perCategorySpending = useReport('category_spending', params);
 
-  useEffect(() => {
-    getCategories().then(categories => {
-      setCategories(categories);
-    });
-  }, []);
-
   return (
     <Card flex={1} to="/reports/category-spending">
       <View>