maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working mobile and desktop team event load

This commit is contained in:
Alan 2023-09-04 22:40:46 -07:00
parent 247df0c69e
commit 5776d8b495
1 changed files with 66 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
apps/web/pages/event-types/index.tsx
View File

@ -12,8 +12,10 @@ import { getLayout } from "@calcom/features/MainLayout";
import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
import useIntercom from "@calcom/features/ee/support/lib/intercom/useIntercom"; import useIntercom from "@calcom/features/ee/support/lib/intercom/useIntercom";
import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed"; import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed";
import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components"; import {
import CreateEventTypeDialog from "@calcom/features/eventtypes/components/CreateEventTypeDialog"; CreateEventTypeDialog,
EventTypeDescriptionLazy as EventTypeDescription,
} from "@calcom/features/eventtypes/components";
import { DuplicateDialog } from "@calcom/features/eventtypes/components/DuplicateDialog"; import { DuplicateDialog } from "@calcom/features/eventtypes/components/DuplicateDialog";
import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter"; import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery"; import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
@ -38,7 +40,6 @@ import {
Button, Button,
ButtonGroup, ButtonGroup,
ConfirmationDialogContent, ConfirmationDialogContent,
CreateButton,
Dialog, Dialog,
Dropdown, Dropdown,
DropdownItem, DropdownItem,
@ -56,6 +57,7 @@ import {
Switch, Switch,
Tooltip, Tooltip,
ArrowButton, ArrowButton,
CreateButtonWithTeamsList,
} from "@calcom/ui"; } from "@calcom/ui";
import { import {
Clipboard, Clipboard,
@ -77,10 +79,6 @@ import useMeQuery from "@lib/hooks/useMeQuery";
import PageWrapper from "@components/PageWrapper"; import PageWrapper from "@components/PageWrapper";
import SkeletonLoader from "@components/eventtype/SkeletonLoader"; 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 { interface EventTypeListHeadingProps {
teamSlugOrUsername: string; teamSlugOrUsername: string;
teamNameOrUserName: string; teamNameOrUserName: string;
@ -97,23 +95,35 @@ interface EventTypeListProps {
} }
interface MobileTeamsTabProps { interface MobileTeamsTabProps {
eventTypeGroups: EventTypeGroups; teamEventTypes: EventTypeList[];
} }
const querySchema = z.object({ const querySchema = z.object({
teamId: z.nullable(z.coerce.number()).optional().default(null), teamId: z.nullable(z.coerce.number()).optional().default(null),
}); });
const MobileTeamsTab: FC<MobileTeamsTabProps> = (props) => { const MobileTeamsTab: FC<MobileTeamsTabProps> = (props: MobileTeamsTabProps) => {
const { eventTypeGroups } = props; const { teamEventTypes } = props;
const orgBranding = useOrgBranding(); const orgBranding = useOrgBranding();
const tabs = eventTypeGroups.map((item) => ({ const tabs = teamEventTypes
name: item.profile.name ?? "", .filter((item) => item !== undefined)
href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types", .map((item) => {
avatar: item.profile.image ?? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${item.profile.slug}/avatar.png`, const [firstElement] = item;
}));
const teamSlugOrUsername = firstElement?.team?.slug || firstElement?.users[0].username || "";
const teamNameOrUserName = firstElement?.team?.name || firstElement?.users[0].name || "";
const teamId = firstElement?.team?.id;
return {
name: teamNameOrUserName,
href: teamId ? `/event-types?teamId=${teamId}` : "/event-types",
avatar: teamId
? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${teamSlugOrUsername}/avatar.png`
: `${WEBAPP_URL}/${teamSlugOrUsername}/avatar.png`,
};
});
const { data } = useTypedQuery(querySchema); const { data } = useTypedQuery(querySchema);
// const events = eventTypeGroups.filter((item) => item.teamId === data.teamId); const eventsIndex = teamEventTypes.findIndex((item) => item[0]?.team?.id === data?.teamId);
const events = teamEventTypes[eventsIndex];
return ( return (
<div> <div>
@ -775,19 +785,15 @@ const CreateFirstEventTypeView = () => {
const CTA = () => { const CTA = () => {
const { t } = useLocale(); const { t } = useLocale();
const profileOptions: {
teamId: number | null | undefined;
label: string | null;
image: string | undefined;
membershipRole: MembershipRole | null | undefined;
}[] = [];
return ( return (
<CreateButton <>
data-testid="new-event-type" <CreateButtonWithTeamsList
subtitle={t("create_event_on").toUpperCase()} data-testid="new-event-type"
options={profileOptions} subtitle={t("create_event_on").toUpperCase()}
createDialog={() => <CreateEventTypeDialog profileOptions={profileOptions} />} createDialog={() => <CreateEventTypeDialog profileOptions={[]} />}
/> />
<CreateEventTypeDialog profileOptions={[]} />
</>
); );
}; };
@ -883,8 +889,6 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
}); });
console.log({ teams });
// After teams are fetched we then load event types for each team // After teams are fetched we then load event types for each team
const eventTypePaginate = trpc.useQueries( const eventTypePaginate = trpc.useQueries(
(t) => (t) =>
@ -896,41 +900,47 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
if (status === "error") { if (status === "error") {
return <Alert severity="error" title="Something went wrong" message={error.message} />; return <Alert severity="error" title="Something went wrong" message={error.message} />;
} }
if (!data || status === "loading") { if (status === "loading") {
return <SkeletonLoader />; return <SkeletonLoader />;
} }
if ((!!data && data.length > 1) || isFilteredByOnlyOneItem) { if ((!!data && data.length > 1) || isFilteredByOnlyOneItem) {
const [firstElementPersonalEventTypes] = data;
const [mainUser] = firstElementPersonalEventTypes?.users || [];
const teamEventTypesForTabs = eventTypePaginate
.filter((item) => item !== undefined)
.map((trpcFetch) => {
const { data } = trpcFetch;
return data ?? [];
});
return ( return (
<> <>
{isMobile ? ( {isMobile ? (
<MobileTeamsTab eventTypeGroups={data} /> <MobileTeamsTab teamEventTypes={[data, teamEventTypesForTabs]} />
) : ( ) : (
<div className="mt-4 flex flex-col"> <div className="mt-4 flex flex-col">
<EventTypeListHeading <EventTypeListHeading
teamSlugOrUsername={data[0].users[0].username || ""} teamSlugOrUsername={mainUser.username || ""}
teamNameOrUserName={data[0].users[0].name || ""} teamNameOrUserName={mainUser.name || ""}
membershipCount={data[0].team?.members.length || 0} membershipCount={firstElementPersonalEventTypes.team?.members.length || 0}
teamId={data[0].teamId} teamId={firstElementPersonalEventTypes.teamId}
orgSlug={orgBranding?.slug} orgSlug={orgBranding?.slug}
/> />
{data[0].length > 0 ? ( {data.length > 0 ? (
<EventTypeList data={data} /> <EventTypeList data={data} />
) : ( ) : (
<EmptyEventTypeList teamSlugOrUsername={data[0].users[0].username ?? ""} /> <EmptyEventTypeList teamSlugOrUsername={mainUser.username ?? ""} />
)} )}
{/* Then we list team event types */} {/* Then we list team event types */}
{eventTypePaginate.map((trpcFetch, index) => { {eventTypePaginate.map((trpcFetch, index) => {
const { data, status } = trpcFetch; const { data: teamEventTypes } = trpcFetch;
const [eventTypes] = data || []; const [firstElementTeamEventTypes] = data || [];
if ((status !== "success" && !!data) || data?.length === 0 || !eventTypes) {
return null;
}
// Type safety if (!teamEventTypes || teamEventTypes.length === 0 || !firstElementTeamEventTypes.team) {
if (!!!eventTypes.team) {
return null; return null;
} }
@ -938,19 +948,19 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
<> <>
<EventTypeListHeading <EventTypeListHeading
key={index} key={index}
teamSlugOrUsername={eventTypes.team.slug || ""} teamSlugOrUsername={firstElementTeamEventTypes.team.slug || ""}
teamNameOrUserName={eventTypes.team.name || ""} teamNameOrUserName={firstElementTeamEventTypes.team.name || ""}
membershipCount={eventTypes.team?.members.length || 0} membershipCount={firstElementTeamEventTypes.team?.members.length || 0}
teamId={eventTypes.teamId} teamId={firstElementTeamEventTypes.teamId}
orgSlug={orgBranding?.slug} orgSlug={orgBranding?.slug}
/> />
{eventTypes.length > 0 ? ( {teamEventTypes.length > 0 ? (
<EventTypeList data={data} readOnly={false} key={index} /> <EventTypeList data={teamEventTypes} key={index} />
) : ( ) : (
<EmptyEventTypeList <EmptyEventTypeList
teamId={eventTypes.teamId} teamId={firstElementTeamEventTypes.teamId}
teamSlugOrUsername={eventTypes.team.slug || ""} teamSlugOrUsername={firstElementTeamEventTypes.team.slug || ""}
key={index} key={index}
/> />
)} )}
@ -964,9 +974,11 @@ const Main = ({ filters }: { filters: ReturnType<typeof getTeamsFiltersFromQuery
</> </>
); );
} else if (!!data && data.length === 1) { } else if (!!data && data.length === 1) {
return <EventTypeList data={data} readOnly={false} />; return <EventTypeList data={data} />;
} else if (!!data && data.length === 0) { } else if (!!data && data.length === 0) {
return <CreateFirstEventTypeView />; return <CreateFirstEventTypeView />;
} else {
return <></>;
} }
}; };