refactor(hooks): rewrite useScrollPosition hook

* return the scroll position (both X and Y)
* no longer accepts arguments
* add tests

5 files changed, 67 insertions, 27 deletions

diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index c7b8dbd..5dad8a2 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -7,7 +7,6 @@ import {
   type ReactElement,
   type ReactNode,
   useRef,
-  useState,
   type CSSProperties,
   type FormEvent,
   useCallback,
@@ -367,19 +366,16 @@ export const Layout: FC<LayoutProps> = ({
     subjectOf: { '@id': `${url}` },
   };
 
-  const [backToTopClassName, setBackToTopClassName] = useState<string>(
-    `${styles['back-to-top']} ${styles['back-to-top--hidden']}`
-  );
-  const updateBackToTopClassName = () => {
-    const visibleBreakpoint = 300;
-    setBackToTopClassName(
-      window.scrollY > visibleBreakpoint
-        ? `${styles['back-to-top']} ${styles['back-to-top--visible']}`
-        : `${styles['back-to-top']} ${styles['back-to-top--hidden']}`
-    );
-  };
-
-  useScrollPosition(updateBackToTopClassName);
+  const scrollPos = useScrollPosition();
+  const backToTopBreakpoint = 300;
+  const backToTopClassName = [
+    styles['back-to-top'],
+    styles[
+      scrollPos.y > backToTopBreakpoint
+        ? 'back-to-top--visible'
+        : 'back-to-top--hidden'
+    ],
+  ].join(' ');
 
   const topRef = useRef<HTMLSpanElement>(null);
   const giveFocusToTopRef = () => {
diff --git a/src/utils/hooks/use-scroll-position.tsx b/src/utils/hooks/use-scroll-position.tsx
deleted file mode 100644
index c6ae9fd..0000000
--- a/src/utils/hooks/use-scroll-position.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Execute the given function based on scroll position.
- *
- * @param scrollHandler - A callback function.
- */
-export const useScrollPosition = (scrollHandler: () => void) => {
-  useEffect(() => {
-    window.addEventListener('scroll', scrollHandler);
-    return () => window.removeEventListener('scroll', scrollHandler);
-  }, [scrollHandler]);
-};
diff --git a/src/utils/hooks/use-scroll-position/index.ts b/src/utils/hooks/use-scroll-position/index.ts
new file mode 100644
index 0000000..8c11c1e
--- /dev/null
+++ b/src/utils/hooks/use-scroll-position/index.ts
@@ -0,0 +1 @@
+export * from './use-scroll-position';
diff --git a/src/utils/hooks/use-scroll-position/use-scroll-position.test.ts b/src/utils/hooks/use-scroll-position/use-scroll-position.test.ts
new file mode 100644
index 0000000..49370ae
--- /dev/null
+++ b/src/utils/hooks/use-scroll-position/use-scroll-position.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from '@jest/globals';
+import { fireEvent, renderHook } from '@testing-library/react';
+import { type ScrollPosition, useScrollPosition } from './use-scroll-position';
+
+describe('useScrollPosition', () => {
+  it('returns the scroll position based on window', () => {
+    const { result } = renderHook(() => useScrollPosition());
+
+    expect(result.current.x).toBe(0);
+    expect(result.current.y).toBe(0);
+
+    const newPos: ScrollPosition = {
+      x: 50,
+      y: 100,
+    };
+
+    fireEvent.scroll(window, { target: { scrollX: newPos.x } });
+
+    expect(result.current.x).toBe(newPos.x);
+
+    fireEvent.scroll(window, { target: { scrollY: newPos.y } });
+
+    expect(result.current.y).toBe(newPos.y);
+  });
+});
diff --git a/src/utils/hooks/use-scroll-position/use-scroll-position.ts b/src/utils/hooks/use-scroll-position/use-scroll-position.ts
new file mode 100644
index 0000000..e20fda5
--- /dev/null
+++ b/src/utils/hooks/use-scroll-position/use-scroll-position.ts
@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type ScrollPosition = {
+  x: number;
+  y: number;
+};
+
+const defaultPosition: ScrollPosition = { x: 0, y: 0 };
+
+/**
+ * React hook to retrieve the current scroll position based on window.
+ *
+ * @returns {ScrollPosition} The scroll position.
+ */
+export const useScrollPosition = (): ScrollPosition => {
+  const [pos, setPos] = useState(defaultPosition);
+
+  const updatePos = useCallback(() => {
+    setPos({ x: window.scrollX, y: window.scrollY });
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+
+    window.addEventListener('scroll', updatePos);
+
+    return () => window.removeEventListener('scroll', updatePos);
+  }, [updatePos]);
+
+  return pos;
+};