More typing improvements for Redux-related code (actualbudget#1404)

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

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import { css } from 'glamor';
 
-import * as actions from 'loot-core/src/client/actions';
 import {
   init as initConnection,
   send,
 } from 'loot-core/src/platform/client/fetch';
 
+import { useActions } from '../hooks/useActions';
 import installPolyfills from '../polyfills';
 import { ResponsiveProvider } from '../ResponsiveProvider';
 import { styles, hasHiddenScrollbars, ThemeStyle } from '../style';
@@ -139,11 +139,24 @@ class App extends Component {
   }
 }
 
-export default connect(
-  state => ({
-    budgetId: state.prefs.local && state.prefs.local.id,
-    cloudFileId: state.prefs.local && state.prefs.local.cloudFileId,
-    loadingText: state.app.loadingText,
-  }),
-  actions,
-)(App);
+export default function AppWrapper() {
+  let budgetId = useSelector(
+    state => state.prefs.local && state.prefs.local.id,
+  );
+  let cloudFileId = useSelector(
+    state => state.prefs.local && state.prefs.local.cloudFileId,
+  );
+  let loadingText = useSelector(state => state.app.loadingText);
+  let { loadBudget, closeBudget, loadGlobalPrefs } = useActions();
+
+  return (
+    <App
+      budgetId={budgetId}
+      cloudFileId={cloudFileId}
+      loadingText={loadingText}
+      loadBudget={loadBudget}
+      closeBudget={closeBudget}
+      loadGlobalPrefs={loadGlobalPrefs}
+    />
+  );
+}

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import * as actions from 'loot-core/src/client/actions';
-
 import { colors, styles } from '../style';
 
 import AnimatedRefresh from './AnimatedRefresh';
 import { View, Text } from './common';
 
-function BankSyncStatus({ accountsSyncing }) {
+export default function BankSyncStatus() {
+  let accountsSyncing = useSelector(state => state.account.accountsSyncing);
+
   let name = accountsSyncing
     ? accountsSyncing === '__all'
       ? 'accounts'
@@ -62,10 +62,3 @@ function BankSyncStatus({ accountsSyncing }) {
     </View>
   );
 }
-
-export default connect(
-  state => ({
-    accountsSyncing: state.account.accountsSyncing,
-  }),
-  actions,
-)(BankSyncStatus);

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

@@ -1,7 +1,6 @@
 import React, { type ReactElement, useEffect, useMemo } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend as Backend } from 'react-dnd-html5-backend';
