Add scroll to anchor and list item hooks

3 files changed, 39 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts
index 51e9b187a6..c28f580da0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/index.ts
@@ -6,3 +6,5 @@ export * from './useHasAppUpgradeInitiated';
 export * from './useHasAppUpgradeVerifiedInstallerPath';
 export * from './useIsPlatformLinux';
 export * from './useMeasure';
+export * from './useScrollToAnchor';
+export * from './useScrollToListItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
new file mode 100644
index 0000000000..649fb4cce1
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToAnchor.ts
@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export const useScrollToReference = (
+  ref?: React.RefObject<HTMLDivElement | null>,
+  scroll?: boolean,
+) => {
+  useEffect(() => {
+    if (scroll) {
+      ref?.current?.scrollIntoView({ behavior: 'instant', block: 'start' });
+    }
+  }, [ref, scroll]);
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
new file mode 100644
index 0000000000..63e9cdc0c7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/hooks/useScrollToListItem.ts
@@ -0,0 +1,25 @@
+import { ListItemAnimation } from '../lib/components/list-item';
+import { useHistory } from '../lib/history';
+import { useScrollToReference } from '.';
+
+export const useScrollToListItem = (
+  ref?: React.RefObject<HTMLDivElement | null>,
+  id?: string,
+):
+  | {
+      animation: ListItemAnimation;
+    }
+  | undefined => {
+  const { location, action } = useHistory();
+  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);
+
+  if (anchorId === undefined || isPop) return undefined;
+  return {
+    animation: scroll ? 'flash' : 'dim',
+  };
+};