[Redux Toolkit Migration] appSlice (#4018)

* Migrate to accountSlice * Fix lint and typecheck errors * Update types * Fix lint * Fix types * Cleanup * Rename file * Rename state * Cleanup * Fix typecheck error * Move createAppAsyncThunk * Queries slice * App slice * Release notes * Remove app state type * [TS] Actual startOAuthServer function * Rename slice * Fix types * Slice name * Cleanup * Fix lint errors * Fix import * Move sync actions to appSlice * Revert to window * Updates * Revert browser-preload.browser.js
actualbudget · Jan 18, 2025 · 91c4e3e · 91c4e3e
1 parent 7cb5350
commit 91c4e3e
Show file tree

Hide file tree

Showing 42 changed files with 279 additions and 222 deletions.
diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
@@ -16,10 +16,9 @@ import {
   closeBudget,
   loadBudget,
   loadGlobalPrefs,
-  setAppState,
   signOut,
-  sync,
 } from 'loot-core/client/actions';
+import { setAppState, sync } from 'loot-core/client/app/appSlice';
 import { SpreadsheetProvider } from 'loot-core/client/SpreadsheetProvider';
 import * as Platform from 'loot-core/src/client/platform';
 import {

diff --git a/packages/desktop-client/src/components/FatalError.tsx b/packages/desktop-client/src/components/FatalError.tsx
@@ -217,7 +217,7 @@ export function FatalError({ error }: FatalErrorProps) {
         )}
 
         <Paragraph>
-          <Button onPress={() => window.Actual?.relaunch()}>
+          <Button onPress={() => window.Actual.relaunch()}>
             <Trans>Restart app</Trans>
           </Button>
         </Paragraph>

diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -9,7 +9,8 @@ import {
   useHref,
 } from 'react-router-dom';
 
-import { addNotification, sync } from 'loot-core/client/actions';
+import { addNotification } from 'loot-core/client/actions';
+import { sync } from 'loot-core/client/app/appSlice';
 import * as undo from 'loot-core/src/platform/client/undo';
 
 import { ProtectedRoute } from '../auth/ProtectedRoute';

diff --git a/packages/desktop-client/src/components/HelpMenu.tsx b/packages/desktop-client/src/components/HelpMenu.tsx
@@ -5,7 +5,6 @@ import { useLocation } from 'react-router-dom';
 
 import { useToggle } from 'usehooks-ts';
 
-import { openDocsForCurrentPage } from 'loot-core/client/actions';
 import { pushModal } from 'loot-core/client/actions/modals';
 
 import { useFeatureFlag } from '../hooks/useFeatureFlag';
@@ -17,6 +16,30 @@ import { Menu } from './common/Menu';
 import { Popover } from './common/Popover';
 import { SpaceBetween } from './common/SpaceBetween';
 
+const getPageDocs = (page: string) => {
+  switch (page) {
+    case '/budget':
+      return 'https://actualbudget.org/docs/getting-started/envelope-budgeting';
+    case '/reports':
+      return 'https://actualbudget.org/docs/reports/';
+    case '/schedules':
+      return 'https://actualbudget.org/docs/schedules';
+    case '/payees':
+      return 'https://actualbudget.org/docs/transactions/payees';
+    case '/rules':
+      return 'https://actualbudget.org/docs/budgeting/rules';
+    case '/settings':
+      return 'https://actualbudget.org/docs/settings';
+    default:
+      // All pages under /accounts, plus any missing pages
+      return 'https://actualbudget.org/docs';
+  }
+};
+
+function openDocsForCurrentPage() {
+  window.Actual.openURLInBrowser(getPageDocs(window.location.pathname));
+}
+
 type HelpMenuItem = 'docs' | 'keyboard-shortcuts' | 'goal-templates';
 
 type HelpButtonProps = {
@@ -58,7 +81,7 @@ export const HelpMenu = () => {
   const handleItemSelect = (item: HelpMenuItem) => {
     switch (item) {
       case 'docs':
-        dispatch(openDocsForCurrentPage());
+        openDocsForCurrentPage();
         break;
       case 'keyboard-shortcuts':
         dispatch(pushModal('keyboard-shortcuts'));

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -5,7 +5,7 @@ import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { css } from '@emotion/css';
 
-import { sync } from 'loot-core/client/actions';
+import { sync } from 'loot-core/client/app/appSlice';
 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';

diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { setAppState, updateApp } from 'loot-core/client/actions';
+import { setAppState, updateApp } from 'loot-core/client/app/appSlice';
 
 import { SvgClose } from '../icons/v1';
 import { useSelector, useDispatch } from '../redux';
@@ -69,7 +69,7 @@ export function UpdateNotification() {
                   textDecoration: 'underline',
                 }}
                 onClick={() =>
-                  window.Actual?.openURLInBrowser(
+                  window.Actual.openURLInBrowser(
                     'https://actualbudget.org/docs/releases',
                   )
                 }

diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
@@ -19,8 +19,8 @@ import {
   openAccountCloseModal,
   pushModal,
   replaceModal,
-  syncAndDownload,
 } from 'loot-core/client/actions';
+import { syncAndDownload } from 'loot-core/client/app/appSlice';
 import {
   createPayee,
   initiallyLoadPayees,
@@ -624,7 +624,7 @@ class AccountInternal extends PureComponent<
     const account = this.props.accounts.find(acct => acct.id === accountId);
 
     await this.props.dispatch(
-      syncAndDownload(account ? account.id : undefined),
+      syncAndDownload({ accountId: account ? account.id : undefined }),
     );
   };
 
@@ -633,7 +633,7 @@ class AccountInternal extends PureComponent<
     const account = this.props.accounts.find(acct => acct.id === accountId);
 
     if (account) {
-      const res = await window.Actual?.openFileDialog({
+      const res = await window.Actual.openFileDialog({
         filters: [
           {
             name: t('Financial Files'),
@@ -668,7 +668,7 @@ class AccountInternal extends PureComponent<
       accountName && accountName.replace(/[()]/g, '').replace(/\s+/g, '-');
     const filename = `${normalizedName || 'transactions'}.csv`;
 
-    window.Actual?.saveFile(
+    window.Actual.saveFile(
       exportedTransactions,
       filename,
       t('Export Transactions'),

diff --git a/packages/desktop-client/src/components/manager/ConfigServer.tsx b/packages/desktop-client/src/components/manager/ConfigServer.tsx
@@ -88,7 +88,7 @@ export function ConfigServer() {
   }
 
   async function onSelectSelfSignedCertificate() {
-    const selfSignedCertificateLocation = await window.Actual?.openFileDialog({
+    const selfSignedCertificateLocation = await window.Actual.openFileDialog({
       properties: ['openFile'],
       filters: [
         {

diff --git a/packages/desktop-client/src/components/manager/ManagementApp.tsx b/packages/desktop-client/src/components/manager/ManagementApp.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { loggedIn, setAppState } from 'loot-core/client/actions';
+import { loggedIn } from 'loot-core/client/actions';
+import { setAppState } from 'loot-core/client/app/appSlice';
 
 import { ProtectedRoute } from '../../auth/ProtectedRoute';
 import { Permissions } from '../../auth/types';
@@ -51,7 +52,7 @@ function Version() {
         },
       }}
     >
-      {`App: v${window.Actual?.ACTUAL_VERSION} | Server: ${version}`}
+      {`App: v${window.Actual.ACTUAL_VERSION} | Server: ${version}`}
     </Text>
   );
 }

diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx
@@ -10,8 +10,8 @@ import {
   collapseModals,
   openAccountCloseModal,
   pushModal,
-  syncAndDownload,
 } from 'loot-core/client/actions';
+import { syncAndDownload } from 'loot-core/client/app/appSlice';
 import {
   accountSchedulesQuery,
   SchedulesProvider,
@@ -258,7 +258,7 @@ function TransactionListWithPreviews({
 
   const onRefresh = useCallback(() => {
     if (accountId) {
-      dispatch(syncAndDownload(accountId));
+      dispatch(syncAndDownload({ accountId }));
     }
   }, [accountId, dispatch]);
 

diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.tsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 
 import { css } from '@emotion/css';
 
-import { replaceModal, syncAndDownload } from 'loot-core/src/client/actions';
+import { syncAndDownload } from 'loot-core/client/app/appSlice';
+import { replaceModal } from 'loot-core/src/client/actions';
 import * as queries from 'loot-core/src/client/queries';
 import { type AccountEntity } from 'loot-core/types/models';
 
@@ -323,7 +324,7 @@ export function Accounts() {
   }, [dispatch]);
 
   const onSync = useCallback(async () => {
-    dispatch(syncAndDownload());
+    dispatch(syncAndDownload({}));
   }, [dispatch]);
 
   return (

diff --git a/packages/desktop-client/src/components/mobile/budget/index.tsx b/packages/desktop-client/src/components/mobile/budget/index.tsx
@@ -1,7 +1,8 @@
 // @ts-strict-ignore
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { collapseModals, pushModal, sync } from 'loot-core/client/actions';
+import { collapseModals, pushModal } from 'loot-core/client/actions';
+import { sync } from 'loot-core/client/app/appSlice';
 import {
   applyBudgetAction,
   createCategory,

diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
@@ -5,7 +5,8 @@ import { useTranslation, Trans } from 'react-i18next';
 
 import { css } from '@emotion/css';
 
-import { loadAllFiles, loadGlobalPrefs, sync } from 'loot-core/client/actions';
+import { loadAllFiles, loadGlobalPrefs } from 'loot-core/client/actions';
+import { sync } from 'loot-core/client/app/appSlice';
 import { send } from 'loot-core/src/platform/client/fetch';
 import { getCreateKeyError } from 'loot-core/src/shared/errors';
 

diff --git a/.../desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx b/.../desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx
@@ -471,7 +471,7 @@ export function ImportTransactionsModal({ options }) {
   }
 
   async function onNewFile() {
-    const res = await window.Actual?.openFileDialog({
+    const res = await window.Actual.openFileDialog({
       filters: [
         {
           name: 'Financial Files',

diff --git a/packages/desktop-client/src/components/modals/manager/ConfirmChangeDocumentDir.tsx b/packages/desktop-client/src/components/modals/manager/ConfirmChangeDocumentDir.tsx
@@ -51,7 +51,7 @@ export function ConfirmChangeDocumentDirModal({
   const dispatch = useDispatch();
 
   const restartElectronServer = useCallback(() => {
-    globalThis.window.Actual?.restartElectronServer();
+    globalThis.window.Actual.restartElectronServer();
   }, []);
 
   const [_documentDir, setDocumentDirPref] = useGlobalPref(
@@ -64,7 +64,7 @@ export function ConfirmChangeDocumentDirModal({
     setLoading(true);
     try {
       if (moveFiles) {
-        await globalThis.window.Actual?.moveBudgetDirectory(
+        await globalThis.window.Actual.moveBudgetDirectory(
           currentBudgetDirectory,
           newDirectory,
         );

diff --git a/packages/desktop-client/src/components/modals/manager/FilesSettingsModal.tsx b/packages/desktop-client/src/components/modals/manager/FilesSettingsModal.tsx
@@ -19,7 +19,7 @@ function FileLocationSettings() {
   const dispatch = useDispatch();
 
   async function onChooseDocumentDir() {
-    const chosenDirectory = await window.Actual?.openFileDialog({
+    const chosenDirectory = await window.Actual.openFileDialog({
       properties: ['openDirectory'],
     });
 

diff --git a/packages/desktop-client/src/components/modals/manager/ImportActualModal.tsx b/packages/desktop-client/src/components/modals/manager/ImportActualModal.tsx
@@ -38,7 +38,7 @@ export function ImportActualModal() {
   const [importing, setImporting] = useState(false);
 
   async function onImport() {
-    const res = await window.Actual?.openFileDialog({
+    const res = await window.Actual.openFileDialog({
       properties: ['openFile'],
       filters: [{ name: 'actual', extensions: ['zip', 'blob'] }],
     });

diff --git a/packages/desktop-client/src/components/modals/manager/ImportYNAB4Modal.tsx b/packages/desktop-client/src/components/modals/manager/ImportYNAB4Modal.tsx
@@ -30,7 +30,7 @@ export function ImportYNAB4Modal() {
   const [importing, setImporting] = useState(false);
 
   async function onImport() {
-    const res = await window.Actual?.openFileDialog({
+    const res = await window.Actual.openFileDialog({
       properties: ['openFile'],
       filters: [{ name: 'ynab', extensions: ['zip'] }],
     });

diff --git a/packages/desktop-client/src/components/modals/manager/ImportYNAB5Modal.tsx b/packages/desktop-client/src/components/modals/manager/ImportYNAB5Modal.tsx
@@ -33,7 +33,7 @@ export function ImportYNAB5Modal() {
   const [importing, setImporting] = useState(false);
 
   async function onImport() {
-    const res = await window.Actual?.openFileDialog({
+    const res = await window.Actual.openFileDialog({
       properties: ['openFile'],
       filters: [{ name: 'ynab', extensions: ['json'] }],
     });

diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
@@ -211,14 +211,14 @@ export function Overview() {
       }),
     } satisfies ExportImportDashboard;
 
-    window.Actual?.saveFile(
+    window.Actual.saveFile(
       JSON.stringify(data, null, 2),
       'dashboard.json',
       'Export Dashboard',
     );
   };
   const onImport = async () => {
-    const openFileDialog = window.Actual?.openFileDialog;
+    const openFileDialog = window.Actual.openFileDialog;
 
     if (!openFileDialog) {
       dispatch(

diff --git a/packages/desktop-client/src/components/settings/Export.tsx b/packages/desktop-client/src/components/settings/Export.tsx
@@ -33,7 +33,7 @@ export function ExportBudget() {
       return;
     }
 
-    window.Actual?.saveFile(
+    window.Actual.saveFile(
       response.data,
       `${format(new Date(), 'yyyy-MM-dd')}-${budgetName}.zip`,
       t('Export budget'),

diff --git a/packages/desktop-client/src/components/settings/Reset.tsx b/packages/desktop-client/src/components/settings/Reset.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 
-import { resetSync } from 'loot-core/client/actions';
+import { resetSync } from 'loot-core/client/app/appSlice';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useMetadataPref } from '../../hooks/useMetadataPref';

diff --git a/packages/desktop-client/src/global-events.ts b/packages/desktop-client/src/global-events.ts
@@ -6,10 +6,9 @@ import {
   closeModal,
   loadPrefs,
   pushModal,
-  reloadApp,
   replaceModal,
-  setAppState,
 } from 'loot-core/client/actions';
+import { setAppState } from 'loot-core/client/app/appSlice';
 import {
   getAccounts,
   getCategories,
@@ -163,6 +162,6 @@ export function handleGlobalEvents(store: AppStore) {
   });
 
   listen('api-fetch-redirected', () => {
-    store.dispatch(reloadApp());
+    window.Actual.reload();
   });
 }
diff --git a/packages/desktop-client/src/gocardless.ts b/packages/desktop-client/src/gocardless.ts
@@ -25,7 +25,7 @@ function _authorize(
 
         if ('error' in resp) return resp;
         const { link, requisitionId } = resp;
-        window.Actual?.openURLInBrowser(link);
+        window.Actual.openURLInBrowser(link);
 
         return send('gocardless-poll-web-token', {
           upgradingAccountId,