Fixes hydration error, uses useTypedQuery for tabName (#6327)

apps/web/components/ClientSuspense.tsx

@@ -1,9 +0,0 @@
-import { Suspense, SuspenseProps } from "react";
-
-/**
- * Wrapper around `<Suspense />` which will render the `fallback` when on server
- * Can be simply replaced by `<Suspense />` once React 18 is ready.
- */
-export const ClientSuspense = (props: SuspenseProps) => {
-  return <>{typeof window !== "undefined" ? <Suspense {...props} /> : props.fallback}</>;
-};

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { useMemo, useState } from "react";
+import { useMemo, useState, Suspense } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { TbWebhook } from "react-icons/tb";
 
@@ -32,7 +32,6 @@ import {
   VerticalTabs,
 } from "@calcom/ui";
 
-import { ClientSuspense } from "@components/ClientSuspense";
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 
 type Props = {
@@ -301,7 +300,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <ClientSuspense fallback={<Icon.FiLoader />}>
+      <Suspense fallback={<Icon.FiLoader />}>
         <div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
             <VerticalTabs
@@ -324,7 +323,7 @@ function EventTypeSingleLayout({
             </div>
           </div>
         </div>
-      </ClientSuspense>
+      </Suspense>
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <ConfirmationDialogContent
           isLoading={deleteMutation.isLoading}

apps/web/pages/event-types/[type]/index.tsx

@@ -3,7 +3,6 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PeriodType, SchedulingType } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
-import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -15,6 +14,7 @@ import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import getEventTypeById from "@calcom/lib/getEventTypeById";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import prisma from "@calcom/prisma";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
@@ -111,8 +111,9 @@ export type EventTypeSetupProps = RouterOutputs["viewer"]["eventTypes"]["get"];
 const EventTypePage = (props: EventTypeSetupProps) => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const router = useRouter();
-  const { tabName } = querySchema.parse(router.query);
+  const {
+    data: { tabName },
+  } = useTypedQuery(querySchema);
 
   const { data: eventTypeApps } = trpc.viewer.apps.useQuery({
     extendsFeature: "EventType",