From 0f84102f1ee8da4f24dc995fbef5a91bdffc7763 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Fri, 28 Jul 2023 21:57:44 +0530
Subject: [PATCH] perf: reduce number of api calls in event types (#10381)

* perf: reduce number of api calls in event types

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* perf: use staleTime and cacheTime

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/pages/event-types/[type]/index.tsx |  1 +
 apps/web/pages/event-types/index.tsx        | 44 +++++++++++++--------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index 5c0ecd5243..ec8393cbb2 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/apps/web/pages/event-types/[type]/index.tsx
@@ -526,6 +526,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
 const EventTypePageWrapper = (props: inferSSRProps<typeof getServerSideProps>) => {
   const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type });
 
+  if (!data) return null;
   return <EventTypePage {...(data as EventTypeSetupProps)} />;
 };
 
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 34a4898954..1f74a6f25c 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -75,6 +75,7 @@ import SkeletonLoader from "@components/eventtype/SkeletonLoader";
 
 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
+type GetByViewerResponse = RouterOutputs["viewer"]["eventTypes"]["getByViewer"] | undefined;
 
 interface EventTypeListHeadingProps {
   profile: EventTypeGroupProfile;
@@ -769,14 +770,12 @@ const CreateFirstEventTypeView = () => {
   );
 };
 
-const CTA = () => {
+const CTA = ({ data }: { data: GetByViewerResponse }) => {
   const { t } = useLocale();
 
-  const query = trpc.viewer.eventTypes.getByViewer.useQuery();
+  if (!data) return null;
 
-  if (!query.data) return null;
-
-  const profileOptions = query.data.profiles
+  const profileOptions = data.profiles
     .filter((profile) => !profile.readOnly)
     .map((profile) => {
       return {
@@ -834,25 +833,30 @@ const SetupProfileBanner = ({ closeAction }: { closeAction: () => void }) => {
   );
 };
 
-const Main = () => {
+const Main = ({
+  status,
+  error,
+  data,
+  filters,
+}: {
+  status: string;
+  data: GetByViewerResponse;
+  error: any;
+  filters: ReturnType<typeof getTeamsFiltersFromQuery>;
+}) => {
   const isMobile = useMediaQuery("(max-width: 768px)");
   const router = useRouter();
-  const filters = getTeamsFiltersFromQuery(router.query);
 
   const orgBranding = useOrgBranding();
 
-  // TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
-  const res = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters });
-
-  if (res.status === "loading") {
+  if (!data || status === "loading") {
     return <SkeletonLoader />;
   }
 
-  if (res.status === "error") {
-    return <Alert severity="error" title="Something went wrong" message={res.error.message} />;
+  if (status === "error") {
+    return <Alert severity="error" title="Something went wrong" message={error.message} />;
   }
 
-  const data = res.data;
   const isFilteredByOnlyOneItem =
     (filters?.teamIds?.length === 1 || filters?.userIds?.length === 1) && data.eventTypeGroups.length === 1;
   return (
@@ -906,6 +910,14 @@ const EventTypesPage = () => {
   const { data: user } = useMeQuery();
   const [showProfileBanner, setShowProfileBanner] = useState(false);
   const orgBranding = useOrgBranding();
+  const filters = getTeamsFiltersFromQuery(router.query);
+
+  // TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
+  const { data, status, error } = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters }, {
+    refetchOnWindowFocus: false,
+    cacheTime: 1 * 60 * 60 * 1000,
+    staleTime: 1 * 60 * 60 * 1000,
+  });
 
   function closeBanner() {
     setShowProfileBanner(false);
@@ -936,8 +948,8 @@ const EventTypesPage = () => {
         subtitle={t("event_types_page_subtitle")}
         afterHeading={showProfileBanner && <SetupProfileBanner closeAction={closeBanner} />}
         beforeCTAactions={<Actions />}
-        CTA={<CTA />}>
-        <Main />
+        CTA={<CTA data={data} />}>
+        <Main data={data} status={status} error={error} filters={filters} />
       </Shell>
     </div>
   );