Custom useNavigate which tracks previous location (actualbudget#1808)

* Custom useNavigate which tracks previous location

* Release notes

* Fix lint errors

packages/desktop-client/src/components/FinancesApp.tsx

@@ -6,7 +6,6 @@ import {
   Routes,
   Navigate,
   NavLink,
-  useNavigate,
   BrowserRouter,
   useLocation,
   useHref,
@@ -21,6 +20,7 @@ import checkForUpdateNotification from 'loot-core/src/client/update-notification
 import * as undo from 'loot-core/src/platform/client/undo';
 
 import { useActions } from '../hooks/useActions';
+import useNavigate from '../hooks/useNavigate';
 import Add from '../icons/v1/Add';
 import Cog from '../icons/v1/Cog';
 import PiggyBank from '../icons/v1/PiggyBank';

packages/desktop-client/src/components/GlobalKeys.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import * as Platform from 'loot-core/src/client/platform';
 
+import useNavigate from '../hooks/useNavigate';
+
 export default function GlobalKeys() {
   let navigate = useNavigate();
   useEffect(() => {

packages/desktop-client/src/components/Titlebar.tsx

@@ -7,14 +7,15 @@ import React, {
   type ReactNode,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 
 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';
 
 import { useActions } from '../hooks/useActions';
 import useFeatureFlag from '../hooks/useFeatureFlag';
+import useNavigate from '../hooks/useNavigate';
 import ArrowLeft from '../icons/v1/ArrowLeft';
 import AlertTriangle from '../icons/v2/AlertTriangle';
 import SvgEye from '../icons/v2/Eye';

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import debounce from 'debounce';
 import memoizeOne from 'memoize-one';
@@ -20,6 +20,7 @@ import {
 } from 'loot-core/src/shared/transactions';
 
 import useCategories from '../../hooks/useCategories';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { theme } from '../../style';
 

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
 
 import * as queries from 'loot-core/src/client/queries';
 
 import { useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { theme, styles } from '../../style';
 import Button from '../common/Button';

packages/desktop-client/src/components/budget/index.js

@@ -7,7 +7,7 @@ import React, {
   useRef,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation, useMatch, useNavigate } from 'react-router-dom';
+import { useLocation, useMatch } from 'react-router-dom';
 
 import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
@@ -26,6 +26,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
+import useNavigate from '../../hooks/useNavigate';
 import { styles } from '../../style';
 import View from '../common/View';
 import { TitlebarContext } from '../Titlebar';

packages/desktop-client/src/components/common/ButtonLink.tsx

@@ -1,6 +1,7 @@
 import React, { type ComponentProps } from 'react';
-import { useMatch, useNavigate } from 'react-router-dom';
+import { useMatch } from 'react-router-dom';
 
+import useNavigate from '../../hooks/useNavigate';
 import { type CSSProperties } from '../../style';
 
 import Button from './Button';

packages/desktop-client/src/components/common/Link.tsx

@@ -1,8 +1,9 @@
 import React, { type ReactNode, type ComponentProps } from 'react';
-import { NavLink, useMatch, useNavigate } from 'react-router-dom';
+import { NavLink, useMatch } from 'react-router-dom';
 
 import { css } from 'glamor';
 
+import useNavigate from '../../hooks/useNavigate';
 import { type CSSProperties, styles } from '../../style';
 
 import Button from './Button';

packages/desktop-client/src/components/manager/ConfigServer.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import {
   isNonProductionEnvironment,
   isElectron,
 } from 'loot-core/src/shared/environment';
 
 import { useActions } from '../../hooks/useActions';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import { theme } from '../../style';
 import Button, { ButtonWithLoading } from '../common/Button';

packages/desktop-client/src/components/manager/subscribe/ChangePassword.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
+import useNavigate from '../../../hooks/useNavigate';
 import { theme } from '../../../style';
 import Button from '../../common/Button';
 import Text from '../../common/Text';

packages/desktop-client/src/components/manager/subscribe/Error.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
+import useNavigate from '../../../hooks/useNavigate';
 import { theme } from '../../../style';
 import Button from '../../common/Button';
 import Text from '../../common/Text';

packages/desktop-client/src/components/manager/subscribe/common.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
+import useNavigate from '../../../hooks/useNavigate';
 import { theme } from '../../../style';
 import { useSetServerURL } from '../../ServerContext';
 

packages/desktop-client/src/components/modals/CreateLocalAccount.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { toRelaxedNumber } from 'loot-core/src/shared/util';
 
 import { type BoundActions } from '../../hooks/useActions';
+import useNavigate from '../../hooks/useNavigate';
 import { theme } from '../../style';
 import { type CommonModalProps } from '../../types/modals';
 import Button from '../common/Button';

packages/desktop-client/src/components/payees/ManagePayeesPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 import { Page } from '../Page';
 

packages/desktop-client/src/components/settings/UI.tsx

@@ -1,5 +1,5 @@
 import React, { useState, type ReactNode } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 import { css, media } from 'glamor';
 

packages/desktop-client/src/components/sidebar/SidebarWithData.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router';
 
 import { closeBudget } from 'loot-core/src/client/actions/budgets';
 import * as Platform from 'loot-core/src/client/platform';
@@ -9,6 +8,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 import { type LocalPrefs } from 'loot-core/src/types/prefs';
 
 import { useActions } from '../../hooks/useActions';
+import useNavigate from '../../hooks/useNavigate';
 import ExpandArrow from '../../icons/v0/ExpandArrow';
 import { styles, theme } from '../../style';
 import Button from '../common/Button';

packages/desktop-client/src/components/sidebar/Tools.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 import CheveronDown from '../../icons/v1/CheveronDown';
 import CheveronRight from '../../icons/v1/CheveronRight';

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

@@ -7,7 +7,7 @@ import React, {
   useRef,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate, useParams, Link } from 'react-router-dom';
+import { useParams, Link } from 'react-router-dom';
 
 import { useFocusRing } from '@react-aria/focus';
 import { useListBox, useListBoxSection, useOption } from '@react-aria/listbox';
@@ -45,6 +45,7 @@ import {
 
 import { useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
+import useNavigate from '../../hooks/useNavigate';
 import { useSetThemeColor } from '../../hooks/useSetThemeColor';
 import SvgAdd from '../../icons/v1/Add';
 import CheveronLeft from '../../icons/v1/CheveronLeft';

packages/desktop-client/src/hooks/useNavigate.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import {
+  type Location,
+  type NavigateFunction,
+  type NavigateOptions,
+  type To,
+  useLocation,
+  useNavigate as useNavigateReactRouter,
+} from 'react-router-dom';
+
+export default function useNavigate(): NavigateFunction {
+  const location = useLocation();
+  const navigate = useNavigateReactRouter();
+  return useCallback(
+    (to: To | number, options: NavigateOptions = {}) => {
+      if (typeof to === 'number') {
+        navigate(to);
+      } else {
+        const optionsWithPrevLocation: NavigateOptions = {
+          replace:
+            options.replace || isSamePath(to, location) ? true : undefined,
+          ...options,
+          state: {
+            ...options?.state,
+            previousLocation: location,
+          },
+        };
+
+        let { previousLocation, ...previousOriginalState } =
+          location.state || {};
+
+        if (
+          previousLocation == null ||
+          !isSamePath(to, previousLocation) ||
+          JSON.stringify(options?.state || {}) !==
+            JSON.stringify(previousOriginalState)
+        ) {
+          navigate(to, optionsWithPrevLocation);
+        } else {
+          // `to` is the same as the previous location. Just go back.
+          navigate(-1);
+        }
+      }
+    },
+    [navigate, location],
+  );
+}
+
+function isSamePath(to: To, location: Location) {
+  return to === location.pathname + location.search + location.hash;
+}

packages/desktop-client/src/util/router-tools.tsx

@@ -1,5 +1,6 @@
 import { useLayoutEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+
+import useNavigate from '../hooks/useNavigate';
 
 export function ExposeNavigate() {
   let navigate = useNavigate();

upcoming-release-notes/1808.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix flaky mobile back button on account transactions.