feat: reload settings route after saving (#2945)

src/app/App.tsx

@@ -19,7 +19,6 @@ import { LedgerListener } from "domains/transaction/components/LedgerListener";
 import React, { useEffect, useLayoutEffect, useState } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { I18nextProvider } from "react-i18next";
-import { useLocation } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import fixtureData from "tests/fixtures/env/storage.json";
 import { StubStorage } from "tests/mocks";
@@ -36,15 +35,10 @@ const __DEV__ = process.env.NODE_ENV !== "production";
 const Main = () => {
 	const [showSplash, setShowSplash] = useState(true);
 
-	const { pathname } = useLocation();
 	const { env, persist } = useEnvironmentContext();
 	const isOnline = useNetworkStatus();
 	const { start, runAll } = useEnvSynchronizer();
 
-	useEffect(() => {
-		window.scrollTo(0, 0);
-	}, [pathname]);
-
 	useEffect(() => {
 		if (!showSplash) {
 			start();

src/app/hooks/index.ts

@@ -4,3 +4,4 @@ export * from "./env";
 export * from "./network-status";
 export * from "./use-clipboard";
 export * from "./use-query-params";
+export * from "./use-reload-path";

src/app/hooks/use-reload-path.ts

@@ -0,0 +1,10 @@
+import { useHistory, useLocation } from "react-router-dom";
+
+export const useReloadPath = () => {
+	const history = useHistory();
+	const location = useLocation();
+
+	return (path?: string) => {
+		history.replace(path || location.pathname);
+	};
+};

src/domains/setting/pages/Settings/Settings.test.tsx

@@ -29,6 +29,13 @@ jest.mock("electron", () => {
 	};
 });
 
+jest.mock("react-router-dom", () => ({
+	...jest.requireActual("react-router-dom"),
+	useHistory: () => ({
+		replace: jest.fn(),
+	}),
+}));
+
 jest.mock("fs", () => ({
 	readFileSync: jest.fn(() => "avatarImage"),
 }));

src/domains/setting/pages/Settings/Settings.tsx

@@ -1,6 +1,7 @@
 import { Page, Section } from "app/components/Layout";
 import { SideBar } from "app/components/SideBar";
 import { useEnvironmentContext } from "app/contexts";
+import { useReloadPath } from "app/hooks";
 import { useActiveProfile } from "app/hooks/env";
 import { toasts } from "app/services";
 import React, { useState } from "react";
@@ -14,6 +15,8 @@ export const Settings = () => {
 
 	const { env } = useEnvironmentContext();
 
+	const reloadPath = useReloadPath();
+
 	const form = useForm({ mode: "onChange" });
 	const { register, errors } = form;
 
@@ -45,6 +48,8 @@ export const Settings = () => {
 	];
 
 	const handleSuccess = (message?: string) => {
+		reloadPath();
+
 		toasts.success(message || t("SETTINGS.GENERAL.SUCCESS"));
 	};
 

src/router/RouterView.test.tsx

@@ -33,6 +33,47 @@ describe("RouterView", () => {
 		expect(asFragment()).toMatchSnapshot();
 	});
 
+	it("should scroll to top on route change", () => {
+		const windowSpy = jest.spyOn(window, "scrollTo");
+
+		const history = createMemoryHistory();
+		history.push("/test");
+
+		const { getByTestId } = render(
+			<Router history={history}>
+				<RouterView
+					routes={[
+						{ path: "/test", component: () => <h1>Test 1</h1> },
+						{ path: "/test2", component: () => <h1>Test 2</h1> },
+					]}
+				/>
+			</Router>,
+		);
+
+		history.push("/test2");
+		history.replace("/test");
+
+		expect(windowSpy).toHaveBeenCalledTimes(2);
+	});
+
+	it("should not scroll to top when route does not change", () => {
+		const windowSpy = jest.spyOn(window, "scrollTo");
+
+		const history = createMemoryHistory();
+		history.push("/test");
+
+		const { getByTestId } = render(
+			<Router history={history}>
+				<RouterView routes={[{ path: "/test", component: () => <h1>Test</h1> }]} />
+			</Router>,
+		);
+
+		history.push("/test");
+		history.replace("/test");
+
+		expect(windowSpy).toHaveBeenCalledTimes(1);
+	});
+
 	it("should block /test router", () => {
 		const handler = jest.fn(({ location }: MiddlewareParams) => location.pathname !== "/test");
 		const testMiddleware: Middleware = {

src/router/RouterView.tsx

@@ -20,6 +20,17 @@ export const RouterView = ({ routes, wrapper, middlewares }: Props) => {
 
 	const { env } = useEnvironmentContext();
 	const [redirectUrl, setRedirectUrl] = React.useState<string | undefined>(undefined);
+	const [previousPathname, setPreviousPathname] = React.useState("");
+
+	React.useEffect(() => {
+		const pathname = (location as any).location?.pathname || location.pathname;
+
+		if (pathname !== previousPathname) {
+			window.scrollTo(0, 0);
+		}
+
+		setPreviousPathname(pathname);
+	}, [location, previousPathname]);
 
 	const canActivate = React.useMemo(
 		() =>