From 0e7de456f6197b7a016e026f337e75f315e2492e Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Sat, 24 Jun 2023 17:39:55 -0400
Subject: [PATCH] Fix transaction list page being blank on mobile (#1171)
Also remove the need to unmount & remount when switching between
accounts. Fixes #1169
---
packages/desktop-client/src/components/FinancesApp.js | 11 +----------
.../desktop-client/src/components/accounts/Account.js | 2 +-
.../desktop-client/src/components/budget/index.js | 2 +-
upcoming-release-notes/1171.md | 6 ++++++
4 files changed, 9 insertions(+), 12 deletions(-)
create mode 100644 upcoming-release-notes/1171.md
diff --git a/packages/desktop-client/src/components/FinancesApp.js b/packages/desktop-client/src/components/FinancesApp.js
index 8d6c3bc5c..c977e3c43 100644
--- a/packages/desktop-client/src/components/FinancesApp.js
+++ b/packages/desktop-client/src/components/FinancesApp.js
@@ -9,7 +9,6 @@ import {
NavLink,
useNavigate,
BrowserRouter,
- useParams,
} from 'react-router-dom';
import hotkeys from 'hotkeys-js';
@@ -144,7 +143,7 @@ function StackedRoutesInner({ location }) {
<Route
path="/accounts/:id"
- element={<AccountCmp isNarrowWidth={isNarrowWidth} />}
+ element={isNarrowWidth ? <MobileAccount /> : <Account />}
/>
<Route
@@ -155,14 +154,6 @@ function StackedRoutesInner({ location }) {
);
}
-// Needed to re-mount the component for each account ID change
-function AccountCmp(props) {
- const { id } = useParams();
- const Component = props.isNarrowWidth ? MobileAccount : Account;
-
- return <Component key={id} {...props} />;
-}
-
function NavTab({ icon: TabIcon, name, path }) {
return (
<NavLink
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 1dcd56c38..296af367f 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -1290,7 +1290,7 @@ class AccountInternal extends PureComponent {
}
componentWillReceiveProps(nextProps) {
- if (this.props.match !== nextProps.match) {
+ if (this.props.accountId !== nextProps.accountId) {
this.setState(
{
editingName: false,
diff --git a/packages/desktop-client/src/components/budget/index.js b/packages/desktop-client/src/components/budget/index.js
index a706a9069..b14ab0267 100644
--- a/packages/desktop-client/src/components/budget/index.js
+++ b/packages/desktop-client/src/components/budget/index.js
@@ -111,7 +111,7 @@ class Budget extends PureComponent {
_initialBudgetMonth = this.state.startMonth;
}
- if (this.props.match && !prevProps.match) {
+ if (this.props.accountId !== prevProps.accountId) {
// Make to sure to check if the budget bounds have changed, and
// if so reload the budget data
send('get-budget-bounds').then(({ start, end }) => {
diff --git a/upcoming-release-notes/1171.md b/upcoming-release-notes/1171.md
new file mode 100644
index 000000000..518894fb9
--- /dev/null
+++ b/upcoming-release-notes/1171.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [j-f1]
+---
+
+Fix transaction list page being blank on mobile
--
GitLab