From 42a6115054a203f9c3c45516145726855e12ca4a Mon Sep 17 00:00:00 2001 From: hbjORbj Date: Sat, 14 Dec 2024 13:07:29 -0500 Subject: [PATCH 1/8] chore: app router - /bookings page --- .../{future => }/bookings/[status]/page.tsx | 4 +-- apps/web/pages/bookings/[status].tsx | 27 ------------------- 2 files changed, 2 insertions(+), 29 deletions(-) rename apps/web/app/{future => }/bookings/[status]/page.tsx (82%) delete mode 100644 apps/web/pages/bookings/[status].tsx diff --git a/apps/web/app/future/bookings/[status]/page.tsx b/apps/web/app/bookings/[status]/page.tsx similarity index 82% rename from apps/web/app/future/bookings/[status]/page.tsx rename to apps/web/app/bookings/[status]/page.tsx index 3cbc43c9132c56..eed89e2c469d1a 100644 --- a/apps/web/app/future/bookings/[status]/page.tsx +++ b/apps/web/app/bookings/[status]/page.tsx @@ -4,7 +4,7 @@ import { WithLayout } from "app/layoutHOC"; import type { InferGetStaticPropsType } from "next"; import { validStatuses } from "~/bookings/lib/validStatuses"; -import Page from "~/bookings/views/bookings-listing-view"; +import BookingsListingView from "~/bookings/views/bookings-listing-view"; import { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps"; type Y = InferGetStaticPropsType; @@ -20,6 +20,6 @@ export const generateStaticParams = async () => { return validStatuses.map((status) => ({ status })); }; -export default WithLayout({ getLayout: null, getData, Page })<"P">; +export default WithLayout({ getLayout: null, getData, Page: BookingsListingView })<"P">; export const dynamic = "force-static"; diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx deleted file mode 100644 index 49b006a57a0c10..00000000000000 --- a/apps/web/pages/bookings/[status].tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { GetStaticPaths } from "next"; - -import PageWrapper from "@components/PageWrapper"; - -import { validStatuses } from "~/bookings/lib/validStatuses"; -import BookingsListingView from "~/bookings/views/bookings-listing-view"; - -export { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps"; - -const BookingsListingPage = new Proxy<{ - (): JSX.Element; - PageWrapper?: typeof PageWrapper; -}>(BookingsListingView, {}); - -BookingsListingPage.PageWrapper = PageWrapper; - -export const getStaticPaths: GetStaticPaths = () => { - return { - paths: validStatuses.map((status) => ({ - params: { status }, - locale: "en", - })), - fallback: "blocking", - }; -}; - -export default BookingsListingPage; From 8c117bbe94493365271eb6de730121333a58665e Mon Sep 17 00:00:00 2001 From: hbjORbj Date: Sat, 14 Dec 2024 13:07:53 -0500 Subject: [PATCH 2/8] remove env vars --- .env.example | 1 - apps/web/abTest/middlewareFactory.ts | 1 - apps/web/scripts/vercel-app-router-deploy.sh | 1 - turbo.json | 1 - 4 files changed, 4 deletions(-) diff --git a/.env.example b/.env.example index 124aac0ff8c14d..965c269d0ee04b 100644 --- a/.env.example +++ b/.env.example @@ -356,7 +356,6 @@ APP_ROUTER_APPS_CATEGORIES_ENABLED=0 # whether we redirect to the future/apps/categories/[category] from /apps/categories/[category] or not APP_ROUTER_APPS_CATEGORIES_CATEGORY_ENABLED=0 APP_ROUTER_BOOKING_ENABLED=0 -APP_ROUTER_BOOKINGS_STATUS_ENABLED=0 APP_ROUTER_GETTING_STARTED_STEP_ENABLED=0 APP_ROUTER_APPS_ENABLED=0 APP_ROUTER_TEAM_ENABLED=0 diff --git a/apps/web/abTest/middlewareFactory.ts b/apps/web/abTest/middlewareFactory.ts index e3555464beee7a..8ed5b252acd6e8 100644 --- a/apps/web/abTest/middlewareFactory.ts +++ b/apps/web/abTest/middlewareFactory.ts @@ -21,7 +21,6 @@ const ROUTES: [URLPattern, boolean][] = [ ["/auth/platform/:path*", process.env.APP_ROUTER_AUTH_PLATFORM_ENABLED === "1"] as const, ["/auth/oauth2/:path*", process.env.APP_ROUTER_AUTH_OAUTH2_ENABLED === "1"] as const, ["/getting-started/:step", process.env.APP_ROUTER_GETTING_STARTED_STEP_ENABLED === "1"] as const, - ["/bookings/:status", process.env.APP_ROUTER_BOOKINGS_STATUS_ENABLED === "1"] as const, ["/booking/:path*", process.env.APP_ROUTER_BOOKING_ENABLED === "1"] as const, ["/team", process.env.APP_ROUTER_TEAM_ENABLED === "1"] as const, ["/teams", process.env.APP_ROUTER_TEAMS_ENABLED === "1"] as const, diff --git a/apps/web/scripts/vercel-app-router-deploy.sh b/apps/web/scripts/vercel-app-router-deploy.sh index 591c0b3c3c4234..4d2e824812d1c8 100755 --- a/apps/web/scripts/vercel-app-router-deploy.sh +++ b/apps/web/scripts/vercel-app-router-deploy.sh @@ -21,7 +21,6 @@ checkRoute "$APP_ROUTER_AUTH_ERROR_ENABLED" app/future/auth/error checkRoute "$APP_ROUTER_AUTH_PLATFORM_ENABLED" app/future/auth/platform checkRoute "$APP_ROUTER_AUTH_OAUTH2_ENABLED" app/future/auth/oauth2 checkRoute "$APP_ROUTER_GETTING_STARTED_STEP_ENABLED" app/future/getting-started -checkRoute "$APP_ROUTER_BOOKINGS_STATUS_ENABLED" app/future/bookings checkRoute "$APP_ROUTER_BOOKING_ENABLED" app/future/booking checkRoute "$APP_ROUTER_TEAM_ENABLED" app/future/team checkRoute "$APP_ROUTER_TEAMS_ENABLED" app/future/teams diff --git a/turbo.json b/turbo.json index 2eb54ef949c6cb..ab54044c8aa368 100644 --- a/turbo.json +++ b/turbo.json @@ -238,7 +238,6 @@ "APP_ROUTER_APPS_SLUG_ENABLED", "APP_ROUTER_APPS_SLUG_SETUP_ENABLED", "APP_ROUTER_BOOKING_ENABLED", - "APP_ROUTER_BOOKINGS_STATUS_ENABLED", "APP_ROUTER_EVENT_TYPES_ENABLED", "APP_ROUTER_GETTING_STARTED_STEP_ENABLED", "APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED", From 87f21001144b12e58f31618e46ac7d761dc8bf2a Mon Sep 17 00:00:00 2001 From: hbjORbj Date: Wed, 18 Dec 2024 14:10:48 -0500 Subject: [PATCH 3/8] fix --- apps/web/middleware.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts index cd3ddc3adc8f2e..afaeb7a88636d8 100644 --- a/apps/web/middleware.ts +++ b/apps/web/middleware.ts @@ -186,8 +186,7 @@ export const config = { "/workflows/:path*", "/getting-started/:path*", "/apps", - "/bookings/:status/", - "/future/bookings/:status/", + "/bookings/:path*/", "/video/:path*", "/teams", "/future/teams/", From 8ad1adf58896468bcc406e4b3e2b65c80620f8ca Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Wed, 18 Dec 2024 16:18:24 -0500 Subject: [PATCH 4/8] Update middleware.ts --- apps/web/middleware.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts index 0608d970f576b7..8d847abca68234 100644 --- a/apps/web/middleware.ts +++ b/apps/web/middleware.ts @@ -186,7 +186,7 @@ export const config = { "/workflows/:path*", "/getting-started/:path*", "/apps", - "/bookings/:path*/", + "/bookings/:status/", "/video/:path*", "/teams", "/future/teams/", From adc4a3fb0f4a54a9fa9a3fb8800235a9badd9d9a Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 20 Dec 2024 13:54:52 -0500 Subject: [PATCH 5/8] revert unneeded change --- apps/web/app/bookings/[status]/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/app/bookings/[status]/page.tsx b/apps/web/app/bookings/[status]/page.tsx index be4420acd4dde0..2a9ad20fc8f183 100644 --- a/apps/web/app/bookings/[status]/page.tsx +++ b/apps/web/app/bookings/[status]/page.tsx @@ -4,7 +4,7 @@ import { WithLayout } from "app/layoutHOC"; import type { InferGetStaticPropsType } from "next"; import { validStatuses } from "~/bookings/lib/validStatuses"; -import BookingsListingView from "~/bookings/views/bookings-listing-view"; +import Page from "~/bookings/views/bookings-listing-view"; import { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps"; type Y = InferGetStaticPropsType; @@ -20,6 +20,6 @@ export const generateStaticParams = async () => { return validStatuses.map((status) => ({ status })); }; -export default WithLayout({ getLayout: null, getData, Page: BookingsListingView })<"P">; +export default WithLayout({ getLayout: null, getData, Page })<"P">; export const dynamic = "force-static"; From ff51b5bf2775e2c8f894967bf59229de40c8faf9 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 20 Dec 2024 15:31:28 -0500 Subject: [PATCH 6/8] refactor for the better --- apps/web/app/bookings/[status]/page.tsx | 24 ++++++++++--------- .../bookings-listing-view.getStaticProps.tsx | 24 ------------------- .../bookings/views/bookings-listing-view.tsx | 10 ++------ 3 files changed, 15 insertions(+), 43 deletions(-) delete mode 100644 apps/web/modules/bookings/views/bookings-listing-view.getStaticProps.tsx diff --git a/apps/web/app/bookings/[status]/page.tsx b/apps/web/app/bookings/[status]/page.tsx index 2a9ad20fc8f183..8e06c61dd8ac4d 100644 --- a/apps/web/app/bookings/[status]/page.tsx +++ b/apps/web/app/bookings/[status]/page.tsx @@ -1,14 +1,14 @@ -import { withAppDirSsg } from "app/WithAppDirSsg"; +import { PageProps } from "app/_types"; import { _generateMetadata } from "app/_utils"; import { WithLayout } from "app/layoutHOC"; -import type { InferGetStaticPropsType } from "next"; +import { z } from "zod"; import { validStatuses } from "~/bookings/lib/validStatuses"; -import Page from "~/bookings/views/bookings-listing-view"; -import { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps"; +import BookingsList from "~/bookings/views/bookings-listing-view"; -type Y = InferGetStaticPropsType; -const getData = withAppDirSsg(getStaticProps, "future/bookings/[status]"); +const querySchema = z.object({ + status: z.enum(validStatuses), +}); export const generateMetadata = async () => await _generateMetadata( @@ -16,10 +16,12 @@ export const generateMetadata = async () => (t) => t("bookings_description") ); -export const generateStaticParams = async () => { - return validStatuses.map((status) => ({ status })); -}; +const Page = async ({ params, searchParams }: PageProps) => { + const parsed = querySchema.safeParse({ ...params, ...searchParams }); + + const status = parsed.success ? parsed.data.status : ("upcoming" as const); -export default WithLayout({ getLayout: null, getData, Page })<"P">; + return ; +}; -export const dynamic = "force-static"; +export default WithLayout({ ServerPage: Page })<"P">; diff --git a/apps/web/modules/bookings/views/bookings-listing-view.getStaticProps.tsx b/apps/web/modules/bookings/views/bookings-listing-view.getStaticProps.tsx deleted file mode 100644 index cb35c2a64789e4..00000000000000 --- a/apps/web/modules/bookings/views/bookings-listing-view.getStaticProps.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { type GetStaticProps } from "next"; -import { z } from "zod"; - -import { getTranslations } from "@server/lib/getTranslations"; - -import { validStatuses } from "~/bookings/lib/validStatuses"; - -const querySchema = z.object({ - status: z.enum(validStatuses), -}); - -export const getStaticProps: GetStaticProps = async (ctx) => { - const params = querySchema.safeParse(ctx.params); - const i18n = await getTranslations(ctx); - - if (!params.success) return { notFound: true }; - - return { - props: { - status: params.data.status, - i18n, - }, - }; -}; diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx index 20f8096dd65cd2..0c193b9ea872f7 100644 --- a/apps/web/modules/bookings/views/bookings-listing-view.tsx +++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx @@ -13,7 +13,6 @@ import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery"; import Shell from "@calcom/features/shell/Shell"; import { useInViewObserver } from "@calcom/lib/hooks/useInViewObserver"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui"; @@ -67,14 +66,9 @@ const descriptionByStatus: Record, string> = { unconfirmed: "unconfirmed_bookings", }; -const querySchema = z.object({ - status: z.enum(validStatuses), -}); - -export default function Bookings() { - const params = useParamsWithFallback(); +export default function Bookings({ status }: { status: (typeof validStatuses)[number] }) { const { data: filterQuery } = useFilterQuery(); - const { status } = params ? querySchema.parse(params) : { status: "upcoming" as const }; + const { t } = useLocale(); const user = useMeQuery().data; const [isFiltersVisible, setIsFiltersVisible] = useState(false); From df50e4a71be97c67ed0729aae154cf18cdc75786 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Fri, 20 Dec 2024 15:34:00 -0500 Subject: [PATCH 7/8] fix --- apps/web/app/bookings/[status]/page.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/web/app/bookings/[status]/page.tsx b/apps/web/app/bookings/[status]/page.tsx index 8e06c61dd8ac4d..b29f22a9609780 100644 --- a/apps/web/app/bookings/[status]/page.tsx +++ b/apps/web/app/bookings/[status]/page.tsx @@ -1,6 +1,7 @@ import { PageProps } from "app/_types"; import { _generateMetadata } from "app/_utils"; import { WithLayout } from "app/layoutHOC"; +import { redirect } from "next/navigation"; import { z } from "zod"; import { validStatuses } from "~/bookings/lib/validStatuses"; @@ -18,10 +19,11 @@ export const generateMetadata = async () => const Page = async ({ params, searchParams }: PageProps) => { const parsed = querySchema.safeParse({ ...params, ...searchParams }); + if (!parsed.success) { + redirect("/bookings/upcoming"); + } - const status = parsed.success ? parsed.data.status : ("upcoming" as const); - - return ; + return ; }; export default WithLayout({ ServerPage: Page })<"P">; From 91b1416d908af3d47c88110d537855cae722cac5 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Sat, 21 Dec 2024 11:27:48 -0500 Subject: [PATCH 8/8] add generateStaticParams --- apps/web/app/bookings/[status]/page.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/web/app/bookings/[status]/page.tsx b/apps/web/app/bookings/[status]/page.tsx index b29f22a9609780..b8a21f79bf58d1 100644 --- a/apps/web/app/bookings/[status]/page.tsx +++ b/apps/web/app/bookings/[status]/page.tsx @@ -17,6 +17,10 @@ export const generateMetadata = async () => (t) => t("bookings_description") ); +export const generateStaticParams = async () => { + return validStatuses.map((status) => ({ status })); +}; + const Page = async ({ params, searchParams }: PageProps) => { const parsed = querySchema.safeParse({ ...params, ...searchParams }); if (!parsed.success) {