Update desktop client package versions (actualbudget#2270)

* Upgrade desktop-client depenencies * Release notes * yarn dedupe * yarn dedupe * Fix typecheck error * Update sass * Update useSelectors
FlorianLang06 · Feb 7, 2024 · ce1978b · ce1978b
1 parent a1a0a88
commit ce1978b
Show file tree

Hide file tree

Showing 41 changed files with 895 additions and 783 deletions.
diff --git a/packages/api/package.json b/packages/api/package.json
@@ -24,14 +24,14 @@
     "better-sqlite3": "^9.2.2",
     "compare-versions": "^6.1.0",
     "node-fetch": "^3.3.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@swc/core": "^1.3.105",
     "@swc/jest": "^0.2.31",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^27.5.2",
     "@types/uuid": "^9.0.2",
-    "jest": "^27.0.0",
+    "jest": "^27.5.1",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.0.2"
   }

diff --git a/packages/crdt/package.json b/packages/crdt/package.json
@@ -17,14 +17,14 @@
   "dependencies": {
     "google-protobuf": "^3.12.0-rc.1",
     "murmurhash": "^2.0.1",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@swc/core": "^1.3.105",
     "@swc/jest": "^0.2.31",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^27.5.2",
     "@types/uuid": "^9.0.2",
-    "jest": "^27.0.0",
+    "jest": "^27.5.1",
     "ts-protoc-gen": "^0.15.0",
     "typescript": "^5.0.2"
   }

diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -6,21 +6,21 @@
     "build"
   ],
   "devDependencies": {
-    "@juggle/resize-observer": "^3.1.2",
+    "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "^1.41.1",
     "@reach/listbox": "^0.18.0",
-    "@react-aria/focus": "^3.14.0",
-    "@react-aria/listbox": "^3.10.1",
-    "@react-aria/utils": "^3.19.0",
-    "@react-stately/collections": "^3.10.0",
-    "@react-stately/list": "^3.9.1",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/listbox": "^3.11.3",
+    "@react-aria/utils": "^3.23.0",
+    "@react-stately/collections": "^3.10.4",
+    "@react-stately/list": "^3.10.2",
     "@rollup/plugin-inject": "^5.0.5",
-    "@svgr/cli": "^8.0.1",
+    "@svgr/cli": "^8.1.0",
     "@swc/core": "^1.3.105",
     "@swc/helpers": "^0.5.3",
     "@swc/plugin-react-remove-properties": "^1.5.108",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/react-modal": "^3.16.0",
@@ -32,14 +32,14 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "chokidar": "^3.5.3",
     "cross-env": "^7.0.3",
-    "date-fns": "^2.29.3",
-    "debounce": "^1.2.0",
-    "downshift": "7.6.0",
-    "focus-visible": "^4.1.1",
+    "date-fns": "^2.30.0",
+    "debounce": "^1.2.1",
+    "downshift": "7.6.2",
+    "focus-visible": "^4.1.5",
     "glamor": "^2.20.40",
-    "hotkeys-js": "3.10.3",
+    "hotkeys-js": "^3.13.5",
     "inter-ui": "^3.19.3",
-    "jest": "^27.0.0",
+    "jest": "^27.5.1",
     "jest-watch-typeahead": "^2.2.2",
     "mdast-util-newline-to-break": "^2.0.0",
     "memoize-one": "^6.0.0",
@@ -48,26 +48,25 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
-    "react-error-boundary": "^4.0.11",
+    "react-error-boundary": "^4.0.12",
     "react-markdown": "^8.0.7",
     "react-merge-refs": "^1.1.0",
     "react-modal": "3.16.1",
-    "react-redux": "7.2.1",
-    "react-router-dom": "6.11.2",
+    "react-redux": "7.2.9",
+    "react-router-dom": "6.21.3",
     "react-simple-pull-to-refresh": "^1.3.3",
-    "react-spring": "^9.7.1",
-    "react-virtualized-auto-sizer": "^1.0.2",
-    "recharts": "^2.8.0",
-    "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0",
+    "react-spring": "^9.7.3",
+    "react-virtualized-auto-sizer": "^1.0.21",
+    "recharts": "^2.10.4",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2",
     "remark-gfm": "^3.0.1",
-    "rollup-plugin-visualizer": "^5.11.0",
-    "sass": "^1.63.6",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "sass": "^1.70.0",
     "swc-loader": "^0.2.3",
-    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^5.0.2",
-    "uuid": "^9.0.0",
-    "victory": "^36.6.8",
+    "terser-webpack-plugin": "^5.3.10",
+    "uuid": "^9.0.1",
+    "victory": "^36.8.2",
     "vite": "^5.0.12",
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.2.1",

diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
@@ -7,6 +7,9 @@ import {
 } from 'react-error-boundary';
 import { useSelector } from 'react-redux';
 
+import { type State } from 'loot-core/client/state-types';
+import { type AppState } from 'loot-core/client/state-types/app';
+import { type PrefsState } from 'loot-core/client/state-types/prefs';
 import * as Platform from 'loot-core/src/client/platform';
 import {
   init as initConnection,
@@ -123,13 +126,15 @@ function ErrorFallback({ error }: FallbackProps) {
 }
 
 export function App() {
-  const budgetId = useSelector(
+  const budgetId = useSelector<State, PrefsState['local']['id']>(
     state => state.prefs.local && state.prefs.local.id,
   );
-  const cloudFileId = useSelector(
+  const cloudFileId = useSelector<State, PrefsState['local']['cloudFileId']>(
     state => state.prefs.local && state.prefs.local.cloudFileId,
   );
-  const loadingText = useSelector(state => state.app.loadingText);
+  const loadingText = useSelector<State, AppState['loadingText']>(
+    state => state.app.loadingText,
+  );
   const { loadBudget, closeBudget, loadGlobalPrefs, sync } = useActions();
   const [hiddenScrollbars, setHiddenScrollbars] = useState(
     hasHiddenScrollbars(),

diff --git a/packages/desktop-client/src/components/BankSyncStatus.tsx b/packages/desktop-client/src/components/BankSyncStatus.tsx
@@ -2,14 +2,19 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
+import { type State } from 'loot-core/client/state-types';
+import { type AccountState } from 'loot-core/client/state-types/account';
+
 import { theme, styles } from '../style';
 
 import { AnimatedRefresh } from './AnimatedRefresh';
 import { Text } from './common/Text';
 import { View } from './common/View';
 
 export function BankSyncStatus() {
-  const accountsSyncing = useSelector(state => state.account.accountsSyncing);
+  const accountsSyncing = useSelector<State, AccountState['accountsSyncing']>(
+    state => state.account.accountsSyncing,
+  );
 
   const name = accountsSyncing
     ? accountsSyncing === '__all'

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -2,6 +2,9 @@
 import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
+import { type State } from 'loot-core/client/state-types';
+import { type UserState } from 'loot-core/client/state-types/user';
+
 import { useActions } from '../hooks/useActions';
 import { theme, styles, type CSSProperties } from '../style';
 
@@ -22,7 +25,9 @@ export function LoggedInUser({
   style,
   color,
 }: LoggedInUserProps) {
-  const userData = useSelector(state => state.user.data);
+  const userData = useSelector<State, UserState['data']>(
+    state => state.user.data,
+  );
   const { getUserData, signOut, closeBudget } = useActions();
   const [loading, setLoading] = useState(true);
   const [menuOpen, setMenuOpen] = useState(false);

diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
@@ -9,6 +9,8 @@ import React, {
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { type State } from 'loot-core/client/state-types';
+import { type QueriesState } from 'loot-core/client/state-types/queries';
 import { pushModal } from 'loot-core/src/client/actions/modals';
 import { initiallyLoadPayees } from 'loot-core/src/client/actions/queries';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -103,7 +105,14 @@ function ManageRulesContent({
 
   const { data: schedules } = SchedulesQuery.useQuery();
   const { list: categories } = useCategories();
-  const state = useSelector(state => ({
+  const state = useSelector<
+    State,
+    {
+      payees: QueriesState['payees'];
+      accounts: QueriesState['accounts'];
+      schedules: ReturnType<(typeof SchedulesQuery)['useQuery']>;
+    }
+  >(state => ({
     payees: state.queries.payees,
     accounts: state.queries.accounts,
     schedules,

diff --git a/packages/desktop-client/src/components/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { type State } from 'loot-core/client/state-types';
+import { type PrefsState } from 'loot-core/client/state-types/prefs';
 import { savePrefs } from 'loot-core/src/client/actions';
 
 import { useResponsive } from '../ResponsiveProvider';
@@ -14,7 +16,10 @@ import { Checkbox } from './forms';
 const buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' };
 
 export function MobileWebMessage() {
-  const hideMobileMessagePref = useSelector(state => {
+  const hideMobileMessagePref = useSelector<
+    State,
+    PrefsState['local']['hideMobileMessage']
+  >(state => {
     return (state.prefs.local && state.prefs.local.hideMobileMessage) || true;
   });
 

diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -3,7 +3,13 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
-import { type PopModalAction } from 'loot-core/src/client/state-types/modals';
+import { type State } from 'loot-core/src/client/state-types';
+import {
+  type ModalsState,
+  type PopModalAction,
+} from 'loot-core/src/client/state-types/modals';
+import { type PrefsState } from 'loot-core/src/client/state-types/prefs';
+import { type QueriesState } from 'loot-core/src/client/state-types/queries';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useActions } from '../hooks/useActions';
@@ -50,11 +56,17 @@ export type CommonModalProps = {
 };
 
 export function Modals() {
-  const modalStack = useSelector(state => state.modals.modalStack);
-  const isHidden = useSelector(state => state.modals.isHidden);
-  const accounts = useSelector(state => state.queries.accounts);
+  const modalStack = useSelector<State, ModalsState['modalStack']>(
+    state => state.modals.modalStack,
+  );
+  const isHidden = useSelector<State, ModalsState['isHidden']>(
+    state => state.modals.isHidden,
+  );
+  const accounts = useSelector<State, QueriesState['accounts']>(
+    state => state.queries.accounts,
+  );
   const { grouped: categoryGroups, list: categories } = useCategories();
-  const budgetId = useSelector(
+  const budgetId = useSelector<State, PrefsState['local']['id']>(
     state => state.prefs.local && state.prefs.local.id,
   );
   const actions = useActions();

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -7,7 +7,11 @@ import React, {
 } from 'react';
 import { useSelector } from 'react-redux';
 
-import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
+import { type State } from 'loot-core/client/state-types';
+import type {
+  NotificationWithId,
+  NotificationsState,
+} from 'loot-core/src/client/state-types/notifications';
 
 import { useActions } from '../hooks/useActions';
 import { AnimatedLoading } from '../icons/AnimatedLoading';
@@ -238,7 +242,9 @@ function Notification({
 
 export function Notifications({ style }: { style?: CSSProperties }) {
   const { removeNotification } = useActions();
-  const notifications = useSelector(state => state.notifications.notifications);
+  const notifications = useSelector<State, NotificationsState['notifications']>(
+    state => state.notifications.notifications,
+  );
   return (
     <View
       style={{

diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -36,7 +36,7 @@ export function ThemeSelector({ style }: ThemeSelectorProps) {
     });
   }
 
-  const Icon = themeIcons?.[theme] || SvgSun;
+  const Icon = themeIcons[theme] || SvgSun;
 
   return isNarrowWidth ? null : (
     <Button

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -9,6 +9,8 @@ import React, {
 import { useSelector } from 'react-redux';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
+import { type State } from 'loot-core/client/state-types';
+import { type PrefsState } from 'loot-core/client/state-types/prefs';
 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';
@@ -118,9 +120,10 @@ type PrivacyButtonProps = {
 };
 
 function PrivacyButton({ style }: PrivacyButtonProps) {
-  const isPrivacyEnabled = useSelector(
-    state => state.prefs.local?.isPrivacyEnabled,
-  );
+  const isPrivacyEnabled = useSelector<
+    State,
+    PrefsState['local']['isPrivacyEnabled']
+  >(state => state.prefs.local?.isPrivacyEnabled);
   const { savePrefs } = useActions();
 
   const privacyIconStyle = { width: 15, height: 15 };
@@ -146,7 +149,9 @@ type SyncButtonProps = {
   isMobile?: boolean;
 };
 function SyncButton({ style, isMobile = false }: SyncButtonProps) {
-  const cloudFileId = useSelector(state => state.prefs.local?.cloudFileId);
+  const cloudFileId = useSelector<State, PrefsState['local']['cloudFileId']>(
+    state => state.prefs.local?.cloudFileId,
+  );
   const { sync } = useActions();
 
   const [syncing, setSyncing] = useState(false);
@@ -286,8 +291,12 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 }
 
 function BudgetTitlebar() {
-  const maxMonths = useSelector(state => state.prefs.global?.maxMonths);
-  const budgetType = useSelector(state => state.prefs.local?.budgetType);
+  const maxMonths = useSelector<State, PrefsState['global']['maxMonths']>(
+    state => state.prefs.global?.maxMonths,
+  );
+  const budgetType = useSelector<State, PrefsState['local']['budgetType']>(
+    state => state.prefs.local?.budgetType,
+  );
   const { saveGlobalPrefs } = useActions();
   const { sendEvent } = useContext(TitlebarContext);
 
@@ -390,9 +399,10 @@ export function Titlebar({ style }: TitlebarProps) {
   const sidebar = useSidebar();
   const { isNarrowWidth } = useResponsive();
   const serverURL = useServerURL();
-  const floatingSidebar = useSelector(
-    state => state.prefs.global?.floatingSidebar,
-  );
+  const floatingSidebar = useSelector<
+    State,
+    PrefsState['global']['floatingSidebar']
+  >(state => state.prefs.global?.floatingSidebar);
 
   return isNarrowWidth ? null : (
     <View
-Original file line number
+Diff line change
@@ Expand Up @@
         });
       }
-      const Icon = themeIcons?.[theme] || SvgSun;
+      const Icon = themeIcons[theme] || SvgSun;
       return isNarrowWidth ? null : (
         <Button
@@ Expand Down @@