From f3f2c8485a8ab50557573802d793d39c6067d5f8 Mon Sep 17 00:00:00 2001
From: Trevor Farlow <trevdor@users.noreply.github.com>
Date: Sat, 24 Jun 2023 07:40:17 -0600
Subject: [PATCH] React Router 6 fixes (#1178)

* Provide `match` prop to class components that still rely on it.
* Fixes #1169
* Fixes an unrelated crash on Payees
---
 packages/desktop-client/src/components/accounts/Account.js  | 3 +++
 .../desktop-client/src/components/accounts/MobileAccount.js | 2 +-
 packages/desktop-client/src/components/budget/index.js      | 5 ++++-
 packages/desktop-client/src/components/payees/index.js      | 2 +-
 upcoming-release-notes/1178.md                              | 6 ++++++
 5 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 upcoming-release-notes/1178.md

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 23ee740d645..1b9400739b4 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -12,6 +12,7 @@ import {
   useParams,
   useNavigate,
   useLocation,
+  useMatch,
 } from 'react-router-dom';
 
 import { debounce } from 'debounce';
@@ -1996,10 +1997,12 @@ class AccountInternal extends PureComponent {
 
 function AccountHack(props) {
   let { dispatch: splitsExpandedDispatch } = useSplitsExpanded();
+  let match = useMatch(props.location.pathname);
 
   return (
     <AccountInternal
       {...props}
+      match={match}
       splitsExpandedDispatch={splitsExpandedDispatch}
     />
   );
diff --git a/packages/desktop-client/src/components/accounts/MobileAccount.js b/packages/desktop-client/src/components/accounts/MobileAccount.js
index 212e397b5a0..2149ed7d12b 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccount.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccount.js
@@ -164,7 +164,7 @@ function Account(props) {
 
   useEffect(updateSearchQuery, [searchText, currentQuery, state.dateFormat]);
 
-  if (!props.accounts || !props.accounts.length || !props.match) {
+  if (!props.accounts || !props.accounts.length) {
     return null;
   }
 
diff --git a/packages/desktop-client/src/components/budget/index.js b/packages/desktop-client/src/components/budget/index.js
index c14af8eae19..a706a906977 100644
--- a/packages/desktop-client/src/components/budget/index.js
+++ b/packages/desktop-client/src/components/budget/index.js
@@ -1,6 +1,6 @@
 import React, { memo, PureComponent, useContext, useMemo } from 'react';
 import { connect } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 
 import * as actions from 'loot-core/src/client/actions';
 import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
@@ -520,6 +520,8 @@ const RolloverBudgetSummary = memo(props => {
 function BudgetWrapper(props) {
   let spreadsheet = useSpreadsheet();
   let titlebar = useContext(TitlebarContext);
+  let location = useLocation();
+  let match = useMatch(location.pathname);
   let navigate = useNavigate();
 
   let reportComponents = useMemo(
@@ -566,6 +568,7 @@ function BudgetWrapper(props) {
         spreadsheet={spreadsheet}
         titlebar={titlebar}
         navigate={navigate}
+        match={match}
       />
     </View>
   );
diff --git a/packages/desktop-client/src/components/payees/index.js b/packages/desktop-client/src/components/payees/index.js
index ad2b91b727c..b18e53d9c36 100644
--- a/packages/desktop-client/src/components/payees/index.js
+++ b/packages/desktop-client/src/components/payees/index.js
@@ -515,7 +515,7 @@ export const ManagePayees = forwardRef(
               style={{
                 marginRight: '10px',
               }}
-              disabled={!(orphanedPayees.length > 0) && !orphanedOnly}
+              disabled={!(orphanedPayees?.length > 0) && !orphanedOnly}
               onClick={() => {
                 setOrphanedOnly(!orphanedOnly);
                 const filterInput = document.getElementById('filter-input');
diff --git a/upcoming-release-notes/1178.md b/upcoming-release-notes/1178.md
new file mode 100644
index 00000000000..e72a5f0f4cf
--- /dev/null
+++ b/upcoming-release-notes/1178.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [trevdor]
+---
+
+A couple patches for the React Router 6 upgrade.