Skip to content

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

Merged
emrysal merged 3 commits intocalcom:mainfrom
codemod:fix/useParamsWithFallback
Nov 7, 2023
Merged

fix: [app dir bootstrapping 8] useParamsWithFallback hook and add tests#12041
emrysal merged 3 commits intocalcom:mainfrom
codemod:fix/useParamsWithFallback

Conversation

@hbjORbj
Copy link
Copy Markdown
Contributor

@hbjORbj hbjORbj commented Oct 23, 2023

What does this PR do?

  • Bug: Error: NextRouter was not mounted is thrown if useRouter from next/router is called in App router. Since useParamsWithFallback is meant to be used in both page router and app router, this shouldn't happen.
  • How the bug was found: In order to migrate pages/workflows/[workflow].tsx to App router, I created a file at app/workflows/[workflow]/page.tsx that imports component from @calcom/features/ee/workflows/pages/workflow. The component at @calcom/features/ee/workflows/pages/workflow uses useParamsWithFallback hook, in which useRouter from next/router is called.
  • Solution: Use next.js compat router (this doesn't throw error but rather returns null in app router)
  • Extra Note: We added tests to ensure the functionality of the hook.

Requirement/Documentation

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How should this be tested?

  1. We added tests to ensure the functionality of the hook. Run yarn vitest run packages/lib/hooks/useParamsWithFallback.test.ts.
  2. To test in real browser, try to call the hook useParamsWithFallback in any client component in app router page. You can go to this branch, create any dummy component in app router and call the hook from there.

Mandatory Tasks

  • Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 23, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 26, 2023 7:18pm
ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 26, 2023 7:18pm

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 23, 2023

@hbjORbj is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Oct 23, 2023

Thank you for following the naming conventions! 🙏 Feel free to join our discord and post your PR link to collect XP and win prizes!

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Oct 23, 2023

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

@hbjORbj hbjORbj changed the title fix: useParamsWithFallback hook and add tests fix: [app dir bootstrapping 8] useParamsWithFallback hook and add tests Oct 23, 2023
@PeerRich PeerRich added the Medium priority Created by Linear-GitHub Sync label Oct 24, 2023
Copy link
Copy Markdown
Contributor

@emrysal emrysal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, lgtm

@emrysal emrysal merged commit 13ec810 into calcom:main Nov 7, 2023
zomars pushed a commit that referenced this pull request Jan 29, 2024
…ests (#12041)

* fix: first solution using RouterContext

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

* fix return type
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Medium priority Created by Linear-GitHub Sync

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants