Skip to content
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

chore: app router - /bookings status page #18183

Merged
merged 12 commits into from
Dec 23, 2024
1 change: 0 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion apps/web/abTest/middlewareFactory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
33 changes: 33 additions & 0 deletions apps/web/app/bookings/[status]/page.tsx
Original file line number Diff line number Diff line change
@@ -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");
Copy link
Contributor Author

@hbjORbj hbjORbj Dec 20, 2024

Choose a reason for hiding this comment

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

  • In Production, we currently take user to 404 if they go to URL like /bookings/123 because 123 is not a valid status (upcoming, cancelled, etc).
  • With this change, we redirect user to /bookings/upcoming instead
  • To achieve this, we should remove export const dynamic = "force-static"; from this route. So I removed it.

Copy link
Contributor

Choose a reason for hiding this comment

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

Now that we don't have dynamic = "force-static", does this mean this page is server rendered every time? Or Next.js still builds it statically because of generateStaticParams? I'd appreciate your explaination as I'm not familiar enough with these to understand the behavior 👀

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Or Next.js still builds it statically because of generateStaticParams?

This is absolutely correct. With dynamic = "force-static", user will get routed to 404 if status is not one of those returned by generateStaticParams before we have chance to redirect them to /bookings/upcoming.

}

return <BookingsList status={parsed.data.status} />;
};

export default WithLayout({ ServerPage: Page })<"P">;
25 changes: 0 additions & 25 deletions apps/web/app/future/bookings/[status]/page.tsx

This file was deleted.

1 change: 0 additions & 1 deletion apps/web/middleware.ts
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,6 @@ export const config = {
"/getting-started/:path*",
"/apps",
"/bookings/:status/",
"/future/bookings/:status/",
"/video/:path*",
"/teams",
"/future/teams/",
Expand Down

This file was deleted.

10 changes: 2 additions & 8 deletions apps/web/modules/bookings/views/bookings-listing-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand Down
27 changes: 0 additions & 27 deletions apps/web/pages/bookings/[status].tsx

This file was deleted.

1 change: 0 additions & 1 deletion apps/web/scripts/vercel-app-router-deploy.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion turbo.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading