From 56b1243e59eecd8d8cd028860e50792cd3d888b2 Mon Sep 17 00:00:00 2001
From: alannnc <alannnc@gmail.com>
Date: Mon, 18 Sep 2023 16:36:07 -0700
Subject: [PATCH] fix: re-render on insights with orgs (#11395)

---
 apps/web/pages/insights/index.tsx             | 17 -----------------
 .../components/AverageEventDurationChart.tsx  |  6 ++++--
 .../insights/components/BookingKPICards.tsx   |  5 ++++-
 .../components/BookingStatusLineChart.tsx     |  3 +++
 .../LeastBookedTeamMembersTable.tsx           |  3 ++-
 .../components/MostBookedTeamMembersTable.tsx |  3 ++-
 .../components/PopularEventsTable.tsx         |  3 ++-
 .../insights/context/FiltersProvider.tsx      |  2 +-
 .../features/insights/context/provider.ts     |  2 +-
 .../insights/filters/TeamAndSelfList.tsx      | 19 +++++++------------
 10 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/apps/web/pages/insights/index.tsx b/apps/web/pages/insights/index.tsx
index fd65f39a53..8782acb0bb 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -20,19 +20,6 @@ import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
-const Heading = () => {
-  const { t } = useLocale();
-
-  return (
-    <div className="min-w-52 hidden md:block">
-      <h3 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis truncate text-xl font-semibold tracking-wide xl:max-w-full">
-        {t("insights")}
-      </h3>
-      <p className="text-default mt-2 hidden text-sm md:block">{t("insights_subtitle")}</p>
-    </div>
-  );
-};
-
 export default function InsightsPage() {
   const { t } = useLocale();
   const { data: user } = trpc.viewer.me.useQuery();
@@ -79,10 +66,6 @@ export default function InsightsPage() {
             <></>
           ) : (
             <FiltersProvider>
-              <div className="ml-auto mt-0">
-                <Heading />
-              </div>
-
               <Filters />
 
               <div className="mb-4 space-y-6">
diff --git a/packages/features/insights/components/AverageEventDurationChart.tsx b/packages/features/insights/components/AverageEventDurationChart.tsx
index 7e397ca8f3..db1e47b081 100644
--- a/packages/features/insights/components/AverageEventDurationChart.tsx
+++ b/packages/features/insights/components/AverageEventDurationChart.tsx
@@ -12,10 +12,10 @@ import { LoadingInsight } from "./LoadingInsights";
 export const AverageEventDurationChart = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedMemberUserId, isAll } = filter;
+  const { dateRange, selectedMemberUserId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId, selectedUserId } = filter;
-
+  const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
   const { data, isSuccess, isLoading } = trpc.viewer.insights.averageEventDuration.useQuery(
     {
       startDate: startDate.toISOString(),
@@ -30,6 +30,8 @@ export const AverageEventDurationChart = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      // At least one of the following initial configs should have a value
+      enabled: initialConfigIsReady,
     }
   );
 
diff --git a/packages/features/insights/components/BookingKPICards.tsx b/packages/features/insights/components/BookingKPICards.tsx
index 097446f70c..2e385dfda9 100644
--- a/packages/features/insights/components/BookingKPICards.tsx
+++ b/packages/features/insights/components/BookingKPICards.tsx
@@ -11,7 +11,9 @@ import { KPICard } from "./KPICard";
 export const BookingKPICards = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedEventTypeId, selectedUserId, selectedMemberUserId, isAll } = filter;
+  const { dateRange, selectedEventTypeId, selectedUserId, selectedMemberUserId, isAll, initialConfig } =
+    filter;
+  const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
   const [startDate, endDate] = dateRange;
 
   const { selectedTeamId: teamId } = filter;
@@ -31,6 +33,7 @@ export const BookingKPICards = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: initialConfigIsReady,
     }
   );
 
diff --git a/packages/features/insights/components/BookingStatusLineChart.tsx b/packages/features/insights/components/BookingStatusLineChart.tsx
index 4bb0f37956..a322ba47ca 100644
--- a/packages/features/insights/components/BookingStatusLineChart.tsx
+++ b/packages/features/insights/components/BookingStatusLineChart.tsx
@@ -19,7 +19,9 @@ export const BookingStatusLineChart = () => {
     dateRange,
     selectedEventTypeId,
     isAll,
+    initialConfig,
   } = filter;
+  const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
   const [startDate, endDate] = dateRange;
 
   if (!startDate || !endDate) return null;
@@ -43,6 +45,7 @@ export const BookingStatusLineChart = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: initialConfigIsReady,
     }
   );
 
