From a66533fb181fa476f0d6e535e7aa61d1317af1d3 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Tue, 26 Nov 2024 01:54:38 -0800 Subject: [PATCH] Remove use of useActions --- .../src/components/LoggedInUser.tsx | 28 ++++++++------ .../src/components/Titlebar.tsx | 14 ++++--- .../src/components/UpdateNotification.tsx | 21 ++++++---- .../src/components/manager/ConfigServer.tsx | 12 +++--- .../src/components/manager/WelcomeScreen.tsx | 16 +++++--- .../ImportTransactionsModal.jsx | 38 +++++++++---------- .../src/components/settings/Reset.tsx | 7 ++-- .../src/components/settings/index.tsx | 16 +++++--- 8 files changed, 88 insertions(+), 64 deletions(-) diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx index 8ad160f2294..121c2c36cef 100644 --- a/packages/desktop-client/src/components/LoggedInUser.tsx +++ b/packages/desktop-client/src/components/LoggedInUser.tsx @@ -1,12 +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'; import { Button } from './common/Button2'; @@ -15,6 +14,7 @@ import { Popover } from './common/Popover'; import { Text } from './common/Text'; import { View } from './common/View'; import { useServerURL } from './ServerContext'; +import { useNavigate } from '../hooks/useNavigate'; type LoggedInUserProps = { hideIfNoServer?: boolean; @@ -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: diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx index d430b8ceaaf..503d72a847f 100644 --- a/packages/desktop-client/src/components/Titlebar.tsx +++ b/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 { 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'; @@ -108,8 +109,7 @@ type SyncButtonProps = { }; function SyncButton({ style, isMobile = false }: SyncButtonProps) { 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 +193,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 +225,7 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) { '&[data-hovered]': hoveredStyle, '&[data-pressed]': activeStyle, })} - onPress={sync} + onPress={onSync} > {isMobile ? ( syncState === 'error' ? ( diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx index acbb6ea2382..809ff797810 100644 --- a/packages/desktop-client/src/components/UpdateNotification.tsx +++ b/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() { { // Set a flag to never show an update notification again for this session - setAppState({ - updateInfo: null, - showUpdateNotification: false, - }); + dispatch( + setAppState({ + updateInfo: null, + showUpdateNotification: false, + }), + ); }} > - - - diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx index 7ed84edca8e..89293dc9265 100644 --- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx +++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.jsx @@ -1,11 +1,17 @@ import React, { useState, useEffect, useCallback } from 'react'; +import { useDispatch } from 'react-redux'; import deepEqual from 'deep-equal'; import { t } from 'i18next'; +import { + getPayees, + importPreviewTransactions, + importTransactions, + parseTransactions, +} from 'loot-core/client/actions'; import { amountToInteger } from 'loot-core/src/shared/util'; -import { useActions } from '../../../hooks/useActions'; import { useDateFormat } from '../../../hooks/useDateFormat'; import { useSyncedPrefs } from '../../../hooks/useSyncedPrefs'; import { theme } from '../../../style'; @@ -137,12 +143,7 @@ function parseCategoryFields(trans, categories) { export function ImportTransactionsModal({ options }) { const dateFormat = useDateFormat() || 'MM/dd/yyyy'; const [prefs, savePrefs] = useSyncedPrefs(); - const { - parseTransactions, - importTransactions, - importPreviewTransactions, - getPayees, - } = useActions(); + const dispatch = useDispatch(); const [multiplierAmount, setMultiplierAmount] = useState(''); const [loadingState, setLoadingState] = useState('parsing'); @@ -263,9 +264,8 @@ export function ImportTransactionsModal({ options }) { } // Retreive the transactions that would be updated (along with the existing trx) - const previewTrx = await importPreviewTransactions( - accountId, - previewTransactions, + const previewTrx = await dispatch( + importPreviewTransactions(accountId, previewTransactions), ); const matchedUpdateMap = previewTrx.reduce((map, entry) => { map[entry.transaction.trx_id] = entry; @@ -309,7 +309,7 @@ export function ImportTransactionsModal({ options }) { return next; }, []); }, - [accountId, categories.list, clearOnImport, importPreviewTransactions], + [accountId, categories.list, clearOnImport, dispatch], ); const parse = useCallback( @@ -320,8 +320,9 @@ export function ImportTransactionsModal({ options }) { setFilename(filename); setFileType(filetype); - const { errors, transactions: parsedTransactions = [] } = - await parseTransactions(filename, options); + const { errors, transactions: parsedTransactions = [] } = await dispatch( + parseTransactions(filename, options), + ); let index = 0; const transactions = parsedTransactions.map(trans => { @@ -399,11 +400,11 @@ export function ImportTransactionsModal({ options }) { }, [ accountId, + dispatch, getImportPreview, inOutMode, multiplierAmount, outValue, - parseTransactions, prefs, ], ); @@ -427,7 +428,6 @@ export function ImportTransactionsModal({ options }) { parse(options.filename, parseOptions); }, [ - parseTransactions, options.filename, delimiter, hasHeaderRow, @@ -653,13 +653,11 @@ export function ImportTransactionsModal({ options }) { }); } - const didChange = await importTransactions( - accountId, - finalTransactions, - reconcile, + const didChange = await dispatch( + importTransactions(accountId, finalTransactions, reconcile), ); if (didChange) { - await getPayees(); + await dispatch(getPayees()); } if (onImported) { diff --git a/packages/desktop-client/src/components/settings/Reset.tsx b/packages/desktop-client/src/components/settings/Reset.tsx index 193bb2565e6..0a9128d918f 100644 --- a/packages/desktop-client/src/components/settings/Reset.tsx +++ b/packages/desktop-client/src/components/settings/Reset.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; +import { useDispatch } from 'react-redux'; import { t } from 'i18next'; +import { resetSync } from 'loot-core/client/actions'; import { send } from 'loot-core/src/platform/client/fetch'; -import { useActions } from '../../hooks/useActions'; import { useMetadataPref } from '../../hooks/useMetadataPref'; import { ButtonWithLoading } from '../common/Button2'; import { Text } from '../common/Text'; @@ -41,13 +42,13 @@ export function ResetCache() { export function ResetSync() { const [groupId] = useMetadataPref('groupId'); const isEnabled = !!groupId; - const { resetSync } = useActions(); + const dispatch = useDispatch(); const [resetting, setResetting] = useState(false); async function onResetSync() { setResetting(true); - await resetSync(); + await dispatch(resetSync()); setResetting(false); } diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx index 4a7852e12b0..6e93d81a702 100644 --- a/packages/desktop-client/src/components/settings/index.tsx +++ b/packages/desktop-client/src/components/settings/index.tsx @@ -1,12 +1,13 @@ import React, { type ReactNode, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; import { css } from '@emotion/css'; import { t } from 'i18next'; +import { closeBudget, loadPrefs } from 'loot-core/client/actions'; import { isElectron } from 'loot-core/shared/environment'; import { listen } from 'loot-core/src/platform/client/fetch'; -import { useActions } from '../../hooks/useActions'; import { useGlobalPref } from '../../hooks/useGlobalPref'; import { useIsOutdated, useLatestVersion } from '../../hooks/useLatestVersion'; import { useMetadataPref } from '../../hooks/useMetadataPref'; @@ -126,17 +127,20 @@ function AdvancedAbout() { export function Settings() { const [floatingSidebar] = useGlobalPref('floatingSidebar'); const [budgetName] = useMetadataPref('budgetName'); + const dispatch = useDispatch(); - const { loadPrefs, closeBudget } = useActions(); + const onCloseBudget = () => { + dispatch(closeBudget()); + }; useEffect(() => { const unlisten = listen('prefs-updated', () => { - loadPrefs(); + dispatch(loadPrefs()); }); - loadPrefs(); + dispatch(loadPrefs()); return () => unlisten(); - }, [loadPrefs]); + }, [dispatch]); const { isNarrowWidth } = useResponsive(); @@ -169,7 +173,7 @@ export function Settings() { style={{ color: theme.buttonNormalDisabledText }} /> - + )}