✨ (mobile) pull down to trigger bank-sync

packages/desktop-client/package.json

@@ -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",

packages/desktop-client/src/components/accounts/MobileAccount.js

@@ -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';
 
@@ -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([]);
@@ -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
+      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>
   );
 }

packages/desktop-client/src/components/accounts/MobileAccountDetails.js

@@ -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';
@@ -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={{
@@ -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}>
+        <TransactionList
+          transactions={allTransactions}
+          categories={categories}
+          accounts={accounts}
+          payees={payees}
+          showCategory={!account.offbudget}
+          isNew={isNewTransaction}
+          onLoadMore={onLoadMore}
+          onSelect={onSelectTransaction}
+          pushModal={pushModal}
+        />
+      </PullToRefresh>
     </View>
   );
 }

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -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';
 
@@ -149,93 +150,58 @@ 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();
 
-  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,
-    );
+  const budgetedAccounts = accounts.filter(account => account.offbudget === 0);
+  const offbudgetAccounts = accounts.filter(account => account.offbudget === 1);
 
-    // 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}>
+          <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() {
@@ -259,10 +225,6 @@ export default function Accounts() {
     (async () => getAccounts())();
   }, []);
 
-  // const sync = async () => {
-  //   await props.syncAndDownload();
-  // };
-
   const onSelectAccount = id => {
     navigate(`/accounts/${id}`);
   };
@@ -290,9 +252,6 @@ export default function Accounts() {
         onAddAccount={() => {}} // () => navigate('AddAccountModal')
         onSelectAccount={onSelectAccount}
         onSelectTransaction={onSelectTransaction}
-        // refreshControl={
-        //   <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        // }
       />
     </View>
   );

packages/desktop-client/src/components/transactions/MobileTransaction.js

@@ -934,7 +934,6 @@ class Transaction extends PureComponent {
           backgroundColor: 'white',
           border: 'none',
           width: '100%',
-          '&:active': { opacity: 0.1 },
         }}
       >
         <ListItem
@@ -1057,12 +1056,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);
 

upcoming-release-notes/1663.md

@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [MatissJanis]
+---
+
+Mobile: pull down to trigger a bank-sync

yarn.lock

@@ -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
@@ -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"