fix: fix "window is not defined" error in usewindowresize hook (#742) (#743)

* Fix SSR window is not defined error in useWindowResize hook

* Remove SSR assumptions from test suite and update comments

* Fix prettier formatting in useWindowResize test

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>

Author: Copilot

src/hooks/useWindowResize.ts

@@ -15,6 +15,8 @@ export const useWindowResize = (timeout = 200): WindowSize => {
   const [windowSize, setWindowSize] = useState<WindowSize>(getWindowSize());
 
   useEffect(() => {
+    // Skip event listener setup during static build when window is not available.
+    if (typeof window === "undefined") return;
     /**
      * Resize event fired; window size recalculated.
      */
@@ -42,6 +44,9 @@ export const useWindowResize = (timeout = 200): WindowSize => {
  * @returns window height and width.
  */
 function getWindowSize(): WindowSize {
-  const { innerHeight, innerWidth } = window;
+  if (typeof window === "undefined") {
+    return { height: 0, width: 0 };
+  }
+  const { innerHeight = 0, innerWidth = 0 } = window;
   return { height: innerHeight, width: innerWidth };
 }

tests/useWindowResize.test.ts

@@ -0,0 +1,130 @@
+import { jest } from "@jest/globals";
+import { act, renderHook } from "@testing-library/react";
+
+const { useWindowResize } = await import("../src/hooks/useWindowResize");
+
+describe("useWindowResize", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  test("returns current window dimensions", () => {
+    // Set window dimensions
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1024,
+      writable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 768,
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useWindowResize());
+
+    expect(result.current).toEqual({ height: 768, width: 1024 });
+  });
+
+  test("updates dimensions on window resize", () => {
+    // Set initial dimensions
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1024,
+      writable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 768,
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useWindowResize(100));
+
+    expect(result.current).toEqual({ height: 768, width: 1024 });
+
+    // Simulate window resize
+    act(() => {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: 1920,
+        writable: true,
+      });
+      Object.defineProperty(window, "innerHeight", {
+        configurable: true,
+        value: 1080,
+        writable: true,
+      });
+      window.dispatchEvent(new Event("resize"));
+
+      // Fast-forward timeout
+      jest.advanceTimersByTime(100);
+    });
+
+    expect(result.current).toEqual({ height: 1080, width: 1920 });
+  });
+
+  test("debounces resize events with the specified timeout", () => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: 1024,
+      writable: true,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 768,
+      writable: true,
+    });
+
+    const { result } = renderHook(() => useWindowResize(200));
+
+    // Simulate multiple rapid resize events
+    act(() => {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: 1920,
+        writable: true,
+      });
+      Object.defineProperty(window, "innerHeight", {
+        configurable: true,
+        value: 1080,
+        writable: true,
+      });
+      window.dispatchEvent(new Event("resize"));
+
+      // Fast-forward only 100ms - should not update yet
+      jest.advanceTimersByTime(100);
+    });
+
+    // Should still have initial dimensions
+    expect(result.current).toEqual({ height: 768, width: 1024 });
+
+    act(() => {
+      // Fast-forward remaining 100ms
+      jest.advanceTimersByTime(100);
+    });
+
+    // Now should have updated dimensions
+    expect(result.current).toEqual({ height: 1080, width: 1920 });
+  });
+
+  test("cleans up event listener on unmount", () => {
+    const removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
+
+    const { unmount } = renderHook(() => useWindowResize());
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "resize",
+      expect.any(Function),
+    );
+
+    removeEventListenerSpy.mockRestore();
+  });
+});