Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ (mobile) pull down to trigger bank-sync #1663

Merged
merged 3 commits into from
Sep 7, 2023
+117 −155
Merged

✨ (mobile) pull down to trigger bank-sync #1663

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
716947b
:sparkles: (mobile) pull down to trigger bank-sync
MatissJanis Sep 6, 2023
c2b6ec0
Release notes
MatissJanis Sep 6, 2023
35b9bf2
Remove canSync checks
MatissJanis Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/desktop-client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"react-redux": "7.2.1",
"react-router-dom": "6.11.2",
"react-scripts": "^5.0.1",
"react-simple-pull-to-refresh": "^1.3.3",
"react-spring": "^9.7.1",
"react-virtualized-auto-sizer": "^1.0.2",
"redux": "^4.0.5",
Expand Down
77 changes: 30 additions & 47 deletions packages/desktop-client/src/components/accounts/MobileAccount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,9 @@ import {
ungroupTransactions,
} from 'loot-core/src/shared/transactions';

import { useActions } from '../../hooks/useActions';
import useCategories from '../../hooks/useCategories';
import { useSetThemeColor } from '../../hooks/useSetThemeColor';
import { theme } from '../../style';
import SyncRefresh from '../SyncRefresh';

import AccountDetails from './MobileAccountDetails';

Expand Down Expand Up @@ -71,7 +69,6 @@ let paged;

export default function Account(props) {
const accounts = useSelector(state => state.queries.accounts);
const { syncAndDownload } = useActions();

const navigate = useNavigate();
const [transactions, setTransactions] = useState([]);
Expand Down Expand Up @@ -191,54 +188,40 @@ export default function Account(props) {
}
};

const onRefresh = async () => {
await syncAndDownload();
};

let balance = queries.accountBalance(account);
let numberFormat = state.prefs.numberFormat || 'comma-dot';
let hideFraction = state.prefs.hideFraction || false;

return (
<SyncRefresh onSync={onRefresh}>
{({ refreshing, onRefresh }) => (
<SchedulesProvider
transform={getSchedulesTransform(accountId, searchText !== '')}
>
<PreviewTransactions accountId={props.accountId}>
{prependTransactions =>
prependTransactions == null ? null : (
<AccountDetails
// This key forces the whole table rerender when the number
// format changes
{...state}
{...actionCreators}
key={numberFormat + hideFraction}
account={account}
accounts={accounts}
categories={categories.list}
payees={state.payees}
transactions={transactions}
prependTransactions={prependTransactions || []}
balance={balance}
isNewTransaction={isNewTransaction}
// refreshControl={
// <RefreshControl
// refreshing={refreshing}
// onRefresh={onRefresh}
// />
// }
onLoadMore={() => {
paged?.fetchNext();
}}
onSearch={onSearch}
onSelectTransaction={onSelectTransaction}
/>
)
}
</PreviewTransactions>
</SchedulesProvider>
)}
</SyncRefresh>
<SchedulesProvider
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Recommended when reviewing:
Screenshot 2023-09-06 at 18 14 27

transform={getSchedulesTransform(accountId, searchText !== '')}
>
<PreviewTransactions accountId={props.accountId}>
{prependTransactions =>
prependTransactions == null ? null : (
<AccountDetails
// This key forces the whole table rerender when the number
// format changes
{...state}
{...actionCreators}
key={numberFormat + hideFraction}
account={account}
accounts={accounts}
categories={categories.list}
payees={state.payees}
transactions={transactions}
prependTransactions={prependTransactions || []}
balance={balance}
isNewTransaction={isNewTransaction}
onLoadMore={() => {
paged?.fetchNext();
}}
onSearch={onSearch}
onSelectTransaction={onSelectTransaction}
/>
)
}
</PreviewTransactions>
</SchedulesProvider>
);
}
34 changes: 21 additions & 13 deletions packages/desktop-client/src/components/accounts/MobileAccountDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
import PullToRefresh from 'react-simple-pull-to-refresh';

