chore: app router - /bookings status page (#18183)

* chore: app router - /bookings page

* remove env vars

* fix

* Update middleware.ts

* revert unneeded change

* refactor for the better

* fix

.env.example

@@ -361,7 +361,6 @@ APP_ROUTER_APPS_SLUG_SETUP_ENABLED=0
 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_BOOKINGS_STATUS_ENABLED=0
 APP_ROUTER_APPS_ENABLED=0
 APP_ROUTER_TEAM_ENABLED=0
 APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED=0

apps/web/abTest/middlewareFactory.ts

@@ -20,7 +20,6 @@ const ROUTES: [URLPattern, boolean][] = [
   ["/auth/error", process.env.APP_ROUTER_AUTH_ERROR_ENABLED === "1"] as const,
   ["/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,
-  ["/bookings/:status", process.env.APP_ROUTER_BOOKINGS_STATUS_ENABLED === "1"] as const,
   ["/team", process.env.APP_ROUTER_TEAM_ENABLED === "1"] as const,
 ].map(([pathname, enabled]) => [
   new URLPattern({

apps/web/app/bookings/[status]/page.tsx

@@ -0,0 +1,33 @@
+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";
+import BookingsList from "~/bookings/views/bookings-listing-view";
+
+const querySchema = z.object({
+  status: z.enum(validStatuses),
+});
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("bookings"),
+    (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) {
+    redirect("/bookings/upcoming");
+  }
+
+  return <BookingsList status={parsed.data.status} />;
+};
+
+export default WithLayout({ ServerPage: Page })<"P">;

apps/web/app/future/bookings/[status]/page.tsx

@@ -1,25 +0,0 @@
-import { withAppDirSsg } from "app/WithAppDirSsg";
-import { _generateMetadata } from "app/_utils";
-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 { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps";
-
-type Y = InferGetStaticPropsType<typeof getStaticProps>;
-const getData = withAppDirSsg<Y>(getStaticProps, "future/bookings/[status]");
-
-export const generateMetadata = async () =>
-  await _generateMetadata(
-    (t) => t("bookings"),
-    (t) => t("bookings_description")
-  );
-
-export const generateStaticParams = async () => {
-  return validStatuses.map((status) => ({ status }));
-};
-
-export default WithLayout({ getLayout: null, getData, Page })<"P">;
-
-export const dynamic = "force-static";

apps/web/middleware.ts

@@ -187,7 +187,6 @@ export const config = {
     "/getting-started/:path*",
     "/apps",
     "/bookings/:status/",
-    "/future/bookings/:status/",
     "/video/:path*",
     "/teams",
     "/future/teams/",

apps/web/modules/bookings/views/bookings-listing-view.getStaticProps.tsx

@@ -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,
-    },
-  };
-};

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<NonNullable<BookingListingStatus>, 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<boolean>(false);

apps/web/pages/bookings/[status].tsx

@@ -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;

apps/web/scripts/vercel-app-router-deploy.sh

@@ -20,7 +20,6 @@ checkRoute "$APP_ROUTER_AUTH_SAML_ENABLED" app/future/auth/saml-idp
 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_BOOKINGS_STATUS_ENABLED" app/future/bookings
 checkRoute "$APP_ROUTER_TEAM_ENABLED" app/future/team
 
 # These are routes that don't have and environment variable to enable or disable them

turbo.json

@@ -240,7 +240,6 @@
     "APP_ROUTER_APPS_INSTALLED_CATEGORY_ENABLED",
     "APP_ROUTER_APPS_SLUG_ENABLED",
     "APP_ROUTER_APPS_SLUG_SETUP_ENABLED",
-    "APP_ROUTER_BOOKINGS_STATUS_ENABLED",
     "APP_ROUTER_EVENT_TYPES_ENABLED",
     "APP_ROUTER_AUTH_FORGOT_PASSWORD_ENABLED",
     "APP_ROUTER_AUTH_LOGIN_ENABLED",