From 247df0c69ebe2fb75de0bd122f46f7b72d0b39f3 Mon Sep 17 00:00:00 2001 From: Alan Date: Mon, 4 Sep 2023 13:14:36 -0700 Subject: [PATCH] clean up --- apps/web/pages/event-types/index.tsx | 124 ++++++++---------- .../eventTypes/infiniteEventTypes.handler.ts | 22 ++-- 2 files changed, 62 insertions(+), 84 deletions(-) diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index b07739bba9..72aabf0338 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/apps/web/pages/event-types/index.tsx @@ -11,9 +11,10 @@ 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 } from "@calcom/features/embed/EventTypeEmbed"; +import { EventTypeEmbedButton, EventTypeEmbedDialog } 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"; @@ -74,17 +75,15 @@ 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"]; type PaginateEventTypeViewer = RouterOutputs["viewer"]["eventTypes"]["paginate"]; interface EventTypeListHeadingProps { - profile: { - name: string | null; - slug?: string | null; - username?: string | null; - }; + teamSlugOrUsername: string; + teamNameOrUserName: string; membershipCount: number; teamId?: number | null; orgSlug?: string; @@ -698,7 +697,8 @@ export const EventTypeList = ({ data }: EventTypeListProps): JSX.Element => { }; const EventTypeListHeading = ({ - profile, + teamSlugOrUsername, + teamNameOrUserName, membershipCount, teamId, }: EventTypeListHeadingProps): JSX.Element => { @@ -707,7 +707,7 @@ const EventTypeListHeading = ({ const orgBranding = useOrgBranding(); const publishTeamMutation = trpc.viewer.teams.publish.useMutation({ - onSuccess(data) { + onSuccess(data: { url: string }) { router.push(data.url); }, onError: (error) => { @@ -715,11 +715,11 @@ const EventTypeListHeading = ({ }, }); const bookerUrl = useBookerUrl(); - const slug = profile?.slug || profile?.username; + const slug = teamSlugOrUsername; return (
- {profile?.name || ""} + {teamNameOrUserName} {membershipCount >= 0 && teamId && ( @@ -827,15 +827,24 @@ const SetupProfileBanner = ({ closeAction }: { closeAction: () => void }) => { ); }; -const EmptyEventTypeList = ({ group }: { group: EventTypeGroup }) => { +const EmptyEventTypeList = ({ + teamSlugOrUsername, + teamId, +}: { + teamSlugOrUsername: string | null; + teamId?: number | null; +}) => { const { t } = useLocale(); + if (!teamSlugOrUsername && !teamId) { + return null; + } return ( <> {t("create")} @@ -851,14 +860,6 @@ const Main = ({ filters }: { filters: ReturnType; - // } - - // if (status === "error") { - // return ; - // } - // const isFilteredByOnlyOneItem = // (filters?.teamIds?.length === 1 || filters?.userIds?.length === 1) && data?.eventTypeGroups.length === 1; const isFilteredByOnlyOneItem = false; @@ -882,14 +883,23 @@ const Main = ({ filters }: { filters: ReturnType teams?.map((team) => t.viewer.eventTypes.paginate({ page: 1, pageSize: 10, teamIds: [team.id] }), { - enabled: !!teams, + enabled: teams.length > 0, }) || [] ); + if (status === "error") { + return ; + } + if (!data || status === "loading") { + return ; + } + if ((!!data && data.length > 1) || isFilteredByOnlyOneItem) { return ( <> @@ -898,46 +908,59 @@ const Main = ({ filters }: { filters: ReturnType {data[0].length > 0 ? ( - + ) : ( - + )} {/* Then we list team event types */} - {eventTypePaginate.map((trpcFetch, index) => { - const { data, status, error } = trpcFetch; + const { data, status } = trpcFetch; const [eventTypes] = data || []; if ((status !== "success" && !!data) || data?.length === 0 || !eventTypes) { return null; } - console.log("eventTypes", eventTypes); + + // Type safety + if (!!!eventTypes.team) { + return null; + } + return ( <> {eventTypes.length > 0 ? ( - + ) : ( - + )} ); })}
)} + + {searchParams?.get("dialog") === "duplicate" && } ); } else if (!!data && data.length === 1) { @@ -945,11 +968,6 @@ const Main = ({ filters }: { filters: ReturnType; } - - // ; - // { - // searchParams?.get("dialog") === "duplicate" && ; - // } }; const EventTypesPage = () => { @@ -962,40 +980,6 @@ const EventTypesPage = () => { const routerQuery = useRouterQuery(); const filters = getTeamsFiltersFromQuery(routerQuery); - // 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, - // }); - - // // 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); document.cookie = `calcom-profile-banner=1;max-age=${60 * 60 * 24 * 90}`; // 3 months diff --git a/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts b/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts index 4e2e91a54b..8f59bc1c21 100644 --- a/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts +++ b/packages/trpc/server/routers/viewer/eventTypes/infiniteEventTypes.handler.ts @@ -26,31 +26,24 @@ export const paginateHandler = async ({ ctx, input }: EventTypesPaginateProps) = } let teamConditional: Prisma.EventTypeWhereInput = {}; + + const whereConditional: Prisma.EventTypeWhereInput = { + userId, + }; + if (teamIds && teamIds.length === 1) { + whereConditional.userId = null; teamConditional = { teamId: teamIds[0] }; } else if (teamIds && teamIds.length > 1) { teamConditional = { teamId: { in: teamIds } }; } - const whereConditional: Prisma.EventTypeWhereInput = { - userId, - ...teamConditional, - }; - const skip = (page - 1) * pageSize; - // const selectWithTeam: Prisma.EventTypeSelect = { - // team: { - // select: { - // id: true, - // name: true, - // }, - // }, - // }; - const result = await prisma.eventType.findMany({ where: { ...whereConditional, + ...teamConditional, }, select: { id: true, @@ -73,6 +66,7 @@ export const paginateHandler = async ({ ctx, input }: EventTypesPaginateProps) = select: { id: true, slug: true, + name: true, members: { select: { userId: true,