import { useActions } from '../../hooks/useActions';
import Add from '../../icons/v1/Add';
import CheveronLeft from '../../icons/v1/CheveronLeft';
import SearchAlternate from '../../icons/v2/SearchAlternate';
Expand Down Expand Up @@ -75,12 +77,16 @@ export default function AccountDetails({
onSearch,
onSelectTransaction,
pushModal,
// refreshControl
}) {
let allTransactions = useMemo(() => {
return prependTransactions.concat(transactions);
}, [prependTransactions, transactions]);

const { syncAndDownload } = useActions();
const onRefresh = async () => {
await syncAndDownload(account.id);
};

return (
<View
style={{
Expand Down Expand Up @@ -161,18 +167,20 @@ export default function AccountDetails({
onSearch={onSearch}
/>
</View>
<TransactionList
transactions={allTransactions}
categories={categories}
accounts={accounts}
payees={payees}
showCategory={!account.offbudget}
isNew={isNewTransaction}
// refreshControl={refreshControl}
onLoadMore={onLoadMore}
onSelect={onSelectTransaction}
pushModal={pushModal}
/>

<PullToRefresh onRefresh={onRefresh} isPullable={!!account.account_id}>
<TransactionList
transactions={allTransactions}
categories={categories}
accounts={accounts}
payees={payees}
showCategory={!account.offbudget}
isNew={isNewTransaction}
onLoadMore={onLoadMore}
onSelect={onSelectTransaction}
pushModal={pushModal}
/>
</PullToRefresh>
</View>
);
}
138 changes: 50 additions & 88 deletions packages/desktop-client/src/components/accounts/MobileAccounts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component, useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import PullToRefresh from 'react-simple-pull-to-refresh';

import * as queries from 'loot-core/src/client/queries';

Expand Down Expand Up @@ -149,93 +150,61 @@ function EmptyMessage({ onAdd }) {
);
}

class AccountList extends Component {
isNewTransaction = id => {
return this.props.newTransactions.includes(id);
};
function AccountList({
accounts,
updatedAccounts,
getBalanceQuery,
getOnBudgetBalance,
getOffBudgetBalance,
onAddAccount,
onSelectAccount,
}) {
const { syncAndDownload } = useActions();

const budgetedAccounts = accounts.filter(account => account.offbudget === 0);
const offbudgetAccounts = accounts.filter(account => account.offbudget === 1);

render() {
const {
accounts,
updatedAccounts,
// transactions,
// categories,
getBalanceQuery,
getOnBudgetBalance,
getOffBudgetBalance,
onAddAccount,
onSelectAccount,
// onSelectTransaction,
// refreshControl
} = this.props;
const budgetedAccounts = accounts.filter(
account => account.offbudget === 0,
);
const offbudgetAccounts = accounts.filter(
account => account.offbudget === 1,
);
// All accounts - check for any syncable account
const canSync = !!accounts.find(account => !!account.account_id);

// If there are no accounts, show a helpful message
if (accounts.length === 0) {
return <EmptyMessage onAdd={onAddAccount} />;
}
// If there are no accounts, show a helpful message
if (accounts.length === 0) {
return <EmptyMessage onAdd={onAddAccount} />;
}

const accountContent = (
return (
<View style={{ flex: 1 }}>
<Page title="Accounts">
<AccountHeader name="For Budget" amount={getOnBudgetBalance()} />
{budgetedAccounts.map((acct, idx) => (
<AccountCard
account={acct}
key={acct.id}
updated={updatedAccounts.includes(acct.id)}
getBalanceQuery={getBalanceQuery}
onSelect={onSelectAccount}
/>
))}
<PullToRefresh onRefresh={syncAndDownload} isPullable={canSync}>
<AccountHeader name="For Budget" amount={getOnBudgetBalance()} />
{budgetedAccounts.map(acct => (
<AccountCard
account={acct}
key={acct.id}
updated={updatedAccounts.includes(acct.id)}
getBalanceQuery={getBalanceQuery}
onSelect={onSelectAccount}
/>
))}

<AccountHeader
name="Off budget"
amount={getOffBudgetBalance()}
style={{ marginTop: 30 }}
/>
{offbudgetAccounts.map((acct, idx) => (
<AccountCard
account={acct}
key={acct.id}
updated={updatedAccounts.includes(acct.id)}
getBalanceQuery={getBalanceQuery}
onSelect={onSelectAccount}
<AccountHeader
name="Off budget"
amount={getOffBudgetBalance()}
style={{ marginTop: 30 }}
/>
))}

{/*<Label
title="RECENT TRANSACTIONS"
style={{
textAlign: 'center',
marginTop: 50,
marginBottom: 20,
marginLeft: 10
}}
/>*/}
{offbudgetAccounts.map(acct => (
<AccountCard
account={acct}
key={acct.id}
updated={updatedAccounts.includes(acct.id)}
getBalanceQuery={getBalanceQuery}
onSelect={onSelectAccount}
/>
))}
</PullToRefresh>
</Page>
);

return (
<View style={{ flex: 1 }}>
{/* <TransactionList
transactions={transactions}
categories={categories}
isNew={this.isNewTransaction}
scrollProps={{
ListHeaderComponent: accountContent
}}
// refreshControl={refreshControl}
onSelect={onSelectTransaction}
/> */}
{accountContent}
</View>
);
}
</View>
);
}

export default function Accounts() {
Expand All @@ -259,10 +228,6 @@ export default function Accounts() {
(async () => getAccounts())();
}, []);

// const sync = async () => {
// await props.syncAndDownload();
// };

const onSelectAccount = id => {
navigate(`/accounts/${id}`);
};
Expand Down Expand Up @@ -290,9 +255,6 @@ export default function Accounts() {
onAddAccount={() => {}} // () => navigate('AddAccountModal')
onSelectAccount={onSelectAccount}
onSelectTransaction={onSelectTransaction}
// refreshControl={
// <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
// }
/>
</View>
);
Expand Down
7 changes: 1 addition & 6 deletions packages/desktop-client/src/components/transactions/MobileTransaction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1057,12 +1057,7 @@ export class TransactionList extends Component {
});

render() {
const {
transactions,
scrollProps = {},
onLoadMore,
// refreshControl
} = this.props;
const { transactions, scrollProps = {}, onLoadMore } = this.props;

const sections = this.makeData(transactions);

Expand Down
11 changes: 11 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ __metadata:
react-redux: 7.2.1
react-router-dom: 6.11.2
react-scripts: ^5.0.1
react-simple-pull-to-refresh: ^1.3.3
react-spring: ^9.7.1
react-virtualized-auto-sizer: ^1.0.2
redux: ^4.0.5
Expand Down Expand Up @@ -16797,6 +16798,16 @@ __metadata:
languageName: node
linkType: hard

"react-simple-pull-to-refresh@npm:^1.3.3":
version: 1.3.3
resolution: "react-simple-pull-to-refresh@npm:1.3.3"
peerDependencies:
react: ^16.10.2 || ^17.0.0 || ^18.0.0
react-dom: ^16.10.2 || ^17.0.0 || ^18.0.0
checksum: 8b04ec1ccf9eae2d7bf9d8304c5a49ddb0a00c0289f703ba780e74af174df234642449ad26813daf146c3991999d8fdcbb75e8fca90e2d11d6239b91d033a666
languageName: node
linkType: hard

"react-spring@npm:^9.7.1":
version: 9.7.1
resolution: "react-spring@npm:9.7.1"
Expand Down