Skip to content

perf: Utilize layout files for routing form pages #21478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

hbjORbj
Copy link
Contributor

@hbjORbj hbjORbj commented May 22, 2025

What does this PR do?

  • Make refactors to make routing form structure in App Router more readable and utilize layout.tsx for better performance (layout.tsx persists the state)
  • Left a self review

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • N/A - I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  • Test /routing/forms

@hbjORbj hbjORbj requested review from a team as code owners May 22, 2025 18:57
@keithwillcode keithwillcode added core area: core, team members only foundation labels May 22, 2025
Copy link

vercel bot commented May 22, 2025

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

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
cal ⬜️ Ignored (Inspect) Visit Preview May 23, 2025 8:34pm

@dosubot dosubot bot added routing-forms area: routing forms, routing, forms 💻 refactor labels May 22, 2025
Copy link

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

cubic reviewed 3 files and found no issues. Review PR in cubic.dev.

@hbjORbj hbjORbj changed the title refactor: use layout for routing forms forms refactor: create layout.tsx for /routing/forms May 22, 2025
@hbjORbj hbjORbj changed the title refactor: create layout.tsx for /routing/forms refactor: use app router layout for /routing/forms May 22, 2025
@vercel vercel bot temporarily deployed to Preview – api May 22, 2025 19:10 Inactive
@hbjORbj hbjORbj force-pushed the refactor/use-layout-for-routing-forms-forms branch from 08c31be to 4ddfc75 Compare May 22, 2025 19:10
@vercel vercel bot temporarily deployed to Preview – api May 22, 2025 19:10 Inactive
@hbjORbj hbjORbj marked this pull request as draft May 22, 2025 19:20
@hbjORbj hbjORbj changed the title refactor: use app router layout for /routing/forms refactor: make the structure of routing-forms pages readable May 22, 2025
@hbjORbj hbjORbj changed the title refactor: make the structure of routing-forms pages readable refactor: make the structure of routing-forms pages maintainable May 22, 2025
@vercel vercel bot temporarily deployed to Preview – api May 23, 2025 18:46 Inactive
@hbjORbj hbjORbj changed the title refactor: make the structure of routing-forms pages maintainable refactor: make routing forms code more maintainable May 23, 2025
@hbjORbj hbjORbj marked this pull request as ready for review May 23, 2025 18:49
@@ -14,20 +13,17 @@ import FormProvider from "./FormProvider";

const normalizePages = (pages: string[] | string | undefined) => {
const normalizedPages = Array.isArray(pages) ? pages : pages?.split("/") ?? [];
return {
mainPage: normalizedPages[0] ?? "forms",
subPages: normalizedPages.slice(1),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

never used, hence not needed

return await _generateMetadata(
(t) => (mainPage === "routing-link" ? `Form | Cal.com Forms` : `${t("routing_forms")} | Cal.com Forms`),
() => "",
undefined,
undefined,
`/apps/routing-forms/${(await params).pages.join("/")}`
Copy link
Contributor Author

Choose a reason for hiding this comment

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

/routing is correct since /apps/routing-forms is deprecated

Comment on lines -51 to -57
if (mainPage === "forms") {
return (
<Shell withoutMain>
<FinalComponent />
</Shell>
);
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Moved to /routing-forms/forms/page.tsx and /routing-forms/forms/layout.tsx

@@ -53,7 +45,7 @@ export async function getServerSideProps(

return {
props: {
appUrl: app.simplePath || `/apps/routing-forms`,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

app.simplePath is always /routing, and we don't need to call await getAppWithMetadata({ slug: "routing-forms" }) for this info

@hbjORbj hbjORbj enabled auto-merge (squash) May 23, 2025 18:53
Copy link

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

cubic found 1 issue across 7 files. Review it in cubic.dev

React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.

@hbjORbj hbjORbj changed the title refactor: make routing forms code more maintainable Perf: Utilize layout files for routing form pages May 23, 2025
Copy link
Contributor

github-actions bot commented May 23, 2025

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

Unknown release type "Perf" found in pull request title "Perf: Utilize layout files for routing form pages". 

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

@vercel vercel bot temporarily deployed to Preview – api May 23, 2025 19:43 Inactive
@hbjORbj hbjORbj changed the title Perf: Utilize layout files for routing form pages perf: Utilize layout files for routing form pages May 23, 2025
@vercel vercel bot temporarily deployed to Preview – api May 23, 2025 20:07 Inactive
@vercel vercel bot temporarily deployed to Preview – cal May 23, 2025 20:07 Inactive
@vercel vercel bot temporarily deployed to Preview – api May 23, 2025 20:31 Inactive
@vercel vercel bot temporarily deployed to Preview – api May 23, 2025 20:33 Inactive
Copy link
Contributor

github-actions bot commented May 23, 2025

E2E results are ready!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core area: core, team members only foundation ready-for-e2e 💻 refactor routing-forms area: routing forms, routing, forms
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants