fix: [app dir bootstrapping 8] `useParamsWithFallback` hook and add tests (#12041)

* fix: first solution using RouterContext

* fix: second solution by importing router from next/compat/router

* fix return type

packages/lib/hooks/useParamsWithFallback.test.ts

@@ -0,0 +1,63 @@
+import { renderHook } from "@testing-library/react-hooks";
+import { vi } from "vitest";
+import { describe, expect, it } from "vitest";
+
+import { useParamsWithFallback } from "./useParamsWithFallback";
+
+describe("useParamsWithFallback hook", () => {
+  it("should return router.query when param is null", () => {
+    vi.mock("next/navigation", () => ({
+      useParams: vi.fn().mockReturnValue(null),
+    }));
+
+    vi.mock("next/compat/router", () => ({
+      useRouter: vi.fn().mockReturnValue({ query: { id: 1 } }),
+    }));
+
+    const { result } = renderHook(() => useParamsWithFallback());
+
+    expect(result.current).toEqual({ id: 1 });
+  });
+
+  it("should return router.query when param is undefined", () => {
+    vi.mock("next/navigation", () => ({
+      useParams: vi.fn().mockReturnValue(undefined),
+    }));
+
+    vi.mock("next/compat/router", () => ({
+      useRouter: vi.fn().mockReturnValue({ query: { id: 1 } }),
+    }));
+
+    const { result } = renderHook(() => useParamsWithFallback());
+
+    expect(result.current).toEqual({ id: 1 });
+  });
+
+  it("should return useParams() if it exists", () => {
+    vi.mock("next/navigation", () => ({
+      useParams: vi.fn().mockReturnValue({ id: 1 }),
+    }));
+
+    vi.mock("next/compat/router", () => ({
+      useRouter: vi.fn().mockReturnValue(null),
+    }));
+
+    const { result } = renderHook(() => useParamsWithFallback());
+
+    expect(result.current).toEqual({ id: 1 });
+  });
+
+  it("should return useParams() if it exists", () => {
+    vi.mock("next/navigation", () => ({
+      useParams: vi.fn().mockReturnValue({ id: 1 }),
+    }));
+
+    vi.mock("next/compat/router", () => ({
+      useRouter: vi.fn().mockReturnValue({ query: { id: 2 } }),
+    }));
+
+    const { result } = renderHook(() => useParamsWithFallback());
+
+    expect(result.current).toEqual({ id: 1 });
+  });
+});

packages/lib/hooks/useParamsWithFallback.ts

@@ -1,13 +1,18 @@
 "use client";
 
+import { useRouter as useCompatRouter } from "next/compat/router";
 import { useParams } from "next/navigation";
-import { useRouter } from "next/router";
+import type { ParsedUrlQuery } from "querystring";
+
+interface Params {
+  [key: string]: string | string[];
+}
 
 /**
  * This hook is a workaround until pages are migrated to app directory.
  */
-export function useParamsWithFallback() {
-  const router = useRouter();
-  const params = useParams();
-  return params || router.query;
+export function useParamsWithFallback(): Params | ParsedUrlQuery {
+  const params = useParams(); // always `null` in pages router
+  const router = useCompatRouter(); // always `null` in app router
+  return params ?? router?.query ?? {};
 }

vitest.workspace.ts

@@ -36,7 +36,7 @@ const workspaces = packagedEmbedTestsOnly
         test: {
           include: ["packages/**/*.{test,spec}.{ts,js}", "apps/**/*.{test,spec}.{ts,js}"],
           // TODO: Ignore the api until tests are fixed
-          exclude: ["**/node_modules/**/*", "packages/embeds/**/*"],
+          exclude: ["**/node_modules/**/*", "packages/embeds/**/*", "packages/lib/hooks/**/*"],
           setupFiles: ["setupVitest.ts"],
         },
       },
@@ -67,6 +67,13 @@ const workspaces = packagedEmbedTestsOnly
           setupFiles: ["packages/app-store/test-setup.ts"],
         },
       },
+      {
+        test: {
+          name: "@calcom/packages/lib/hooks",
+          include: ["packages/lib/hooks/**/*.{test,spec}.{ts,js}"],
+          environment: "jsdom",
+        },
+      },
     ];
 
 export default defineWorkspace(workspaces);