From f5023a7c07caba707a711973d4f20c8e8cd6611c Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Tue, 26 Mar 2024 00:11:50 -0500
Subject: [PATCH] feature: Show account sync indicators when viewing accounts
on mobile (#2476)
* cleanup: Move account sync indicators to the left on mobile
* cleanup: account sync indicators on mobile should show pending/failed syncs
* feature: show account sync indicator when viewing account on mobile
* fix lint issues
* add release note
---
.../components/mobile/accounts/Account.jsx | 6 +++
.../mobile/accounts/AccountDetails.jsx | 31 +++++++++++-
.../components/mobile/accounts/Accounts.jsx | 50 +++++++++++++------
upcoming-release-notes/2476.md | 6 +++
4 files changed, 78 insertions(+), 15 deletions(-)
create mode 100644 upcoming-release-notes/2476.md
diff --git a/packages/desktop-client/src/components/mobile/accounts/Account.jsx b/packages/desktop-client/src/components/mobile/accounts/Account.jsx
index 8a16a294c..25c0bd4b1 100644
--- a/packages/desktop-client/src/components/mobile/accounts/Account.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/Account.jsx
@@ -21,6 +21,7 @@ import {
import { useAccounts } from '../../../hooks/useAccounts';
import { useCategories } from '../../../hooks/useCategories';
import { useDateFormat } from '../../../hooks/useDateFormat';
+import { useFailedAccounts } from '../../../hooks/useFailedAccounts';
import { useLocalPref } from '../../../hooks/useLocalPref';
import { useLocalPrefs } from '../../../hooks/useLocalPrefs';
import { useNavigate } from '../../../hooks/useNavigate';
@@ -77,6 +78,9 @@ export function Account(props) {
const accounts = useAccounts();
const payees = usePayees();
+ const failedAccounts = useFailedAccounts();
+ const syncingAccountIds = useSelector(state => state.account.accountsSyncing);
+
const navigate = useNavigate();
const [transactions, setTransactions] = useState([]);
const [isSearching, setIsSearching] = useState(false);
@@ -238,6 +242,8 @@ export function Account(props) {
{...state}
key={numberFormat + hideFraction}
account={account}
+ pending={syncingAccountIds.includes(account.id)}
+ failed={failedAccounts && failedAccounts.has(account.id)}
accounts={accounts}
categories={categories.list}
payees={state.payees}
diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx b/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx
index 2a45e9910..b73909fd3 100644
--- a/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/AccountDetails.jsx
@@ -62,6 +62,8 @@ function TransactionSearchInput({ accountName, onSearch }) {
export function AccountDetails({
account,
+ pending,
+ failed,
prependTransactions,
transactions,
accounts,
@@ -86,7 +88,34 @@ export function AccountDetails({
return (
<Page
- title={account.name}
+ title={
+ !account.bankId ? (
+ account.name
+ ) : (
+ <View
+ style={{
+ flexDirection: 'row',
+ }}
+ >
+ <div
+ style={{
+ margin: 'auto',
+ marginRight: 3,
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: pending
+ ? theme.sidebarItemBackgroundPending
+ : failed
+ ? theme.sidebarItemBackgroundFailed
+ : theme.sidebarItemBackgroundPositive,
+ transition: 'transform .3s',
+ }}
+ />
+ {account.name}
+ </View>
+ )
+ }
headerLeftContent={<MobileBackButton />}
headerRightContent={
<ButtonLink
diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
index 02df449b0..9f75e6d9b 100644
--- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
@@ -6,6 +6,7 @@ import * as queries from 'loot-core/src/client/queries';
import { useAccounts } from '../../../hooks/useAccounts';
import { useCategories } from '../../../hooks/useCategories';
+import { useFailedAccounts } from '../../../hooks/useFailedAccounts';
import { useLocalPref } from '../../../hooks/useLocalPref';
import { useNavigate } from '../../../hooks/useNavigate';
import { useSetThemeColor } from '../../../hooks/useSetThemeColor';
@@ -54,7 +55,15 @@ function AccountHeader({ name, amount, style = {} }) {
);
}
-function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
+function AccountCard({
+ account,
+ updated,
+ connected,
+ pending,
+ failed,
+ getBalanceQuery,
+ onSelect,
+}) {
return (
<View
style={{
@@ -94,6 +103,22 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
alignItems: 'center',
}}
>
+ {account.bankId && (
+ <View
+ style={{
+ backgroundColor: pending
+ ? theme.sidebarItemBackgroundPending
+ : failed
+ ? theme.sidebarItemBackgroundFailed
+ : theme.sidebarItemBackgroundPositive,
+ marginRight: '8px',
+ width: 8,
+ height: 8,
+ borderRadius: 8,
+ opacity: connected ? 1 : 0,
+ }}
+ />
+ )}
<TextOneLine
style={{
...styles.text,
@@ -106,17 +131,6 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
>
{account.name}
</TextOneLine>
- {account.bankId && (
- <View
- style={{
- backgroundColor: theme.noticeBackgroundDark,
- marginLeft: '-23px',
- width: 8,
- height: 8,
- borderRadius: 8,
- }}
- />
- )}
</View>
</View>
<CellValue
@@ -153,6 +167,8 @@ function AccountList({
onSelectAccount,
onSync,
}) {
+ const failedAccounts = useFailedAccounts();
+ const syncingAccountIds = useSelector(state => state.account.accountsSyncing);
const budgetedAccounts = accounts.filter(account => account.offbudget === 0);
const offbudgetAccounts = accounts.filter(account => account.offbudget === 1);
const noBackgroundColorStyle = {
@@ -194,7 +210,10 @@ function AccountList({
<AccountCard
account={acct}
key={acct.id}
- updated={updatedAccounts.includes(acct.id)}
+ updated={updatedAccounts && updatedAccounts.includes(acct.id)}
+ connected={!!acct.bank}
+ pending={syncingAccountIds.includes(acct.id)}
+ failed={failedAccounts && failedAccounts.has(acct.id)}
getBalanceQuery={getBalanceQuery}
onSelect={onSelectAccount}
/>
@@ -211,7 +230,10 @@ function AccountList({
<AccountCard
account={acct}
key={acct.id}
- updated={updatedAccounts.includes(acct.id)}
+ updated={updatedAccounts && updatedAccounts.includes(acct.id)}
+ connected={!!acct.bank}
+ pending={syncingAccountIds.includes(acct.id)}
+ failed={failedAccounts && failedAccounts.has(acct.id)}
getBalanceQuery={getBalanceQuery}
onSelect={onSelectAccount}
/>
diff --git a/upcoming-release-notes/2476.md b/upcoming-release-notes/2476.md
new file mode 100644
index 000000000..bbc8cf67f
--- /dev/null
+++ b/upcoming-release-notes/2476.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [psybers]
+---
+
+Show account sync indicators when viewing accounts on mobile.
\ No newline at end of file
--
GitLab