diff --git a/packages/features/insights/components/LeastBookedTeamMembersTable.tsx b/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
index 0fdf794dca..a43e6bc07c 100644
--- a/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
+++ b/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
@@ -11,7 +11,7 @@ import { TotalBookingUsersTable } from "./TotalBookingUsersTable";
 export const LeastBookedTeamMembersTable = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedEventTypeId, selectedTeamId: teamId, isAll } = filter;
+  const { dateRange, selectedEventTypeId, selectedTeamId: teamId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
 
   const { data, isSuccess, isLoading } = trpc.viewer.insights.membersWithLeastBookings.useQuery(
@@ -27,6 +27,7 @@ export const LeastBookedTeamMembersTable = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
     }
   );
 
diff --git a/packages/features/insights/components/MostBookedTeamMembersTable.tsx b/packages/features/insights/components/MostBookedTeamMembersTable.tsx
index a79899c44d..5c006dabe1 100644
--- a/packages/features/insights/components/MostBookedTeamMembersTable.tsx
+++ b/packages/features/insights/components/MostBookedTeamMembersTable.tsx
@@ -11,7 +11,7 @@ import { TotalBookingUsersTable } from "./TotalBookingUsersTable";
 export const MostBookedTeamMembersTable = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedEventTypeId, isAll } = filter;
+  const { dateRange, selectedEventTypeId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId } = filter;
 
@@ -28,6 +28,7 @@ export const MostBookedTeamMembersTable = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
     }
   );
 
diff --git a/packages/features/insights/components/PopularEventsTable.tsx b/packages/features/insights/components/PopularEventsTable.tsx
index 0efb744209..4347ca6799 100644
--- a/packages/features/insights/components/PopularEventsTable.tsx
+++ b/packages/features/insights/components/PopularEventsTable.tsx
@@ -10,7 +10,7 @@ import { LoadingInsight } from "./LoadingInsights";
 export const PopularEventsTable = () => {
   const { t } = useLocale();
   const { filter } = useFilterContext();
-  const { dateRange, selectedMemberUserId, selectedUserId, isAll } = filter;
+  const { dateRange, selectedMemberUserId, selectedUserId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId } = filter;
 
@@ -28,6 +28,7 @@ export const PopularEventsTable = () => {
       trpc: {
         context: { skipBatch: true },
       },
+      enabled: !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll),
     }
   );
 
diff --git a/packages/features/insights/context/FiltersProvider.tsx b/packages/features/insights/context/FiltersProvider.tsx
index 9f480e707f..339aba49b9 100644
--- a/packages/features/insights/context/FiltersProvider.tsx
+++ b/packages/features/insights/context/FiltersProvider.tsx
@@ -69,7 +69,7 @@ export function FiltersProvider({ children }: { children: React.ReactNode }) {
     initialConfig: {
       userId: null,
       teamId: null,
-      isAll: false,
+      isAll: null,
     },
   });
 
diff --git a/packages/features/insights/context/provider.ts b/packages/features/insights/context/provider.ts
index 025d1b4135..41134bd859 100644
--- a/packages/features/insights/context/provider.ts
+++ b/packages/features/insights/context/provider.ts
@@ -15,7 +15,7 @@ interface IFilter {
   initialConfig?: {
     teamId?: number | null;
     userId?: number | null;
-    isAll?: boolean;
+    isAll?: boolean | null;
   };
 }
 
diff --git a/packages/features/insights/filters/TeamAndSelfList.tsx b/packages/features/insights/filters/TeamAndSelfList.tsx
index 192302a23d..afb80a2218 100644
--- a/packages/features/insights/filters/TeamAndSelfList.tsx
+++ b/packages/features/insights/filters/TeamAndSelfList.tsx
@@ -25,6 +25,12 @@ export const TeamAndSelfList = () => {
   });
 
   useEffect(() => {
+    const isInitialSetupAlready = !!(
+      filter.initialConfig?.teamId ||
+      filter.initialConfig?.userId ||
+      filter.initialConfig?.isAll
+    );
+    if (isInitialSetupAlready) return;
     if (isSuccess && session.data?.user.id) {
       // We have a team?
       if (data[0]?.id && data && data?.length > 0) {
@@ -49,19 +55,8 @@ export const TeamAndSelfList = () => {
           },
         });
       }
-    } else if (session.data?.user.id) {
-      setConfigFilters({
-        selectedUserId: session.data?.user.id,
-        selectedTeamId: null,
-        isAll: false,
-        initialConfig: {
-          teamId: null,
-          userId: session.data?.user.id,
-          isAll: false,
-        },
-      });
     }
-  }, [data, session.data?.user.id]);
+  }, [data, session.data?.user.id, filter.initialConfig, isSuccess, setConfigFilters]);
 
   const getTextPopover = () => {
     if (isAll) {