Merge branch 'master' into shyam/0907-ts

actualbudget · Sep 7, 2023 · b03b42f · b03b42f
2 parents 858633f + 852b537
commit b03b42f
Show file tree

Hide file tree

Showing 25 changed files with 211 additions and 236 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   },
   "scripts": {
     "start": "yarn start:browser",
-    "start:desktop": "npm-run-all --parallel 'start:desktop-*'",
+    "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
     "start:desktop-node": "yarn workspace loot-core watch:node",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
     "start:desktop-electron": "yarn workspace desktop-electron watch",

diff --git a/...tion-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png b/...tion-available-funds-overspent-budgeted-and-for-next-month-1-chromium-linux.png
diff --git a/...est.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png b/...est.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png
diff --git a/packages/desktop-client/package.json b/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",

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -9,8 +9,6 @@ import React, {
 import { useSelector } from 'react-redux';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
 
-import { css, media } from 'glamor';
-
 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';
@@ -24,7 +22,6 @@ import SvgEyeSlashed from '../icons/v2/EyeSlashed';
 import NavigationMenu from '../icons/v2/NavigationMenu';
 import { useResponsive } from '../ResponsiveProvider';
 import { colors, type CSSProperties } from '../style';
-import tokens from '../tokens';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
 import AnimatedRefresh from './AnimatedRefresh';
@@ -107,8 +104,9 @@ function PrivacyButton() {
 
 type SyncButtonProps = {
   style?: CSSProperties;
+  isMobile?: boolean;
 };
-export function SyncButton({ style }: SyncButtonProps) {
+export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
   let cloudFileId = useSelector(state => state.prefs.local.cloudFileId);
   let { sync } = useActions();
 
@@ -156,33 +154,29 @@ export function SyncButton({ style }: SyncButtonProps) {
         syncState === 'local'
       ? colors.n9
       : style.color;
-  const activeStyle = css(
-    // mobile
-    media(`(max-width: ${tokens.breakpoint_small})`, {
-      color: mobileColor,
-    }),
-  );
+  const desktopColor =
+    syncState === 'error'
+      ? colors.r4
+      : syncState === 'disabled' ||
+        syncState === 'offline' ||
+        syncState === 'local'
+      ? colors.n6
+      : null;
+
+  const activeStyle = isMobile
+    ? {
+        color: mobileColor,
+      }
+    : {};
 
   return (
     <Button
       type="bare"
-      style={css(
-        style,
-        {
-          WebkitAppRegion: 'none',
-          color: mobileColor,
-        },
-        media(`(min-width: ${tokens.breakpoint_small})`, {
-          color:
-            syncState === 'error'
-              ? colors.r4
-              : syncState === 'disabled' ||
-                syncState === 'offline' ||
-                syncState === 'local'
-              ? colors.n6
-              : null,
-        }),
-      )}
+      style={{
+        ...style,
+        WebkitAppRegion: 'none',
+        color: isMobile ? mobileColor : desktopColor,
+      }}
       hoveredStyle={activeStyle}
       activeStyle={activeStyle}
       onClick={sync}

diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/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>
   );
 }
diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/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>
   );
 }