Fix saving scroll and expanded state to correct location object

3 files changed, 6 insertions, 12 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationScrollbars.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationScrollbars.tsx
index 81583b1c4e..0c088674aa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NavigationScrollbars.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NavigationScrollbars.tsx
@@ -17,6 +17,7 @@ export const NavigationScrollbars = React.forwardRef(function NavigationScrollba
   forwardedRef?: React.Ref<CustomScrollbarsRef>,
 ) {
   const history = useHistory();
+  const location = useRef(history.location);
   const { setNavigationHistory } = useAppContext();
   const { onScroll } = useContext(NavigationScrollContext);
 
@@ -25,7 +26,7 @@ export const NavigationScrollbars = React.forwardRef(function NavigationScrollba
 
   const beforeunload = useEffectEvent(() => {
     if (ref.current) {
-      history.recordScrollPosition(ref.current.getScrollPosition());
+      location.current.state.scrollPosition = ref.current.getScrollPosition();
       setNavigationHistory(history.asObject);
     }
   });
@@ -44,7 +45,7 @@ export const NavigationScrollbars = React.forwardRef(function NavigationScrollba
 
   const onUnmount = useEffectEvent(() => {
     if (history.action === 'PUSH' && ref.current) {
-      history.recordScrollPosition(ref.current.getScrollPosition());
+      location.current.state.scrollPosition = ref.current.getScrollPosition();
       setNavigationHistory(history.asObject);
     }
   });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
index c73b106b88..580fb71fde 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { useAppContext } from '../../context';
@@ -66,13 +66,14 @@ export function ExpandableSection(props: ExpandableSectionProps) {
   const { expandableId, expandedInitially, sectionTitle, ...otherProps } = props;
 
   const history = useHistory();
+  const location = useRef(history.location);
   const { setNavigationHistory } = useAppContext();
   const expandedValue =
     history.location.state.expandedSections[props.expandableId] ?? !!expandedInitially;
   const [expanded, , , toggleExpanded] = useBoolean(expandedValue);
 
   const updateHistory = useEffectEvent((expanded: boolean) => {
-    history.recordSectionExpandedState(props.expandableId, expanded);
+    location.current.state.expandedSections[props.expandableId] = expanded;
     setNavigationHistory(history.asObject);
   });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx
index 6d92a0e88c..741c298da6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx
@@ -82,14 +82,6 @@ export default class History {
     return history;
   }
 
-  public recordScrollPosition(position: [number, number]) {
-    this.location.state.scrollPosition = position;
-  }
-
-  public recordSectionExpandedState(id: string, expanded: boolean) {
-    this.location.state.expandedSections[id] = expanded;
-  }
-
   public get location(): Location<LocationState> {
     return this.entries[this.index];
   }