Add typings to most of the Redux logic

.eslintrc.js

@@ -185,9 +185,10 @@ module.exports = {
     },
     {
       files: [
-        '**/icons/**/*.js',
-        '**/mocks/**/*.{js,ts,tsx}',
-        '**/{mocks,__mocks__}/*.{js,ts,tsx}',
+        'packages/loot-core/src/types/**/*',
+        'packages/loot-core/src/client/state-types/**/*',
+        '**/icons/**/*',
+        '**/{mocks,__mocks__}/**/*',
         // can't correctly resolve usages
         '**/*.{testing,electron,browser,web,api}.ts',
       ],

packages/desktop-client/package.json

@@ -20,6 +20,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/react-modal": "^3.16.0",
+    "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.2",
     "@types/webpack-bundle-analyzer": "^4.6.0",

packages/desktop-client/src/components/Modals.js

@@ -11,7 +11,6 @@ import useSyncServerStatus from '../hooks/useSyncServerStatus';
 
 import BudgetSummary from './modals/BudgetSummary';
 import CloseAccount from './modals/CloseAccount';
-import ConfigureLinkedAccounts from './modals/ConfigureLinkedAccounts';
 import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
 import CreateAccount from './modals/CreateAccount';
 import CreateEncryptionKey from './modals/CreateEncryptionKey';
@@ -97,18 +96,6 @@ function Modals({
             />
           );
 
-        case 'configure-linked-accounts':
-          return (
-            <ConfigureLinkedAccounts
-              modalProps={modalProps}
-              institution={options.institution}
-              publicToken={options.publicToken}
-              accounts={options.accounts}
-              upgradingId={options.upgradingId}
-              actions={actions}
-            />
-          );
-
         case 'confirm-category-delete':
           return (
             <ConfirmCategoryDelete

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

@@ -1,9 +1,15 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { connect } from 'react-redux';
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  type SetStateAction,
+} from 'react';
+import { connect, useSelector } from 'react-redux';
 
 import { bindActionCreators } from 'redux';
 
 import * as actions from 'loot-core/src/client/actions';
+import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
 import Loading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
@@ -19,7 +25,12 @@ import {
   LinkButton,
 } from './common';
 
-function compileMessage(message, actions, setLoading, onRemove) {
+function compileMessage(
+  message: string,
+  actions: Record<string, () => void>,
+  setLoading: (arg: SetStateAction<boolean>) => void,
+  onRemove?: () => void,
+) {
   return (
     <Stack spacing={2}>
       {message.split(/\n\n/).map((paragraph, idx) => {
@@ -65,7 +76,13 @@ function compileMessage(message, actions, setLoading, onRemove) {
   );
 }
 
-function Notification({ notification, onRemove }) {
+function Notification({
+  notification,
+  onRemove,
+}: {
+  notification: NotificationWithId;
+  onRemove: () => void;
+}) {
   let { type, title, message, pre, messageActions, sticky, internal, button } =
     notification;
 
@@ -203,7 +220,8 @@ function Notification({ notification, onRemove }) {
   );
 }
 
-function Notifications({ notifications, removeNotification, style }) {
+function Notifications({ removeNotification, style }) {
+  let notifications = useSelector(state => state.notifications.notifications);
   return (
     <View
       style={[
@@ -232,7 +250,6 @@ function Notifications({ notifications, removeNotification, style }) {
   );
 }
 
-export default connect(
-  state => ({ notifications: state.notifications.notifications }),
-  dispatch => bindActionCreators(actions, dispatch),
-)(Notifications);
+export default connect(null, dispatch => bindActionCreators(actions, dispatch))(
+  Notifications,
+);

packages/desktop-client/src/components/manager/ImportActual.js

@@ -23,7 +23,7 @@ function getErrorMessage(error) {
   }
 }
 
-function Import({ modalProps, availableImports }) {
+function Import({ modalProps }) {
   const dispatch = useDispatch();
   const [error, setError] = useState(false);
   const [importing, setImporting] = useState(false);

packages/desktop-client/src/components/manager/ImportYNAB4.js

@@ -15,7 +15,7 @@ function getErrorMessage(error) {
   }
 }
 
-function Import({ modalProps, availableImports }) {
+function Import({ modalProps }) {
   const dispatch = useDispatch();
   const [error, setError] = useState(false);
   const [importing, setImporting] = useState(false);

packages/desktop-client/src/components/manager/ImportYNAB5.js

@@ -24,7 +24,7 @@ function getErrorMessage(error) {
   }
 }
 
-function Import({ modalProps, availableImports }) {
+function Import({ modalProps }) {
   const dispatch = useDispatch();
   const [error, setError] = useState(false);
   const [importing, setImporting] = useState(false);

packages/desktop-client/src/components/manager/Modals.js

@@ -16,7 +16,7 @@ import ImportActual from './ImportActual';
 import ImportYNAB4 from './ImportYNAB4';
 import ImportYNAB5 from './ImportYNAB5';
 
-function Modals({ modalStack, isHidden, availableImports, actions }) {
+function Modals({ modalStack, isHidden, actions }) {
   let stack = modalStack.map(({ name, options }, idx) => {
     const modalProps = {
       onClose: actions.popModal,
@@ -38,14 +38,7 @@ function Modals({ modalStack, isHidden, availableImports, actions }) {
           />
         );
       case 'import':
-        return (
-          <Import
-            key={name}
-            modalProps={modalProps}
-            actions={actions}
-            availableImports={availableImports}
-          />
-        );
+        return <Import key={name} modalProps={modalProps} actions={actions} />;
       case 'import-ynab4':
         return (
           <ImportYNAB4 key={name} modalProps={modalProps} actions={actions} />
@@ -102,7 +95,6 @@ export default connect(
     modalStack: state.modals.modalStack,
     isHidden: state.modals.isHidden,
     budgets: state.budgets.budgets,
-    availableImports: state.budgets.availableImports,
   }),
   dispatch => ({ actions: bindActionCreators(actions, dispatch) }),
 )(Modals);

packages/desktop-client/src/hooks/useActions.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { bindActionCreators } from 'redux';
+
+import * as actions from 'loot-core/src/client/actions';
+
+// https://react-redux.js.org/api/hooks#recipe-useactions
+// eslint-disable-next-line import/no-unused-modules
+export function useActions() {
+  const dispatch = useDispatch();
+  return useMemo(() => {
+    return bindActionCreators(actions, dispatch);
+  }, [dispatch]);
+}

packages/desktop-client/src/hooks/useFeatureFlag.ts

@@ -1,11 +1,13 @@
 import { useSelector } from 'react-redux';
 
-const DEFAULT_FEATURE_FLAG_STATE: Record<string, boolean> = {
+import { type FeatureFlag } from 'loot-core/src/client/state-types/prefs';
+
+const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
   reportBudget: false,
   goalTemplatesEnabled: false,
 };
 
-export default function useFeatureFlag(name: string): boolean {
+export default function useFeatureFlag(name: FeatureFlag): boolean {
   return useSelector(state => {
     const value = state.prefs.local[`flags.${name}`];
 
@@ -15,7 +17,7 @@ export default function useFeatureFlag(name: string): boolean {
   });
 }
 
-export function useAllFeatureFlags(): Record<string, boolean> {
+export function useAllFeatureFlags(): Record<FeatureFlag, boolean> {
   return useSelector(state => {
     return {
       ...DEFAULT_FEATURE_FLAG_STATE,

packages/loot-core/package.json

@@ -50,6 +50,7 @@
     "@types/jest": "^27.5.0",
     "@types/jlongster__sql.js": "npm:@types/sql.js@latest",
     "@types/pegjs": "^0.10.3",
+    "@types/react-redux": "^7.1.25",
     "@types/uuid": "^9.0.2",
     "@types/webpack": "^5.28.0",
     "@types/webpack-bundle-analyzer": "^4.6.0",