Add useWithRetry hook for simplified retry functionality

blink-so[bot] · BrunoQuaresma · blink-so[bot] · commit b1e453bf12b3 · 2025-07-02T13:42:21.000Z
- Created useWithRetry hook with simple interface (call, retryAt, isLoading)
- Implements exponential backoff with configurable options
- Includes comprehensive tests covering all scenarios
- Added usage examples for different configurations
- Follows existing code patterns and uses constants for configuration

Co-authored-by: BrunoQuaresma &lt;3165839+BrunoQuaresma@users.noreply.github.com&gt;
diff --git a/site/src/hooks/index.ts b/site/src/hooks/index.ts
@@ -4,3 +4,4 @@ export * from "./useClickableTableRow";
 export * from "./useClipboard";
 export * from "./usePagination";
 export * from "./useRetry";
+export * from "./useWithRetry";
diff --git a/site/src/hooks/useWithRetry.example.tsx b/site/src/hooks/useWithRetry.example.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import { useWithRetry } from "./useWithRetry";
+
+// Example component showing how to use useWithRetry
+export const TerminalConnectionExample: React.FC = () => {
+  // Mock terminal connection function
+  const connectToTerminal = async (): Promise<void> => {
+    // Simulate connection that might fail
+    if (Math.random() > 0.7) {
+      throw new Error("Connection failed");
+    }
+    console.log("Connected to terminal successfully!");
+  };
+
+  const { call: connectTerminal, isLoading, retryAt } = useWithRetry(
+    connectToTerminal,
+    {
+      maxAttempts: 3,
+      initialDelay: 1000,
+      maxDelay: 5000,
+      multiplier: 2,
+    },
+  );
+
+  const formatRetryTime = (date: Date): string => {
+    const seconds = Math.ceil((date.getTime() - Date.now()) / 1000);
+    return `${seconds}s`;
+  };
+
+  return (
+    <div>
+      <button onClick={connectTerminal} disabled={isLoading}>
+        {isLoading ? "Connecting..." : "Connect to Terminal"}
+      </button>
+      
+      {retryAt && (
+        <div>
+          <p>Connection failed. Retrying in {formatRetryTime(retryAt)}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Example with different configuration
+export const QuickRetryExample: React.FC = () => {
+  const performAction = async (): Promise<void> => {
+    // Simulate an action that might fail
+    throw new Error("Action failed");
+  };
+
+  const { call, isLoading, retryAt } = useWithRetry(performAction, {
+    maxAttempts: 5,
+    initialDelay: 500,
+    multiplier: 1.5,
+  });
+
+  return (
+    <div>
+      <button onClick={call} disabled={isLoading}>
+        {isLoading ? "Processing..." : "Perform Action"}
+      </button>
+      
+      {retryAt && (
+        <p>Retrying at {retryAt.toLocaleTimeString()}</p>
+      )}
+    </div>
+  );
+};
diff --git a/site/src/hooks/useWithRetry.test.ts b/site/src/hooks/useWithRetry.test.ts
@@ -0,0 +1,286 @@
+import { act, renderHook } from "@testing-library/react";
+import { useWithRetry } from "./useWithRetry";
+
+// Mock timers
+jest.useFakeTimers();
+
+describe("useWithRetry", () => {
+  let mockFn: jest.Mock;
+
+  beforeEach(() => {
+    mockFn = jest.fn();
+    jest.clearAllTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with correct default state", () => {
+    const { result } = renderHook(() => useWithRetry(mockFn));
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.retryAt).toBe(null);
+  });
+
+  it("should execute function successfully on first attempt", async () => {
+    mockFn.mockResolvedValue(undefined);
+
+    const { result } = renderHook(() => useWithRetry(mockFn));
+
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.retryAt).toBe(null);
+  });
+
+  it("should set isLoading to true during execution", async () => {
+    let resolvePromise: () => void;
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+    mockFn.mockReturnValue(promise);
+
+    const { result } = renderHook(() => useWithRetry(mockFn));
+
+    act(() => {
+      result.current.call();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    await act(async () => {
+      resolvePromise!();
+      await promise;
+    });
+
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("should retry on failure with exponential backoff", async () => {
+    mockFn
+      .mockRejectedValueOnce(new Error("First failure"))
+      .mockRejectedValueOnce(new Error("Second failure"))
+      .mockResolvedValueOnce(undefined);
+
+    const { result } = renderHook(() => useWithRetry(mockFn));
+
+    // Start the call
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Fast-forward to first retry (1 second)
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Fast-forward to second retry (2 seconds)
+    await act(async () => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(3);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.retryAt).toBe(null);
+  });
+
+  it("should stop retrying after max attempts", async () => {
+    mockFn.mockRejectedValue(new Error("Always fails"));
+
+    const { result } = renderHook(() =>
+      useWithRetry(mockFn, { maxAttempts: 2 }),
+    );
+
+    // Start the call
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(true);
+
+    // Fast-forward to first retry
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.retryAt).toBe(null);
+  });
+
+  it("should use custom retry options", async () => {
+    mockFn
+      .mockRejectedValueOnce(new Error("First failure"))
+      .mockResolvedValueOnce(undefined);
+
+    const { result } = renderHook(() =>
+      useWithRetry(mockFn, {
+        initialDelay: 500,
+        multiplier: 3,
+        maxAttempts: 2,
+      }),
+    );
+
+    // Start the call
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Fast-forward by custom initial delay (500ms)
+    await act(async () => {
+      jest.advanceTimersByTime(500);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.retryAt).toBe(null);
+  });
+
+  it("should respect max delay", async () => {
+    mockFn.mockRejectedValue(new Error("Always fails"));
+
+    const { result } = renderHook(() =>
+      useWithRetry(mockFn, {
+        initialDelay: 1000,
+        multiplier: 10,
+        maxDelay: 2000,
+        maxAttempts: 3,
+      }),
+    );
+
+    // Start the call
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+
+    // First retry should be at 1000ms (initial delay)
+    await act(async () => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(2);
+
+    // Second retry should be at 2000ms (max delay, not 10000ms)
+    await act(async () => {
+      jest.advanceTimersByTime(2000);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(3);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("should cancel previous retry when call is invoked again", async () => {
+    mockFn
+      .mockRejectedValueOnce(new Error("First failure"))
+      .mockResolvedValueOnce(undefined);
+
+    const { result } = renderHook(() => useWithRetry(mockFn));
+
+    // Start the first call
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(1);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Call again before retry happens
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.retryAt).toBe(null);
+
+    // Advance time to ensure previous retry was cancelled
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    expect(mockFn).toHaveBeenCalledTimes(2); // Should not have been called again
+  });
+
+  it("should update retryAt countdown", async () => {
+    mockFn.mockRejectedValue(new Error("Failure"));
+
+    const { result } = renderHook(() =>
+      useWithRetry(mockFn, { initialDelay: 1000 }),
+    );
+
+    // Start the call
+    await act(async () => {
+      await result.current.call();
+    });
+
+    const initialRetryAt = result.current.retryAt;
+    expect(initialRetryAt).not.toBe(null);
+
+    // Advance time by 100ms (countdown update interval)
+    await act(async () => {
+      jest.advanceTimersByTime(100);
+    });
+
+    // retryAt should still be set but countdown should be updating
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Advance to just before retry time
+    await act(async () => {
+      jest.advanceTimersByTime(850);
+    });
+
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Advance past retry time
+    await act(async () => {
+      jest.advanceTimersByTime(100);
+    });
+
+    expect(result.current.retryAt).toBe(null);
+  });
+
+  it("should cleanup timers on unmount", async () => {
+    mockFn.mockRejectedValue(new Error("Failure"));
+
+    const { result, unmount } = renderHook(() => useWithRetry(mockFn));
+
+    // Start the call to create timers
+    await act(async () => {
+      await result.current.call();
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.retryAt).not.toBe(null);
+
+    // Unmount should cleanup timers
+    unmount();
+
+    // Advance time to ensure timers were cleared
+    await act(async () => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    // Function should not have been called again
+    expect(mockFn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/site/src/hooks/useWithRetry.ts b/site/src/hooks/useWithRetry.ts
