Merge branch 'master' into calendar_report

packages/desktop-client/e2e/accounts.test.js

@@ -54,17 +54,17 @@ test.describe('Accounts', () => {
     await expect(page).toMatchThemeScreenshots();
   });
 
-  test.describe('Budgeted Accounts', () => {
+  test.describe('On Budget Accounts', () => {
     // Reset filters
     test.afterEach(async () => {
       await accountPage.removeFilter(0);
     });
 
     test('creates a transfer from two existing transactions', async () => {
-      accountPage = await navigation.goToAccountPage('For budget');
+      accountPage = await navigation.goToAccountPage('On budget');
       await accountPage.waitFor();
 
-      await expect(accountPage.accountName).toHaveText('Budgeted Accounts');
+      await expect(accountPage.accountName).toHaveText('On Budget Accounts');
 
       await accountPage.filterByNote('Test Acc Transfer');
 

packages/desktop-client/e2e/budget.test.js

@@ -27,12 +27,12 @@ test.describe('Budget', () => {
   test('renders the summary information: available funds, overspent, budgeted and for next month', async () => {
     const summary = budgetPage.budgetSummary.first();
 
-    await expect(summary.getByText('Available Funds')).toBeVisible({
+    await expect(summary.getByText('Available funds')).toBeVisible({
       timeout: 10000,
     });
     await expect(summary.getByText(/^Overspent in /)).toBeVisible();
     await expect(summary.getByText('Budgeted')).toBeVisible();
-    await expect(summary.getByText('For Next Month')).toBeVisible();
+    await expect(summary.getByText('For next month')).toBeVisible();
     await expect(page).toMatchThemeScreenshots();
   });
 

packages/desktop-client/e2e/page-models/mobile-budget-page.js

@@ -34,7 +34,7 @@ export class MobileBudgetPage {
       name: 'Saved',
     });
     this.projectedSavingsButton = this.budgetTableHeader.getByRole('button', {
-      name: 'Projected Savings',
+      name: 'Projected savings',
     });
     this.overspentButton = this.budgetTableHeader.getByRole('button', {
       name: 'Overspent',
@@ -294,7 +294,7 @@ export class MobileBudgetPage {
     }
 
     throw new Error(
-      'None of “Saved”, “Projected Savings”, or “Overspent” buttons could be located on the page',
+      'None of “Saved”, “Projected savings”, or “Overspent” buttons could be located on the page',
     );
   }
 

packages/desktop-client/e2e/page-models/navigation.js

@@ -66,7 +66,7 @@ export class Navigation {
     await this.page.getByLabel('Balance:').fill(String(data.balance));
 
     if (data.offBudget) {
-      await this.page.getByLabel('Off-budget').click();
+      await this.page.getByLabel('Off budget').click();
     }
 
     await this.page

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

@@ -1,11 +1,11 @@
 // @ts-strict-ignore
 import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { closeBudget, getUserData, signOut } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
 
-import { useActions } from '../hooks/useActions';
 import { useNavigate } from '../hooks/useNavigate';
 import { theme, styles } from '../style';
 
@@ -27,22 +27,28 @@ export function LoggedInUser({
   color,
 }: LoggedInUserProps) {
   const { t } = useTranslation();
-
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
   const userData = useSelector((state: State) => state.user.data);
-  const { getUserData, signOut, closeBudget } = useActions();
   const [loading, setLoading] = useState(true);
   const [menuOpen, setMenuOpen] = useState(false);
   const serverUrl = useServerURL();
   const triggerRef = useRef(null);
 
   useEffect(() => {
-    getUserData().then(() => setLoading(false));
+    async function init() {
+      await dispatch(getUserData());
+    }
+
+    init().then(() => setLoading(false));
   }, []);
 
-  const navigate = useNavigate();
+  async function onCloseBudget() {
+    await dispatch(closeBudget());
+  }
 
   async function onChangePassword() {
-    await closeBudget();
+    await onCloseBudget();
     navigate('/change-password');
   }
 
@@ -54,14 +60,14 @@ export function LoggedInUser({
         onChangePassword();
         break;
       case 'sign-in':
-        await closeBudget();
+        await onCloseBudget();
         navigate('/login');
         break;
       case 'sign-out':
-        signOut();
+        dispatch(signOut());
         break;
       case 'config-server':
-        await closeBudget();
+        await onCloseBudget();
         navigate('/config-server');
         break;
       default:

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

@@ -1,11 +1,11 @@
 import React from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { ManageRules } from './ManageRules';
 import { Page } from './Page';
 
 export function ManageRulesPage() {
+  const { t } = useTranslation();
   return (
     <Page header={t('Rules')}>
       <ManageRules isModal={false} payeeId={null} />

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

@@ -1,9 +1,9 @@
 // @ts-strict-ignore
 import React, { useEffect, useRef, type CSSProperties } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
 import { css } from '@emotion/css';
-import { t } from 'i18next';
 import remarkGfm from 'remark-gfm';
 
 import { theme } from '../style';
@@ -99,6 +99,7 @@ export function Notes({
   getStyle,
 }: NotesProps) {
   const { isNarrowWidth } = useResponsive();
+  const { t } = useTranslation();
 
   const textAreaRef = useRef<HTMLTextAreaElement>();
 

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

@@ -5,8 +5,7 @@ import React, {
   type ComponentProps,
   type CSSProperties,
 } from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
@@ -36,6 +35,7 @@ export function NotesButton({
   tooltipPosition = 'bottom start',
   style,
 }: NotesButtonProps) {
+  const { t } = useTranslation();
   const triggerRef = useRef(null);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const note = useNotes(id) || '';

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

@@ -6,10 +6,10 @@ import React, {
   type SetStateAction,
   type CSSProperties,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { css } from '@emotion/css';
-import { t } from 'i18next';
 
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
@@ -91,6 +91,7 @@ function Notification({
   notification: NotificationWithId;
   onRemove: () => void;
 }) {
+  const { t } = useTranslation();
   const {
     type,
     title,

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

@@ -1,6 +1,5 @@
 import React, { useRef, useState, type CSSProperties } from 'react';
-
-import { t } from 'i18next';
+import { useTranslation } from 'react-i18next';
 
 import type { Theme } from 'loot-core/src/types/prefs';
 
@@ -22,6 +21,7 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
   const triggerRef = useRef(null);
 
   const { isNarrowWidth } = useResponsive();
+  const { t } = useTranslation();
 
   const themeIcons = {
     light: SvgSun,

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

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { css } from '@emotion/css';
-import { t } from 'i18next';
 
+import { sync } from 'loot-core/client/actions';
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
@@ -13,7 +15,6 @@ import {
   isElectron,
 } from 'loot-core/src/shared/environment';
 
-import { useActions } from '../hooks/useActions';
 import { useGlobalPref } from '../hooks/useGlobalPref';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useNavigate } from '../hooks/useNavigate';
@@ -107,9 +108,9 @@ type SyncButtonProps = {
   isMobile?: boolean;
 };
 function SyncButton({ style, isMobile = false }: SyncButtonProps) {
+  const { t } = useTranslation();
   const [cloudFileId] = useMetadataPref('cloudFileId');
-  const { sync } = useActions();
-
+  const dispatch = useDispatch();
   const [syncing, setSyncing] = useState(false);
   const [syncState, setSyncState] = useState<
     null | 'offline' | 'local' | 'disabled' | 'error'
@@ -193,15 +194,17 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
     marginRight: 5,
   };
 
+  const onSync = () => dispatch(sync());
+
   useHotkeys(
     'ctrl+s, cmd+s, meta+s',
-    sync,
+    onSync,
     {
       enableOnFormTags: true,
       preventDefault: true,
       scopes: ['app'],
     },
-    [sync],
+    [onSync],
   );
 
   return (
@@ -223,7 +226,7 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
         '&[data-hovered]': hoveredStyle,
         '&[data-pressed]': activeStyle,
       })}
-      onPress={sync}
+      onPress={onSync}
     >
       {isMobile ? (
         syncState === 'error' ? (
@@ -265,6 +268,7 @@ type TitlebarProps = {
 };
 
 export function Titlebar({ style }: TitlebarProps) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
   const sidebar = useSidebar();

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 
+import { setAppState, updateApp } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
 
-import { useActions } from '../hooks/useActions';
 import { SvgClose } from '../icons/v1';
 import { theme } from '../style';
 
@@ -20,7 +20,10 @@ export function UpdateNotification() {
     (state: State) => state.app.showUpdateNotification,
   );
 
-  const { updateApp, setAppState } = useActions();
+  const dispatch = useDispatch();
+  const onRestart = () => {
+    dispatch(updateApp());
+  };
 
   if (updateInfo && showUpdateNotification) {
     const notes = updateInfo.releaseNotes;
@@ -51,7 +54,7 @@ export function UpdateNotification() {
             <Text>
               <Link
                 variant="text"
-                onClick={updateApp}
+                onClick={onRestart}
                 style={{
                   color: theme.buttonPrimaryText,
                   textDecoration: 'underline',
@@ -81,10 +84,12 @@ export function UpdateNotification() {
                 style={{ display: 'inline', padding: '1px 7px 2px 7px' }}
                 onPress={() => {
                   // Set a flag to never show an update notification again for this session
-                  setAppState({
-                    updateInfo: null,
-                    showUpdateNotification: false,
-                  });
+                  dispatch(
+                    setAppState({
+                      updateInfo: null,
+                      showUpdateNotification: false,
+                    }),
+                  );
                 }}
               >
                 <SvgClose

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

@@ -250,7 +250,7 @@ function getField(field?: string) {
 }
 
 type AccountInternalProps = {
-  accountId?: AccountEntity['id'] | 'budgeted' | 'offbudget' | 'uncategorized';
+  accountId?: AccountEntity['id'] | 'onbudget' | 'offbudget' | 'uncategorized';
   filterConditions: RuleConditionEntity[];
   showBalances?: boolean;
   setShowBalances: (newValue: boolean) => void;
@@ -841,8 +841,8 @@ class AccountInternal extends PureComponent<
     }
 
     if (!account) {
-      if (id === 'budgeted') {
-        return t('Budgeted Accounts');
+      if (id === 'onbudget') {
+        return t('On Budget Accounts');
       } else if (id === 'offbudget') {
         return t('Off Budget Accounts');
       } else if (id === 'uncategorized') {
@@ -1662,7 +1662,7 @@ class AccountInternal extends PureComponent<
 
     const isNameEditable =
       accountId &&
-      accountId !== 'budgeted' &&
+      accountId !== 'onbudget' &&
       accountId !== 'offbudget' &&
       accountId !== 'uncategorized';
 
@@ -1767,7 +1767,7 @@ class AccountInternal extends PureComponent<
                   showAccount={
                     !accountId ||
                     accountId === 'offbudget' ||
-                    accountId === 'budgeted' ||
+                    accountId === 'onbudget' ||
                     accountId === 'uncategorized'
                   }
                   isAdding={this.state.isAdding}