-import { connect } from 'react-redux';
 import {
   Route,
   Routes,
@@ -15,13 +14,13 @@ import {
 
 import hotkeys from 'hotkeys-js';
 
-import * as actions from 'loot-core/src/client/actions';
 import { AccountsProvider } from 'loot-core/src/client/data-hooks/accounts';
 import { PayeesProvider } from 'loot-core/src/client/data-hooks/payees';
 import { SpreadsheetProvider } from 'loot-core/src/client/SpreadsheetProvider';
 import checkForUpdateNotification from 'loot-core/src/client/update-notification';
 import * as undo from 'loot-core/src/platform/client/undo';
 
+import { useActions } from '../hooks/useActions';
 import Cog from '../icons/v1/Cog';
 import PiggyBank from '../icons/v1/PiggyBank';
 import Wallet from '../icons/v1/Wallet';
@@ -223,29 +222,30 @@ function RouterBehaviors({ getAccounts }) {
   return null;
 }
 
-function FinancesApp(props) {
+function FinancesApp() {
+  let actions = useActions();
   useEffect(() => {
     // The default key handler scope
     hotkeys.setScope('app');
 
     // Wait a little bit to make sure the sync button will get the
     // sync start event. This can be improved later.
     setTimeout(async () => {
-      await props.sync();
+      await actions.sync();
 
       await checkForUpdateNotification(
-        props.addNotification,
+        actions.addNotification,
         getIsOutdated,
         getLatestVersion,
-        props.loadPrefs,
-        props.savePrefs,
+        actions.loadPrefs,
+        actions.savePrefs,
       );
     }, 100);
   }, []);
 
   return (
     <BrowserRouter>
-      <RouterBehaviors getAccounts={props.getAccounts} />
+      <RouterBehaviors getAccounts={actions.getAccounts} />
       <ExposeNavigate />
 
       <View style={{ height: '100%' }}>
@@ -302,8 +302,8 @@ function FinancesApp(props) {
   );
 }
 
-function FinancesAppWithContext(props) {
-  let app = useMemo(() => <FinancesApp {...props} />, [props]);
+export default function FinancesAppWithContext() {
+  let app = useMemo(() => <FinancesApp />, []);
 
   return (
     <SpreadsheetProvider>
@@ -321,5 +321,3 @@ function FinancesAppWithContext(props) {
     </SpreadsheetProvider>
   );
 }
-
-export default connect(null, actions)(FinancesAppWithContext);

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

@@ -1,7 +1,5 @@
 import React, { createContext, useState, useContext, useMemo } from 'react';
-import { connect, useSelector } from 'react-redux';
-
-import * as actions from 'loot-core/src/client/actions';
+import { useSelector } from 'react-redux';
 
 import { useResponsive } from '../ResponsiveProvider';
 
@@ -39,7 +37,11 @@ export function useSidebar() {
   );
 }
 
-function Sidebar({ floatingSidebar }) {
+export default function Sidebar() {
+  let floatingSidebar = useSelector(
+    state => state.prefs.global.floatingSidebar,
+  );
+
   let sidebar = useSidebar();
   let { isNarrowWidth } = useResponsive();
 
@@ -82,8 +84,3 @@ function Sidebar({ floatingSidebar }) {
     </View>
   );
 }
-
-export default connect(
-  state => ({ floatingSidebar: state.prefs.global.floatingSidebar }),
-  actions,
-)(Sidebar);

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

@@ -1,22 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
-
-import * as actions from 'loot-core/src/client/actions';
+import { useSelector } from 'react-redux';
 
+import { useActions } from '../hooks/useActions';
 import { colors, styles } from '../style';
 
 import { View, Text, Button, Tooltip, Menu } from './common';
 import { useServerURL } from './ServerContext';
 
-function LoggedInUser({
-  hideIfNoServer,
-  userData,
-  getUserData,
-  signOut,
-  closeBudget,
-  style,
-  color,
-}) {
+export default function LoggedInUser({ hideIfNoServer, style, color }) {
+  let userData = useSelector(state => state.userData);
+  let { getUserData, signOut, closeBudget } = useActions();
   let [loading, setLoading] = useState(true);
   let [menuOpen, setMenuOpen] = useState(false);
   const serverUrl = useServerURL();
@@ -117,8 +110,3 @@ function LoggedInUser({
     </View>
   );
 }
-
-export default connect(
-  state => ({ userData: state.user.data }),
-  actions,
-)(LoggedInUser);

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

@@ -204,7 +204,6 @@ export default function Modals() {
             <EditField
               key={name}
               modalProps={modalProps}
-              actions={actions}
               name={options.name}
               onSubmit={options.onSubmit}
             />

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

@@ -1,15 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { connect, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
 
-import { bindActionCreators } from 'redux';
-
-import * as actions from 'loot-core/src/client/actions';
 import { closeBudget } from 'loot-core/src/client/actions/budgets';
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
 import { send } from 'loot-core/src/platform/client/fetch';
 
+import { useActions } from '../hooks/useActions';
 import ExpandArrow from '../icons/v0/ExpandArrow';
 import { styles, colors } from '../style';
 
@@ -103,17 +101,17 @@ function EditableBudgetName({ prefs, savePrefs }) {
   }
 }
 
-function SidebarWithData({
-  accounts,
-  failedAccounts,
-  updatedAccounts,
-  replaceModal,
-  prefs,
-  floatingSidebar,
-  savePrefs,
-  saveGlobalPrefs,
-  getAccounts,
-}) {
+export default function SidebarWithData() {
+  let accounts = useSelector(state => state.queries.accounts);
+  let failedAccounts = useSelector(state => state.account.failedAccounts);
+  let updatedAccounts = useSelector(state => state.queries.updatedAccounts);
+  let prefs = useSelector(state => state.prefs.local);
+  let floatingSidebar = useSelector(
+    state => state.prefs.global.floatingSidebar,
+  );
+
+  let { getAccounts, replaceModal, savePrefs, saveGlobalPrefs } = useActions();
+
   useEffect(() => void getAccounts(), [getAccounts]);
 
   async function onReorder(id, dropPos, targetId) {
@@ -150,14 +148,3 @@ function SidebarWithData({
     />
   );
 }
-
-export default connect(
-  state => ({
-    accounts: state.queries.accounts,
-    failedAccounts: state.account.failedAccounts,
-    updatedAccounts: state.queries.updatedAccounts,
-    prefs: state.prefs.local,
-    floatingSidebar: state.prefs.global.floatingSidebar,
-  }),
-  dispatch => bindActionCreators(actions, dispatch),
-)(SidebarWithData);