Set local and global pref hooks

actualbudget · Feb 8, 2024 · 7968fac · 7968fac
1 parent f739b6e
commit 7968fac
Show file tree

Hide file tree

Showing 57 changed files with 243 additions and 222 deletions.
diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
@@ -8,6 +8,7 @@ import {
 import { useSelector } from 'react-redux';
 
 import * as Platform from 'loot-core/src/client/platform';
+import { type State } from 'loot-core/src/client/state-types';
 import {
   init as initConnection,
   send,
@@ -36,7 +37,7 @@ type AppInnerProps = {
 function AppInner({ budgetId, cloudFileId }: AppInnerProps) {
   const [initializing, setInitializing] = useState(true);
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
-  const loadingText = useSelector(state => state.app.loadingText);
+  const loadingText = useSelector((state: State) => state.app.loadingText);
   const { loadBudget, closeBudget, loadGlobalPrefs } = useActions();
 
   async function init() {
@@ -110,8 +111,8 @@ function ErrorFallback({ error }: FallbackProps) {
 }
 
 export function App() {
-  const budgetId = useLocalPref('id');
-  const cloudFileId = useLocalPref('cloudFileId');
+  const [budgetId] = useLocalPref('id');
+  const [cloudFileId] = useLocalPref('cloudFileId');
   const { 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,8 +2,7 @@ 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 { type State } from 'loot-core/src/client/state-types';
 
 import { theme, styles } from '../style';
 
@@ -12,8 +11,8 @@ import { Text } from './common/Text';
 import { View } from './common/View';
 
 export function BankSyncStatus() {
-  const accountsSyncing = useSelector<State, AccountState['accountsSyncing']>(
-    state => state.account.accountsSyncing,
+  const accountsSyncing = useSelector(
+    (state: State) => state.account.accountsSyncing,
   );
 
   const name = accountsSyncing

diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -15,6 +15,7 @@ import {
 import hotkeys from 'hotkeys-js';
 
 import { SpreadsheetProvider } from 'loot-core/src/client/SpreadsheetProvider';
+import { type State } from 'loot-core/src/client/state-types';
 import { checkForUpdateNotification } from 'loot-core/src/client/update-notification';
 import * as undo from 'loot-core/src/platform/client/undo';
 
@@ -75,7 +76,9 @@ function WideNotSupported({ children, redirectTo = '/budget' }) {
 function RouterBehaviors() {
   const navigate = useNavigate();
   const accounts = useAccounts();
-  const accountsLoaded = useSelector(state => state.queries.accountsLoaded);
+  const accountsLoaded = useSelector(
+    (state: State) => state.queries.accountsLoaded,
+  );
   useEffect(() => {
     // If there are no accounts, we want to redirect the user to
     // the All Accounts screen which will prompt them to add an account

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -2,8 +2,7 @@
 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 { type State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
 import { theme, styles, type CSSProperties } from '../style';
@@ -25,9 +24,7 @@ export function LoggedInUser({
   style,
   color,
 }: LoggedInUserProps) {
-  const userData = useSelector<State, UserState['data']>(
-    state => state.user.data,
-  );
+  const userData = useSelector((state: 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/MobileWebMessage.tsx b/packages/desktop-client/src/components/MobileWebMessage.tsx
@@ -1,9 +1,4 @@
 import React, { useState } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { savePrefs } from 'loot-core/src/client/actions';
-import { type State } from 'loot-core/src/client/state-types';
-import { type PrefsState } from 'loot-core/src/client/state-types/prefs';
 
 import { useLocalPref } from '../hooks/useLocalPref';
 import { useResponsive } from '../ResponsiveProvider';
@@ -17,25 +12,26 @@ import { Checkbox } from './forms';
 const buttonStyle = { border: 0, fontSize: 15, padding: '10px 13px' };
 
 export function MobileWebMessage() {
-  const hideMobileMessagePref = useLocalPref('hideMobileMessage') || true;
+  const [hideMobileMessage, setHideMobileMessagePref] = useLocalPref(
+    'hideMobileMessage',
+    true,
+  );
 
   const { isNarrowWidth } = useResponsive();
 
   const [show, setShow] = useState(
     isNarrowWidth &&
-      !hideMobileMessagePref &&
+      !hideMobileMessage &&
       !document.cookie.match(/hideMobileMessage=true/),
   );
   const [requestDontRemindMe, setRequestDontRemindMe] = useState(false);
 
-  const dispatch = useDispatch();
-
   function onTry() {
     setShow(false);
 
     if (requestDontRemindMe) {
       // remember the pref indefinitely
-      dispatch(savePrefs({ hideMobileMessage: true }));
+      setHideMobileMessagePref(true);
     } else {
       // Set a cookie for 5 minutes
       const d = new Date();

diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
+import { type State } from 'loot-core/src/client/state-types';
 import { type PopModalAction } from 'loot-core/src/client/state-types/modals';
 import { send } from 'loot-core/src/platform/client/fetch';
 
@@ -49,8 +50,8 @@ export type CommonModalProps = {
 };
 
 export function Modals() {
-  const modalStack = useSelector(state => state.modals.modalStack);
-  const isHidden = useSelector(state => state.modals.isHidden);
+  const modalStack = useSelector((state: State) => state.modals.modalStack);
+  const isHidden = useSelector((state: State) => state.modals.isHidden);
   const actions = useActions();
   const location = useLocation();
 

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

diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -7,8 +7,7 @@ import React, {
   type ReactNode,
 } from 'react';
 
-import { usePrivacyMode } from 'loot-core/src/client/privacy';
-
+import { usePrivacyMode } from '../hooks/usePrivacyMode';
 import { useResponsive } from '../ResponsiveProvider';
 
 import { View } from './common/View';

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -9,7 +9,6 @@ import React, {
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import * as Platform from 'loot-core/src/client/platform';
-import { usePrivacyMode } from 'loot-core/src/client/privacy';
 import * as queries from 'loot-core/src/client/queries';
 import { listen } from 'loot-core/src/platform/client/fetch';
 import { type LocalPrefs } from 'loot-core/src/types/prefs';
@@ -120,16 +119,16 @@ type PrivacyButtonProps = {
 };
 
 function PrivacyButton({ style }: PrivacyButtonProps) {
-  const isPrivacyEnabled = usePrivacyMode();
-  const { savePrefs } = useActions();
+  const [isPrivacyEnabled, setPrivacyEnabledPref] =
+    useLocalPref('isPrivacyEnabled');
 
   const privacyIconStyle = { width: 15, height: 15 };
 
   return (
     <Button
       type="bare"
       aria-label={`${isPrivacyEnabled ? 'Disable' : 'Enable'} privacy mode`}
-      onClick={() => savePrefs({ isPrivacyEnabled: !isPrivacyEnabled })}
+      onClick={() => setPrivacyEnabledPref(!isPrivacyEnabled)}
       style={style}
     >
       {isPrivacyEnabled ? (
@@ -146,7 +145,7 @@ type SyncButtonProps = {
   isMobile?: boolean;
 };
 function SyncButton({ style, isMobile = false }: SyncButtonProps) {
-  const cloudFileId = useLocalPref('cloudFileId');
+  const [cloudFileId] = useLocalPref('cloudFileId');
   const { sync } = useActions();
 
   const [syncing, setSyncing] = useState(false);
@@ -286,8 +285,8 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 }
 
 function BudgetTitlebar() {
-  const maxMonths = useGlobalPref('maxMonths');
-  const budgetType = useLocalPref('budgetType');
+  const [maxMonths] = useGlobalPref('maxMonths');
+  const [budgetType] = useLocalPref('budgetType');
   const { saveGlobalPrefs } = useActions();
   const { sendEvent } = useContext(TitlebarContext);
 
@@ -390,7 +389,7 @@ export function Titlebar({ style }: TitlebarProps) {
   const sidebar = useSidebar();
   const { isNarrowWidth } = useResponsive();
   const serverURL = useServerURL();
-  const floatingSidebar = useGlobalPref('floatingSidebar');
+  const [floatingSidebar] = useGlobalPref('floatingSidebar');
 
   return isNarrowWidth ? null : (
     <View

diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 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 State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
 import { SvgClose } from '../icons/v1';
@@ -14,13 +13,10 @@ import { Text } from './common/Text';
 import { View } from './common/View';
 
 export function UpdateNotification() {
-  const updateInfo = useSelector<State, AppState['updateInfo']>(
-    state => state.app.updateInfo,
+  const updateInfo = useSelector((state: State) => state.app.updateInfo);
+  const showUpdateNotification = useSelector(
+    (state: State) => state.app.showUpdateNotification,
   );
-  const showUpdateNotification = useSelector<
-    State,
-    AppState['showUpdateNotification']
-  >(state => state.app.showUpdateNotification);
 
   const { updateApp, setAppState } = useActions();
 

diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -44,6 +44,7 @@ import {
 } from '../transactions/TransactionsTable';
 
 import { AccountHeader } from './Header';
+
 function EmptyMessage({ onAdd }) {
   return (
     <View
@@ -1544,11 +1545,11 @@ export function Account() {
   const payees = usePayees();
   const failedAccounts = useFailedAccounts();
   const dateFormat = useDateFormat();
-  const hideFraction = useLocalPref('hideFraction') || false;
-  const expandSplits = useLocalPref('expand-splits');
-  const showBalances = useLocalPref(`show-balances-${params.id}`);
-  const showCleared = !useLocalPref(`hide-cleared-${params.id}`);
-  const showExtraBalances = useLocalPref(
+  const [hideFraction] = useLocalPref('hideFraction', false);
+  const [expandSplits] = useLocalPref('expand-splits');
+  const [showBalances] = useLocalPref(`show-balances-${params.id}`);
+  const [hideCleared] = useLocalPref(`hide-cleared-${params.id}`);
+  const [showExtraBalances] = useLocalPref(
     `show-extra-balances-${params.id || 'all-accounts'}`,
   );
   const modalShowing = useSelector(state => state.modals.modalStack.length > 0);
@@ -1564,7 +1565,7 @@ export function Account() {
     hideFraction,
     expandSplits,
     showBalances,
-    showCleared,
+    showCleared: !hideCleared,
     showExtraBalances,
     payees,
     modalShowing,

diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef } from 'react';
 
+import { useLocalPref } from '../../hooks/useLocalPref';
 import { useSyncServerStatus } from '../../hooks/useSyncServerStatus';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgAdd } from '../../icons/v1';
@@ -53,7 +54,6 @@ export function AccountHeader({
   search,
   filters,
   conditionsOp,
-  savePrefs,
   pushModal,
   onSearch,
   onAddTransaction,
@@ -86,6 +86,7 @@ export function AccountHeader({
   const syncServerStatus = useSyncServerStatus();
   const isUsingServer = syncServerStatus !== 'no-server';
   const isServerOffline = syncServerStatus === 'offline';
+  const [_, setExpandSplitsPref] = useLocalPref('expand-splits');
 
   let canSync = account && account.account_id && isUsingServer;
   if (!account) {
@@ -100,9 +101,7 @@ export function AccountHeader({
         id: tableRef.current.getScrolledItem(),
       });
 
-      savePrefs({
-        'expand-splits': !(splitsExpanded.state.mode === 'expand'),
-      });
+      setExpandSplitsPref(!(splitsExpanded.state.mode === 'expand'));
     }
   }
 

diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.jsx b/packages/desktop-client/src/components/accounts/MobileAccount.jsx
@@ -88,8 +88,8 @@ export function Account(props) {
   const newTransactions = useSelector(state => state.queries.newTransactions);
   const prefs = useLocalPrefs();
   const dateFormat = useDateFormat() || 'MM/dd/yyyy';
-  const numberFormat = useLocalPref('numberFormat') || 'comma-dot';
-  const hideFraction = useLocalPref('hideFraction') || false;
+  const [numberFormat] = useLocalPref('numberFormat', 'comma-dot');
+  const [hideFraction] = useLocalPref('hideFraction', false);
 
   const state = {
     payees,

diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.jsx b/packages/desktop-client/src/components/accounts/MobileAccounts.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { replaceModal, syncAndDownload } from 'loot-core/client/actions';
+import { replaceModal, syncAndDownload } from 'loot-core/src/client/actions';
 import * as queries from 'loot-core/src/client/queries';
 
 import { useAccounts } from '../../hooks/useAccounts';
@@ -222,8 +222,8 @@ export function Accounts() {
   const accounts = useAccounts();
   const newTransactions = useSelector(state => state.queries.newTransactions);
   const updatedAccounts = useSelector(state => state.queries.updatedAccounts);
-  const numberFormat = useLocalPref('numberFormat') || 'comma-dot';
-  const hideFraction = useLocalPref('hideFraction') || false;
+  const [numberFormat] = useLocalPref('numberFormat', 'comma-dot');
+  const [hideFraction] = useLocalPref('hideFraction', false);
 
   const { list: categories } = useCategories();
 

diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.jsx b/packages/desktop-client/src/components/budget/BudgetCategories.jsx
@@ -1,7 +1,4 @@
 import React, { memo, useState, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { savePrefs } from 'loot-core/client/actions';
 
 import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme, styles } from '../../style';
@@ -35,10 +32,9 @@ export const BudgetCategories = memo(
     onReorderCategory,
     onReorderGroup,
   }) => {
-    const dispatch = useDispatch();
-    const collapsed = useLocalPref('budget.collapsed') || [];
+    const [collapsed, setCollapsedPref] = useLocalPref('budget.collapsed', []);
     function onCollapse(value) {
-      dispatch(savePrefs({ 'budget.collapsed': value }));
+      setCollapsedPref(value);
     }
 
     const [isAddingGroup, setIsAddingGroup] = useState(false);

diff --git a/packages/desktop-client/src/components/budget/BudgetTable.jsx b/packages/desktop-client/src/components/budget/BudgetTable.jsx
@@ -1,7 +1,7 @@
 import React, { createRef, Component } from 'react';
 import { connect } from 'react-redux';
 
-import { savePrefs } from 'loot-core/client/actions';
+import { savePrefs } from 'loot-core/src/client/actions';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { theme, styles } from '../../style';