From 6dc4211d8129cdd500eee71e159a3ad8ac679935 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Sat, 7 Jan 2023 22:42:30 +0000
Subject: [PATCH] Fixes hydration error, uses useTypedQuery for tabName (#6327)

---
 apps/web/components/ClientSuspense.tsx                  | 9 ---------
 apps/web/components/eventtype/EventTypeSingleLayout.tsx | 7 +++----
 apps/web/pages/event-types/[type]/index.tsx             | 7 ++++---
 3 files changed, 7 insertions(+), 16 deletions(-)
 delete mode 100644 apps/web/components/ClientSuspense.tsx

diff --git a/apps/web/components/ClientSuspense.tsx b/apps/web/components/ClientSuspense.tsx
deleted file mode 100644
index f0723d2ebd..0000000000
--- a/apps/web/components/ClientSuspense.tsx
+++ /dev/null
@@ -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}</>;
-};
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 21154459bd..32c3fee9f2 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/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}
diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index 4ea852d4bc..8680e2fcec 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/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",