Eunjae LeeGitHubeunjae@cal.com <hey@eunjae.dev>Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>* fix: integer to text comparison in routing insights query Add explicit integer array cast to prevent PostgreSQL type mismatch error when comparing bookingUserId (integer) with user_id array values in getRoutedToPerPeriodData query * add e2e tests * refactor: remove LoadingInsight component and handle loading in ChartCard - Enhanced ChartCard to render default loading UI when isPending is true - Replaced all LoadingInsight usages with ChartCard that accepts isPending/isError props - Removed LoadingInsight component and updated exports - Updated 16 chart components to use the new pattern - ChartCard now shows spinner and skeleton title during loading state Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * fix: make children prop optional in ChartCard when isPending is true Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor: remove unused loadingState prop from ChartCard - Remove loadingState prop and ChartLoadingState type export - Simplify computedLoadingState to derive state only from isPending/isError - No functional changes - loadingState was not being used by any components - data-loading-state attribute behavior remains unchanged for E2E tests Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor: remove duplicate isPending early returns from chart components - Update all 16 chart components to use single ChartCard return pattern - Gate children rendering with !isPending && isSuccess && data checks - Prevents data processing code from executing during loading state - Improves code consistency and maintainability across all charts Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor: remove redundant !isPending check from chart conditionals - Simplify conditional rendering to use just 'isSuccess && data' or 'isSuccess' - In TanStack Query, isSuccess and isPending are mutually exclusive - The !isPending check was redundant since isSuccess already implies !isPending - Applied to all 16 chart components for consistency - Components with safe defaults (data ?? []) use just 'isSuccess' - Components requiring data check use 'isSuccess && data' Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * revert the mistake * apply feedback * apply feedback * fix e2e --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc";
|
|
|
|
import { useInsightsBookingParameters } from "../../hooks/useInsightsBookingParameters";
|
|
import { ChartCard, ChartCardItem } from "../ChartCard";
|
|
|
|
export const PopularEventsTable = () => {
|
|
const { t } = useLocale();
|
|
const insightsBookingParams = useInsightsBookingParameters();
|
|
|
|
const { data, isSuccess, isPending, isError } = trpc.viewer.insights.popularEvents.useQuery(insightsBookingParams, {
|
|
staleTime: 180000,
|
|
refetchOnWindowFocus: false,
|
|
trpc: {
|
|
context: { skipBatch: true },
|
|
},
|
|
});
|
|
|
|
return (
|
|
<ChartCard title={t("popular_events")} isPending={isPending} isError={isError}>
|
|
{isSuccess && data ? (
|
|
<>
|
|
<div>
|
|
{data
|
|
.filter((item) => item.eventTypeId)
|
|
.map((item) => (
|
|
<ChartCardItem key={item.eventTypeId} count={item.count}>
|
|
<div className="flex">
|
|
<div className="bg-subtle mr-1.5 h-5 w-[2px] shrink-0 rounded-sm" />
|
|
<p>{item.eventTypeName}</p>
|
|
</div>
|
|
</ChartCardItem>
|
|
))}
|
|
</div>
|
|
{data.length === 0 && (
|
|
<div className="flex h-60 text-center">
|
|
<p className="m-auto text-sm font-light">{t("insights_no_data_found_for_filter")}</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : null}
|
|
</ChartCard>
|
|
);
|
|
};
|