diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index 71b80b88bf..443f982862 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/apps/web/pages/event-types/index.tsx @@ -11,10 +11,9 @@ import { z } from "zod"; import { getLayout } from "@calcom/features/MainLayout"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import useIntercom from "@calcom/features/ee/support/lib/intercom/useIntercom"; -import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed"; +import { EventTypeEmbedButton } from "@calcom/features/embed/EventTypeEmbed"; import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components"; import CreateEventTypeDialog from "@calcom/features/eventtypes/components/CreateEventTypeDialog"; -import { DuplicateDialog } from "@calcom/features/eventtypes/components/DuplicateDialog"; import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter"; import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery"; import { ShellMain } from "@calcom/features/shell/Shell"; @@ -75,7 +74,6 @@ import { import useMeQuery from "@lib/hooks/useMeQuery"; import PageWrapper from "@components/PageWrapper"; -import SkeletonLoader from "@components/eventtype/SkeletonLoader"; type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"]; type EventTypeGroupProfile = EventTypeGroups[number]["profile"]; @@ -773,13 +771,15 @@ const CreateFirstEventTypeView = () => { ); }; -const CTA = ({ data }: { data: PaginateEventTypeViewer }) => { +const CTA = () => { const { t } = useLocale(); - if (!data) return null; - - const profileOptions = []; - + const profileOptions: { + teamId: number | null | undefined; + label: string | null; + image: string | undefined; + membershipRole: MembershipRole | null | undefined; + }[] = []; return ( { ); }; -const Main = ({ - status, - errorMessage, - data, - filters, -}: { - status: string; - data: PaginateEventTypeViewer; - errorMessage?: string; - filters: ReturnType; -}) => { +const Main = ({ filters }: { filters: ReturnType }) => { const isMobile = useMediaQuery("(max-width: 768px)"); const searchParams = useSearchParams(); const orgBranding = useOrgBranding(); - if (!data || status === "loading") { - return ; - } + // if (!data || status === "loading") { + // return ; + // } - if (status === "error") { - return ; - } + // if (status === "error") { + // return ; + // } // const isFilteredByOnlyOneItem = // (filters?.teamIds?.length === 1 || filters?.userIds?.length === 1) && data?.eventTypeGroups.length === 1; const isFilteredByOnlyOneItem = false; - return ( - <> - {data?.length > 1 || isFilteredByOnlyOneItem ? ( - <> - {isMobile ? ( - - ) : ( -
- - {data[0].length > 0 ? ( - - ) : ( - - )} -
- )} - - ) : ( - data?.length === 1 && ( - - ) - )} - {/* */} - {data.length === 0 && } - - {searchParams?.get("dialog") === "duplicate" && } - + // We first load user event types and then team event types + const { data, status, error } = trpc.viewer.eventTypes.paginate.useQuery( + { + page: 1, + pageSize: 10, + }, + { + trpc: { + context: { skipBatch: true }, + }, + } ); + + // Then we load teams + const { data: teams } = trpc.viewer.teams.list.useQuery(undefined, { + // Teams don't change that frequently + refetchOnWindowFocus: false, + }); + + // After teams are fetched we then load event types for each team + const eventTypePaginate = trpc.useQueries( + (t) => + teams?.map((team) => t.viewer.eventTypes.paginate({ page: 1, pageSize: 10, teamIds: [team.id] }), { + enabled: !!teams, + }) || [] + ); + + if ((!!data && data.length > 1) || isFilteredByOnlyOneItem) { + return ( + <> + {isMobile ? ( + + ) : ( +
+ + + {data[0].length > 0 ? ( + + ) : ( + + )} + + {/* Then we list team event types */} + + {eventTypePaginate.map((trpcFetch, index) => { + const { data, status, error } = trpcFetch; + const [eventTypes] = data || []; + if ((status !== "success" && !!data) || data?.length === 0 || !eventTypes) { + return null; + } + console.log("eventTypes", eventTypes); + return ( + <> + + + {eventTypes.length > 0 ? ( + + ) : ( + + )} + + ); + })} +
+ )} + + ); + } else if (!!data && data.length === 1) { + return ; + } else if (!!data && data.length === 0) { + return ; + } + + // ; + // { + // searchParams?.get("dialog") === "duplicate" && ; + // } }; const EventTypesPage = () => { @@ -938,22 +967,33 @@ const EventTypesPage = () => { // cacheTime: 1 * 60 * 60 * 1000, // staleTime: 1 * 60 * 60 * 1000, // }); - const { data, status, error } = trpc.viewer.eventTypes.paginate.useQuery( - { - page: 1, - pageSize: 10, - teamIds: filters?.teamIds, - }, - { - trpc: { - context: { skipBatch: true }, - }, - } - ); - const eventTypePaginate = trpc.useQueries((t) => - filters?.teamIds.map((id) => t.viewer.eventTypes.paginate({ page: 1, pageSize: 10, teamIds: [id] })) - ); + // // We first load user event types and then team event types + // const { data, status, error } = trpc.viewer.eventTypes.paginate.useQuery( + // { + // page: 1, + // pageSize: 10, + // }, + // { + // trpc: { + // context: { skipBatch: true }, + // }, + // } + // ); + // const { data: teams } = trpc.viewer.teams.list.useQuery(undefined, { + // // Teams don't change that frequently + // refetchOnWindowFocus: false, + // }); + + // const eventTypePaginate = trpc.useQueries( + // (t) => + // teams?.map((team) => t.viewer.eventTypes.paginate({ page: 1, pageSize: 10, teamIds: [team.id] }), { + // enabled: !!teams, + // trpc: { + // context: { skipBatch: true }, + // }, + // }) || [] + // ); function closeBanner() { setShowProfileBanner(false); @@ -982,12 +1022,12 @@ const EventTypesPage = () => { subtitle={t("event_types_page_subtitle")} afterHeading={showProfileBanner && } beforeCTAactions={} - CTA={}> + CTA={}> -
+
); }; diff --git a/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts b/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts index 48eb80d475..4e2e91a54b 100644 --- a/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts +++ b/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts @@ -48,10 +48,9 @@ export const paginateHandler = async ({ ctx, input }: EventTypesPaginateProps) = // }, // }; - return await prisma.eventType.findMany({ + const result = await prisma.eventType.findMany({ where: { ...whereConditional, - ...teamConditional, }, select: { id: true, @@ -86,4 +85,6 @@ export const paginateHandler = async ({ ctx, input }: EventTypesPaginateProps) = skip, take: pageSize, }); + console.log("result", result); + return result; };