Replace history state after scrolling to list item

3 files changed, 32 insertions, 8 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
index 9c376a66f8..fd8919edef 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
@@ -3,10 +3,12 @@ import { useEffect } from 'react';
 export const useScrollToReference = <T extends Element = HTMLDivElement>(
   ref?: React.RefObject<T | null>,
   scroll?: boolean,
+  onScrolled?: () => void,
 ) => {
   useEffect(() => {
     if (scroll) {
       ref?.current?.scrollIntoView({ behavior: 'instant', block: 'start' });
+      onScrolled?.();
     }
-  }, [ref, scroll]);
+  }, [onScrolled, ref, scroll]);
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
index f2fc7c8486..91c1064d90 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
@@ -12,15 +12,31 @@ export const useScrollToListItem = <T extends Element = HTMLDivElement>(
   animation?: ListItemAnimation;
 } => {
   const ref = React.useRef<T>(null);
-  const { location, action } = useHistory();
+  const history = useHistory();
+  const { location } = history;
   const { state } = location;
 
-  const isPop = action === 'POP';
   const anchorId = state?.options?.find((option) => option.type === 'scroll-to-anchor')?.id;
-  const scroll = id === anchorId && !isPop;
-  useScrollToReference(ref, scroll);
+  const scroll = id === anchorId && anchorId !== undefined;
 
-  if (anchorId === undefined || isPop) {
+  const handleScrolled = React.useCallback(() => {
+    const options = state?.options?.filter((option) => {
+      if (option.type === 'scroll-to-anchor') {
+        return option.id !== anchorId;
+      }
+
+      return true;
+    });
+
+    history.replace(location, {
+      ...state,
+      options,
+    });
+  }, [anchorId, history, location, state]);
+
+  useScrollToReference(ref, scroll, handleScrolled);
+
+  if (anchorId === undefined) {
     return {
       ref: undefined,
       animation: undefined,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx
index bd2cd15883..f661a5f191 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/history.tsx
@@ -138,8 +138,14 @@ export default class History {
   public block(): never {
     throw Error('Not implemented');
   }
-  public replace(): never {
-    throw Error('Not implemented');
+
+  public replace(
+    replacementLocation: LocationDescriptor,
+    replacementState?: Partial<LocationState>,
+  ) {
+    const location = this.createLocation(replacementLocation, replacementState);
+    this.lastAction = 'REPLACE';
+    this.entries.splice(this.index, 1, location);
   }
   public go(): never {
     throw Error('Not implemented');